@font-face {
    font-family: 'pt_sansregular';
    
         url('../fonts/PTS55F-webfont.woff') format('woff'),
         
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'pt_sansbold';
            url('../fonts/PTS75F-webfont.woff') format('woff'),

    font-weight: normal;
    font-style: normal;

}

@font-face {
	font-family: 'Conv_ARDARLING';
	src: url('../fonts/ARDARLING.eot');
	src: local('☺'), url('../fonts/ARDARLING.woff') format('woff'), url('../fonts/ARDARLING.ttf') format('truetype'), url('../fonts/ARDARLING.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family:"Orange Juice";
	src:url("../fonts/orange_juice.eot?") format("eot"),url("../fonts/orange_juice.woff") format("woff"),url("../fonts/orange_juice.ttf") format("truetype"),url("../fonts/orange_juice.svg#orangejuice") format("svg");font-weight:normal;font-style:normal;}

@font-face {
    font-family: 'icbm_ss-25regular';
    src: url('../fonts/icbmss25-webfont.eot');
    src: url('../fonts/icbmss25-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/icbmss25-webfont.woff2') format('woff2'),
         url('../fonts/icbmss25-webfont.woff') format('woff'),
         url('../fonts/icbmss25-webfont.ttf') format('truetype'),
         url('../fonts/icbmss25-webfont.svg#icbm_ss-25regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* ************   GENERAL  ************* */

*{font-family: 'pt_sansregular',sans-serif;}

body{background: #1f1f1f;}

a,input{text-decoration: none !important; outline: none}

.row{margin: 0}
.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}


#message{position: fixed;width: 100%;height:100%;background: rgba(0,0,0,.7);z-index: 2000;font-size: 4vmin;color: #fff;padding: 5% 10%;text-align: justify;overflow-y: scroll;
	
}
.alert{position: fixed;top:3rem;width: 40%;left: 30%;z-index: 2000;}
.alert-info{top: 10rem;color: #000;left: 5%}

/* ************   INTRO  ************* */



#intro{height: 100vh;
	background-image: url('../media/warrior-intro.jpg');
	background-position:center top;
	background-size: cover;
	background-repeat: no-repeat;
	
text-align: center
}

#intro img{width: 20%;opacity: 0}

#intro .btn{width: 50%;font-size: 2rem;color: #000;margin-top: 6rem;background: rgba(255,255,255,.7);border: 3px solid #000;border-radius: 8px}
#intro #lecateau .btn,#intro #lyon .btn{width: 60%}
#intro #shop .btn{background: #D64E34; color: white; border-color:white; font-weight:700}
#intro .btn:hover{color: #fff;background: rgba(0,0,0,.4);border: 3px solid #fff;}
#intro #shop,#intro #toulouse,#intro #lecateau,#intro #lyon{position: fixed;top:-500px;}
#intro #toulouse{width: 100%}
#intro #toulouse .btn{margin-top: 8rem}
#intro #shop{width: 100%}
#intro #lecateau{width: 50%;left: 50%} .btn,
#intro #lyon{width: 50%}



/* ************   ACCUEIL  ************* */

#accueil-l,#accueil-l .carousel{ 
	height: calc(100vh - 70px);
/*
	background-image: url(../media/lisa.jpg);
	background-size:contain;
	background-position: center top;
*/
	
	}

#accueil-lc{ 
	height: calc(100vh - 70px);
	background-image: url(../media/lisa.jpg);
	background-size:contain;
	background-position: center top;
	
	}

#accueil-l .carousel-item {
 
  height: calc(100vh - 70px);
  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
	
#accueil-t{ 
	height: calc(100vh - 140px);
	background: #474747 url('../media/warrior-fonce.jpg');
	position: relative;	
	background-position: 150% 20%;
	background-size: auto 110%;
	background-repeat: no-repeat;
	}


#accueil-t iframe{position: absolute;width: 100%;height: 100%;top:0;left: 0;z-index: 0}
	
#entete{font-size: 3rem;color: #fff;text-shadow: 2px 8px 10px #000;text-align: center;
	position: absolute;top:50vh;left: 50%; z-index: 400;display: inline-block;
	
}

.video-lc{position: absolute;right: 10%;margin-top: 70px; width: 30%;z-index: 100;border: 2px solid black}
.entete{padding-top: 0vh;color: #fff;text-shadow: 2px 8px 10px #000}
.entete .defi{padding-top: 40vh;font-size: 3rem;text-align: left;padding-left: 10rem}
#accueil-l .defi{position: absolute;font-size: 3.5rem;z-index: 100;color: #fff;text-shadow: 2px 8px 10px #000;top:45vh;left: 10%;text-align: center}
.tf1{padding-top: .5rem;text-align: right;position: relative;padding-right: 1rem}
.tf1 a{cursor: pointer;border: 1px solid #ccc;padding: .25rem .5rem;}
.tf1 a img{height: 20px;vertical-align: top}
.tf1 a i{vertical-align: -10px;margin-right: .5rem}
.tf1 iframe{position: absolute;right: 0;top: 5rem;margin-right: 1rem;display: none}

.ouverture{position: fixed;height:80vh;font-size: 10vw;color: #f00;text-align: center;width: 90%;left: 5%;top: 10vh;background: rgba(0,0,0,.8);
	z-index: 2000;
}
.ouverture div{font-size: 2rem}

#question{position: absolute;bottom:0;width: 100%;background: #fff}

.lien-lyon{font-size: 1.2rem}

#question h4{color: #f00;text-align: center;letter-spacing: 2px;padding-top: 3.4vh;padding-bottom: 1vh;font-family: 'pt_sansregular', sans-serif;font-weight: 600;margin: 0;font-size: 1.3rem}

#question .btn-group{padding-top: 2vh;padding-bottom: 2vh;width: 100%;margin: 0}
#question .btn-group button{width: 100%;height: 100%;overflow: hidden}
#hfg,#act{font-size: 1rem;padding-top: .7rem;padding-bottom: .75rem;display: none;border-radius: 4px}

#question .col-lg-3,#question .col-lg-1{text-align: center}
#question p{text-align: left;margin-bottom: 0;font-size: .7rem}
#question p span{font-weight: bold;font-size: .8rem}

#question .col-lg-1{text-align: center;padding-top: 2vh}

#question .col-lg-1 img{width: 47px;}

#question .dropdown-menu{width: 100%;text-align: center;padding: 0;overflow: hidden}

#question .dropdown-item{font-weight: bold;border-bottom: 1px solid #eee;padding: 0}
#question .dropdown-item:hover{background: #f00;color: #fff}
#popup{position: fixed;z-index: 2000;width: 40vw;margin: 20vh 30vw;background: #000;color: #c33;text-align: center;padding:3rem 2rem ;border-radius: 4px}
#popup span{font-size: 1.2rem;font-style: italic}
 
/* ************   STAFF  ************* */

#staff{min-height: 100vh;width: 100vw;overflow-x: hidden;
	background-image: url('../media/warrior-gris-clair.jpg');
	background-position: right top;
	background-size: auto 100%;
	background-repeat: no-repeat;
	
color: #fff;text-align: center
}
.toulouse #staff{margin-top: 70px;}
#staff h1,#salle h1,#tarifs h1{padding-top: 10vh;padding-bottom: 7vh;font-size: 2.2rem;font-weight: bold}
.stafflyon{padding-top: 3vh !important;padding-bottom: 2vh !important;}


#staff h1 span,#salle h1 span,#tarifs h1 span,#tarifs h3 span{color: #f00}
#staff p{padding-bottom: 4vh}



#staff hr{color: #fff;background: #fff;height: 3px;width: 60%;}

#staff .col-lg-4{padding-top: 6vh;}
.prenom,.nom{font-size: 3rem}
.texte-staff{opacity: 0; position: absolute;background: #000;font-size: 1rem;height: 100%;padding: 1rem 3rem}
.texte-staff:hover{opacity: .9;}
.prenom{display:inline-block; font-family: 'icbm_ss-25regular';background: #4c2418;line-height: 2.4rem;margin-left: 2rem}

.nom{font-family:"Orange Juice";line-height: 2.6rem;font-size: 3.4rem}

#staffgauche,#staffdroite,#staffmilieu{position: relative;}

#staffgauche{right: -2000px}
#staffdroite{ left: -2000px}
#staffmilieu{opacity: 0}


/* ************   SALLE  ************* */

#salle{min-height: 100vh;background: #fff;text-align: center}
#salle .col-lg-4,#tarifs .col-lg-4{padding-right:0;padding-left: 0;}

.bloc-salle{position: relative;display: block; width: 300px;height:300px;margin: auto;}
.img-princ,.masque-img,.texte-salle{position: absolute;}
.img-princ{width: 90%;box-shadow: 0 0 4rem #000;left: 5%;top:5%;}
.texte-salle{width: 100%;color: #fff; font-size: 2rem;padding-top: 30%;line-height: 2.5rem;
}
.texte-salle i{padding-top: 2rem}
.masque-img{ width:100%;left: 0;top:0; opacity: 0;}
.bloc-salle:hover>.masque-img{opacity: .8}

#nw,#en,#wt{position: relative;}

#nw,#en,#wt{padding-top:500px;}



/* ************   TARIFS  ************* */
#tarifs{min-height: 300vh;
	background-image: url('../media/warrior-gris.jpg');
	background-position: left top;
	background-size: auto 100%;
	background-repeat: no-repeat;
color: #fff;text-align: center;}

#tarifs.tarifslyon{min-height: 250vh}
#tarifs .row{padding-bottom: 8rem;}


#tarifs h1{padding-top: 6rem;padding-bottom: 0;margin-bottom: 0}
#tarifs h3{font-size: 1.3rem}
#tarifs h4{font-size: 1.2rem}

#tarifs h1.tarifs-trait{color: transparent;padding-top: 0;border-top: 5px solid #f00;display: inline-block}
#tarifs h6{font-size: 1rem;font-weight: bold;line-height: 1.4rem}
#tarifs h6 span,#tarifs h5 span{background: #f00;padding-left: .2rem;padding-right: .2rem;padding-top: .1rem}
#tarifs h5{font-weight: bold}
#tarifs p{font-size: .6rem;font-weight: bold}

#tarifs .gauche{text-align: right}
.bloc-tarifs{position: relative;width: 280px;height: 280px}
.bulle{position: absolute; width: 70%;top:0;}
.picto{position: absolute; width: 40%;bottom:20px;}
.justify-content-lg-end .bulle,.justify-content-lg-start .picto{left: 0;}
.justify-content-lg-start .bulle,.justify-content-lg-end .picto,.justify-content-lg-start .texte-tarifs{right: 0}
.texte-tarifs{position: absolute; width: 70%;top:30px;color: #000;font-size: .9rem;font-weight: bold}

#tarifs-anniv.row{padding-bottom: 0}

#tarifs-evg-evjf .justify-content-lg-start{margin-top: -120px}




/* ************   TRAINING NINJA ECOLE ************* */

.training{min-height: 100vh;text-align: center;overflow: hidden}
#training{background: #f00;}

.noir{background: #000;color: #fff;}
.blanc{background: #fff;color: #000;}
.rouge{background: #f00;color: #fff;}

.noir p span,.noir h5 span,.blanc p span{color: #fff;background: #f00;}
.rouge p span,.rouge h5 span,.blanc h5 span,.rouge h6 span{color: #fff;background: #000;}
#training h1,#ecole h1{color: #fff;}

#ecole .blanc h1{color: #000}
#ninja{background: #fff;}
#ecole{background: #000;}


#training .entete,#ninja .entete,#ecole .entete,#franchise .entete,#news .entete{ 
	height: calc(100vh - 70px);
	background-size:cover;
	background-position: center top;
	background-repeat: no-repeat;
	font-size: 2.4rem;
	padding-top: 40vh
	}

#training .entete{ 
	background-image: url(../media/training.jpg);
	}
#ninja .entete{ 
	background-image: url(../media/ninja.jpg);
	}	
#ecole .entete{ 
	background-image: url(../media/ecole.jpg);
	}	
	
	
.training h1{font-size: 2.2rem;padding-top: 2rem}


.training h5{font-weight: bold;margin-bottom: 0}

#training h3 span{background: #000; color: #fff}
#ninja h3 span,#ecole h3 span{background: #f00; color: #fff}

#ecole .blanc span{background: #f00; color: #000;}
.toulouse #ecole .blanc span{font-size: .7rem;padding-top: .3rem;padding-bottom: .3rem}

#ecole .blanc h5{line-height: 1.3rem}

.training .container img{width: 10%;}
.training .container img{margin: 2rem auto 1rem;vertical-align: sub}
.training .container .euro img{margin: 0}

.training p{font-weight: bold;padding-bottom: 2rem;padding-top: 1rem;}
.training p span,#training h5 span{padding-left: .2rem;padding-right: .2rem;padding-top: .1rem;}
.training .euro p {font-size: .8rem;padding: 0;}


.gauche,.euro{padding: 0}
.gauche{margin-bottom: 3rem;}

#movegauche,#movedroite{position: relative;}
#movegauche{ left: -800px}
#movedroite{right: -800px}



/* ************   EVENEMENT ************* */

.evenement{min-height: calc(100vh - 70px);text-align: center;
	background: #474747 url('../media/warrior-fonce.jpg');
	background-position: 150% 20%;
	background-size: auto 110%;
	background-repeat: no-repeat;
}
.evenement .entete{padding-top: 15vh }
.evenement .col-lg-7,.evenement .col-lg-5{position: relative;min-height: 50vh}
.evenement .col-lg-7 img{position: absolute; width: 80%;left: 16%;top: 0}
.evenement .noir{position: absolute;width: 60%;left: 10%;margin-top: 30%;background-color: rgba(20,20,20,.95);text-align: left;padding: 1rem}
#parcours .noir{margin-top: 34%}

.evenement .noir p{font-size: .9rem;line-height: 1rem}
.evenement .noir h5 p{margin-bottom: .2rem}
.evenement .noir h6{display: inline-block;border-bottom: 3px solid #fff;font-size: 1.2rem;padding-bottom: .5rem}
#parcours .noir h6{margin-bottom: 2rem}

.evenement .col-lg-5 h1{font-family: 'Conv_ARDARLING';font-size: 20rem;color: #313131;line-height: 18rem }
.evenement .col-lg-5 h2{position: absolute;font-size: 3rem;color: #fff;font-weight: bold}

#parcours .col-lg-5 h1{line-height: 15rem}



 #teambuilding .col-lg-5 h2, #evgevjf .col-lg-5 h2{top:40%;left: 40%;}
#anniv .col-lg-5 h2{top:54%;left: 10%;}
#parcours .col-lg-5 h2{top:50%;left: 22%;}


.evenement .col-lg-5 h2 span{color: #f00}
.evenement .col-lg-5{text-align: left;overflow-x: hidden}
.evenement .btn{background: #1f1f1f;box-shadow: 0 0 2px #fff;margin-top: 8rem;margin-left: 2rem ;width: 16rem}
.evenement .btn:hover{background: #fff;box-shadow: 0 0 2px #000;color:#000}

#parcours .btn,#anniv .btn{margin-top: 12rem}

#info-compet{position: fixed;display: none; top:0;height: 100%;z-index: 2000;width: 100%;text-align: center;background: rgba(0,0,0,.7);}
#info-compet img{height: 96%;padding-top: 2%}

/* ************   FRANCHISE ************* */

#franchise{color: #fff}

#franchise .entete{ 
	
	background-image: url(../media/franchise.jpg);
	padding-top: 5vh;
	}

#franchise .slogan{padding-top: 35vh}
#franchise .col-lg-6 img{width: 65%;padding-top: 10%}

.texte-franchise{
	text-align: center;
	background: #474747 url('../media/warrior-fonce.jpg');
	background-position: 150% 20%;
	background-size: auto 110%;
	background-repeat: no-repeat;

}
.texte-franchise h1{font-size: 2.2rem;font-weight: bold;padding-bottom: 3rem}
.texte-franchise h1 span{color: #f00}

.texte-franchise img{width: 20%}

.texte-franchise hr{border: 3px solid #f00;width: 35% }

.texte-franchise p{padding: 2rem}
.texte-franchise p span{background: #f00}


/* ************   NEWS ************* */


#news{min-height: calc(100vh - 70px);background-image: url(../media/news.jpg);text-align: center;}


#news h4{color: #000;text-shadow: none;letter-spacing: .3rem;padding-top: 8rem;padding-bottom: 4rem;font-size: 1.6rem; font-weight: bold}

#news .col-lg-6,#news .col-lg-3{padding: 0;margin: 0}
.bloc-news{ position: relative;margin:0;padding: 0;margin-left: .4rem;}
#news .col-lg-6 a,#news .col-lg-3 a,#plusdenews{cursor: pointer}


#news img{width: 100%}

.texte-news{position: absolute;top: 0;left: 0;width: 100%;height: 100%;color: #fff;
	background: rgba(0,0,0,.6);font-size: 2rem;padding: 0 10%;line-height: 2.5rem;}

.parquatre .texte-news{font-size: 1.2rem;line-height: 1.4rem}
.texte-news:hover{background: rgba(100,0,0,.7);}

#bloc_actu{color: #fff;position: relative;display: flex}
#bloc_actu .col-lg-7{padding: 3rem 1rem;}
#bloc_actu .col-lg-5{padding-top: 1rem;padding-bottom: 2rem;margin-bottom: 2rem}
#bloc_actu img{width: 100%}
#bloc_actu h2{text-align: center;padding-top: 2rem}
#bloc_actu p{padding: .2rem 2rem;margin-bottom: 0}

#croix,#croix2{color: #ccc;position: absolute;z-index: 1000;}
#croix{top:10px;right: 10px;cursor: pointer;}
#croix:hover,#croix2:hover{color: #f00}

.video{position: relative; width: 100%; padding-top: 56.25%;}
.video iframe,.bloc-news iframe{position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;}


#suite_news{position: relative; margin-top: 1rem;display: none;width: 100% }
#suite_news h6{padding: .2rem;border-top: 1px solid #666;margin: 0 0 .5rem .4rem;text-align: left;font-style: italic }

#croix2{right: .4rem;top:.2rem;cursor: pointer}

#plusdenews{padding-left: .4rem;width: 100%;text-align: right;}
#plusdenews a{color: #666;}






#mentions_legales{background: #fff;padding: 5rem;}
#mentions_legales img{max-width: 100px;max-height: 50px}

/* ************   PIED  ************* */

.toulouse #pied{background: url('../media/fond-pied-toulouse.jpg');background-size:cover;}
.lyon #pied{background: url('../media/fond-pied-lyon.jpg');}


#pied{width: 100%;

	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;color: #fff;
}
	
	
#pied h6{font-weight: bold;padding-top: 2rem;padding-bottom: 1.5rem}
#pied input,#pied textarea,#pied button{border-radius: 0;width: 60%;margin-left: 20%;font-weight: bold;margin-bottom: 1rem;font-size: .9rem;
	padding: 0 .75rem;background: rgba(255,255,255,.7);color: #333 }
#pied input{height: 2rem}
#pied button{width: 30%; height: 2rem;margin-left: 60%;padding-left: 1rem;padding-right: 1rem}

#pied .row img{width:30%;padding-top: 2rem}
#pied p{color: inherit}
#pied .col-lg-4 i{padding: 1rem;color: #fff}
#fond{background: rgba(50,50,50,.8);color:#fff;padding:1.6rem .5rem;text-align: center}
#fond a{text-decoration: none;padding-left: 1rem;padding-right: 1rem;color: inherit}
#fond img{width: 26px;vertical-align: -7px;margin-right: 5px}

#pied ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #333;
    opacity: 1; /* Firefox */
}

#pied :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #000;
}

#pied ::-ms-input-placeholder { /* Microsoft Edge */
    color: #000;
}

.g-recaptcha{margin-left: 20%;display: none;margin-bottom: 1rem}






/* ************   CAROUSEL  ************* */

#carousel {
    width:100%;
    height: 500px;
    
  }
  #carousel a img {
	  width: 220px;
    display: hidden; /* hide images until carousel prepares them */
   box-shadow: 2px 2px 20px #000 ;
  }

#loader{padding-top:200px;color: #999}
#loader img{width: 128px;margin-top: 20px}
/* ************   ADMIN  ************* */

#jcrop{position: relative}
#modif{border: 2px solid #000;margin-top: 50px}



/* ************   RESPONSIVE  ************* */





@media (max-width: 991px){
	
	
	#intro img{width: 50%}
	#intro .btn{margin-top: 1rem;width: 60%}
	#intro #toulouse,#intro #lecateau,#intro #lyon{width: 100%}
	#intro #lecateau{margin-top: 30vh;left: 0}
	#intro #shop{margin-top: 11vh;left: 0}
	#intro #toulouse .btn{margin-top: 1rem;width: 80%}
	
	#entete{left: 10%;font-size: 2rem;top:25vh}
	#training .entete,#ninja .entete,#ecole .entete,#franchise .entete,#news .entete{ 
	height: calc(100vh - 40px);
	}
	
	.entete{padding-top: 3rem;}
	.entete .defi{font-size: 2rem !important;padding-top: 30vh !important;padding-left: 2rem !important}
	#accueil-l .defi{font-size: 2rem;top:45vh;left: 10%}
	#question h4{font-size: .9rem;padding-top: .2vh;line-height: .9rem}
	#question .btn-group{padding-top: .8vh;padding-bottom: .3vh;}
	#question .col-4{padding-right: 0;padding-top: .5rem}
	#question .col-lg-1{padding-top: .5vh;padding-bottom: .5vh}
	#staff{padding-bottom: 4rem}
	#tarifs-evg-evjf .justify-content-lg-start{margin-top: 0}
	.evenement .entete{padding-top: 3vh }
	.evenement .col-lg-7 img{width: 94%;left: 3%}
	.evenement .noir{width: 80%}
	.evenement .col-lg-5 h1{padding-top: 5rem}
	.evenement .btn{margin-top: 2rem;margin-bottom: 3rem}
	
	#franchise .slogan{padding-top: 5vh}
	#franchise .col-lg-6 img{width: 60%}
	
	#news .col-lg-6,#news .col-lg-3{margin-bottom: 2rem}
	.parquatre .texte-news{font-size: 2rem;line-height: 2.5rem}
	.gauche{margin-top: 3rem}
	
	#pied input,#pied textarea{width: 90%;margin-left: 5%; }
	#mentions_legales{padding: 15px;}
	.alert{width: 90%;left: 5%}
	
	#carousel {height: 700px;}
	#carousel img { width: 250px;}
	#loader img{width: 128px}
	
	.video-lc{ width: 80%;}
	#popup{width: 90vw;margin: 10vh 5vw;}
}