/* 
Theme Name: css depart
Description: The first css start created
Version: 0.1
Author: balde ousmane  
 */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
* {
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  transition: all .5s ease;
}
* { box-sizing: border-box; }

html {font-size: 62.5%; }

@font-face {      
  font-family: "soccerleague";
src: url("SoccerLeague.ttf") format("opentype");
}

/***********************************************************************************/
/******VARIABLE GLOBALE**/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***************FLEX**************************************************************/
.dflex 		{ display: flex; 			}
.diblock	{ display: inline-block;	}

.flex_column	{ flex-direction: column;	}
.flex_wrap		{ flex-wrap: wrap;			}
.justify_content_center {justify-content: center;}
.space_around	{ justify-content: space-around;	}
.space_between	{ justify-content: space-between;	}
.flex_start		{ justify-content: flex-start;		}
.flex_end		{ justify-content: flex-end;		}
.space_evenly	{ justify-content: space-evenly;	}
.align_item_center		{ align-items: center;				}

.vbottom		{ vertical-align: bottom;			}
.centerligne    { display: flex; justify-content: center;}
.dflexcenter    {display: flex;justify-content: center;align-items: center;}
/******************************************************************************************/
/******************************************************************************************/
/************************************HEIGHT&WIDTH******************************************/
/******************************************************************************************/
/******************************************************************************************/
.h100vh{height: 100vh;}
.h3vh{height: 3vh;}
.h5vh{height: 5vh;}
.h7vh{height: 7vh;}
.h8vh{height: 8vh;}
.h10vh{height: 10vh;}
.h12vh{height: 12vh;}
.h13vh{height: 13vh;}
.h18vh{height: 18vh;}
.h20vh{height: 20vh;}
.h30vh{height: 30vh;}
.h40vh{height: 40vh;}
.h50vh{height: 50vh;}
.h60vh{height: 60vh;}
.h70vh{height: 70vh;}
.h75vh{height: 75vh;}
.h80vh{height: 80vh;}
.h83vh{height: 83vh;}
.h90vh{height: 90vh;}
.h95vh{height: 95vh;}
.hauto {height: auto;}
.h50px	{ height: 50px;		}
.h100px	{ height: 100px;	}
.h150px	{ height: 150px;	}
.h335px	{ height: 335px;	}

.h10ps	{ height: 10%;		}
.h15ps	{ height: 15%;		}
.h20ps	{ height: 20%;		}
.h30ps	{ height: 30%;		}
.h40ps	{ height: 40%;		}
.h50ps	{ height: 50%;		}
.h60ps	{ height: 60%;		}
.h70ps	{ height: 70%;		}
.h80ps	{ height: 80%;		}
.h90ps	{ height: 90%;		}
.h100ps	{ height: 100%;		}

.w8ps{width: 8%;}
.w10ps{width: 10%;}
.w15ps{width: 15%;}
.w20ps{width: 20%;}
.w30ps{width: 30%;}
.w40ps{width: 40%;}
.w50ps{width: 50%;}
.w60ps{width: 60%;}
.w65ps{width: 65%;}
.w70ps{width: 70%;}
.w80ps{width: 80%;}
.w90ps{width: 90%;}
.w97ps{width: 97%;}
.w100ps{width: 100%;}
.wmin{width: min-content;}


.w5vh{width: 5vh;}
.w7vh{width: 7vh;}
.w10vh{width: 10vh;}
.w15vh{width: 15vh;}
.w20vh{width: 20vh;}
.w30vh{width: 30vh;}
.w35vh{width: 35vh;}
.w40vh{width: 40vh;}
.w50vh{width: 50vh;}
.w70vh{width: 70vh;}
.w80vh{width: 80vh;}
.w90vh{width: 90vh;}
.w60vh{width: 60vh;}
.w40vh{width: 40vh;}

.w20px		{ width: 20px;		}
.w165px		{ width: 165px;		}
.w1270px	{ width: 1270px;	}
.w1209px	{ width: 1209px;	}

/******************************************************************************************/
/******************************************************************************************/
/************************************BACKGROUND_COLOR**************************************/
/******************************************************************************************/
/******************************************************************************************/
.bgred         {background-color: red;}
.bgblue        {background-color: #3C5A9A;}
.bgviolet      {background-color: violet;}
.bgyellow      {background-color: yellow;}
.bgjaune      {background-color: #fb8c00;}
.bgblack       {background-color: black;}
.bgarticle     {background-color: #f5f3f3;}
.bggreen       {background-color: green;}
.bgOrangeMissionLocale {background-color: #f06409;}
.bgblackmissionlocale{background-color: #212529;}
.bgwhite       {background-color: white;}
.bgterrain     {background-image: url("../img/terrain.jpg");background-size: 100% 100%;background-repeat: no-repeat;  }
/******************************************************************************************/
/******************************************************************************************/
/************************************BACKGROUND_IMG**************************************/
/******************************************************************************************/
/******************************************************************************************/
.background_centpcent{background-size: 100% 100%;}
.background_cover{background-size: cover;}

/******************************************************************************************/
/******************************************************************************************/
/************************************COLOR*************************************************/
/******************************************************************************************/
/******************************************************************************************/
.clrwhite{color:white;}
.clrred{color: red;}
.clrgreen{color:green;}
.clryellow{color: yellow;}
.clrjaune{color: #fb8c00;}
.clrgrisprojet{color: grey;}
.clrblack{color: #000000;}
.clrblueportusien{color: #3C5A9A;}
.clrorangemissionlocale{color: #f06409;}
.clrredfonce{color:rgb(138, 5, 5);}

.txt_shadow{text-shadow: 0 0 2px #fb8c00, 0 0 30px #fb8c00, 5px 9px 5px #333, 0 0 150px #fb8c00;}
/******************************************************************************************/
/******************************************************************************************/
/************************************line-height*************************************************/
/******************************************************************************************/
/******************************************************************************************/
.lh20px         { line-height: 20px;    }
.lh30px         { line-height: 30px;    }
.lh40px         { line-height: 40px;    }
/******************************************************************************************/
/******************************************************************************************/
/************************************Epaisseur_ecriture************************************/
/******************************************************************************************/
/******************************************************************************************/
.bold           { font-weight: bold;    }
.semiBold       { font-weight: 600;     }
.regular        { font-weight: 400;     }
.extralight     { font-weight: 200;     }

/******************************************************************************************/
/******************************************************************************************/
/************************************padding&margin****************************************/
/******************************************************************************************/
/******************************************************************************************/
.center 		{ margin: 0 auto;		}

.nopadding      { padding: 0;          	}

.p10px 			{ padding: 10px;		}
.p20px 			{ padding: 20px;		}
.p30px 			{ padding: 30px;		}
.p40px 			{ padding: 40px;		}
.p50px 			{ padding: 50px;		}

.pt10px			{ padding-top: 10px;	}
.pt20px         { padding-top: 20px;    }
.pt30px         { padding-top: 30px;    }
.pt40px       	{ padding-top: 40px;    }
.pt50px         { padding-top: 50px;    }
.pt100px		{ padding-top: 100px;	}

.pr10px			{ padding-right: 10px;	}
.pr20px			{ padding-right: 20px;	}
.pr30px			{ padding-right: 30px;	}
.pr40px			{ padding-right: 40px;	}
.pr50px			{ padding-right: 50px;	}

.pb10px			{ padding-bottom: 10px;	}
.pb20px			{ padding-bottom: 20px;	}
.pb30px			{ padding-bottom: 30px;	}
.pb40px			{ padding-bottom: 40px;	}
.pb50px			{ padding-bottom: 50px;	}

.pl10px			{ padding-left: 10px;	}
.pl20px			{ padding-left: 20px;	}
.pl30px			{ padding-left: 30px;	}
.pl40px			{ padding-left: 40px;	}
.pl50px			{ padding-left: 50px;	}

.nomargin		{ margin: 0;			}

.m10px			{ margin: 10px;			}
.m20px			{ margin: 20px;			}
.m30px			{ margin: 30px;			}
.m40px			{ margin: 40px;			}
.m50px			{ margin: 50px;			}

.mt10px			{ margin-top: 10px;		}
.mt20px			{ margin-top: 20px;		}
.mt30px			{ margin-top: 30px;		}
.mt40px			{ margin-top: 40px;		}
.mt50px			{ margin-top: 50px;		}

.mt1ps			{ margin-top: 1%;		}
.mt2ps			{ margin-top: 2%;		}
.mt3ps			{ margin-top: 3%;		}
.mt4ps			{ margin-top: 4%;		}
.mt8ps			{ margin-top: 8%;		}
.mt5ps           { margin-top: 5%;       }
.mt10ps			{ margin-top: 10%;		}
.mt20ps			{ margin-top: 20%;		}
.mt30ps			{ margin-top: 30%;		}
.mt40ps			{ margin-top: 40%;		}
.mt50ps			{ margin-top: 50%;		}
.mt60ps			{ margin-top: 60%;		}
.mt70ps			{ margin-top: 70%;		}


.mr5ps           { margin-right: 5%;       }
.mr10px			{ margin-right: 10px;	}
.mr20px			{ margin-right: 20px;	}
.mr30px			{ margin-right: 30px;	}
.mr40px			{ margin-right: 40px;	}
.mr50px			{ margin-right: 50px;	}

.mb4vh			{ margin-bottom: 4vh;	}
.mb7vh			{ margin-bottom: 7vh;	}
.mb10px			{ margin-bottom: 10px;	}
.mb20px			{ margin-bottom: 20px;	}
.mb30px			{ margin-bottom: 30px;	}
.mb40px			{ margin-bottom: 40px;	}
.mb50px			{ margin-bottom: 50px;	}
.mb80ps    	    { margin-bottom: 80%;	}
.mb100ps    	{ margin-bottom: 100%;	}

.ml1ps           { margin-left: 1%;       }
.ml3ps           { margin-left: 3%;       }
.ml4ps           { margin-left: 4%;       }
.ml5ps           { margin-left: 5%;       }
.ml57vh          { margin-left: 57vh;    }
.ml10px			{ margin-left: 10px;	}
.ml20px			{ margin-left: 20px;	}
.ml30px			{ margin-left: 30px;	}
.ml40px			{ margin-left: 40px;	}
.ml50px			{ margin-left: 50px;	}

.ml5ps			{ margin-left: 5%;	}
.ml10ps			{ margin-left: 10%;	}
.ml20ps			{ margin-left: 20%;	}
.ml17ps         { margin-left: 17%;}
.ml30ps			{ margin-left: 30%;	}
.ml40ps			{ margin-left: 40%;	}
.ml50ps			{ margin-left: 50%;	}

/******************************************************************************************/
/******************************************************************************************/
/************************************FONTS**************************************************/
/******************************************************************************************/
/******************************************************************************************/
.fs2rem         { font-size: 2rem;}
.fs3rem			{ font-size: 3rem;}
.fs4rem			{ font-size: 4rem;}
.fs5rem         { font-size: 5rem;}
.fs10			{ font-size: 10px;	}
.fs15			{ font-size: 15px;	}
.fs18			{ font-size: 1.8rem;	}
.fs20			{ font-size: 2rem; 		}
.fs27           { font-size: 27px;}
.fs40			{ font-size: 4rem;		}
.fs50			{font-size: 50px;}
.fs60			{font-size: 60px;}
.fs70			{font-size: 70px;}
.fs80			{font-size: 80px;}
.fs90			{font-size: 90px;}
.fs100			{font-size: 100px;}
.soccerleague	{font-family: "soccerleague";}
.segoe	{font-family: 'Segoe UI';}
.barlow	{ font-family: 'Barlow', sans-serif;	}
.barlow-condensed	{ font-family: 'Barlow condensed', sans-serif;	}
.sans_serif{font-family: sans-serif;}

.txtdecorationnone	{ text-decoration: none;	}

.txt_right	{ text-align: right;	}

.txt_center	{ text-align: center;	}

.uppercase	{ text-transform: uppercase;	}
/******************************************************************************************/
/******************************************************************************************/
/************************************POSITIONNEMENT******************************************/
/******************************************************************************************/
/******************************************************************************************/
.relative 	{ position: relative;	}
.absolute	{ position: absolute;	}
.fixed	{ position: fixed;	}



.right0		{ right: 0;				}
.right13	{ right: 13%;				}
.right15    { right: 15%;           }
.right19    { right: 19%;           }
.right20    { right: 20%;           }
.right22    { right: 22%;           }
.right23    { right: 23%;           }
.right26    { right: 26%;           }
.right28    { right: 28%;           }
.right33    { right: 33%;           }
.right35    { right: 35%;           }
.right47    { right: 47%;           }
.left0		{ left: 0;				}
.left1      {left: 1%;}
  
.left5      {left: 5%;}
.left11      {left: 11%;}
.left13      {left: 13%;}
.left15      {left: 15%;}
.left24      {left: 24%;}
.leftmoins21 {left: -21%;}
.left26      {left: 26%;}
.left32      {left: 32%;}
.left65      {left: 65%;}
.left88    { left: 88%;           }
.left91      {left: 91%;}

.top0{top: 0%;}
.top5{top: 5%;}
.top9{top: 9%;}
.top10{top: 10%;}
.top12{top: 12%;}
.top13{top: 13%;}
.top20{top: 20%;}
.top25{top: 25%;}
.top45{top: 45%;}
.top65{top: 65%;}
.top85{top: 85%;}
/******************************************************************************************/
/******************************************************************************************/
/************************************BORDERS******************************************/
/******************************************************************************************/
/******************************************************************************************/
.bb1	{ border-bottom: 1px solid;	}

.b-color-white	{ border-color: #ffffff;	}

.b-portusien{border: 1px solid #3C5A9A;}

.bloc {overflow: scroll;}
.bloc::-webkit-scrollbar {									/* Scrollbars */
width: 10px;
height: 2vh;

}
.bloc::-webkit-scrollbar-thumb {								/* Barre */
border: solid 0 transparent;
border-right-width: 4px;
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 9px 5px;
-webkit-border-bottom-right-radius: 9px 5px;
-webkit-box-shadow: inset 0 0 0 1px #f06409, inset 0 0 0 6px #f06409;
}
.bloc::-webkit-scrollbar-thumb:hover {						/* Barre */
-webkit-box-shadow: inset 0 0 0 1px #f06409, inset 0 0 0 6px #f06409;
}
.bloc::-webkit-scrollbar-thumb:horizontal {					/* Barre du bas */
border-right-width: 0;
border-bottom-width: 4px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px 9px;
-webkit-border-bottom-left-radius: 5px 9px;
}

html::-webkit-scrollbar {									/* Scrollbars */
width: 10px;
height: 2vh;

}
html::-webkit-scrollbar-thumb {								/* Barre */
border: solid 0 transparent;
border-right-width: 4px;
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 9px 5px;
-webkit-border-bottom-right-radius: 9px 5px;
-webkit-box-shadow: inset 0 0 0 1px #f06409, inset 0 0 0 6px #f06409;
}
html::-webkit-scrollbar-thumb:hover {						/* Barre */
-webkit-box-shadow: inset 0 0 0 1px #f06409, inset 0 0 0 6px #f06409;
}
html::-webkit-scrollbar-thumb:horizontal {					/* Barre du bas */
border-right-width: 0;
border-bottom-width: 4px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px 9px;
-webkit-border-bottom-left-radius: 5px 9px;
}
/**********************************************************************************/
/**********************************************************************************/
/**********************************************************************************/
/**********************************************************************************/
/********************************* CLASSES SPES ************************************/
/**********************************************************************************/
/**********************************************************************************/
/**********************************************************************************/
/**********************************************************************************/

.topnav {
  overflow: hidden;
  background-color: rgb(12, 12, 12);
}

.topnav a {
  font-family: 'soccerleague';
  float: center;
  display: block;
  color: #f2f2f2!important;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-style: 5rem;

}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}
/* Form */
.form {
	background: #212529;
	max-width: 500px;
	padding: 15px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	text-align: center;
  }
  
  .form .thumbnail {
	background: whitesmoke;
	width: 150px;
	height: 150px;
	margin: 0 auto 30px;
	border-top-left-radius: 100%;
	border-top-right-radius: 100%;
	border-bottom-left-radius: 100%;
	border-bottom-right-radius: 100%;
	box-sizing: border-box;
  }
  .form .thumbnail img {
	display: block;
	width: 70%;
  }
  .form input {
	outline: 0;
	background: #f2f2f2;
	width: 100%;
	border: 0;
	margin: 0 0 15px;
	padding: 15px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	box-sizing: border-box;
	font-size: 14px;
  }
  .form button {
	outline: 0;
	background: #EF3B3A;
	width: 100%;
	border: 0;
	padding: 15px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	color: #FFFFFF;
	font-size: 14px;
	-webkit-transition: all 0.3 ease;
	transition: all 0.3 ease;
	cursor: pointer;
  }
  .form .message {
	margin: 15px 0 0;
	color: #b3b3b3;
	font-size: 12px;
  }
  .form .message a {
	color: #EF3B3A;
	text-decoration: none;
  }
  .form .register-form {
	display: none;
  }
  
  .container {
	position: relative;
	z-index: 1;
	max-width: 300px;
	margin: 0 auto;
  }
  .container:before, .container:after {
	content: "";
	display: block;
	clear: both;
  }
  .container .info {
	margin: 50px auto;
	text-align: center;
  }
  .container .info h1 {
	margin: 0 0 15px;
	padding: 0;
	font-size: 36px;
	font-weight: 300;
	color: #1a1a1a;
  }
  .container .info span {
	color: #4d4d4d;
	font-size: 12px;
  }
  .container .info span a {
	color: #000000;
	text-decoration: none;
  }
  .container .info span .fa {
	color: #EF3B3A;
  }
  
  /* END Form */


  
@media screen and (max-width: 1000px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: center;
    display: block;
  }
  .resp_liens{
    font-size: 5rem;
  }
}

@media screen and (max-width: 1000px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;   
  }
  .responsive_video{
		width: 100%;
		height: fit-content;
		background-color: #212529;
	}
	.responsive_video_page{
		width: 100%;
		height: 60vh;
		background-color: #212529;
	}
	.resp_page{
		flex-direction: column;
		background-color: #212529;

  }
  .resp_div_total{
    width: 100%;
    height: 100%;
  }
	.resp_width_video{
        width: 100%;
  }
  .resp_youtube{
    height: 500px;
    width: 100%;
  }
  .responsive_video{
    width: 100%;
    height: fit-content;
  }
  .table td, .table th {
    padding: .75rem;
    vertical-align: top;
    font-size: 50px;
    border-bottom: 5px solid black;
  }
  .table thead th {
    vertical-align: bottom;
    font-size: 50px;
    border-bottom: 2px solid #dee2e6;
  }
  a {
    transition: all .5s ease;
    font-size: 50px;
    text-decoration: none;
  }
}