/*
customisation navbar bootstrap
*/
.container {
    max-width: 1280px;
}

body {
    background-color: #003333;
    font-family: Arial, Helvetica, sans-serif;
    word-wrap: anywhere;
}

main{
    padding:0.5rem;
}
h2 {
    text-align:center;
}

.banner {
    top:0px;
    text-align: center;
    width:100%;
}
.banusr {
    max-width:600px;
    width:100%;
}

.left {
    float : left;
}

.centered{
    display:block;
    margin-left: auto;
    margin-right: auto; 
}

.bluetitle{
    background-color: #007079;
    color:white;
}
.browntitle{
    background-color: brown;
    color:white;
    width:95%;
}

.libellemdp {
    color :red;
    font-size: small;
    margin-left: auto;
    margin-right: auto; 
}

button {
    display: block;
    background-color: #174200;
    color: white ;
    border-radius: 0.5rem;
}
button:hover {
    background-color: #7C7C7C; 
    color:black;
}

.buttondelete {
    background-color:transparent;
}
.buttondelete:hover {
    background-color:transparent;
}

.formbutton {
    position : relative;
    left:25%;
    margin-top: 1rem;
}

.right {
    float:right;
}

footer {
    font-size:0.7rem;
    max-width:1280px;
    width:100%;
    text-align: center;
    bottom:0%;
    background-color:white;
    margin-top:3rem;
    margin-right:auto;
    margin-left:auto;
}

.element{
    height: 2.5rem;
    min-width:15rem;
}

.console {
    background-color:black;
    color:#B0B0B0;
    border-radius:0.5rem;
    border : solid #F9FF9E 3px;
    min-width:30%;
    position:absolute;
    left:25%;
    top:25%;
}

.contain {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width:1280px;
    background-color : #F9FF9E;
    border : 1px  black solid;
    border-radius : 1rem;
    padding : 0.5rem;
    margin-top:3rem;
    margin-left:auto;
    margin-right:auto;
}
.containunvisible {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width:1280px;
}

.verticalbox{
    width:100%;
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    background-color : #FFF4C8;
    border : 1px #333300 solid;
    border-radius : 1rem;
    padding : 1rem;
    margin-top:0.5rem;
    margin-bottom: 0.5rem;
}

.displayleft {
    justify-content: left;
}

.horizontalbox{
    min-width:20%;
    max-width:46%;
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    background-color : #FFF4C8;
    border : 1px #333300 solid;
    border-radius : 1rem;
    padding : 1rem;
    margin-top:0.5rem;
    margin-bottom: 0.5rem;
    margin-left:0.5rem;
    margin-right:0.5rem;
}
@media all and (orientation: portrait) {
    .horizontalbox {
        max-width:100%;
        width:100%;
    }
}

.boxcentered {
    align-items: center;
}

.block {
    display:block;
}

.imagebox{
    max-width:95%;
    min-width:250px;
}
.small {
    min-width:90px;
}

@media all and (orientation: portrait) {
    .imagebox {
        width:75%;
        margin-left: auto;
        margin-right: auto;
    }
}
.videobox{
    max-width:95%;
    min-width:250px;
}

@media all and (orientation: portrait) {
    .videobox {
        max-width:100%;
        margin-left: auto;
        margin-right: auto;
    }
}

.textbox{
    min-width:10rem;
    max-width:45%;
}
.larg25 {
    max-width:25%
}.larg65 {
    max-width:65%
}
.max600 {
    max-width:600px;
}
.largseries {
    max-width:70%;
    width:calc(100% - 350px);
}
@media all and (orientation: portrait) {
    .textbox {
        max-width:100%;
    }
    .larg25{
        max-width:100%;
    }
    .larg65{
        max-width:100%;
    }
    .largseries {
        max-width:100%;
        width:100%;
    }
}


.counter {
    font-size: xx-large;
    font-weight: bold;
    background-color:aqua;
}
.formul {
    border : 1px black solid;
    border-radius : 1rem;
    padding-right : 1rem;
    padding-top : 1rem;
    padding-bottom : 1rem;

}

label {
    float :left;
    min-width:6rem;
}

input {
    border-radius: 1rem;
    width:calc(100% - 8rem);
}

.radio {
    min-width:1rem;
}

textarea {
    border-radius: 1rem;
    width:calc(100% - 8rem);
}

td {
    text-align: center;
    padding:0.2rem;
}

th {
    text-align: center;
}

table {
    width: 100%;
    table-layout: fixed;
}

.twps_75021d88112bc4fab326364318f21aa5{
    background-color : #FFF4C8;
    border : 2px #333300 solid;
    border-radius: 16px;
    margin-top:0.5rem;
    margin-bottom: 0.5rem;
    width:100%;
}
.twps_aa5 {
    width:100%;
}
.twps_202df03eabf7a63294d7d9a1d8fa8d73{
    width:100%;
}
.imagetuto{
    max-width:85%;
}

.commentsoverall{
    background-color : #E0E0E0;
    border : 2px #333300 solid;
    padding-top:0.5rem;
    padding-left:0.5rem;
} 

.avatarbox{
    font-size: small;
    width:250px;
    text-align: center;
}
.commentsbox{
    text-align:left;
    padding-left:0rem;
    min-width:290px;
    max-width:calc(100% - 250px);
}
.comments{
    width:100%;
    display: flex;
    justify-content: left;
    flex-wrap:wrap;
    padding : 1rem;
}

.compress{
    margin-bottom:-0.5rem;
}

.lang{
    background-color: transparent;
    width:100px ; 
    border:none;
    vertical-align: center;
}
.lang:hover {
    background-color: transparent;
    width:100px ; 
    border:none; 
}

.ytdetail {
    width:300px;
    height:190px;
}

.yttuto {
    width:560px;
    height:340px;
    margin-left: calc(50% - (560px / 2));
}
@media all and (orientation: portrait) {
    .yttuto {
        width:300px;
        height:190px;
        margin-left: calc(50% - (300px / 2));
    }      
}
.ytrealisations {
    width:560px;
    height:340px;
}
@media all and (orientation: portrait) {
    .ytrealisations {
        width:300px;
        height:190px;
        margin-left: calc(50% - (300px / 2));
    }     
}