@font-face {
    font-family: 'CenturyGothicProCyr';
    src: url(fonts/30717D_0_0.eot);
    src: url(fonts/30717D_0_0.eot?#iefix) format('embedded-opentype'), url(fonts/30717D_0_0.woff2) format('woff2'), url(fonts/30717D_0_0.woff) format('woff'), url(fonts/30717D_0_0.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'CenturyGothicProCyr';
    src: url(fonts/30717D_1_0.eot);
    src: url(fonts/30717D_1_0.eot?#iefix) format('embedded-opentype'), url(fonts/30717D_1_0.woff2) format('woff2'), url(fonts/30717D_1_0.woff) format('woff'), url(fonts/30717D_1_0.ttf) format('truetype');
    font-weight: 700;
    font-style: italic
}

@font-face {
    font-family: 'CenturyGothicProCyr';
    src: url(fonts/30717D_2_0.eot);
    src: url(fonts/30717D_2_0.eot?#iefix) format('embedded-opentype'), url(fonts/30717D_2_0.woff2) format('woff2'), url(fonts/30717D_2_0.woff) format('woff'), url(fonts/30717D_2_0.ttf) format('truetype');
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: 'CenturyGothicProCyr';
    src: url(fonts/30717D_3_0.eot);
    src: url(fonts/30717D_3_0.eot?#iefix) format('embedded-opentype'), url(fonts/30717D_3_0.woff2) format('woff2'), url(fonts/30717D_3_0.woff) format('woff'), url(fonts/30717D_3_0.ttf) format('truetype');
    font-weight: 700;
    font-style: normal
}

a{
    color: #f33324;
}
h2{
    font-size: 60px;
}
.max{
    font-size: 40px;
    font-weight: bolder;
}
header {
    background-color: transparent;
}
header.scrolling {
    animation: scroll 1s forwards linear;
	-webkit-animation: scroll 1s forwards linear;
  	-moz-animation: scroll 1s forwards linear;
  	-o-animation: scroll 1s forwards linear;
}
header.scrolling .container .navbar-header .navbar-brand .logo{
    color: #000000;
    animation: scrolltxt 1s forwards linear;
	-webkit-animation: scrolltxt 1s forwards linear;
  	-moz-animation: scrolltxt 1s forwards linear;
  	-o-animation: scrolltxt 1s forwards linear;
}
header img {
    max-width: 150px; 
    width: 100%; 
    height: auto;
}
header .container .navbar-header .navbar-brand{
    line-height: 24px !important;
}
header .container .navbar-header .navbar-brand .logo{
    color: #000000;
    font-size: 3.5625rem;
    letter-spacing: -3px;
    padding: 5px 0 0;
}
header .container .navbar-header .navbar-brand span{
    font-weight: bold;
}
header .container .navbar-collapse .navbar-nav li{
    padding-top: 2px;
}
.container{
    z-index: 2;
}
.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */
  display: flex;
  align-items: center;
}


#intro {
    padding:0; 
    height: 100vh; 
    width: 100%; 
    text-align: center;
}
#intro .container .claim {
    display: block; 
    width: 60%; 
    max-width: 913px; 
    height: auto; 
    position: relative; 
    margin: 0 auto;
    opacity: 0;
    animation: claim 1.5s forwards linear;
	-webkit-animation: claim 1.5s forwards linear;
  	-moz-animation: claim 1.5s forwards linear;
  	-o-animation: claim 1.5s forwards linear;
}
#intro .container .scroll{
    font-size: 40px; 
    padding: 5% 0 1%; 
    color:#bfbfbf;
    text-shadow: 0 13px 0 #e6e6e6;
    cursor: pointer;
}
.map {
    background: url(img/map.png) no-repeat top center;
    background-size: 80%;
    width: 100%;
    height: 100vh;
    margin-top: -20vh;
    position: absolute;
    opacity: 0.5;
}


#content {
    margin-top: 20vh;
}
#content h2{
    color: #f33324;
    font-weight: bold;
    letter-spacing: -3px;
}
#content .numbers {
    text-align: center;
    line-height: 20px;
    display: inline-block;
    width: 100%;
}
#content .numbers p{
    text-align: left;
    line-height: 20px;
}
#content .numbers .glyphicon{
    font-size: 60px; 
    padding-bottom: 30px;
}
#content .numbers div{
    padding: 10px 0;
}
#content #brands .row {
    padding:15px 0;
}
#content #brands{
    margin:20px 0;
}
.more .glyphicon{
    font-size: 10px; 
    line-height: 1px;
}
#content #brands div div img {
    width: 78%;
    height: auto;
    max-width: 300px;
    text-align: center;
    opacity: 0.8;
}
#content #brands div div img:hover {
    animation: brands 0.3s forwards linear;
	-webkit-animation: brands 0.3s forwards linear;
  	-moz-animation: brands 0.3s forwards linear;
  	-o-animation: brands 0.3s forwards linear;
}
#content #brands div div div {
    margin: 0 auto;
    position: relative;
    text-align: center;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#content .sensacine img{
    background: url(img/logo-sensacine.png) no-repeat;
    background-size: cover;
    background-position: bottom center;
}
#content .djuegos img{
    background: url(img/logo-3djuegos.png) no-repeat;
    background-size: cover;
    background-position: bottom center;
}
#content .vizz img{
    background: url(img/logo-vizz.png) no-repeat;
    background-size: cover;
    background-position: bottom center;
    width: 36% !important;
}
#content .ign img{
    background: url(img/logo-ign.png) no-repeat;
    background-size: cover;
    background-position: bottom center;
    width: 70% !important;
}
#content .raiser img{
    background: url(img/logo-raiser.png) no-repeat;
    background-size: cover;
    background-position: bottom center;
    width: 31% !important;
}
#content .brandista img{
    background: url(img/logo-brandista.png) no-repeat;
    background-size: cover;
    background-position: bottom center;
}
#content .noob img{
    background: url(img/logo-noob.png) no-repeat;
    background-size: cover;
    background-position: bottom center;
    width: 47% !important;
}
#content .sub h4 {
    font-size: 30px;
    text-align: center;
    color: #f33324;
    padding: 47px 0 0;
    margin: 0;
    font-weight: bold;
    letter-spacing: -2px;
}

#services {
    margin: 60px 0;
    color: white;
    padding: 60px 0;
    background: -moz-linear-gradient(135deg, #0480ff, #ff587d, #ff1e00, #ffd141, #00b98b, #0480ff, #ff587d);
    background: -webkit-linear-gradient(135deg, #0480ff, #ff587d, #ff1e00, #ffd141, #00b98b, #0480ff, #ff587d);
    background: -o-linear-gradient(135deg, #0480ff, #ff587d, #ff1e00, #ffd141, #00b98b, #0480ff, #ff587d);
    background: -ms-linear-gradient(135deg, #0480ff, #ff587d, #ff1e00, #ffd141, #00b98b, #0480ff, #ff587d);
    background: linear-gradient(135deg, #0480ff, #ff587d, #ff1e00, #ffd141, #00b98b, #0480ff, #ff587d);
    -moz-background-size: 600% 600%;
    -webkit-background-size: 600% 600%;
    -o-background-size: 600% 600%;
    background-size: 600% 600%;
    -moz-animation: WEBEDIA_GRA 49s linear infinite;
    -webkit-animation: WEBEDIA_GRA 49s linear infinite;
    -o-animation: WEBEDIA_GRA 49s linear infinite;
    animation: WEBEDIA_GRA 49s linear infinite;
    -moz-animation-direction: normal;
    -webkit-animation-direction: normal;
    -o-animation-direction: normal;
    animation-direction: normal;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden
}
#services h2 {
    color: #ffffff;
    font-weight: bold;
    margin: 0 0 20px;
}
#services img {
    width: 100%;
    height: auto;
}
#services .container .row .col-md-4 {
    text-transform: uppercase;
    font-size: 30px;
    text-align: center;
    padding: 6% 0;
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
#services .container .row a{
    color: #ffffff;
    text-shadow: 0 0 45px #000000;
    border: none;
}
#services .container .row .col-md-4:hover {
    animation: services 0.7s forwards linear;
	-webkit-animation: services 0.7s forwards linear;
  	-moz-animation: services 0.7s forwards linear;
  	-o-animation: services 0.7s forwards linear;
}
#services .container .row .publishing {
    background: url(img/exchange.png) no-repeat;
    background-size: cover;
    background-position: center center;
}
#services .container .row .brand {
    background:url(img/brandpublishing.png) no-repeat;
    background-size: cover;
    background-position: center center;
}
#services .container .row .native {
    background: url(img/native.png) no-repeat;
    background-size: cover;
    background-position: center center;
}
#services .container .row .social {
    background: url(img/social.png) no-repeat;
    background-size: cover;
    background-position: center center;
}
#services .container .row .influencers {
    background: url(img/influencers.png) no-repeat;
    background-size: cover;
    background-position: center center;
}
#services .container .row .exchange {
    background: url(img/exchange.png) no-repeat;
    background-size: cover;
    background-position: center center;
}


#contact .row h2{
    font-weight: bold;
    margin: 0 0 20px;
    letter-spacing: -3px;
}
#contact .row .col-md-4 h4{
    font-weight: bold;
    margin:0 0 10px;
}
#contact .row .col-md-4 p{
    font-size: 12px;
    margin-bottom:7px;
}
#contact .row .col-md-4 iframe{
    width: 100%;
    height: 100%;
}


footer {
    background-color: black;
    margin: 60px 0 0;
    color: #8e8e8e;
    padding: 60px 0;
    text-align: center;
}
footer .container .row .logo{
    color: #ffffff;
    font-size: 3.5625rem;
    letter-spacing: -3px;
}
footer .container .row .logo span{
    font-weight: bold;
}
footer .container .row .social a{
    font-size: 20px;
    color: #767676;
    cursor: pointer;
}
footer .container .row .afooter a{
    font-size: 11px;
    color: #767676;
    text-transform: uppercase;
}
footer .container .row .social .fa-facebook-official:hover{
    animation: facebook 0.2s forwards linear;
	-webkit-animation: facebook 0.2s forwards linear;
  	-moz-animation: facebook 0.2s forwards linear;
  	-o-animation: facebook 0.2s forwards linear;
}
footer .container .row .social .fa-twitter:hover{
    animation: twitter 0.2s forwards linear;
	-webkit-animation: twitter 0.2s forwards linear;
  	-moz-animation: twitter 0.2s forwards linear;
  	-o-animation: twitter 0.2s forwards linear;
}


/* ANIMATIONS */

@keyframes scroll{
    0% {background-color: transparent;}
    100% {background-color:rgba(0,0,0,0.9);}
}
@-webkit-keyframes scroll{
    0% {background-color: transparent;}
    100% {background-color: rgba(0,0,0,0.9);}
}
@-moz-keyframes scroll{
    0% {background-color: transparent;}
    100% {background-color: rgba(0,0,0,0.9);}
}
@-o-keyframes scroll{
    0% {background-color: transparent;}
    100% {background-color: rgba(0,0,0,0.9);}
}


@keyframes scrolltxt{
    0% {color: #000000;}
    100% {color: #ffffff;}
}
@-webkit-keyframes scrolltxt{
    0% {color: #000000;}
    100% {color: #ffffff;}
}
@-moz-keyframes scrolltxt{
    0% {color: #000000;}
    100% {color: #ffffff;}
}
@-o-keyframes scrolltxt{
    0% {color: #000000;}
    100% {color: #ffffff;}
}


@keyframes claim{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes claim{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-moz-keyframes claim{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-o-keyframes claim{
    0% {opacity: 0;}
    100% {opacity: 1;}
}


@keyframes brands{
    0% {background-position: bottom center; opacity: 1; }
    100% {background-position: top center; opacity: 1; }
}
@-webkit-keyframes brands{
    0% {background-position: bottom center; opacity: 1; }
    100% {background-position: top center; opacity: 1; }
}
@-moz-keyframes brands{
    0% {background-position: bottom center; opacity: 1; }
    100% {background-position: top center; opacity: 1; }
}
@-o-keyframes brands{
    0% {background-position: bottom center; opacity: 1; }
    100% {background-position: top center; opacity: 1; }
} 


@keyframes services{
    0% {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
    100% {-webkit-filter: grayscale(0%);filter: grayscale(0%);}
}
@-webkit-keyframes services{
    0% {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
    100% {-webkit-filter: grayscale(0%);filter: grayscale(0%);}
}
@-moz-keyframes services{
    0% {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
    100% {-webkit-filter: grayscale(0%);filter: grayscale(0%);}
}
@-o-keyframes services{
    0% {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
    100% {-webkit-filter: grayscale(0%);filter: grayscale(0%);}
}


@-webkit-keyframes WEBEDIA_GRA {
    0% {background-position: 0 0;}
    100% {background-position: 100% 100%;}
}

@-o-keyframes WEBEDIA_GRA {
    0% {background-position: 0 0;}
    100% {background-position: 100% 100%;}
}

@keyframes WEBEDIA_GRA {
    0% {background-position: 0 0;}
    100% {background-position: 100% 100%;}
}


@keyframes facebook {
    0% {color:#767676; }
    100% {color:#365899; }
}
@-webkit-keyframes facebook {
    0% {color:#767676; }
    100% {color:#365899; }
}
@-moz-keyframes facebook {
    0% {color:#767676; }
    100% {color:#365899; }
}
@-o-keyframes facebook {
    0% {color:#767676; }
    100% {color:#365899; }
}


@keyframes twitter {
    0% {color:#767676; }
    100% {color:#1da1f2; }
}
@-webkit-keyframes twitter {
    0% {color:#767676; }
    100% {color:#1da1f2; }
}
@-moz-keyframes twitter {
    0% {color:#767676; }
    100% {color:#1da1f2; }
}
@-o-keyframes twitter {
    0% {color:#767676; }
    100% {color:#1da1f2; }
}


/* MEDIA QUERIES */

@media (max-width: 800px) {
    #intro .container .claim {
        width: 100%; 
    }
    .map {
        background: url(img/map.png) no-repeat top left;
        background-size: 110%;
        width: 100%;
        height: 100vh;
        margin-top: -15vh;
    }
    #content {
        margin-top:0;
    }
    #content .numbers .glyphicon{
        font-size: 45px; 
    }
    .max{
        font-size: 25px;
    }
    #contact .row .col-md-4 iframe{
        margin-bottom: 15px;
    }
}
@media (max-width: 768px) {
    #collapse {
        background: #333333;
    }
    #collapse .nav li a {
        color:#ffffff;
        font-size:25px;
        font-weight: bold;
    }
    #content #brands {
        padding-bottom: 20px;
    }
    #brands p{
        margin-top: 10px;
    }
    #services .container .row .col-md-4 {
        margin-bottom: 10px;
        padding: 10% 0;
    }
    #services .container .row .col-md-4.exchange {
        margin-bottom: 0;
    }
    div#secblock {
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    #content #brands {
        margin: 0;
    }
    h2{
        font-size:45px;
    }
}