/*
Theme Name:     PokemonFE
Description:    Theme enfant de Divi
Author:         Vincent GIORIA
Template:       Divi
Version:        1.1
*/

/*
Rajoutez vos règles de CSS personnalisé ci-dessous
*/

body {
    background: #415a6c;
    margin: 0;
}

#parallaxeAccueil, .parallax-container {
    position: fixed;
    overflow: visible;
    width: 100%;
    height: 500%;
}

.parallax-layer {
    width: 100%;
    height: 500%;
    position: fixed;
    left: 0;
    top: 0;
    background-position: top center!important;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.sky-0 {
    top: 0;
    z-index: 1;
    background-image: url('/wp-content/uploads/2018/05/background.svg');
}

.sky-1 {
    top: 0%;
    z-index: 2;
    background-image: url('/wp-content/uploads/2018/05/cloud-1.svg');
}

.sky-2 {
    top: 0%;
    z-index: 3;
    background-image: url('/wp-content/uploads/2018/05/cloud-2.svg');
}

.sky-3 {
    top: 0%;
    z-index: 4;
    background-image: url('/wp-content/uploads/2018/05/cloud-3.svg');
}
/*
.logo {
    top: 10%;
    z-index: 5;
    background-image: url('../img/logo.png');
    background-size: 30% !important;
}
*/

.forest-1 {
    top: 5%;
    z-index: 10;
    background-image: url('/wp-content/uploads/2018/05/forest-1.svg');
}

.forest-2 {
    top: 0;
    z-index: 15;
    background-image: url('/wp-content/uploads/2018/05/forest-2.svg');
}

.forest-3 {
    top: 25%;
    z-index: 20;
    background-image: url('/wp-content/uploads/2018/05/forest-3.svg');
}

.forest-4 {
    top: 30%;
    z-index: 25;
    background-image: url('/wp-content/uploads/2018/05/forest-4.svg');
}

.forest-5 {
    top: 50%;
    z-index: 30;
    background-image: url('/wp-content/uploads/2018/05/forest-5.svg');
}

.forest-6 {
    top: 100%;
    z-index: 35;
    background-image: url('/wp-content/uploads/2018/05/forest-6.svg');
}

.arrow {
    top: 92%;
    z-index: 40;
    background-image: url('/wp-content/uploads/2018/05/pokeball-arrow.svg');
    background-size: 3% !important;
    cursor: pointer; 
}

.content {
    position: absolute;
    top: 460%;
    background: #06292f;
    width: 100%;
    min-height: 1500px;
}

.content h1, .content h2 {
    color: #cff6e5;
    text-align: center;
	padding-bottom: 40px;
	margin-bottom: 30px;
	font-weight: 300;
	position: relative;
}



.content h1:after, .content h2:after { position: absolute; left: 50%; bottom: 0; content: ""; border-bottom: 3px solid #fff; margin-left: -30px; width: 60px; }

#main-footer { display: none; }
.logoAccueil { position: absolute; left: 40%; width: 40%; height: 50%; top: 200px; z-index: 100; animation: appear 2s forwards; }
.logoAccueil img { width: 50%; }

#logo { max-height: none; width: 130px; }

#main-header { background: rgba(0,0,0,0.3); box-shadow: none; padding: 20px; }
#main-header.et-fixed-header { box-shadow: none !important; }
#top-menu a { color: #fff; }

@keyframes appear {
	0% { opacity: 0; }
	100% { opacity: 1;  }
}

#main-content p { font-size: 20px; line-height: 30px; color: #fff; font-weight: 100; }
#main-content h3 { color: #fff; margin-bottom: 20px; }

#main-content .fullSection { max-width: none; width: 100%; font-size: 0; background: #cff6e5; padding: 0; margin: 20px 0; }
#main-content .fullSection .et_pb_column  { margin: 0; width: 50%; display: inline-block; float: none; vertical-align: middle; }
#main-content .fullSection .et_pb_column .et_pb_text_inner { padding: 0 80px; }
#main-content .fullSection .et_pb_column .et_pb_text_inner p, #main-content .fullSection .et_pb_column .et_pb_text_inner h3 { color: #415a6c; }
#main-content .fullSection .et_pb_image { min-height: 540px; }

#main-content .content .et_pb_row:not(.fullSection){ padding: 100px 0; }

/* heros accueil */
.heros { font-size: 0; margin: 60px 0; }
.heros .hero { display: inline-block; width: 50%; text-align: center; cursor: pointer; }
.heros .hero img { opacity: .5; transition: all .5s; max-width: 250px; }
.heros .hero:hover img { opacity: 1; }
.heros .hero span { font-size: 20px; color: #415a6c; }
#main-content .heros .hero h3 { color: #415a6c; }
.heros .hero .desc { margin: 30px 0; height: 0; overflow: hidden; transition: all .5s; max-width: 300px; margin: auto;  background: #cff6e5; }
.heros .hero.selected .desc { height: 150px; transition: all .5s; padding: 30px;  }
.heros .hero.selected img { opacity: 1; }

/* pokemon accueil */
.pokemons { font-size: 0; margin: 60px 0; }
.pokemons .pokemon { display: inline-block; width: 33.33%; text-align: center; cursor: pointer; position: relative; }
.pokemons .pokemon img { opacity: .3; transition: all .5s; max-width: 250px; }
.pokemons .pokemon:hover img { opacity: 1; }
.pokemons .pokemon span { font-size: 20px; color: #415a6c; }
#main-content .pokemons .pokemon h3 { color: #415a6c; }
.pokemons .pokemon .desc { position: absolute; left: 0; margin: 30px 0; opacity: 0; overflow: hidden; transition: all .5s; max-width: 300px; margin: auto;  background: #fff; padding: 0; width: 100%; }
.pokemons .pokemon:hover .desc { opacity: 1; transition: all .5s; padding: 30px;  }

#personnages:before { content: ""; background: #fff; left: -2000px; right: -2000px; top: 0; bottom: 0; position: absolute;  }
#personnages h2, #personnages h2:after  { color: #415a6c; border-color: #415a6c; }

/* synopsis */
#synopsis { background: #fff; }
#synopsis:before { content: ""; background: #fff; left: -2000px; right: -2000px; top: 0; bottom: 0; position: absolute;  }
#synopsis h2, #synopsis h2:after  { color: #415a6c; border-color: #415a6c; }
#synopsis p { color: #415a6c;}

#fille { display: none; }