@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
:root {
	--primary-color-s : #047aed;
	--scondary-color-s: #1c3fa8;
	--dark-color-s : #002240;
	--light-color-s : #f4f4f4;
	--error-color-s : #d0534f;
	--success-color-s : #5cb85c;
	--error-color-s : #d9534f;
}
* {
	box-sizing : border-box;
	padding: 0;
	margin: 0;
}

body {
	font-family: 'Lato', sans-serif;
	color: #333;
	line-height: 1.6;
}
 
ul {
	list-style-type: none;
}

a {
	text-decoration: none;
	color: #333;
}


h1, h2 {
	font-weight : 300;
	line-height : 1.2;
	margin : 10px 0;
}

p {
	margin : 10px 0;
}

img {
	width : 100%;
}
/* Navbar */
.navbar-s {
	background-color: var(--primary-color-s);
	color: #fff;
	height: 70px;
	
}

.navbar-s .flex-s {
	justify-content: space-between;
}


.navbar-s ul {
	display: flex;
}
.navbar-s a {
	color: #fff;
	padding : 10px;
	margin : 0 5px;
}

.navbar-s a:hover{
	border-bottom : 2px #fff solid;
	text-decoration: none;
	color: inherit;
}

.welcome-panel{
	height: 400px;
	background-color: var(--primary-color-s);
	color: #fff;
	position: relative;
	
}
.welcome-panel-text{
	animation : slideInFromLeft 1s ease-in; 
}
/* un effet pour dessous de premier section */
.welcome-panel::before,
.welcome-panel::after{
	content:'';
	position: absolute;
	height: 100px;
	bottom: -70px;
	right: 0;
	left: 0;
	background: #fff;
	transform: skewY(-3deg);
	-webkit-transform: skewY(-3deg);
	-moz-transform: skewY(-3deg);
	-ms-transorm: skewY(-3deg);
}

.welcome-panel h1{
	font-size: 40px;
}

.welcome-panel p{
	margin: 20px 0;
}

.welcome-panel .grid-s{
	overflow: visible;
	grid-template-columns: 55% 45%;
	gap: 30px;
}

.welcome-panel-form {
	position: relative;
	top:60px;
	height: 350px;
	width: 400px;
	padding: 40px;
	z-index: 100;
	justify-self: flex-end; 
	animation : slideInFromRight 1s ease-in; 
}

.welcome-panel-form .welcome-panel-control,
.welcome-panel-form .form-control-s,
.welcome-panel-form .wwFormTable .tdInput input{
	margin: 30px 0;
	
}
.welcome-panel-form .wwFormTable .tdInput{
	width: 100%;
}
.welcome-panel-form input[type='text'],
.welcome-panel-form input[type='password']{
	border: 0;
	border-bottom: 1px solid #b4becb;
	width: 100%;
	padding : 3px;
	font-size: 16px;
}

.welcome-panel-form input:focus {
	outline: none;
}

.details {
	padding-top: 100px;
	animation : slideInFromBottom 1s ease-in; 
	
}
.details-heading {
	max-width: 1100px;
	margin: auto;
}
.details .grid-s h3{
	font-size: 35px;
}
.details .grid-s p {
	font-size: 20px;
	font-weight: bold;
}
/* lastpost */
.last-post .grid-s {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr)
}
.last-post .grid-s > *:first-child {
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
}
.last-module .grid-s{
	grid-template-columns: 4fr 3fr;
}
.all-categories .flex-s{
	flex-wrap: wrap;
}

.all-categories .card-s {
	text-align: center;
	margin: 18px 10px 40px;
	transition: transform 0.2s ease-in;
}
.all-categories .card-s h4 {
	font-size: 20px;
	margin-bottom: 10px;
}
.all-categories .card-s img{
	width: 80px;
	height: 100px;
}
.all-categories .card-s:hover {
	transform: translateY(-15px);
}

.footer-s .social a{
	margin: 0 10px;
}
.lang-img{
	width: auto;
}
/*
.lang ul {
	display: flex;
}
.lang ul > li {
	width: 50px;
}*/
/* Course */
.course-head img{
	width: 200px;
	justify-self : flex-end;
}

.course-sub-head img{
	width: 300px;
	justify-self : flex-end;
}
.course-lessons .card-s > i{
	margin-right : 20px;
}
.course-lessons .grid-s {
	padding: 30px;
}
.course-lessons .grid-s > *:first-child,
.course-lessons .grid-s > *:last-child{
	grid-column : 1 / span 3;
}

.course-lessons .grid-s > *:nth-child(2){
	grid-column : 1 / span 2;
}
.course-lessons .grid-s .card-s img{
	width: 50px;
	height: 50px;
}
/* About Us */
.about-us-head img{
	width: 200px;
	justify-self : flex-end;
}
.about-us-main h3{
	margin : 20px 0;
}
.about-us-main .grid-s {
	grid-template-columns : 1fr 2fr;
	align-items : flex-start;
	
	
}
.about-us-main nav li{
	font-size: 17px;
	padding-bottom : 5px;
	margin-bottom : 5px;
	border-bottom : 1px #ccc solid;
	
}
.about-us-main a:hover{
	font-weight : bold;
	
}
.cv-language img{
	float : left;
	width : auto;
	margin: 1% 2%;
}
.cv-language h6{
	position : relative;
}
.post-head img,
.admin-panel-head img,
.show-post-head .grid-s img,
.lesson-post-head .grid-s img,
.module-head .grid-s img,
.login-head .grid-s img,
.member-panel-head img{
	width : 200px;
	justify-self: flex-end;
}
.ecommerce-head img{
	width : 200px;
	justify-self: flex-end;
	
}
.ecommerce-img img{
	justify-self : center;
}



.modules-link .fa-plus,
.module-detail .fa-plus,
.lesson-detail .fa-plus,
.modules-link.collapsed .fa-minus,
.module-detail.collapsed .fa-minus,
.lesson-detail.collapsed .fa-minus{
	display: none;
} 
.modules-link.collapsed .fa-plus,
.module-detail.collapsed .fa-plus,
.lesson-detail.collapsed .fa-plus,
.modules-link .fa-minus,
.module-detail .fa-minus,
.lesson-detail .fa-minus{
	display: inline-block;
} 

.profile-photo {
	text-align : center;
	width : 150px;
	height : 150px;
	font-size : 90px;
	line-height: 130px;
	margin: 20px 0;
}




/* Utilities */
   


.container-s {
	max-width: 1100px;
	margin: 0 auto;
	overflow: auto;
	padding: 0 40px;
}

.flex-s {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.grid-s {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.grid-3-s {
	grid-template-columns: repeat(3, 1fr); 
}
.grid-4-s {
	grid-template-columns: repeat(4, 1fr); 
}
.grid-5-s {
	grid-template-columns: repeat(5, 1fr); 
}

.card-s {
	background-color: #fff;
	color: #333;
	border-radius: 10px;
	box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
	padding: 20px;
	margin:10px;
}

.btn-s {
	display: inline-block;
	padding: 10px 30px;
	cursor: pointer;
	background-color: var(--primary-color-s);
	color: #fff;
	border: none;
	border-radius: 5px;
	
}

.btn-outline-s {
	background-color: transparent;
	border: 1px solid #fff;
		
}

.btn-s:hover {
	transform: scale(0.98);
	text-decoration: none;
	color: inherit;
}
.bg-primary-s, .btn-primary-s{
	background-color: var(--primary-color-s);
	color: #fff;
}
.bg-secondary-s, .btn-secondary-s{
	background-color: var(--secondary-color-s);
	color: #fff;
}
.bg-dark-s, .btn-dark-s{
	background-color: var(--dark-color-s);
	color: #fff;
}
.bg-light-s, .btn-light-s{
	background-color: var(--light-color-s);
	color: #333;
}
.bg-primary-s a, .btn-primary-s a,
.bg-secondary-s a, .btn-secondary-s a,
.bg-dark-s a, .btn-dark-s a,
.bg-light-s a, .btn-light-s a {
	color: #fff;
}
.text-center-s {
	text-align: center;
}
.text-primary-s{
	color: var(--primary-color-s);
	
}
.text-secondary-s{
	color: var(--secondary-color-s);
}
.text-dark-s{
	color: var(--dark-color-s)
}
.text-light-s{
	color: var(--light-color-s)
}
.alert-s{
	background-color: var(--light-color-s);
	padding : 10px 20px;
	font-weight : bold;
	margin : 15px 0;
	
}
.alert-s i{
	margin-right: 10px;
	
}
.alert-success-s {
	background-color : var(--success-color-s);
	color: #fff;
}
.alert-error-s {
	background-color : var(--error-color-s);
	color: #fff;
}

.about-us-end code, 
.about-us-end pre{
	background : #333;
	color : #fff;
	padding : 10px;
}
.lead-s {
	font-size: 20px;
}
.sm-s {
	font-size: 1rem;
}
.md-s {
	font-size: 2rem;
}
.lg-s {
	font-size: 3rem;
}
.xl-s {
	font-size: 4rem;
}
/* Margin */
.my-1-s {
	margin: 1rem 0;
}
.my-2-s {
	margin: 1.5rem 0;
}
.my-3-s {
	margin: 2rem 0;
}
.my-4-s {
	margin: 3rem 0;
}
.my-5-s {
	margin: 4rem 0;
}
.m-1-s {
	margin: 1rem;
}
.m-2-s {
	margin: 1.5rem;
}
.m-3-s {
	margin: 2rem;
}
.m-4-s {
	margin: 3rem;
}
.m-5-s {
	margin: 4rem;
}
/* padding */
.py-1-s {
	padding: 1rem 0;
}
.py-2-s {
	padding: 1.5rem 0;
}
.py-3-s {
	padding: 2rem 0;
}
.py-4-s {
	padding: 3rem 0;
}
.py-5-s {
	padding: 4rem 0;
}

.p-1-s {
	padding: 1rem;
}
.p-2-s {
	padding: 1.5rem;
}
.p-3-s {
	padding: 2rem;
}
.p-4-s {
	padding: 3rem;
}
.p-5-s {
	padding: 4rem;
}
.right-s{
	
		text-align: right;
    	float: right;
		}
/* Animations */

@keyframes slideInFromLeft {
	0%{
		transform : translateX(-100%);
	}
	100%{
		transform : translateX(0);
		}
} 
@keyframes slideInFromRight {
	0%{
		transform : translateX(100%);
	}
	100%{
		transform : translateX(0);
		}
}
@keyframes slideInFromTop {
	0%{
		transform : translateY(-100%);
	}
	100%{
		transform : translateY(0);
		}
} 
@keyframes slideInFromBottom {
	0%{
		transform : translateY(100%);
	}
	100%{
		transform : translateY(0);
		}
} 
/* Tablet and under */
@media(max-width: 768px){
	.grid-s, .welcome-panel .grid-s, .details .grid-s,
	.last-post .grid-s, .last-module .grid-s,
	.all-categories .grid-s, .course-lessons .grid-s,
	.about-us-main .grid-s, .course-main .grid-s
	{
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}
	.about-us-end code, 
.about-us-end pre{ 
	white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    line-height: 2;
}
	.welcome-panel {
		height: auto;
	}
	.welcome-panel-text {
		text-align: center;
		margin-top: 40px;
		animation : slideInFromTop 1s ease-in; 
	}
	.welcome-panel-form {
		justify-self: center;
		margin: auto;
		animation : slideInFromBottom 1s ease-in; 
	}
	.last-post .grid-s > *:first-child  {
	grid-column: 1;
	grid-row: 1;
	}
	.course-head,
	.course-sub-head,
	.admin-sub-head,
	.about-us-head,
	.post-head{
		text-align : center;
	}
	.course-head img,
	.course-sub-head img,
	.about-us-head img{
		justify-self : center;
	}
	.course-main .grid-s > *:first-child,
	.course-main .grid-s > *:nth-child(2){
		grid-column : 1;
	}
	
}
.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e9ecef;
    border-left-width: 0.25rem;
    border-radius: 0.25rem;
}
.bd-callout-info {
    border-left-color: #5bc0de;
}
.bd-callout-warning {
    border-left-color: #f0ad4e;
}
.bd-callout-success {
    border-left-color: #008000;
}
.bd-callout-secondary {
    border-left-color: #c0c0c0;
}


/* Mobile */
@media(max-width: 500px){
	.navbar-s{
		height: 110px;
	}
	.navbar-s .flex-s {
		flex-direction: column;
	}
	.navbar-s ul{
		padding: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}
	
	
	
}