@font-face {
	font-family: "KGAlwaysAGoodTime";
	src: url('../fonts/KGAlwaysAGoodTime.ttf');
}

body {
	padding: 0;
	margin: 0 auto;
	font-family: 'Raleway', sans-serif;
	font-size: 15px;
    background-color: #005291;
    background: url('../images/background.jpg');
    background-position: center;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff;
    padding-bottom: 15px;
}

.img-responsive {
    max-width: 100%;
    height: auto;
}

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	width : 100%;
}

.col { 
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.box-content {
	max-width: 1260px;
	margin: 0 auto;
}

.logo {
    margin: 0 auto;
    display: block;
    padding: 50px 10px;
}

.img-header {
    margin: 0 auto;
    display: block;
    padding: 0 10px;
}

.img-list {
    margin-left: -1rem;
    margin-top: 1rem;
}

.img-telechargement {
    margin: 0 auto;
    display: block;
}

.header-text {
    text-align: center;
    text-transform: uppercase;
    padding: 0 30px 20px 30px ;
}

.header-description {
    text-align: center;
    margin-top: 25px;
    padding: 0 50px;
}

.mode-emploi {
    margin-top: 30px;
}

.header-mode-emploi {
    background-color: #ea6548;
    color: #fff;
    font-family: 'KGAlwaysAGoodTime';
    text-align: center;
    padding: 10px;
}

.footer-mode-emploi {
    color: #fff;
    font-family: 'KGAlwaysAGoodTime';
    text-align: center;
}

.footer-mode-emploi a {
    text-decoration: none;
}

.content-mode-emploi ul {
    list-style: none;
    color: #000;
}

.content-nouveaute {
    color: #000;
    padding: 20px 40px;
}

.content-mode-emploi ul li::before {
    content: "•"; 
    color: #ea6548;
    display: inline-block; 
    width: 1rem;
    margin-left: -1rem;
    font-size: 24px;
}

.content-mode-emploi ul li {
    margin-top: 45px;
    margin-right: 1rem;
}

.header-telechargement {
    background-color: #005190;
    color: #fff;
    border-radius: 8px 0 8px 0;
    margin: 50px auto;
    text-align: center;
    padding: 5px;
}

.element-telechargement {
    background-color: #005291;
    cursor: pointer;
    padding: 10px;
    padding-top: 30px;
}

.btn-telechargement {
    /* border: 1px solid #005291; */
    padding: 10px 5px;
    max-width: 420px;
    text-align: center;
    color: #fff;
    background-color: #005291;
    margin: 10px auto;
}

.btn-telechargement a {
    color: #FFF;
    text-decoration: none;
}

.btn-telechargement-enseignant {
	border: 1px solid #fff;
	max-width: 385px;
	justify-content: center;
	color: #fff;
	margin: 20px auto;
	height: 60px;
	display: flex;
	align-items: center;
	padding: 0 15px;
}

.btn-commander {
    background-color: #005291;
    padding: 10px;
    font-family: 'Raleway';
    color: #fff;
    max-width: 420px;
    margin: 35px auto;
    cursor: pointer;
    text-transform: uppercase;
}

.bloc-enseignant {
    color: #fff;
    margin-top: 25px;
}

.header-bloc-enseignant {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 35px;
    padding: 0 30px;
}

.footer-links {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #005291;
}

.footer-links a {
    color: #005291;
    text-decoration: none;
}

#overlay {
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.7;
	z-index: 98;
	overflow: hidden;
	position: fixed;
	display: none;
}

.formulaire-popup {
	position: fixed;
	max-width: 450px;
	display: none;
	z-index: 100;
	top: 2%;
	margin: auto;
	left: 0;
	right: 0;
	overflow-y: auto;
	height: calc(100% - 2%);
	bottom: 2%;
}

.form-box {
    background-color: #005291;
    padding-bottom: 5px;
}

.bloc-telechargement {
    margin-top: 30px;
    background-color: #005291;
}

.formulaire-header {
    background-color: #fff;
    padding: 20px;
    color: #005291;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
}

.form-container {
    padding: 0 20px;
}

.champs_formulaire {
    margin-top: 15px;
}

.champs_formulaire label {
    display: block;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 5px;
}

.champs_formulaire input, .champs_formulaire select {
    width: 100%;
    color: #5aaeef;
    font-size: 14px;
}

input[type=checkbox] + label {
    color: #5aaeef;
    font-size: 12px;
}

input[type=checkbox] { 
    width: auto;
    float: left;
    margin-bottom: 7rem;
    margin-right: 1rem;
}

.savoir-plus, .savoir-plus a {
    color: #5aaeef;
    font-size: 12px;
}


.btn-form {
    background-color: #ea6548;
    padding: 15px;
    border: none;
    font-family: 'Raleway';
    color: #fff;
    max-width: 130px;
    margin: 35px auto;
    text-align: center;
    cursor: pointer;
    display: block;
}

.close-form {
	position: absolute;
	top: 5px;
	color: #005291;
	right: 10px;
    font-size: 20px;
    cursor: pointer;
    font-weight: 700;
}

.mentions-header, .mentions-section {
    text-align: center;
}

.mentions-bloc + .mentions-bloc {
    margin-top: 25px;
}

.mentions-section + .mentions-section {
    margin-top: 40px;
}

.mentions-bloc ul {
    list-style: none;
    text-align: left;
    margin-left: 4rem;
}

.mentions-bloc ul li::before {
    content: "•"; 
    color: #005291;
    display: inline-block; 
    width: 1rem;
    margin-left: -1rem;
    font-size: 26px;
    font-weight: 700;
}

.mentions-bloc a {
    color: #005291;
}

.font-30 {
    font-size: 30px;
    line-height: 42px;
}

.font-26 {
    font-size: 26px;
    line-height: 30px;
}

.font-24 {
    font-size: 24px;
}

.font-22 {
    font-size: 22px;
}

.font-20 {
    font-size: 20px;
}

.font-18 {
    font-size: 18px;
    line-height: 24px;
}

.extra-bold {
    font-weight: 800;
}

.bold {
    font-weight: 700;
}

.orange {
    color: #ea6548;
}

.blue {
    color: #005291;
}

@media only screen and (max-width: 480px)
{
	.mob-0 { display: none;}
	.mob-1 { width : 8.33%; }
	.mob-2 { width : 16.66%; }
	.mob-3 { width : 24.99%; }
	.mob-4 { width : 33.33%; }
	.mob-5 { width : 41.66%; }
	.mob-6 { width : 49.99%; }
	.mob-7 { width : 58.33%; }
	.mob-8 { width : 66.66%; }
	.mob-9 { width : 74.99%; }
	.mob-10 { width : 83.33%; }
	.mob-11 { width : 91.66%; }
    .mob-12 { width : 100%; }

    .element-telechargement {
        margin-top: 20px;
        padding: 0 10px;
    }

    .element-telechargement + .element-telechargement {
        margin-top: 30px;
    }
    
    .font-30 {
        font-size: 26px;
        line-height: 42px;
    }

    .font-26 {
        font-size: 22px;
        line-height: 24px;
    }
    
    .font-24 {
        font-size: 22px;
    }

    .font-22 {
        font-size: 20px;
    }

    .font-20 {
        font-size: 18px;
    }
    
    .font-18 {
        font-size: 15px;
        line-height: 20px;
    }
    
}

@media only screen and (min-width: 481px) and (max-width: 800px)
{
	.tab-0 { display: none;}
	.tab-1 { width : 8.33%; }
	.tab-2 { width : 16.66%; }
	.tab-3 { width : 24.99%; }
	.tab-4 { width : 33.33%; }
	.tab-5 { width : 41.66%; }
	.tab-6 { width : 49.99%; }
	.tab-7 { width : 58.33%; }
	.tab-8 { width : 66.66%; }
	.tab-9 { width : 74.99%; }
	.tab-10 { width : 83.33%; }
	.tab-11 { width : 91.66%; }
    .tab-12 { width : 100%; }

    .element-telechargement {
        padding: 30px 10px 0;
    }
}

@media only screen and (min-width: 801px)
{
	.dsk-0 { display: none;}
	.dsk-1 { width : 8.33%; }
	.dsk-2 { width : 16.66%; }
	.dsk-3 { width : 24.99%; }
	.dsk-4 { width : 33.33%; }
	.dsk-5 { width : 41.66%; }
	.dsk-6 { width : 49.99%; }
	.dsk-7 { width : 58.33%; }
	.dsk-8 { width : 66.66%; }
	.dsk-9 { width : 74.99%; }
	.dsk-10 { width : 83.33%; }
	.dsk-11 { width : 91.66%; }
	.dsk-12 { width : 100%; }
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
  @media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1000px;
    }
}