body{margin: 0;	padding: 0; font-family: Open Sans, sans-serif; font-size: 0.9em; color: black; min-width: 375px;}
@media (max-width: 1200px){body{font-size: 0.9em;}}
@media (max-width: 992px){body{font-size: 0.9em;}}
@media (max-width: 768px){body{font-size: 0.8em;}}

h1{}
@media (max-width: 1200px){h1{font-size: 2.0em;}}
@media (max-width: 992px){h1{font-size: 1.8em;}}
@media (max-width: 768px){h1{font-size: 1.6em;}}

/*.container{display: flex; flex-direction: row; width: 95%; min-width: 360px; line-height: 1.6; margin: auto; font-size:0px; margin-top: -20px; margin-bottom: 20px; padding-left: 10px; padding-right: 10px;}*/
.container{display: flex; flex-direction: row; width: 95%; min-width: 360px; line-height: 1.6; margin: auto; font-size: 14px; margin-top: -20px; margin-bottom: 20px; padding-left: 10px; padding-right: 10px;}

.container h1{font-size:30px;}
.container h2{font-size:24px;}
.container p{font-size:14px;}
.container div {word-wrap: break-word;}


/*.container{display: flex; flex-direction: row; width: 95%; min-width: 360px; line-height: 1.6; font-size: 14px; margin: auto; margin-top: -20px; margin-bottom: 20px; padding-left: 10px; padding-right: 10px;}
.container h1{font-size: 30px;}
.container h2{font-size: 14px;}
.container p{font-size: 14px;}
.container div {word-wrap: break-word;}
#content{width: 100%;}*/

hr{text-align: center; width: 60%; color : RGB(47, 85, 151);}

#familyImage{width: 40%;}
@media (max-width: 1200px){#familyImage{width: 50%;}}
@media (max-width: 992px){#familyImage{width: 70%;}}
@media (max-width: 768px){#familyImage{width: 100%; min-width: 300px;}}

#content{width: 100%;}

#offers{border-collapse: collapse; width: 100%;}
#offers fieldset{width: 99%; border: 3px solid RGB(151, 151, 151); border-radius:15px; padding:0; margin: 0; margin-left: auto; margin-right: auto;}
#offers legend{color: RGB(90, 90, 90); font-size: 20px; font-weight: bold; margin-left: 15px; margin-right: 15px; padding-left: 5px; padding-right: 5px;}
#offers p{line-height: 150%; margin: 0; color: RGB(105, 105, 105); padding-left: 5px; padding-right: 5px;}

.btn-primary{
    display: block;
    border: 0;
    height: 50px;
    width: 250px;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(47, 85, 151, 1);
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
}
 
.btn-primary:hover{
    color: #000;
    background-color: rgba(80, 85, 180, 0.9);
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.merge2columns {
    grid-column: span 2;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px){.grid2 {grid-template-columns: 1fr;}}
@media (max-width: 768px){.merge2columns {grid-column: span 1;}}


/* Header */
header{display: flex; align-items: center; justify-content: space-around; xposition: fixed; xmargin-top: 45px; height: 60px; box-sizing: border-box; width: 100%; min-width: 375px; background-color: white; border-bottom: 2px solid navy; margin-bottom: 0px;}

.iconMobile{display: none; padding-left: 5px;}
@media (max-width: 768px){.iconMobile{display: block;}}

.iconMobile img{ vertical-align: middle; height: 25px;}

.logo{padding-left: 5px; padding-right: 5px; height: 30px; line-height: 30px; font-size: 2em; font-weight: bold; font-style: italic; color: navy;}
@media (max-width: 1200px){.logo{height: 25px; line-height: 25px; font-size: 1.6em;}}
@media (max-width: 992px){.logo{height: 20px; line-height: 20px; font-size: 1.4em;}}
@media (max-width: 768px){.logo{height: 20px; line-height: 20px; font-size: 1.4em;}}
    
.logo img{ vertical-align: middle; height: 35px;}
@media (max-width: 1200px){.logo img{height: 30px;}}
@media (max-width: 992px){.logo img{height: 25px;}}
@media (max-width: 768px){.logo img{height: 25px;}}

/* Language select _____ NOT YET IN USE */
.languageSelect{}
#selectedLanguage{background-color: white; border: 1px solid navy; width: 117px; height: 26px; text-align: left; font-size: 0.9em; color: navy; margin-left: 3px; margin-right: 3px; border-radius: 5px;}
@media (max-width: 1200px){#selectedLanguage{width: 120px; height: 20px; font-size: 0.9em;}}
@media (max-width: 992px){#selectedLanguage{width: 105px;  height: 20px; font-size: 0.9em;}}
@media (max-width: 768px){#selectedLanguage{width: 35px;  height: 20px; font-size: 0.9em;}}

.computerScreen{}
@media (max-width: 768px){.computerScreen{display: none;}}

nav ul{padding: 0; list-style-type: none; display: flex; justify-content: center;}

nav li{text-align: center; width: 115px; border: 1px solid navy; border-radius: 8px; margin-right: 5px; position: relative;}
@media (max-width: 1200px){nav li{width: 100px;}}
@media (max-width: 992px){nav li{width: 85px;}}

nav li:hover{font-weight: bold; border: 1px solid navy; border-radius: 8px;}

nav a{font-size: 1.3em; color: navy; padding-bottom: 3px; text-decoration: none;}
@media (max-width: 1200px){nav a{font-size: 1.0em;}}
@media (max-width: 992px){nav a{font-size: 1.0em;}}

/* Alerts messages */
.alert {color:white; padding:15px; margin-bottom:23px; border:1px solid transparent; border-radius:3px;}
.alert-danger{background-color:red; border-color:red;}
.alert-success{background-color:green; border-color:green;}

.mobileMenu {display: none;}
@media (max-width: 768px){#mobileMenu {display: inline; width: 0px; position: fixed; z-index: 1; top: 60px; left: 0; background-color:  navy; overflow-x: hidden; transition: 0.5s; padding-top: 5px;}}
@media (max-width: 768px){#mobileMenu a {padding: 8px 8px 3px 32px; text-decoration: none; font-size: 20px; color: white; display: block; transition: 0.2s; border-bottom: 1px solid white;}}
@media (max-width: 768px){#mobileMenu a:hover {font-weight: bold;}}


.registration{margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; border-spacing: 1px 0;}
.registration th {line-height: 30px; width: 250px; border: 1px solid navy; border-bottom: 1px solid white; color: black; font-weight: bold; vertical-align:top; border-radius: 3px 3px 0px 0px;}
.registration th p {font-size: 0.9em;}
.registration tr{margin: 0; padding: 0; line-height: 30px; height: 30px;}
.registration td {border: 1px solid navy; border-bottom: 1px solid white; color: black; font-weight: bold; vertical-align:middle;}
.registration p {margin: 0; text-align: center; font-weight: normal; font-size: 0.75em; margin: 0; padding: 0;}
.registration > .item {line-height: 30px;}
.registration > .item p {font-weight: normal;}


.tagRemarkPricing{font-size: 0.85em;}

/*.registration thead tr:nth-child(7){height: 3px; line-height: 3px;}*/

.registration #minusB, #minusP{font-weight: bold; cursor: pointer;}
.registration #plusB, #plusP{font-weight: bold; cursor: pointer;}
.registration #memB{font-size: 16px; font-weight: normal; color: black; width: 50px; text-align: center;}
.registration #memP{font-size: 16px; font-weight: normal; color: black; width: 50px; text-align: center;}


/*@media (max-width: 768px){.registration th {width: 90px;}}
@media (max-width: 768px){.registration th:nth-child(1) {width: 90px;}}
*/
@media (max-width: 768px){.registration th {width: 200px;}}
@media (max-width: 768px){.registration th p {font-size: 0.6em;}}
@media (max-width: 768px){.registration thead th p {font-size: 0.7em;}}
@media (max-width: 768px){.registration p {font-size: 0.6em;}}

/*@media (max-width: 768px){.registration thead tr:nth-child(7){height: 1px; line-height: 1px;}}*/

@media (max-width: 768px){.registration #minusM, #minusY{font-size: 24px;}}
@media (max-width: 768px){.registration #plusM, #plusY{font-size: 14px;}}
@media (max-width: 768px){.registration #memM{font-size: 0.8em; width: 30px;}}
@media (max-width: 768px){.registration #memY{font-size: 0.8em; width: 30px;}}

/*@media (max-width: 768px){.registration thead th {width: 90px;}}
@media (max-width: 768px){.registration tbody tr td p{}}
@media (max-width: 768px){.registration > .item {line-height: 70px;}}*/





/* Footer */
footer{text-align: center; width: 100%;	margin: auto; margin-top: -10px; margin-bottom: 10px; padding-top: 0px; padding-bottom: 0px; height: 45px; line-height: 45px; color: navy; font-size:1.1em; border-top: 1px solid navy;}
@media (max-width: 1200px){footer{font-size:1.0em;}}
@media (max-width: 768px){footer{font-size:0.9em;}}

footer div{word-wrap: break-word;}

footer p{text-align: center; font-size: 0.8em; height: 22px; line-height: 22px; vertical-align: center;}



/* UTILISE DANS PRICING.PHP */
 h1{
    width: 90%;
/*  margin-top: 70px;*/
    margin-left: auto;
    margin-right: auto;
    font-size:2em;
 }

 .ta-c{
    text-align: center;
 }

 .mt--10{
    margin-top: -10px;
 }

 .fs08{
    font-size: 0.8em;
 }

 .fc-b{
    color: black;
 }

#registerSelector, #pricingSelector{border: 0; height: 50px; width: 250px; line-height: 2.5; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(47, 85, 151, 1); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6); inset -2px -2px 3px rgba(0, 0, 0, .6);}
 
#registerSelector:hover, #pricingSelector:hover {color: #000; background-color: rgba(80, 85, 180, 0.9);}


.selector, #pricingSelector{border: 0; height: 50px; width: 250px; line-height: 2.5; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(47, 85, 151, 1); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6); inset -2px -2px 3px rgba(0, 0, 0, .6);}
 
.selector:hover, #pricingSelector:hover {color: #000; background-color: rgba(80, 85, 180, 0.9);}