body{font-family: 'Lato', sans-serif; font-weight:500; color:#808285}

h2, h3{font-family: 'Montserrat', sans-serif; color:#585858}
a{ position: relative; color: #FFF; text-decoration: none}
a:hover{ color: #FFF}
a:before {  content: "";  position: absolute;  width: 100%;  height: 1px;  bottom: -5px;  left: 0;  background-color: #ffab00;  visibility: hidden;  -webkit-transform: scaleX(0);  transform: scaleX(0);  -webkit-transition: all 0.3s ease-in-out 0s;  transition: all 0.3s ease-in-out 0s;}
a:hover:before {  visibility: visible;  -webkit-transform: scaleX(1);  transform: scaleX(1);}
p{margin: 0 0 5px 0}

.pa_20_0{padding:20px 0}
.pa_0_2{padding:0 2%}

.soon{ background: url(../img/bg-soon.jpg); text-align:center} 
.soon-logo{ width:300px; margin-left: calc(50% - 150px); margin-top:20px}
.soon-hello{font-size:12em; font-weight:900; margin-top: 10%}
.soon-text{font-size:3em;  font-weight:900}
.mail-bottom{ position:absolute; bottom:20px; width:100%}

.welcome{ max-width: 800px; margin: 0 auto; text-align: center; }
.welcome h2{margin-top: 0}
.orange{color: #ffab00}

/*anim text*/
.content {  position: absolute;  top: 0;  left: 0;  transform: translate(-50%, -50%);  height: 160px;  overflow:hidden}
.visible {  overflow:hidden; color:#FFF;  height:160px; padding:0;
  &:before {    content:'[';    left: 0;  }
  &:after {    content:']';    position:absolute;    left: 0;  }
  &:after, &:before { position:absolute; top:0; color:#16a085; animation:5s linear 5s normal none infinite opacity  }
}
.visible p {  display:inline;  float:left;  margin:0;}
.visible ul {  margin-top:0;  padding-left:30px;  text-align:left;  list-style:none;  animation:6s linear 1s normal none infinite change;}
.visible ul li {  margin:0 0 0 215px;}

@keyframes opacity {  0%, 100%   {opacity:0;}  50%  {opacity:1;}}
@keyframes change {  0%, 12%, 100%   {transform:translateY(0);}  17%,29%  {transform:translateY(-25%);}  34%,46%  {transform:translateY(-50%);}  51%,63%  {transform:translateY(-75%);}  68%,80%  {transform:translateY(-50%);}  85%,97%  {transform:translateY(-25%);}}



header{width:100%; height:100%; color:#FFF; margin-bottom:50px  }
header article{ overflow:hidden; background:none; width:100%} 
.header-cont{ max-width:1200px; height:100%; margin:0 auto; position:relative}
.header-top{position:fixed; width:100%; z-index:9999}
.logo{ width:250px; padding:20px 0}
.iso{display: none; width:60px}
nav{float:right;  margin-top:0; font-family: 'Montserrat', sans-serif}
nav div{display:inline; margin:0 0 0 25px}
nav div li div:hover{cursor:pointer; border-bottom:1px solid #FFF}
.f-nav{ background: rgba(20,147,200,.8)}
.f-nav .logo{width:200px}
.f-nav nav{margin-top:0; font-size:.9em}
#top:hover{ cursor:pointer}

.prog700{display: none;}
.slogan{font-weight:900; line-height:.7em; font-size:15em; top:calc(50% - 30px); left:0; position:absolute; font-family: 'Montserrat', sans-serif}
.visible{font-size:.5em;}

.slider{float:left; width:100%}
.slide-class .cont{ position:absolute; top:130px; width:570px; text-align:right}
.slide-class .img{ width:450px; margin-left:55%}

.slide-class h2{ color:#30a3e0; font-size:3em; line-height:1em; margin:15px 0 0 0; padding:0}
.slide-class h3{padding:10px 0 0; font-size:1.3em; margin:0}
.slide-class h4{font-size: 5em; letter-spacing: .01em; line-height: .6em; margin:0;}
.slide-class a{color: #ffab00}
.dest{background:#ffab00; color: #FFF; padding: 4px 10px; font-size: 1.1em; display: inline-block; position: absolute; top: -20px; right: 0}
.stars{float: right; margin-right: -5px; border-bottom-color:#ffab00 }
.bg-grey{background:url(../img/bg-grey.jpg) repeat-x 30px; float:left; width:100%; margin-top:30px}
.slide-class-2{padding:20px 0 20px}

/*menu-responsive*/
.nav-collapse ul li{display:inline}

.ico-game{
 -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
          transition: all 0.3s ease;
}

.ico-game:hover{
	cursor:pointer;
 -webkit-transform: rotate(-5deg);
     -moz-transform: rotate(-5deg);
       -o-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
          transform: rotate(-5deg);
}

footer{background:url(../img/footer.jpg) bottom center; color:#FFF; margin-top:70px; height:530px}
footer h2{color:#FFF; background:#069; float:left; padding:15px 24px; margin-top:-20px; margin-bottom:40px}
.pie{background:#333; padding:20px 20px 40px 20px; color:#999; font-size:.9em}
.pie ul{float:right; margin-top:-35px}
.pie ul li{display:inline}
.pie a img{width:70px; padding:0 6px}
.pie a img:hover{ transform:scale(1.2)}
.pie a:hover:before {  visibility: hidden}

.envio{ text-align: center; position: relative; max-width: 496px }
.envio .cont{position: absolute; color: #FFF}

textarea{resize: none;}
fieldset{border:0}

.bg-gral{ background:#333 }
.bg-gral header{ text-align:center; padding:20px; height:auto}
.bg-gral footer{ margin-top:0}
.bg-gral a{color:#ee8b2e}
.content-bg{background:url(../img/bg-soon.jpg) bottom center no-repeat; background-size:cover; background-attachment:fixed; padding:20px 0 70px}
.recuadro{background:#FFF; max-width:1000px; margin:0 auto; padding:20px 20px 40px; text-align:center}

.bg-gral header img{width:200px}

.banner{background: url(../img/banner.jpg) center top no-repeat; height: 529px; width: 100%; margin-top: 40px}
.banner2{background: url(../img/CoW-banner2.jpg) center top no-repeat; height: 529px; width: 100%; margin-top: 0}

/* de menos de 1280px*/
@media only screen and (max-width: 1279px) {
	.header-cont{width:960px}
	.slogan{ font-size:13em; line-height:.6em}
	.visible, .content { height:125px}
	.visible ul li {  margin:0 0 0 165px}
	.slide-class .cont{ width:470px}
	footer{ height:600px}
}

/* de menos de 1024px*/
@media only screen and (max-width: 1023px) {
	.header-cont{width:768px}
	.slide-class .img{width:380px; margin-left:50%}
	.slide-class .cont{ width:340px}
	.slide-class h2{ font-size:2.3em}
	footer{height:580px}
	.bg-grey{padding-bottom:80px}
	.slogan{ font-size:10em}
	.visible ul li { margin: 0 0 0 127px}
	.visible, .content {height: 110px}
	
	.bg-gral iframe{width:90%}
	.banner{background: url(../img/banner-m.jpg) center top no-repeat; height: 298px; width: 100%; margin-top: 40px}
	.banner2{background: url(../img/CoW-banner-m.jpg) center top no-repeat; height: 298px; width: 100%; margin-top:0}

}

/* de menos de 768px (480)*/
@media only screen and (max-width: 767px) {
	.header-cont{width:450px}
	.header-top{ position:relative}
	.soon-logo{ width:200px; margin-top:20px}
	.soon-hello{font-size:5em; margin-top:4%}
	.soon-text {font-size: 2em}
	.ico-game{width:135px}
	.target{padding-bottom:30px}
	.slide-class .img{ display:none}
	.slide-class .cont{ position:relative; text-align:center; margin:0; padding:0; top:0; width:100%}
	.slide-class .cont img{ display:none}
	.bg-grey{padding-bottom:20px; margin-bottom:50px}
	.target{text-align:center}
	.target img{ width:150px}
	.slide-class h2{ font-size:2em}

	.slogan{ font-size:6em; top: calc(50% - 110px);}
	.visible ul li { margin: 0 0 0 70px}
	.visible, .content {height: 60px}
	.logo{display:none}
	.iso{display: inline}
	.f-nav nav, nav{font-size:.85em; margin-top:10px}	
	.f-nav{ background: none; position:relative}
	.f-nav .logo{width:60px}
	
	.bg-grey {padding-bottom: 40px}
	footer {height: auto}
	footer h2{margin-bottom: 15px}
	form{float: left; clear: left; width: 100%; margin-bottom:50px}
	.target img { width: 80px}

	.top img{display: inline-block !important; float: none !important; padding-top: 50px}
	.stars{display: inline-block !important; float: none;}	
	.slide-class h4{ font-size: 6em}
	.prog{display: none;}
	.prog700{display: inline-block;}
	
	.banner{background: url(../img/banner-sm.jpg) center top no-repeat; height: 215px; width: 100%; margin-top: 40px}
	.banner2{background: url(../img/CoW-banner-sm.jpg) center top no-repeat; height: 215px; width: 100%; margin-top: 0}
	
	
}

/* de menos de 480px, minimo 320px (320)*/
@media only screen and (max-width: 479px) {
	.soon-hello { margin-top: 33%}
	.header-cont{width:300px}
	.ico-game{width:140px}
	.slogan { font-size: 4em}
	.visible ul { padding-left:0}
	.visible, .content { height: 42px}
	.pie ul { margin-top:15px}
	nav div { margin: 0 0 0 11px}
	.iso {width: 40px;}
	.f-nav nav, nav {    font-size: .75em; margin-top:4px}
	ul, menu, dir{    -webkit-padding-start: 10px;}

	.stars{ width: 240px}
	.slide-class h2{ font-size: 1.7em}
	.dest{position: relative; top: 0}
}