html{
	overflow-x: hidden;
}
body{
	/*background: url(/img/csjm_background.jpg);
	background-repeat: round;*/
	background-color: #3880d4;
	position: relative;
	word-wrap: break-word;
}
#container{
	background-color: white;
	margin-top: 1%;
}
.csjm_logo{
	height: 135px;
	margin-top: 15%;
	margin-left: 5%;
	margin-right: 5%;
}
#csjm_top_heading{
	font-family: fantasy;
    font-size: 45px;
}
#top_middle_section{
	padding-right: 4%;
	padding-top: 2%;
}
#top blockquote{
	 font-size: 16px !important;
	 margin-right: 11%;
}
#mobile_top_menu, #sujets_nav_mobile{
	display: none;
}
#top_menu{
	background-color: #faf492;
	margin-top: 1%;
    height: 40px;
}
#top_menu ul li{
	width: 14.1%;
}
#content{
	min-height: 400px;
    border: solid 1px #faf492;
}
#top_menu ul li a{
	font-weight: bold;
    font-size: 1.1em;
}
#bottom{
	background-color: #faf492;
	margin-top: 0.3em;
	height: 265px;
	margin-bottom: 1%;
	position: relative;
}
#bottom_menu{
	padding-top: 2%;
	text-align: center;
	font-size: 20px;
}
#bottom_menu a{
	margin-left: 1%;
    margin-right: 1%;
    text-decoration: none !important;
}
#bottom_copyright_section{
	color: white;
	background-color: #4a4949;
	position: absolute;
	bottom: 0;
	width: 100%;
	font-size: 10px;
	}
.students_level{
	margin-top: 10%;
}
.students_level_link img{
	min-width: 245px;
}
.middle_content .well {
	margin-top: 2%;
	font-size: 18px;
	margin-bottom: 0px;
	margin-bottom: 2%;
}
.students_level_link:hover{
	text-decoration: none;
}
.middle_content .well h2{
	margin-left: 3%;
}
.picture_niveau img{
	width: 95%;
}
.level_list{
	margin-left: 0px;
	margin-right: 0px;
}
.carousel-inner img {
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%); /* make all photos black and white */ 
    width: 100%; /* Set width to 100% */
    margin: auto;
}
.carousel-caption h3 {
color: #fff !important;
}
#personels_content .students_level_link .thumbnail img{
	width: 100%;
}
#manage_student_section{
	width: 80%;
	margin-top: 5%;
}
#manage_event_section, #manage_personel_section, #create_new_account_section, #signin_section, #comment_section, #admin_section{
	width: 90%;
	margin-top: 2%;
}
#manage_event_section > h2, #manage_personel_section > h2, #create_new_account_section > h2, #signin_section > h2, #comment_section > h2{
	margin-top: 10px!important;
}
#manage_student_section > div, #manage_event_section > div, #manage_personel_section > form {
	width: 80%;
}
#calendar{
	width: 90%;
	margin-top: 5%;
	margin-bottom: 5%;
}
div.fc-content{
	height: 30px!important;
}
span.fc-time, .fc-event-time{
	display: none!important;
}
.list_students{
	width: 95%;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev{
	font-size: 50px;
}
#bottom_social_media{
	width: 20%;
}
#bottom_social_media a.btn-social-icon{
	margin-left: 4%;
	margin-right: 4%;
}
#top_breadcrumb{
	width: 95%;
	margin-top: 2%;
	font-size: 19px;
}
#apropos_section{
	width: 100%;
	margin-top: 2%;
	margin-left: auto;
	margin-right: auto;
}
.contact_flex{
	display: flex;
	width: 100%;
	margin-top: 7%;
	margin-bottom: 7%;
}
.contact{
	width: 43%;
	margin-left: 4%;
	height: 275px;
	color: #337ab7;
	border-radius: 35px;
	padding-top: 7%;
}
.contact:hover{
	font-size: 105%;

}
#contact_address, #contact_social_network{
	background-color: #337ab7;
	color: #faf492;
}
#contact_phone, #contact_email{
	background-color: #faf492;
	color: #337ab7;
}
.contact .glyphicon, #contact_social_network .fa-facebook{
	font-size: 70px;
}
.avatar{
	width: 30px;
}
.home_sport_head{
	font-size: 25px;
    font-weight: bold;
}
.display_flex{
	display: flex;
}
.sport_img_section{
	width: 40%;
}
.sport_img_section img{
	width: 425px;
}
.sport_txt_section{
	width: 60%;
	padding: 2%;
    text-align: justify;
}
#sujets .nav-tabs li{
	width: 16%;
}
.sujet_link{
	width: 145px;
}
.sujet_link .glyphicon-file, .sujet_link .fa-file-pdf-o{
	font-size: 75px;
}
.sujet_link a:hover, .panel-title a{
	text-decoration: none !important;
}
.list_sujet{
	line-height: 1.3em;
	margin-top: 2%;
    margin-left: 1%;
}
.btn-open-sujet-pdf{
	margin-bottom: 20%;
}
.search_field{
	width: 90%;
	height: 45px;
	margin-top: 3%;
}
.glyphicon-search{
    font-weight: bold;
}
.img_csjm_sport{
	width: 100%;
}
.apropos_text{
	text-align: justify;
}
.level_list{
	margin-top: 3%;
}
#mobile_top_menu{
	margin-bottom: unset;
}
.personel_link_content, .student_link_content{
	margin-top: 5%;
}
#mobile_top_menu .list-group-item{
	background-color: #faf492;
}
.home_sport_content{
	text-align: justify;
}
.fc-day-grid-event .fc-content{
	white-space: unset !important;
}
#apropos_section .well{
	line-height: 1.6em;
}
#apropos_section .well h4{
	font-weight: bold;
}
#apropos_section .well p, #apropos_section .well ul li{
	font-size: 15px;
}
#apropos_section .well blockquote{
	font-size: 15px;
    font-weight: bold;
}
.contact{
	word-wrap: break-word;
}
#csjm_devise{
	font-family:'Freestyle Script';
    font-size: 50px;
    font-weight: bold;
    margin-top: -3%;
}
#top_user_name{
	font-size: 21px;
	margin-top: -1%;
}
.user_logo{
	width: 20px;
    margin-top: -2.5px;
}
.blue_text{
	color: #0000fe;
}
.affix {
	position: fixed;
	top: 0;
	width: inherit;
	z-index: 9999 !important;
	margin-top: 0px !important;
	margin-left: -1.1%;
}
.caret-top-menu{
	margin-top: 6%;
}
.top-sub-menu{
	width: auto!important;
}
.top-group-sub-menu{
	left: -70px!important;
}
#create_new_account_section, #signin_section, #comment_section{
	line-height: 1.6em;
    font-size: 18px;
}
 #admin_section{
 	font-size: 15px;
 }
 #admin_section ul{
 	line-height: 1.6em;
 }
 #admin_section .thumbnail{
 	height: 200px;
 }
.list_avantage{
	margin-left: 5%;
}
#create_new_account_section > form, #signin_section > form, #comment_section > form{
	width: 80%;
}
.red_text{
	color:red !important;
}
.green_text{
	color:lawngreen;
}
.bold_text{
	font-weight: bold;
}
input.ng-dirty.ng-invalid{
	border: solid 1px red;
}
.disconnection_btn button{
	margin-left: 2%;
	margin-right: 2%;
}
.text_decoration_none{
	text-decoration: none!important;
}
.invitation_connexion {
	font-weight: bold;
	margin-bottom: 3%;
}
#mobile_top_user_name{
	font-size: 10px;
}
#comment_section button{
	margin: 1%;
}
.remove_edit_icons_section{
	width: 100px;
}
.remove_edit_icons_section i{
	margin-left: 15%;
	margin-right: 15%;
}
.section-btn-modal{
	width: fit-content;
}
.btn-section .btn{
	margin-left: 2%;
	margin-right: 2%;
}
.table-list-students{
	width: 90%;
	margin-top: 2%;
	margin-bottom: 2%!important;
	margin-left: auto;
	margin-right: auto;
}
.nb-students{
	float: right;
}
a.fc-daygrid-event{
	cursor: pointer;
}
@media only screen and (max-width:1199px) {
	#mobile_top_menu{
		display: block;
	}
	#top_menu, #top_user_name{
		display: none;
	}
	#mobile_top_menu .panel-heading,#mobile_top_menu .panel-default{
		background-color: #faf492;
		border-color: #faf492;
	}
	#mobile_top_menu .panel{
		border-radius: unset;
	}
	#mobile_top_menu .list-group-item a{
		font-weight: bold;
    	font-size: 15px;
	}
	.menu_collapse{
		font-size: 18px;
    	font-weight: bold;
    	color: #337ab7 !important;
	}
	.menu_collapse .glyphicon{
		top: 3px;
	}
	.negatif_letter_spacing{
		letter-spacing: -6px;
	}
	#csjm_top_heading{
		font-size: 35px;
	}
	.csjm_logo{
		width: 100%;
	}
	.main_logo{
		width: auto;
	}
	#personels_content, #apropos_section, #sujets_content, #students_content{
		margin-top: 3%;
	}
	.message_validation_field{
		font-size: 14px;
	}
}

@media only screen and (max-width:1024px) {
	.carousel-caption {
	  display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
	}
	#top_middle_section{
		padding-right: 0%;
		padding-top: 3%;
	}
	.eglise_logo{
		width: auto;
		margin-left: -20%;
	}
	#bottom_menu{
		font-size: 15px;
	}
	#bottom_social_media{
		width: 60%;
	}
}

@media only screen and (max-width:991px) {
	#sujets_nav_mobile{
		display: block;
	}
	#sujets_nav_desktop{
		display: none;
	}
	.eglise_logo{
		margin-left: -60%;
    	width: auto;
	}
	#csjm_top_heading, #csjm_devise{
		font-size: 25px;
	}
	#manage_event_section > h2, #manage_personel_section > h2, #create_new_account_section > h2, #signin_section > h2, #comment_section > h2, #admin_section  > h2{
		font-size: 23px!important;
	}
	#create_new_account_section > form, #signin_section > form, #comment_section > form{
		width: 90%;
	}
	.list_avantage{
		font-size: 14px;
		margin-left: unset!important;
	}
	.list_avantage ul{
		margin-left: -15px!important;
	}
}

@media only screen and (max-width:812px) {
	#top_middle_section blockquote{
		display: none;
	}
	.csjm_logo{
		height: unset;
		margin-top: 20%;
	}
	.main_logo{
		width: 85%;
	}
	.eglise_logo{
		width: 100%;
	}
	#csjm_top_heading, #csjm_devise{
		font-size: 30px;
	}
	.middle_content .well{
		font-size: 13px;
		padding-top: unset !important;
	}
	.middle_content .well ul{
		margin-left: -10px;
	}
	.middle_content .well h2{
		font-size: 20px !important;
	}
	.contact .glyphicon, #contact_social_network .fa-facebook{
		font-size: 50px;
	}
	.sujet_link{
		width: 100px;
		font-size: 11px;
	}
	.sujet_link .glyphicon-file, .sujet_link .fa-file-pdf-o{
		font-size: 40px;
	}
	.breadcrumb{
		margin-bottom: -10px !important;
	}
	table{
		font-size: 11px !important;
	}
	#bottom_csjm_info{
		font-size: 12px;
	}
	#bottom_menu{
		padding-top: 4%;
	}
	#create_new_account_section > form, #signin_section > form, #comment_section > form{
		width: 100%;
	}
	.fc-event-title{
		font-size: 8px!important;
	}
	.fc-button{
		padding: unset!important;
	}
	.fc .fc-toolbar-title{
		font-size: 1.5em!important;
	}
	.fc-today-button{
		display: none!important;
	}
}

@media only screen and (max-width:767px) {
	.eglise_logo {
    	width: 75%;
	}
	.csjm_logo{
		margin-top: 10%;
	}
}

@media only screen and (max-width:743px) {
	#csjm_top_heading, #csjm_devise{
		font-size: 25px;
	}
}

@media only screen and (max-width:624px) {
	#csjm_top_heading, #csjm_devise{
		font-size: 23px;
	}
}

@media only screen and (max-width:624px) {
	#csjm_top_heading, #csjm_devise{
		font-size: 21px;
	}
	.main_logo{
		width: 100%;
	}
}

@media only screen and (max-width:528px) {
	#csjm_top_heading, #csjm_devise{
		font-size: 19px;
	}
}

@media only screen and (max-width:480px) {
	#csjm_top_heading, #csjm_devise{
		font-size: 17px;
	}
	#csjm_devise{
		letter-spacing: 0.1em;
	}
}

@media only screen and (max-width:444px) {
	#csjm_top_heading {
    	font-size: 110%;
	}
	.csjm_logo{
		margin-top: 20%;
	}
}

@media only screen and (max-width:425px) {
	#csjm_top_heading, #csjm_devise{
		font-size: 15px;
	}
}

@media only screen and (max-width:384px) {
	#csjm_top_heading, #csjm_devise{
		font-size: 14px;
	}
}

@media only screen and (max-width:360px) {
	#csjm_top_heading, #csjm_devise{
		font-size: 13px;
	}
	#bottom{
		height: 265px;
	}
}

@media only screen and (max-width:346px) {
	#personels_content .students_level_link .thumbnail img{
		width: unset !important;
		min-width: unset !important;
	}
}