/*

TemplateMo 579 Cyborg Gaming

https://templatemo.com/tm-579-cyborg-gaming

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #1e1e1e;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
	color: #CCC;
  text-decoration: none !important;
}
a:hover {
	color: #F99;   /* ------colore font over------ */
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  color: #35B81F;   /* ------colore font------ */
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}


img {
  width: 100%;
  overflow: hidden;
}












/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  background: #151C13;/* ------colore body primario------ */
  font-family: 'Poppins', sans-serif;
}

body .page-content {
  margin-top: 110px;
  background-color: #455E3D;/* ------colore body secondario------ */
  padding: 60px;
  border-radius: 23px;
}

p {
  font-size: 15px;
  color: #898787;   /* ------colore font------ */
  line-height: 30px;
  margin-bottom: 0px;
}

::selection {
  background: red;  /* ------?????------ */
  color: #fff;
}

::-moz-selection {
  background: red;   /* ------?????------ */
  color: #fff;
}

.templatemo-item {
	max-width: 80px; 
	border-radius: 23px;
}

.main-button a {
  font-size: 14px;
  color: #fff;
  background-color: #35B81F; /* ------colore bottoni principali------ */
  padding: 12px 30px;
  display: inline-block;
  border-radius: 25px;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.main-button a:hover {
  background-color: #fff;
  color: #151C13;/* ------colore font testo bottoni over------ */
}

.main-border-button a {
  font-size: 14px;
  color: #35B81F;   /* ------colore font bottone pagina contatti------ */
  background-color: transparent;
  border: 1px solid #35B81F;    /* ------colore bordo bottone pagina contatti------ */
  padding: 12px 30px;
  display: inline-block;
  border-radius: 25px;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.main-border-button a:hover {
  border-color: #fff;
  background-color: #fff;
  color: #e75e8d;
}

.border-no-active a {
  border-color: #666;
  color: #666;
}

.border-no-active a:hover{
  border-color: #666;
  color: #666;
  background-color: transparent;
}

section {
  margin-top: 120px;
}

.heading-section h4 {
  color: #35B81F; /* ------colore font h4 alternato nel body------ */
  font-size: 34px;
  text-decoration: none;
  margin-bottom: 30px;
}

.heading-section h4 em {
  color: #fff;
  font-style: normal;
  text-decoration: underline;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #e75e8d; 
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #e75e8d;
  border-radius: 50%;
}



/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.background-header {
  background-color: #fff !important;
  height: 70px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
  display: none;
}

.header-area {
  background-color: transparent;
  position: absolute;
  height: 100px;
  top: 15px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
  display: flex;
  padding: 15px 0px;
  border-radius: 50px;
}

.background-header .main-nav {
  padding: 0px;
  background-color: transparent;
}

.header-area .main-nav #search {
  position: relative;
}

.header-area .main-nav #search input {
  background-color: #27292a;  /* ------????????------ */
  height: 46px;
  border-radius: 23px;
  border: none;
  color: #666;
  font-size: 14px;
  padding: 0px 15px 0px 45px;
}

.header-area .main-nav #search i {
  position: absolute;
  color: #666;
  left: 20px;
  top: 16px;
  width: 18px;
  height: 18px;
  font-size: 16px;
}

.header-area .main-nav .logo {
  border-right: 1px solid #27292a;
  flex-basis: 25%;
  margin-right: 5%;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo img {
  width: 325px;
	border-radius: 13px;
}

.background-header .main-nav .logo {
  margin-top: 1px;
}

.background-header .main-nav .logo img {
  width: 180px;
}

.header-area .main-nav .nav {
  display: inline-flex;
  flex-basis: 70%;
  justify-content: flex-end;
  vertical-align: middle;
  text-align: right;
  margin-top: 0px;
  margin-right: 0px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 400;
  font-size: 14px;
  text-transform: capitalize;
  color: #C9CBC8;/* ------colore font menu------ */
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  border: transparent;
  padding: 13px 10px;
  border-radius: 18px;
  letter-spacing: .3px;
}

.header-area .main-nav .nav li:last-child a {
  background-color: #455E3D;  /* ------colore bottone menu immagine------ */
  padding: 8px 10px 8px 20px;
  border-radius: 13px;
}

.header-area .main-nav .nav li:last-child a img {
  max-width: 30px;
  border-radius: 23%;
  margin-left: 5px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover {
  padding-left: 25px !important;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #35B81F !important; /* ------colore  menu attivo------ */
}

.header-area .main-nav .nav li:last-child:hover a,
.header-area .main-nav .nav li:last-child a.active {
  color: #fff !important;
  background-color: #35B81F !important;  /* ------colore  bottone immagine over------ */
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #fff;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
}

.background-header .main-nav .menu-trigger {
  top: 17px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #35B81F;/* ------colore pulsante menu cellulare prima parte------ */
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #e75e8d;  /* ------???????------ */
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #35B81F;/* ------colore pulsante menu cellulare seconda parte------ */
  display: block;
  position: absolute;
 
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #35B81F;/* ------colore pulsante menu cellulare seconda parte------ */
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #35B81F;/* ------colore pulsante menu cellulare seconda parte------ */
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #35B81F;/* ------colore pulsante menu cellulare seconda parte------ */
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #35B81F;/* ------colore pulsante menu cellulare seconda parte------ */
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #35B81F;/* ------colore pulsante menu cellulare seconda parte------ */
}

.header-area.header-sticky {
  min-height: 70px;
}

.header-area.header-sticky .nav li a.active {
  color: #fff;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 10px;
    padding-right: 10px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-area {
    top: 0;
  }
  .header-area .main-nav {
    background-color: transparent;
    border-radius: 0px;
  }
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 15px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #e75e8d!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
	
	
	
  .header-area {
    background-color: #151C13;  /* ------colore area cellulare------ */
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
	
	
	
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area.header-sticky .nav {
    margin-top: 65px !important;
    text-align: center;
  }
  .background-header.header-sticky .nav {
    margin-top: 70px !important;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #fff !important;
    color: #1e1e1e !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #fff !important;
    color: #e75e8d!important;  /* ------????------ */
  }
  .header-area .main-nav .nav li:last-child a img {
    display: none;
  }
  .header-area .main-nav .nav li:last-child a:hover {
    color: #ec6090 !important;
    background-color: transparent !important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;  /* ------????------ */
    right: 30px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-image: url(../images/1-servizi-fotografici-surojit-de-domenico-fotografo-mussolente-vicenza-bassano-treviso-padova.jpg);
  background-position: center center;
  background-size: cover;
  min-height: 380px;
  border-radius: 23px;
  padding: 80px 60px;
}

.main-banner h5 {
  font-size: 20px;
  color: #fff;  /* ------????------ */
  font-weight: 400;
  margin-bottom: 25px;
}

.main-banner h4 {
  font-size: 45px;
  text-transform: uppercase;
  margin-bottom: 25px;
 color: silver; /* ------colore font alternato------ */
}

.main-banner h4 em {
  font-style: normal;
  color: #35B81F;/* ------colore font em banner------ */
}

/* 
---------------------------------------------
Most Popular Style
--------------------------------------------- 
*/

.most-popular {
  margin-top: 60px;
  padding: 30px;
  background-color: #1f2122;
  border-radius: 23px;
}

.most-popular .item {
  background-color: #27292a;
  padding: 30px 15px;
  border-radius: 23px;
  margin-bottom: 30px;
}

.most-popular .item .item {
  padding: 0px;
  border-radius: 0px;
  background-color: transparent;
  margin-bottom: 0px;
}

.most-popular .item img {
  border-radius: 23px;
}

.most-popular .item h4 {
  font-size: 15px;
  margin-top: 20px;
  margin-bottom: 0px;
  display: inline-block;
}

.most-popular .item span {
  color: #666;
  display: block;
  margin-top: 7px;
  font-weight: 400;
}

.most-popular .item ul {
  float: right;
  margin-top: 20px;
}

.most-popular .item ul li {
  text-align: right;
  color: #fff;
  font-size: 14px;
}

.most-popular .item ul li:first-child i {
  color: yellow;
}

.most-popular .item ul li:last-child i {
  color: #ec6090;
}

.most-popular .main-button {
  text-align: center;
  margin-bottom: -53px;
}




















.accordion-item {
    margin-bottom: 10px;
    border: 1px solid #151C13;
    border-radius: 2px;
}

.accordion-label {
    cursor: pointer;
    display: block;
    padding: 10px;
    background: #35B81F;
    font-weight: bold;
    transition: background 4.3s;
	font-size: 20px;
	color: #6A6767;
}
.accordion-label:hover {
    background: #151C13;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 5px;
    background: #455E3D;
    transition: max-height 1.0s ease, padding 1.0s ease;
}
.accordion-content p {
    margin: 50px 0;
}

input:checked + .accordion-label + .accordion-content {
    max-height: 600px; /* Adatta alla lunghezza del contenuto */
    padding: 10px;
}






























/* 
---------------------------------------------
Gaming Library Style
--------------------------------------------- 
*/

.gaming-library {
  margin-top: 60px;
  padding: 30px;
  background-color: #1f2122;
  border-radius: 23px;
}

.gaming-library .item {
  border-bottom: 1px solid #27292a;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.gaming-library .last-item {
  margin-bottom: 30px;
}

.profile-library .last-item {
  border-bottom: none;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.gaming-library .item ul li {
  margin-top: 15px;
}

.gaming-library .item ul li img {
  margin-top: -30px;
}

.gaming-library .item ul li {
  display: inline-block;
  width: 17%;
}

.gaming-library .item ul li:first-child {
  width: 110px;
}

.gaming-library .item ul li:last-child {
  width: 15%;
  text-align: right;
}

.gaming-library .item ul li h4 {
  font-size: 15px;
  margin-bottom: 5px;
}

.gaming-library .item ul li span {
  color: #666;
  font-size: 14px;
}

.gaming-library .main-button {
  text-align: center;
  margin-bottom: -53px;
}

/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer p {
  text-align: center;
  padding: 30px 0px;
  color: #fff;
  font-weight: 300;
}

footer p a {
  color: #455E3D;
  transition: all .3s;
}

footer p a:hover {
  color: #35B81F;
}

/* 
---------------------------------------------
Featured Games Style
--------------------------------------------- 
*/

.featured-games {
  border-radius: 23px;
  background-color: #151C13; /* ------colore body interno------ */
  padding: 30px;
}

.featured-games .item .thumb {
  position: relative;
  overflow: hidden;
}

.featured-games .item .thumb .hover-effect {
  position: absolute;
  bottom: -100px;
  text-align: center;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all .4s;
}

.featured-games .item .thumb:hover .hover-effect {
  opacity: 1;
  visibility: visible;
  bottom: 15px;
}

.featured-games .item .thumb .hover-effect h6 {
  background-color: rgba(31,33,34,0.95);
  display: inline-block;
  color: silver; /* ------colore font over------ */
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 25px;
}

.featured-games .item img {
  border-radius: 23px;
}

.featured-games .item h4 {
  font-size: 15px;
  margin-top: 20px;
  margin-bottom: 0px;
  display: inline-block;
}

.featured-games .item span {
  color: #666;
  display: block;
  margin-top: 7px;
  font-weight: 400;
}

.featured-games .item ul {
  float: right;
  margin-top: 20px;
}

.featured-games .item ul li {
  text-align: right;
  color: #fff;
  font-size: 14px;
}

.featured-games .item ul li:first-child i {
  color: red; /* ------????------ */
}

.featured-games .item ul li:last-child i {
  color: #455E3D;   /* ------colore icone in alcune pagine------ */
}

.featured-games .owl-nav {
  position: absolute;
  margin: 0 auto;
  top: -70px;
  right: 0;
}

.featured-games .owl-nav .owl-prev {
  margin-right: 2.5px;
}

.featured-games .owl-nav .owl-next {
  margin-left: 2.5px;
}

.featured-games .owl-nav .owl-prev span,
.featured-games .owl-nav .owl-next span  {
  font-size: 36px;
  display: inline-block;
  color: #35B81F;  /* ------avanti e indietro carosello------ */
  opacity: 1;
  transition: all .3s;
}

.featured-games .owl-nav .owl-prev span:hover,
.featured-games .owl-nav .owl-next span:hover {
  opacity: 1;
  color: #ec6090;  /* avanti e indietro carosello */
}

.top-downloaded {
  border-radius: 23px;
  background-color: #1f2122;  /* ------????------ */
  padding: 30px;
  max-height: 567px;
  min-height: 567px;
}

.top-downloaded ul li {
  position: relative;
  display: inline-block;
  width: 100%;
}

.top-downloaded ul li img {
  float: left;
  margin-right: 15px;
}

.top-downloaded ul li h4 {
  font-size: 15px;
  padding-top: 7px;
}

.top-downloaded ul li h6 {
  font-size: 15px;
  color: #666;
  font-weight: 400;
  margin-top: 5px;
  margin-bottom: 5px;
}

.top-downloaded ul li span {
  color: #fff;  /* ------????------ */
  font-size: 15px;
  margin-right: 10px;
}

.top-downloaded ul li .download i {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-23px);
  width: 46px;
  height: 46px;
  text-align: center;
  line-height: 46px;
  color: purple;   /* ------????------ */
  background-color: purple;    /* ------????------ */
  border-radius: 50%;
}

.top-downloaded ul li {
  border-bottom: 1px solid red;  /* ------????------ */
  margin-bottom: 28px;
  padding-bottom: 28px;
}

.top-downloaded .text-button  {
  text-align: center;
}

.top-downloaded .text-button a {
  font-weight: 600;
  color: #ec6090;
  font-size: 15px;
}

/* 
---------------------------------------------
Start Stream Style
--------------------------------------------- 
*/

.start-stream .heading-section {
  margin-top: 60px;
  text-align: center;
  margin-bottom: 60px;
}

.start-stream .item {
  padding: 30px;
  border: 4px solid #151C13;  /* ------colore spessore menu servizi------ */
  border-radius: 23px;
}

.start-stream .item h4 {
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 15px;
  font-weight: 600;
}

.start-stream .main-button {
  text-align: center;
  margin-top: 30px;
}

/* 
---------------------------------------------
Live Stream Style
--------------------------------------------- 
*/

.live-stream {
  margin-top: 60px;
  border-radius: 23px;
  background-color: #151C13;  /* ------colore body interno------ */
  padding: 30px;
}

.live-stream .item {
  margin-bottom: 30px;
}

.live-stream .thumb {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.live-stream .thumb img {
  border-radius: 23px; 
}

.live-stream .thumb:hover .hover-effect {
  opacity: 1;
  visibility: visible;
}

.live-stream .hover-effect {
  opacity: 0;
  visibility: hidden;
  transition: all .4s;
}

.live-stream .hover-effect .live a { 
  position: absolute;
  background-color: #35B81F;  /* ------colore over su immagini------ */
  padding: 5px 10px;
  border-radius: 23px;
  color: #fff;
  font-size: 14px;
  right: 15px;
  top: 15px;
}

.live-stream .hover-effect ul {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
}

.live-stream .hover-effect ul li {
  display: inline-block;
  margin: 0px 5px;
}

.live-stream .hover-effect ul li a {
  background-color: #35B81F;  /* ------colore over su immagini------ */
  padding: 5px 10px;
  border-radius: 23px;
  color: #fff;
  font-size: 14px;
}

.live-stream .avatar img {
  margin-right: 15px;
}

.live-stream span i {
  color: #fff;
  background-color: #455E3D;  /* ------colore cercio piccolo------ */
  border-radius: 50%;
  font-size: 12px;
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  line-height: 20px;
  margin-right: 3px;
}

.live-stream span {
  font-size: 14px;
  color: #35B81F;     /* ------colore testo piccolo per immagini------ */
}

.live-stream .down-content h4 {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 700;
  margin-left: 61px;
}

.live-stream .main-button {
  text-align: center;
  margin-bottom: -53px;
}

/* 
---------------------------------------------
Featured Banner Style
--------------------------------------------- 
*/

.feature-banner .thumb {
  position: relative;
  max-height: 305px;
  overflow: hidden;
  border-radius: 23px;;
}

.feature-banner .thumb a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-23px, -23px);
  width: 46px;
  height: 46px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  color: red;   /* ------?????------ */
}

/* 
---------------------------------------------
Game Details Style
--------------------------------------------- 
*/

.game-details h2 {
  font-size: 45px;
  text-transform: uppercase;
  text-align: center;
  margin: 60px 0px;
}

.game-details .content {
  border-radius: 23px;
  padding: 30px;
  background-color: #151C13;   /* ------colore body interno------ */
}

.game-details .content .left-info {
  background-color: red;    /* ------???------ */
  border-radius: 23px;
  padding: 30px;
  margin-bottom: 30px;
}

.game-details .content .left-info .left {
  float: left;
}

.game-details .content .left-info h4 {
  font-size: 15px;
  display: block;
}

.game-details .content .left-info span {
  color: #666;
  display: block;
  margin-top: 7px;
  font-weight: 400;
}

.game-details .content .left-info ul {
  text-align: right;
}

.game-details .content .left-info ul li {
  color: #fff;
  font-size: 14px;
  margin-bottom: 3px;
}

.game-details .content .left-info ul li:first-child i {
  color: red;   /* ------???------ */
}

.game-details .content .left-info ul li:last-child i {
  color: red;/* ------???------ */
}

.game-details .content .right-info {
  background-color: #27292a;
  border-radius: 23px;
  padding: 30px;
  margin-bottom: 30px;
}

.game-details .content .right-info ul li {
  display: inline-block;
  width: 23%;
  text-align: center;
  font-size: 14px;
  color: #fff;
}

.game-details .content .right-info ul li i {
  display: block;
  margin-bottom: 12px;
}

.game-details .content .right-info ul li:first-child i {
  color: red;  /* ------???------ */
} 

.game-details .content .right-info ul li i {
  color: red;  /* ------???------ */
}

.game-details .main-border-button {
  margin-top: 35px;
}

.game-details .main-border-button a {
  text-align: center;
  width: 100%;
} 

/* 
---------------------------------------------
Other Related Style
--------------------------------------------- 
*/

.other-games {
  border-radius: 23px;
  padding: 30px 30px 0px 30px;
  background-color:  red;  /* ------???------ */
  margin-top: 60px;
}

.other-games .item {
  position: relative;
  border-bottom: 1px solid  red;  /* ------???------ */
  padding-bottom: 52px;
  margin-bottom: 30px;
}

.other-games .item img {
  float: left;
  margin-right: 15px;
}

.other-games .item h4 {
  display: inline-block;
  font-size: 15px;
  margin-bottom: 5px;
  padding-top: 15px;
}

.other-games .item span {
  color: #666;
  font-size: 14px;
  display: block;
}

.other-games ul {
  position: absolute;
  right: 0;
  top: 15px;
}

.other-games ul li {
  color: #fff;
  font-size: 14px;
  margin-bottom: 3px;
}

.other-games ul li:first-child i {
  color: yellow;
}

.other-games ul li:last-child i {
  color: #ec6090;
}

/* 
---------------------------------------------
Top Streamers Style
--------------------------------------------- 
*/

.top-streamers {
  border-radius: 23px;
  background-color: #151C13;  /* ------colore are laterale dx------ */
  padding: 30px;
  max-height: 567px;
  min-height: 567px;
}

.top-streamers ul li {
  display: inline-block;
  width: 100%;
  border-bottom: 1px solid #353637;
  margin-bottom: 25px;
  padding-bottom: 25px;
}

.top-streamers ul li:last-child {
  border-bottom: none;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.top-streamers ul li span {
  float: left;
  font-size: 15px;
  color: #fff;
  font-weight: 700;
  padding-top: 12px;
  margin-right: 10px;
}

.top-streamers ul li h6 {
  display: inline;
  font-size: 14px;
  color: #ec6090;
  font-weight: 400;
}

.top-streamers ul li h6 i {
  color: #fff;
  background-color: red;  /* ------???------ */
  border-radius: 50%;
  font-size: 12px;
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  line-height: 20px;
  margin-right: 3px;
}

.top-streamers ul li .main-button {
  float: right;
}

.top-streamers ul li .main-button a {
  padding: 8px 20px;
}

/* 
---------------------------------------------
Profile Style
--------------------------------------------- 
*/

.main-profile {
  border-radius: 23px;
  padding: 30px;
  background-color: #151C13;   /* ------colore body interno pagina sdd------ */
}

.main-profile .main-info span {
  font-size: 14px;
  color: #fff;
  background-color: #455E3D;   /* ------colore bottone pagina sdd------ */
  padding: 8px 20px;
  display: inline-block;
  border-radius: 13px;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  margin-bottom: 15px;
}

.main-profile .main-info h4 {
  margin-bottom: 20px;
}

.main-profile .main-info .main-border-button {
  margin-top: 25px;
}

.main-profile ul {
  border-radius: 23px;
  padding: 30px;
  background-color: #455E3D;  /* ------colore box laterale pagina sdd------ */
}

.main-profile ul li {
  width: 100%;
  font-size: 14px;
  color: #35B81F;  /* ------colore icone box laterale pagina contatti------ */
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #3ABC15; /* ------colore linea continua dentro box laterale pagina sdd------ */
}

.main-profile ul li span {
  float: right;
  font-weight: 500;
  color: white;   /* ------colore font dentro menu box pagina contatti------ */
}

.main-profile ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.clips {
  margin-top: 30px;
  border-top: 2px solid #455E3D; /* ------colore linea continua grande pagina sdd------ */
}

.clips .heading-section {
  margin-top: 30px;
}

.clips .item  {
  border-radius: 23px;
  padding: 30px 15px;
  background-color: #27292a;
  margin-bottom: 30px;
}

.clips .item .thumb {
  position: relative;
  margin-bottom: 15px;
}

.clips .item .thumb a {
  position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-23px, -23px);
    width: 46px;
    height: 46px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 46px;
    color: red;  /* ------????------ */
}

.clips .item h4 {
  font-size: 15px;
  display: inline-block;
}

.clips .item span i {
  color: red;   /* ------????------ */
}

.clips .item span {
  float: right;
  color: #fff;
  font-size: 14px;
}

.clips .main-button {
  margin-top: 10px;
  text-align: center;
}








/* ---------galleria immagini--------- */

.gallery-container img {
    max-width: 100%;
    border: 0;
/* for ie 8 */
    height:  auto;
    width: inherit;
	
}


.gallery-container {
    text-align:center;
}


.gallery {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}



.gallery-container a {
    text-decoration:none;
    }


.gallery-container .item {
    max-width: 28%;
    width: 100%;
    overflow: auto;
    margin: 5px;
    display:  inline-block;
    text-align: center;
	
    }


.gallery-container .lightbox {
    opacity: 0;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    color: red;   /* ---------?????--------- */
    font-family:'arial', sans-serif;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    }



.gallery-container .lightbox:target {
    opacity: 1;
    outline: none;
    top: 0;
}



.gallery-container .lightbox .box {
 	margin: 2% auto;
    padding:10px 20px;
    background-color: #455E3D;   /* ---------colore borgo ingrandimento galleria--------- */
    box-shadow: 0px 1px 26px -3px greenyellow;   /* ---------colore bagliore ingrandimento immagine galleria--------- */
    overflow: auto;
  	max-width: 100%;
	border-radius: 20px;
    }

.gallery-container .lightbox .box h3 {
    margin-bottom: 0;
}



.gallery-container .lightbox .title {
    margin:0;
    padding:0 0 10px 0px;
    border-bottom:1px red solid;  /* ---------?????--------- */
    font-size:22px;
    }



.gallery-container .lightbox .content {
    display:block;
    position:relative;
    }



.gallery-container .lightbox .close {
    display:block;
    float:right;
    text-decoration:none;
    font-size:22px;
    color: red;      /* ---------?????--------- */
    }



.gallery-container .lightbox .next,
.gallery-container .lightbox .prev,
.gallery-container .lightbox .close {
    display:block;
    text-decoration:none;
    font-family:'arial', sans-serif;
    font-size:22px;
     color: silver;      /* ---------colore font ingrandimento galleria immagine--------- */
    }
.gallery-container .prev {
    float:left;
    }
.gallery-container .next,
.gallery-container .close {
    float:right;
    }




















/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  body .page-content {
    padding: 0px 30px;
  }
  .main-banner {
    text-align: center;
  }
  .main-banner h4 {
    font-size: 35px;
  }
  .gaming-library .item ul li,
  .gaming-library .item ul li:first-child,
  .gaming-library .item ul li:last-child {
    width: 100% !important;
    text-align: center !important;
  }
  .gaming-library .item ul li {
    margin-top: 30px;
  }
  .top-downloaded ul li .download i {
    top: 20px;
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
  .top-downloaded ul li img {
    margin-right: 10px;
  }
  .top-downloaded ul li span {
    font-size: 14px;
  }
  .top-streamers ul li .main-button {
    float: none;
    margin-top: 10px;
  }
  .top-streamers ul li .main-button a {
    width: 100%;
    text-align: center;
  }
  .top-streamers,
  .top-downloaded {
    max-height: 100%;
    min-height: 100%;
  }
  .most-popular .item .inner-item {
    margin-bottom: 20px;
  }
}

@media (max-width: 992px) {
  .background-header {
  display: inline-block;
  }
  .header-area .main-nav #search {
    display: none;
  }
  .heading-section h4 {
    font-size: 20px;
  }
  .gaming-library .item ul li {
    width: 48% !important;
  }
  .gaming-library .item ul li:last-child {
    text-align: left;
  }
  .featured-games {
    margin-bottom: 60px;
  }
  .start-stream .item {
    margin: 15px 0px;
  }
  .feature-banner .thumb {
    margin-top: 30px;
  }
  .main-profile .main-info {
    margin: 45px 0px;
  }
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-right: 5px;
    padding-left: 5px;
  }
  .header-area .main-nav .logo {
    margin-right: 30px;
    border-right: none;
  }
  .gaming-library .item ul li {
    width: 16%;
  }
}