/*Generales*/
*{font-family: 'Bebas Neue', cursive; text-decoration:none;}
body{margin:0;}
img{max-width:100%;}
a{color:inherit;}
h1, h2, h3, h4, h5, h6, p{margin:0; font-weight:normal;}
::selection {background: #0c3943; color:#ffffff; /* WebKit/Blink Browsers */}
.pageContent{padding:100px 0 40px 0;}
/*.pageContent{padding:60px 0;}*/
.container{display:block; width:100%;}
.row{display:block; padding: 0 0 80px 0;}
/*.row{display:block; padding: 0 0 40px 0;}*/
.box{display:flex; margin:0 auto; width:90%; max-width:1400px; align-items:center; justify-content:center;}
.full{width:100%;}
.half{width:50%;}
.third{width:33.333%;}
.quarter{width:25%;}

/*Contenido General*/
.paragraph div{display:block; width:80%; margin:0 auto;}
.paragraph.full div{width:90%;}
h1.regular{font-size:40px; margin-bottom:20px;}
p.regular{font-size:24px; line-height:30px; margin-bottom:30px;}
ul.regular{margin:0 0 30px 0;}
ul.regular li{font-size:24px; line-height:30px; margin-bottom:10px;}
a.button{display:block; font-size:24px; text-align:center; width:200px; background: #0c3943; border: none; color: #ffffff; text-transform: uppercase; padding: 15px 0; transition: all .3s ease-in-out;}
a.button:hover{background:#262222; color:#ffffff;}
.commonLink{transition:all .3s ease-in-out;}
.commonLink:hover{color:#0c3943;}
.row.smallPadding{padding-bottom:30px;}

/*Header*/
header{background:#ffffff; display:block; position:sticky; top:0; width:100%; z-index:2; padding:10px 0;}
.headerDiv{display:flex;}
.logo{width:30%; justify-content:left;}
.logo img{width: 100%; max-width:242px;}
.menu{width:70%; justify-content:right;}
.menu a{text-decoration:none; color:#0c3943; text-transform:uppercase; margin:0 10px; font-size:20px; transition:all .3s ease-in-out;}
.menu a:hover{color:#0c3943;}
.burger{display:none !important; margin-left:auto; font-size:30px; color:#ffffff; transition:all .3s ease-in-out;}
.burger:hover{color:#0c3943; cursor:pointer;}

/*Main*/
.main{background-repeat:no-repeat; background-size:cover; background-position:center;}
.main .box{flex-direction:column;}
.mainInicio{background-image:url("img/main/inicio.jpg");}
.mainNosotros{background-image:url("img/main/nosotros.jpg");}
.mainContacto{background-image:url("img/main/contacto.jpg");}
.shadow{background:rgba(0, 0, 0, .4); padding:220px 0;}
.pageTitle{font-size:54px; color:#ffffff; text-align:center;}
.mainInicio .pageTitle{color: #ffffff; text-shadow: 0 0px 20px black; font-size:82px; line-height:50px;}
.pageSubtitle{font-size:34px; color:#ffffff; text-align:center;}

/*Scroll Text*/
#scroll-container {overflow: hidden; padding:10px 0; background:#262222;}
#scroll-text{-moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); -moz-animation: my-animation 25s linear infinite; -webkit-animation: my-animation 25s linear infinite; animation: my-animation 25s linear infinite; color:#ffffff; font-size:24px; white-space: nowrap;}

/* for Firefox */
@-moz-keyframes my-animation {
from{-moz-transform: translateX(100%);}
to{-moz-transform: translateX(-100%);}
}
/* for Chrome */
@-webkit-keyframes my-animation{
from{-webkit-transform: translateX(100%);}
to{-webkit-transform: translateX(-100%);}
}
@keyframes my-animation {
from {-moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%);}
to {-moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%);}
}

/*Mapa*/
.gMap{width:100%; height:400px;}

/*Footer*/
footer{background:#262222; display:block; width:100%; padding:30px 0;}
footer .box{justify-content:left; align-items:flex-start}
.footerDiv{display:flex;}
.footerLogo{padding-right:20px;}
.footerLogo img{width: 100%; max-width:74px;}
.contactInfo{padding-left:20px; flex-direction:column; border-left:solid 1px #0c3943;}
.contactInfo a{text-decoration:none; color:#ffffff; text-transform:uppercase; font-size:20px; transition:all .3s ease-in-out;}
.contactInfo a:hover{color:#0c3943;}
.dataFiscal{margin-left:auto;}
.dataFiscal img{width: 100%; max-width:60px;}

/*Copyright*/
.copyright{padding:10px 0; background:#0c3943;}
.copyright p{color:#ffffff;}

/*Social*/
.redesCont{display:block; width:min-content; position:fixed; bottom:20px; right:20px;}
.redes{display:flex; justify-content:center; flex-direction:column; /*background:#0c394380;*/ /*width:min-content;*/ width:70px; height:70px; margin:0 auto; border-radius:50px; transition:all .35s cubic-bezier(0.56, 1.22, 0.7, 1.01);}
.socialLink, .socialDummy{box-sizing:border-box; width:50px; height:50px; border-radius:50px; margin:10px; padding:5px 0;}
.socialLink{/*background:#ffffff;*/ display:none; transition:all .15s cubic-bezier(0.39, 0.58, 0.57, 1);}
.socialLink:hover{width:56px; height:56px; margin:7px; padding:8px 0;}
.socialLink:hover i{color:#0c3943;}
.socialDummy{background:#444444aa; display:block; transition:all .3s ease-in-out;}
.socialDummy:hover{background:#0c3943;}
.redesClicked .socialLink{display:block;}

.redesClicked .socialDummy:hover{animation-name:rotacion; animation-duration:.5s; background:#cc000080;}
.socialLink i{color:#888888; transition: all .3s ease-in-out;}
.socialDummy i{color:#ffffff;}
.socialDummy i, .socialLink i{width:100%; font-size:40px; /*margin:5px 0;*/ text-align:center;}

@keyframes rotacion {
  0%   {transform: rotate(0deg);}
  /*80% {transform: rotate(390deg);}
  90% {transform: rotate(340deg);}*/
  100% {transform: rotate(360deg);}
}

/*Home*/
.homeHalves .half img{display:block; margin:0 auto; width:100%; max-width:500px; border-radius:250px;}
.consoles{background:#262222; padding:20px 0; margin-bottom:80px; display:none;}
.consoles .row{padding:0;}
.consoles .box{flex-wrap:wrap; justify-content:space-around;}
/*.consoleCard{width:34%; max-width:150px;}*/
.consoleCard{flex:1 0 25%;}
.consoleCard img{width:100%; max-width:150px; display:block; margin:0 auto; transition:all .3s ease-in-out;}
.consoleCard img:hover{filter: invert(44%) sepia(33%) saturate(769%) hue-rotate(47deg) brightness(98%) contrast(88%);}

/*Listado de productos*/
.productsContainer{display:flex; width:100%; max-width:1600px; padding:60px 0; margin:0 auto;}
.productsContainer .shopSidebar{width:20%; border-right:1px solid #262222}
.productsContainer .shopSidebar .sideBox{display:block; margin:0 auto; width:90%; position:sticky; top:100px;}
.productsContainer .cardHolder{width:80%;}

.productsContainer .shopSidebar h3{font-size:24px; font-weight:normal; margin:0 0 10px;}
.productsContainer .shopSidebar a{display:block; padding:10px 0 10px 10px; text-align:left; border-top:1px solid #262222; color:#262222; transition:all .3s ease-in-out; font-size:16px;}
.productsContainer .shopSidebar a:hover{color:#ffffff; background:#0c3943;}
.productsContainer .shopSidebar a.viewAll{border:none; background:#0c3943; margin-top:30px; padding:10px; text-align:center; color:#ffffff;}
.productsContainer .shopSidebar a.viewAll:hover{background:#262222;}
.productsContainer .shopSidebar form{display:flex; margin-bottom:20px;}
.productsContainer .shopSidebar form input{box-sizing:border-box; padding:10px 0; font-size:16px;}
.productsContainer .shopSidebar form input[type="text"]{width:calc(100% - 60px); border:solid #262222; border-width:1px 0 1px 1px; padding-left:10px;}
.productsContainer .shopSidebar form input[type="submit"]{width:60px; border: solid 1px #262222; background:#0c3943; color:#ffffff; transition:all .3s ease-in-out;}
.productsContainer .shopSidebar form input[type="submit"]:hover{background:#262222; cursor:pointer;}

.cardHolder{display:flex; flex-wrap:wrap; justify-content:space-evenly;}
.card{width:250px; border-radius:10px; background:#262222; padding:20px 20px 20px 20px; margin-bottom:20px;}
.card *{font-size:20px;}
.card img{width:100%;}
.card p{text-align:center; margin:10px 0 20px 0; height:40px; color:#ffffff;}
.card span{display:block; text-align:center; color:#ffffff;}
.cardBtn{display:block; text-align:center; margin:20px auto 0; width:80%; background:#0c3943; border:none; color:#ffffff; text-transform:uppercase; padding:15px 0; transition:all .3s ease-in-out;}
.cardBtn:hover{background:#ffffff; color:#262222; cursor:pointer;}

/*Contacto*/
.contactIcon{color:#262222; font-size:40px; margin-right:10px; transition:all .3s ease-in-out;}
.contactIcon:hover{color:#0c3943;}

.contactForm input, .contactForm textarea{box-sizing: border-box; display: block; width: 100%; padding: 10px; margin-bottom: 10px; font-size: 20px;}
.contactForm input[type="submit"]{background: #0c3943; color: #ffffff; border: none; padding: 15px; font-size: 24px; transition: all .3s ease-in-out;}
.contactForm input[type="submit"]:hover{cursor:pointer; background:#262222;}
.contactForm input[type="submit"]:disabled{background:#262222;}
.contactForm input[type="submit"]:disabled:hover{cursor:default;}

#formBox{width:100%;}
#formBox p.regular{margin-bottom:0;}

/*Product Single*/
#productImage img{border-radius:0;}
#productTitle{margin-bottom:0;}
#productPrice{margin-bottom:20px;}

a.whatsapp{display: block; position: fixed; bottom: 40px; right: 20px;}
a.whatsapp > img{width: 60px; filter: opacity(0.8); transition: all .3s ease-in-out;}
a.whatsapp > img:hover{filter: opacity(1);}

/*##############################*/
/*##########RESPONSIVE##########*/
/*##############################*/

@media all and (min-width: 1281px){
  .redesClicked{height:280px;}
}

@media all and (max-width: 1280px){
  #scroll-container{display:none;}
  .redesCont{width:100%; right:0; bottom:70px; height:0;}
  .redes{flex-direction:row;}
  .redesClicked{Width:280px;}
  .socialLink i, .socialDummy i{margin:5px 0;}
  .socialLink, .socialDummy{padding:0;}
  .socialLink:hover{padding:3px 0; margin:7px; height:auto;}
  
  .productsContainer{flex-direction:column;}
  .productsContainer .shopSidebar, .productsContainer .cardHolder{width:100%;}
  .productsContainer .shopSidebar{border-right:0; padding-bottom:40px;}
  .shopSidebar .sideBox h3, .shopSidebar .sideBox a{display:none;}
}

@media all and (max-width: 768px){
  header{padding:0; position:fixed;}
  header .box{width:100%; flex-direction:column;}
  .logo{width:calc(100% - 20px); padding:10px 10px; background:#262222; z-index:1; align-items:center;}
  .logo img{max-width:150px; filter: brightness(100);}
  .burger{display:block !important;}
  .menu{width:100%; justify-content:center; flex-direction:column; background:#111111; margin-top:-109px;}
  .menu a{display:block; text-align:center; padding:5px 0; border-top:solid 1px #444444; color:#ffffff;}
  
  .logoAnim{animation-name:cubo1; animation-duration:.7s; animation-fill-mode: forwards;}
  .menuAnim{animation-name:cubo2; animation-duration:.7s; animation-fill-mode: forwards;}

  .logoAnimClose{animation-name:cubo3; animation-duration:.7s; animation-fill-mode: forwards;}
  .menuAnimClose{animation-name:cubo4; animation-duration:.7s; animation-fill-mode: forwards;}

  .main{margin-top:62px;}
  .main .shadow{padding:80px 0;}
  .main .pageTitle{font-size:46px; line-height:42px;}
  
  .mainInicio{height: calc(100vh - 62px); margin-top: 62px;}
  .mainInicio .shadow{padding:0; height:100%;}
  .mainInicio .shadow .box{height:100%;}
  .mainInicio .pageTitle{font-size:46px; line-height:28px;}
  .mainInicio .pageSubtitle{font-size:19px;}
  
  .noMobile{display:none;}
  
  .consoleCard{flex:1 0 50%;}
  .consoles{margin-bottom:40px;}
  .consoles .box{flex-direction:row;}
  
  .productPage{margin-top:62px;}

  .pageContent{padding-top:40px;}
  .row{padding-bottom:0;}
  .box{flex-direction:column;}
  .full, .half, .third, .quarter{width:100%; padding-bottom:40px;}
  .paragraph div{width:100%;}

  footer .box {justify-content: center; align-items: center;}
  .dataFiscal{margin:0;}
  .footerLogo{padding-right:0;}
  .footerLogo, .contactInfo{margin-bottom:20px;}
  .contactInfo{border:none; padding:0;}
  .contactInfo a{text-align:center;}

  .row.smallPadding{padding-bottom:0;}
}

@keyframes cubo1 {
  0% {box-shadow:none;}
  66% {box-shadow: 0px 12px 10px #00000080;}
  100% {box-shadow: 0px 0px 0px #00000080;}
}

@keyframes cubo2 {
  0%   {margin-top:-109px;}
  66%  {background:#111111; margin-top:0px;}
  100% {background:#262222; margin-top:0px;}
}

@keyframes cubo3 {
  0% {box-shadow: 0px 0px 0px #00000080;}
  66% {box-shadow: 0px 12px 10px #00000080;}
  100% {box-shadow:none;}
}

@keyframes cubo4 {
  0%   {background:#262222; margin-top:0px;}
  66%  {background:#111111; margin-top:0px;}
  100% {margin-top:-109px;}
}

@media all and (max-width: 440px){
}