/* PARALLAX CUSTOM XA */

@font-face {
    font-family: 'OCRAEXT';
    src: url('fonts/OCRAEXT.eot');
    src: url('fonts/OCRAEXT.eot') format('embedded-opentype'),
         url('fonts/OCRAEXT.woff2') format('woff2'),
         url('fonts/OCRAEXT.woff') format('woff'),
         url('fonts/OCRAEXT.ttf') format('truetype'),
         url('fonts/OCRAEXT.svg#OCRAEXT') format('svg');
}

body, p {
    font-family: "OCRAEXT";
    font-size: 18px;
    line-height: 24px;
}

h1, h2, h3 {
	font-family: "OCRAEXT";
	line-height: 1.4em;
}

h2 {
	font-size: 60px;
	color: #CCC;
	text-transform: uppercase;
	line-height: 1.1em;
}

#intro h2 { font-size: 46px; }

#asit-jaus h2 { font-size: 90px; }

h3 {
	font-size: 30px;
	color: #FFF;
	line-height: 1.3em;
}

a { color: #666;}
a:hover { color: #777;}

#about p {
	font-size: 24px;
	color: #FFF;
	line-height: 1.2em;
}

.row {
	max-width: 1280px;
}

#widget .btn-o { width: 120px!important; border: 1px solid #f00!important; padding: 50px;}

.twitter-share-button { visibility: visible!important;}

.may { text-transform: uppercase; }

#nom li a {
    font-family: "OCRAEXT";
    text-transform: uppercase;
    color: #FFF;
    width: 100px;
    text-align: right;
    text-decoration: none;
    font-size:16px;
    line-height: 20px;
}

.boto {
	font-family: "OCRAEXT";
    text-transform: uppercase;
    color: #FFF;
    width: 240px;
    text-align: center;
    text-decoration: none;
    font-size:20px;
    line-height: 24px;
    padding: 12px 20px;
    background-color: rgba(255, 255, 255,0.5);
    -moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition:all 0.2s ease-in-out;
}

#menu a {
	font-family: "OCRAEXT";
    text-transform: uppercase;
    color: #FFF;
    width: 240px;
    text-align: center;
    text-decoration: none;
    font-size:20px;
    line-height: 24px;
    padding: 12px 16px;
    -moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition:all 0.2s ease-in-out;
}

.boto:hover, #menu a:hover {
    color: #333;
    background-color: rgba(255, 255, 255,0.8);
    cursor: pointer;

}

.loader, #loader { display: none; z-index: -1000;}

.bottom { position: absolute; bottom: 0; left: 0;}

.bottom-margin { position: absolute; bottom: 15vh; left: 0;}

.top-margin { position: absolute; left: 0; top: 5vh; }

.top-middle { margin-top: 45vh; }

.top-15 { margin-top: 15vh; }

.top-30 { margin-top: 30vh; }

.top-40 { margin-top: 40vh; }

.top-middle-left { margin-top: 40vh; }

.white { color: #FFF!important; }

.black { color: #333!important; }

footer { display: none; }

.bg {
	height: 100%!important;

}

.story {
	height: 100%;
	width: 100%;

}

#tech-no .bg, #blue-rave .bg, #calla .bg, #asit-jaus .bg,
#krafted .bg, #kid-dynamo .bg, #intro .bg,
#how .bg, #socialize .bg, #about .bg {

	height: 100%!important;
	width: 100%!important;
	left:0;

	padding: 0;
    position: absolute;
    width: inherit;
}


#blue-rave, #tech-no, #calla, #asit-jaus, #asit-jaus2,
#krafted, #kid-dynamo, #krafted-title, #kid-dynamo-bg,
#how, #how-bg, #socialize, #socialize-bg, #about, #about-bg, 
#blue-rave-text {
	height: 100%;
	color: white;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 0;
    position: relative;
    width: 100%;
}

#blue-rave {
	background: url(../images/blue-rave-bg1.png) 50% 50% no-repeat fixed;
	background-color:#003366;
}

#blue-rave .bg {
	background: url(../images/blue-rave-ts1.png) 50% 50% no-repeat fixed;
}

#blue-rave h3 { color: #036; }

#blue-rave .button { background-color: #036; text-transform: uppercase; }

#tech-no {
	background: url(../images/fondo-tech-no3.png) 50% 50% no-repeat fixed;
	background-color:#1a1a1a;
	z-index: -10;
}

#tech-no .bg {
	background: url(../images/tech-no-ts3.png) 50% 50% no-repeat fixed;
	z-index: -1;
}

#tech-no-bg {
	background: url(../images/platos-tech-no1.png) 50% 100% no-repeat fixed;
	height: 100%;
	width: 100%;
	z-index: 100;
}


#calla {
	background: #000 url(../images/noise-light2.jpg) 50% 50% no-repeat fixed;
	z-index: -10;
}

#intro  {
	background: none!important;
}

#intro .bg {
	background: #CCC url(../images/camiseta-blanca1.png) 50% 50% no-repeat fixed;
	z-index: -10;
}

#intro-bg {
	background: url(../images/xaxe-ani3.gif) 50% 50% no-repeat fixed;
	height: 100%;
	width: 100%;
	z-index: 100;
}

#calla .bg {
	background: url(../images/calla-balla1.png) 50% 50% no-repeat fixed;
	z-index: -1;
}

#calla-bg {
	background: url(../images/velo3.png) 50% 100% no-repeat fixed;
	height: 100%;
	width: 100%;
	z-index: 100;
}

#asit-jaus {
	background: url(../images/ooops-bg-a1.png) 50% 0 no-repeat fixed;
	background-color:#bf6600;
}

#asit-jaus2 {
	background: url(../images/ooops-bg-b1.png) 50% 0 no-repeat fixed;
}

#asit-jaus .bg {
	background: url(../images/asit-jaus1.png) 50% 50% no-repeat fixed;
}

#krafted {
	background: url(../images/krafted-bg6.jpg) 50% 50% no-repeat fixed;
	background-color:#000;

}

#krafted .bg {
	background: url(../images/krafted-ts1.png) 50% 50% no-repeat fixed;
}

#krafted-title {
	background: url(../images/krafted-title2.png) 50% 50% no-repeat fixed;
}

#kid-dynamo {
	background: #000 url(../images/kiddynamo-fondo1280e.jpg) 50% 0 no-repeat fixed;
}

#kid-dynamo .bg {
	background: url(../images/kid-dynamo-ts1.png) 50% 50% no-repeat fixed;
}

#kid-dynamo-bg {
	background: url(../images/washing-head3.png) 50% 50% no-repeat fixed;
}

#how {
	background: url(../images/fondo-xaxe-x1.png) 50% 50% no-repeat fixed;
	background-color:#393e3e;
}

#how .bg {
	background: url(../images/how-ts1.png) 50% 50% no-repeat fixed;
}

#how-bg {
	background: url(../images/how-text1.png) 50% 0 no-repeat fixed;
}

#how-bg2 {
	background: url(../images/fondo-xaxe-a1.png) 50% 50% no-repeat fixed;
}

#socialize {
	background: url(../images/socialize-bg3.jpg) 50% 50% no-repeat fixed;
	background-color:#808080;
}

#socialize .bg  {
	background: url(../images/xaxe-ts1.png) 50% 50% no-repeat fixed;
	z-index: 1;
}

#socialize-bg {
	background: url(../images/radial-grey1.png) 50% 50% no-repeat fixed;

}

#about {
	background: url(../images/camiseta-g1.png) 50% 50% no-repeat fixed;
	background-color:#5f3333;
}

#about-bg {
	background: url(../images/n-gotas1.png) 50% 50% no-repeat fixed;
}

#about .bg {
	background: url(../images/nandroid-ts1.png) 50% 50% no-repeat fixed;
	z-index: 1;
}


.vheight { width: 150vh; border: 1px solid #f00;}


#fond6 .bg, #fond6 .bg, #fond7 .bg, #fond7 .bg, #fond8 .bg, #hipster .bg, #third .bg, #traveler .bg {
    height: 100%!important;
}

/* DE STYLE */

#intro{
	background:url(images/titre.jpg) 0 no-repeat;
	background-color:#fec56d;
	background-position:center;
	background-size:auto;
	position: relative;
	height: 100%;
	width: 100%;
	color: white;
	margin: 0 auto;
	padding: 0;
}

#intro a.flecha {
	border:none;
	background-color:transparent;
	opacity:0.6;
	bottom:25px;
	position:fixed;
	left:50%;
	width:30px;
	margin-left:-15px;
	z-index:100;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition:all 0.2s ease-in-out;
}

#intro a.flecha:hover {
	opacity:1;
}

/* MARTOP */

.martop-1 { margin-top: 1rem; }

.martop-2 { margin-top: 2rem; }

.martop-3 { margin-top: 3rem; }

.martop-4 { margin-top: 4rem; }

.martop-5 { margin-top: 5rem; }

.martop-6 { margin-top: 6rem; }

.martop-8 { margin-top: 8rem; }

.martop-10 { margin-top: 10rem; }

.martop-12 { margin-top: 12rem; }

.martop-small-1 { margin-top: 1rem; }

.martop-small-2 { margin-top: 2rem; }

.martop-small-3 { margin-top: 3rem; }

.martop-small-4 { margin-top: 4rem; }

.martop-small-5 { margin-top: 5rem; }

.martop-small-6 { margin-top: 6rem; }

.martop-small-8 { margin-top: 8rem; }

.martop-small-10 { margin-top: 10rem; }

.martop-small-12 { margin-top: 12rem; }


@media only screen and (min-width: 40.063em) { /* MEDIUM TABLET min-width: 641px a 1024 */

    .martop-small-1, .martop-small-2, .martop-small-3, .martop-small-4, .martop-small-5,
    .martop-small-6, .martop-small-8, .martop-small-10, .martop-small-12 { margin-top: 0; }

    .martop-medium-1 { margin-top: 1rem; }

    .martop-medium-2 { margin-top: 2rem; }

    .martop-medium-3 { margin-top: 3rem; }

    .martop-medium-4 { margin-top: 4rem; }

    .martop-medium-5 { margin-top: 5rem; }

    .martop-medium-6 { margin-top: 6rem; }

    .martop-medium-8 { margin-top: 8rem; }

    .martop-medium-10 { margin-top: 10rem; }

    .martop-medium-12 { margin-top: 12rem; }

}

@media only screen and (min-width: 64.063em) { /* LARGE PC min-width: 1025px a 1440px */

    .martop-medium-1, .martop-medium-2, .martop-medium-3, .martop-medium-4, .martop-medium-5,
    .martop-medium-6, .martop-medium-8, .martop-medium-10, .martop-medium-12 { margin-top: 0; }

    .martop-large-1 { margin-top: 1rem; }

    .martop-large-2 { margin-top: 2rem; }

    .martop-large-3 { margin-top: 3rem; }

    .martop-large-4 { margin-top: 4rem; }

    .martop-large-5 { margin-top: 5rem; }

    .martop-large-6 { margin-top: 6rem; }

    .martop-large-8 { margin-top: 8rem; }

    .martop-large-10 { margin-top: 10rem; }

    .martop-large-12 { margin-top: 12rem; }

}