/*##################################################################################################
----------------------------------------------------------------------------------------------------
------------------------------------  copyright L2CM 1999-2022 -------------------------------------
----------------------------------------------------------------------------------------------------
##################################################################################################*/


/*################################################################################################*/
/*------------------------------------------->  FONT <--------------------------------------------*/
/*################################################################################################*/


@font-face {
font-family: 'Saira';
font-style: normal;
src: url('/fonts/saira/Saira-Regular.ttf');
font-weight: 100;
}

@font-face {
font-family: 'SairaRoman-Regular';
font-style: normal;
src: url('/fonts/saira/Saira-Regular.ttf');
font-weight: 100;
}

@font-face {
font-family: 'Saira-Medium';
font-style: normal;
src: url('/fonts/saira/Saira-Medium.ttf');
font-weight: 500;
}

@font-face {
font-family: 'Saira-Light';
font-style: normal;
src: url('/fonts/saira/Saira-Light.ttf');
}

@font-face {
font-family: 'Saira-Thin';
font-style: normal;
src: url('/fonts/saira/Saira-Thin.ttf');
font-weight: 100;
}

@font-face {
font-family: 'Saira-ExtraLight';
font-style: normal;
src: url('/fonts/saira/Saira-ExtraLight.ttf');
font-weight: 250;
}

@font-face {
font-family: 'Saira-Bold';
font-style: normal;
src: url('/fonts/saira/Saira-Bold.ttf');
font-weight: 700;
}

@font-face {
font-family: 'Saira-ExtraBold';
font-style: normal;
src: url('/fonts/saira/Saira-ExtraBold.ttf');
font-weight: 800;
}

@font-face {
font-family: 'SairaRoman-ExtraLight';
font-style: normal;
src: url('/fonts/saira/Saira-ExtraLight.ttf');
font-weight: 250;
}

@font-face {
font-family: 'Saira-Black';
font-style: normal;
src: url('/fonts/saira/Saira-Black.ttf');
font-weight: 900;
}

@font-face {
font-family: 'Saira-noir';
font-style: normal;
src: url('/fonts/saira/Saira-Black.ttf');
font-weight: 900;
}

/*################################################################################################*/
/*-------------------------->  Styles defini par defaut  pour le site <---------------------------*/
/*################################################################################################*/

html {
/* make sure we use up the whole viewport */
width: 100%;
min-height: 100vh;
/* for debugging, a red background lets us see any seams */
background-color: 001123;
}
body {
/* make sure we use the full width but allow for more height */
width: 100%;
min-height: 100vh; /* this helps with the sticky footer */
}

body
{
font: 15px "Saira",sans-serif;
color: #333;
background-color: #001123;
z-index:0;
border: 0px;
margin:0px;
}

/*################################################################################################*/
/*--------------------------------------->     header      <--------------------------------------*/
/*################################################################################################*/

header {

}

div#head {
position: relative;
display:block;
}


/*################################################################################################*/
/*------------------------------------->        Skin           <----------------------------------*/
/*################################################################################################*/

.carousel-inner {
border-radius: 15px;
}


.note-editor.note-frame, .note-editor.note-airframe {
border: 0px solid #d82410;
}

.note-btn {
order: 1px solid #ff0000;
color: #fff;
background-color: #ff0000;
border-color: #ff0000;
}

.note-btn:hover, .note-btn:focus, .note-btn.focus {
color: #fff;
text-decoration: none;
border: 1px solid #9d000000;
background-color: #de0000;
outline: 0;
border-radius: 1px;
}

.note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar, .note-editor.note-airframe .note-statusbar .note-resizebar .note-icon-bar {
border-top: 1px solid #ffffff88;
}

.note-editor.note-frame .note-statusbar, .note-editor.note-airframe .note-statusbar {
background-color: #ff0000;
border-top: 0px solid #00000032;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}

.note-btn:active, .note-btn.active {
color: #d82410;
border: 1px solid #b5b5b5;
background-color: #ffffff;
box-shadow: none;
}

.note-toolbar {
border-bottom: 1px solid #ff0000;
background-color: #ff0000;
border-color: #ff0000;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}

/*################################################################################################*/
/*------------------------------------->         Nav           <----------------------------------*/
/*################################################################################################*/

.navbar {
background-color: #F000;
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
color: #fcfcfc;
}

#a_hom{
width: 360px;
height: 120px;
background-color: aliceblue;
margin-top: -46px;
margin-left: 20px;
margin-right: 20px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.stk {background-color: #011122e0;}

.stk #a_hom > img {
height: 56px;
margin-top: 40px;
}

.stk #a_hom{
border-bottom-left-radius: 0px;
border-bottom-right-radius:0px;
}


#rs {
display: block;
transition: .5s;
}

.stk #rs {
display: none !important;;
}

nav, .navbar {
z-index: 99;
border-radius: 0px;
}

/* Magick stiky */
nav, .navbar {
top: -1px;                       /* ➜ the trick */
padding: 1em;
padding-top: calc(1em + 1px);    /* ➜ compensate for the trick */
transition: .5s;
}

/* .navbar {margin-bottom: 40px;} */

.navbar-nav {
margin-right: 15px
}

.navbar-light .navbar-nav .nav-link {
color: rgb(255 0 0);
font-family: 'Saira-Light';
font-size: 1.1em;
}

.navbar.bg-light {
border-color: #dedede00;
}

nav.stk{
box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);
padding: 0px;
}

/* nav > #rs{
display: none;
} */

.nav-interlayer{
font-family: 'Saira-Black' !important;;
}

.navbar-light .navbar-toggler {
color: rgb(255 0 0 / 80%);
background-color: #F00;
margin-top: 25px;
border-color: rgb(255 0 0);
}

.navbar-toggler {
padding: 0rem 0rem;
}

.navbar-nav .active a{
font-family: 'Saira-Bold' !important;
font-weight: 900;
}

#navbarSupportedContent > div{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;
}

.navbar {
border-width: 0px;
border-style: solid;
}


/*################################################################################################*/
/*--------------------------------->          Article            <--------------------------------*/
/*################################################################################################*/


article, .note-frame {
margin-top: 50px;
text-align: justify ;
text-decoration: none;
color: #EEE ;
/* border: 2px solid #CCC; */
border-radius: 0px;
/* background: rgba(255,255,255,0.92); */
z-index:10;
/*min-height: calc(100vh - 512px);*/
}

h1, h2, h3 {
color: #F00;
}

.col-form-label {
color: #ccc;
}



@media all and (max-device-width: 822px)
{
article, .note-frame {
margin-top: -50px;
}
}

/*################################################################################################*/
/*----------------------------------->         widget           <---------------------------------*/
/*################################################################################################*/





/*################################################################################################*/
/*------------------------------------>         Page            <---------------------------------*/
/*################################################################################################*/


/* pre#pre_kas {
width:290px;
font: 1em 'Lucida Grande', sans-serif,Verdana;
background: #CCC ;
border: 1px solid #666 ;
padding: 8px ;
color: #000 ;
overflow:auto;
max-height: 400px;
} */

/*################################################################################################*/
/*--------------------------------->          Form            <-----------------------------------*/
/*################################################################################################*/


/*################################################################################################*/
/*--------------------------------->          Special            <--------------------------------*/
/*################################################################################################*/

.list-group-item:hover{background-color: #e8e8e8;}

/*################################################################################################*/
/*------------------------------------>        Footer         <-----------------------------------*/
/*################################################################################################*/


footer {
font-size: medium !important;
margin-top:93px;
bottom: 0;
width: 100%;
background: #bc0606;
color: #fff;
min-height: 280px;
font-size: 0.7em;
padding: 40px;
display: block;
z-index: 5;
}

footer  a {
color: #adadad ;
text-decoration: none;
}


span#mention_print {

display: none;

}

#logo-tp-footer img {
max-height: 150px;
}

/*################################################################################################*/
/*------------------------------------>     Version Mobile    <-----------------------------------*/
/*################################################################################################*/


@media all and (max-device-width: 822px)
{
.navbar-collapse > div{
display: flex;flex-wrap: nowrap;flex-direction: row;justify-content: center;

background-color: rgb(255 255 255 / 90%);
border: #FFF solid 1px;
padding-left: 12px;
border-radius: 6px;
box-shadow: 0px 3px 20px 0px #3333333d;
}

.bg-light {
height: 1px;
}

article {
padding-top: 80px;
}

#logo-tp-footer img {
max-height:0px;
display: none;
}

}