1485 sujets

Web Mobile et responsive web design

Menu déroulant responsive Bootstrap dropdown

Bonjour,

J'ai une barre de navigation avec des menus déroulants et d'autres non. Lorsque je passe en responsive les menus déroulants se placent devant les autres alors qu'il faudrait qu'ils poussent les autres vers le bas.

Avez-vous une idée du problème ?

Merci

<!DOCTYPE html>
<html lang="fr">
<head>
<title>st-gab</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Course Project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
<link href="plugins/fontawesome-free-5.0.1/css/fontawesome-all.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/animate.css">
<link rel="stylesheet" type="text/css" href="styles/main_styles.css">
<link rel="stylesheet" type="text/css" href="styles/responsive.css">
</head>
<body>

<div class="super_container">

	<!-- Header -->

	<header class="header d-flex flex-row">
		<div class="header_content d-flex flex-row align-items-center">
			<!-- Logo -->
			<div class="logo_container">
				<div class="logo">
                        <a href="index.html"><img src="images/logo-st-gab.jpg"  alt="Accueil" title="Accueil">
                        </a>				
				</div>
			</div>

			<!-- Main Navigation -->
			<nav class="main_nav_container">
				<div class="main_nav">
					<ul class="main_nav_list">
						<li class="main_nav_item dropdown">
							<a class="nav_link dropdown-toggle" href="#"id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Ensemble scolaire</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
								<a class="dropdown-item" href="Ensemble-scolaire-projet-educatif.html">Projet éducatif</a>
								<a class="dropdown-item" href="Pastorale.html">Pastorale</a>
								<a class="dropdown-item" href="Restauration.html">Restauration</a>
								<a class="dropdown-item" href="Association.html">Les associations</a>
								<a class="dropdown-item" href="Taxe-dapprentissage.html">Taxe d'apprentissage</a>
							</div>	
						</li>
						<li class="main_nav_item dropdown">
							<a class="nav_link dropdown-toggle" href="#"id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Infos pratiques</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
								<a class="dropdown-item" href="contact.html">Contacts</a>
								<a class="dropdown-item" href="equipe-direction.html">Equipe de direction</a>
								<a class="dropdown-item" href="infirmerie.html">Infirmerie</a>
								<a class="dropdown-item" href="inscriptions.html">Inscriptions</a>
							</div>	
						</li>
						<li class="main_nav_item dropdown">
							<a class="nav_link dropdown-toggle" href="#"id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pastorale</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
								<a class="dropdown-item" href="presentation-pastorale.html">Présentation</a>
								<div class="dropdown-divider"></div> <!-- diviseur -->
								<a class="dropdown-item" href="ecole-pastorale.html">Ecole</a>
								<a class="dropdown-item" href="college-pastorale.html">Collège</a>
								<a class="dropdown-item" href="lycee-pastorale.html">Lycée</a>
								<div class="dropdown-divider"></div> <!-- diviseur -->
								<a class="dropdown-item" href="projets-pastorale.html">Les projets</a>
							</div>	
						</li>
						<li class="main_nav_item"><a href="CDI.html">CDI</a></li>
						<li class="main_nav_item dropdown">
							<a class="nav_link dropdown-toggle" href="#"id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Vie scolaire</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
								<h1 class="dropdown-header">Règlements intérieurs</h1>
								<a class="dropdown-item" href="Regle-ecole.html">Ecole</a>
								<a class="dropdown-item" href="Regle-college.html">Collège</a>
								<a class="dropdown-item" href="Regle-lycee.html">Lycée</a>
								<div class="dropdown-divider"></div> <!-- diviseur -->
								<h1 class="dropdown-header">Absences et retards</h1>
								<a class="dropdown-item" href="abs-ret-college.html">Collège</a>
								<a class="dropdown-item" href="abs-ret-lycee.html">Lycée</a> 
								<div class="dropdown-divider"></div> <!-- diviseur -->
								<a class="dropdown-item" href="garderie-etude.html">Garderie et étude</a>
								<a class="dropdown-item" href="equi-viescol.html">Equipe vie scolaire</a>
							</div>	
						</li>
                        <li class="main_nav_item"><a href="https://www.ecoledirecte.com">EcoleDirecte</a></li>
						<li class="main_nav_item"><a href="contact.html">contact</a></li>
					</ul>
				</div>
			</nav>
		</div>
		<div class="header_side d-flex flex-row justify-content-center align-items-center">
			<img src="images/phone-call.svg" alt="">
			<span>05 49 21 05 29</span>
		</div>

		<!-- Hamburger -->
		<div class="hamburger_container">
			<i class="fas fa-bars trans_200"></i>
		</div>

	</header>
	
	<!-- Menu -->
	<div class="menu_container menu_mm">

		<!-- Menu Close Button -->
		<div class="menu_close_container">
			<div class="menu_close"></div>
		</div>

		<!-- Menu Items -->
		<div class="menu_inner menu_mm">
			<div class="menu menu_mm" id="navbarSupportedContent">
				<ul class="menu_list menu_mm">
					<li class="main_nav_item_inner dropdown">
						<a class="nav_link dropdown-toggle" href="#"id="navbarDropdownMenuLink" data-toggle="dropdown">Ensemble scolaire</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
							<a class="dropdown-item" href="Ensemble-scolaire-projet-educatif.html">Projet éducatif</a>
							<a class="dropdown-item" href="Pastorale.html">Pastorale</a>
							<a class="dropdown-item" href="Restauration.html">Restauration</a>
							<a class="dropdown-item" href="Association.html">Les associations</a>
							<a class="dropdown-item" href="Taxe-dapprentissage.html">Taxe d'apprentissage</a>
						</div>	
					</li>
					<li class="main_nav_item_inner dropdown">
						<a class="nav_link dropdown-toggle" href="#"id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Infos pratiques</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
							<a class="dropdown-item" href="contact.html">Contacts</a>
								<a class="dropdown-item" href="equipe-direction.html">Equipe de direction</a>
								<a class="dropdown-item" href="infirmerie.html">Infirmerie</a>
								<a class="dropdown-item" href="inscriptions.html">Inscriptions</a>
						</div>	
					</li>
					<li class="main_nav_item_inner dropdown">
						<a class="nav_link dropdown-toggle" href="#"id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pastorale</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
							<a class="dropdown-item" href="presentation-pastorale.html">Présentation</a>
							<div class="dropdown-divider"></div> <!-- diviseur -->
							<a class="dropdown-item" href="ecole-pastorale.html">Ecole</a>
							<a class="dropdown-item" href="college-pastorale.html">Collège</a>
							<a class="dropdown-item" href="lycee-pastorale.html">Lycée</a>
							<div class="dropdown-divider"></div> <!-- diviseur -->
							<a class="dropdown-item" href="projets-pastorale.html">Les projets</a>
						</div>	
					</li>
					<li class="main_nav_item_inner menu_mm"><a href="CDI.html">CDI</a></li>
					<li class="main_nav_item_inner dropdown">
						<a class="nav_link dropdown-toggle" href="#"id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Vie scolaire</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
							<h1 class="dropdown-header">Règlements intérieurs</h1>
							<a class="dropdown-item" href="Regle-ecole.html">Ecole</a>
							<a class="dropdown-item" href="Regle-college.html">Collège</a>
							<a class="dropdown-item" href="Regle-lycee.html">Lycée</a>
							<div class="dropdown-divider"></div> <!-- diviseur -->
							<h1 class="dropdown-header">Absences et retards</h1>
							<a class="dropdown-item" href="abs-ret-college.html">Collège</a>
							<a class="dropdown-item" href="abs-ret-lycee.html">Lycée</a> 
							<div class="dropdown-divider"></div> <!-- diviseur -->
							<a class="dropdown-item" href="garderie-etude.html">Garderie et étude</a>
							<a class="dropdown-item" href="equi-viescol.html">Equipe vie scolaire</a>
						</div>	
					</li>
					<li class="main_nav_item_inner menu_mm"><a href="https://www.ecoledirecte.com">EcoleDirecte</a></li>
					<li class="main_nav_item_inner menu_mm"><a href="contact.html">contact</a></li>
				</ul>				
			
			</div>

		</div>

	</div>

<!-- Home -->

<div class="home">

	<!-- Hero Slider -->
	<div class="hero_slider_container">
		<div class="hero_slider owl-carousel">
			
			<!-- Hero Slide -->
			<div class="hero_slide">
				<div class="hero_slide_background" style="background-image:url(images/st-roch.jpg)"></div>
				<div class="hero_slide_container d-flex flex-column align-items-center justify-content-center">
					<div class="hero_slide_content text-center">
						<h1 data-animation-in="fadeInUp" data-animation-out="animate-out fadeOut"><span>COLLEGE</span></h1>
					</div>
				</div>
			</div>
			
			<!-- Hero Slide -->
			<div class="hero_slide">
				<div class="hero_slide_background" style="background-image:url(images/lycee.jpg)"></div>
				<div class="hero_slide_container d-flex flex-column align-items-center justify-content-center">
					<div class="hero_slide_content text-center">
						<h1 data-animation-in="fadeInUp" data-animation-out="animate-out fadeOut"><span>LYCEE</span></h1>
					</div>
				</div>
			</div>
			
			<!-- Hero Slide -->
			<div class="hero_slide">
				<div class="hero_slide_background" style="background-image:url(images/ecole.jpg)"></div>
				<div class="hero_slide_container d-flex flex-column align-items-center justify-content-center">
					<div class="hero_slide_content text-center">
						<h1 data-animation-in="fadeInUp" data-animation-out="animate-out fadeOut"><span>ECOLE</span></h1>
					</div>
				</div>
			</div>

			</div>

		<div class="hero_slider_left hero_slider_nav trans_200"><span class="trans_200">prev</span></div>
		<div class="hero_slider_right hero_slider_nav trans_200"><span class="trans_200">next</span></div>
	</div>
</div>
	<div class="hero_boxes">
		<div class="hero_boxes_inner">
			<div class="container">
				<div class="row">

					<div class="col-lg-4 hero_box_col">
						<div class="hero_box d-flex flex-row align-items-center justify-content-start">
							<img src="images/calendar.png" class="svg" alt="">
							<div class="hero_box_content">
								<h2 class="hero_box_title">Agenda</h2>
								<a href="courses.html" class="hero_box_link">En savoir + -></a>
							</div>
						</div>
					</div>

					<div class="col-lg-4 hero_box_col">
						<div class="hero_box d-flex flex-row align-items-center justify-content-start">
							<img src="images/news.png" class="svg" alt="">
							<div class="hero_box_content">
								<h2 class="hero_box_title">Chrono</h2>
								<a href="courses.html" class="hero_box_link">En savoir + -></a>
							</div>
						</div>
					</div>

					<div class="col-lg-4 hero_box_col">
						<div class="hero_box d-flex flex-row align-items-center justify-content-start">
							<img src="images/menu.png" class="svg" alt="">
							<div class="hero_box_content">
								<h2 class="hero_box_title">Menu</h2>
								<a href="courses.html" class="hero_box_link">En savoir + -></a>
							</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
	</div>

	<!-- Popular -->

	<div class="popular page_section">
		<div class="container">
			<div class="row">
				<div class="col">
					<div class="section_title text-center">
						<h1>Les établissements</h1>
					</div>
				</div>
			</div>

			<div class="row course_boxes">
				
				<!-- Popular Course Item -->
				<div class="col-lg-4 course_box">
					<div class="card">
						<img class="card-img-top" src="images/ecole.JPG" alt="">
						<div class="card-body text-center">
							<div class="card-title"><a href="courses.html">Slogan Ecole</a></div>
							<div class="card-text">Brève description.</div>
						</div>
						
					</div>
				</div>

				<!-- Popular Course Item -->
				<div class="col-lg-4 course_box">
					<div class="card">
						<img class="card-img-top" src="images/college.jpg" alt="">
						<div class="card-body text-center">
							<div class="card-title"><a href="courses.html">Slogan Collège</a></div>
							<div class="card-text">Brève description...</div>
						</div>
						
					</div>
				</div>

				<!-- Popular Course Item -->
				<div class="col-lg-4 course_box">
					<div class="card">
						<img class="card-img-top" src="images/lycee.JPG" alt="">
						<div class="card-body text-center">
							<div class="card-title"><a href="courses.html">Slogan LYCEE</a></div>
							<div class="card-text">Brève description....</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>		
	</div>



</div>
<footer>


	
</footer>

</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="styles/bootstrap4/popper.js"></script>
<script src="styles/bootstrap4/bootstrap.min.js"></script>
<script src="plugins/greensock/TweenMax.min.js"></script>
<script src="plugins/greensock/TimelineMax.min.js"></script>
<script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
<script src="plugins/greensock/animation.gsap.min.js"></script>
<script src="plugins/greensock/ScrollToPlugin.min.js"></script>
<script src="plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
<script src="plugins/scrollTo/jquery.scrollTo.min.js"></script>
<script src="plugins/easing/easing.js"></script>
<script src="js/custom.js"></script>
<script>
	$('.nav_link').mouseover(function() {
	  $(this).dropdown('toggle')
	})
  </script>
 

</body>

</html>



@charset "utf-8";
/* CSS Document */

/******************************

COLOR PALETTE




[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
	3.1 Logo
	3.2 Main Nav
	3.3 Header Side
	3.4 Hamburger
4. Menu
	4.1 Menu Social
	4.2 Menu copyright
5. Home
	5.1 Hero Slider
	5.2 Hero Slider Navigation
6. Hero Boxes
7. Page Section
8. Buttons
9. Popular


/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800|Roboto:400,500,700');

/*********************************
2. Body and some general stuff
*********************************/

*
{
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 400;
	background: #FFFFFF;
	color: #a5a5a5;
}
div
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul
{
	list-style: none;
	margin-bottom: 0px;
}
p
{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 2.29;
	font-weight: 400;
	color: #a5a5a5;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a
{
	display: inline;
	position: relative;
	color: inherit;
	border-bottom: solid 1px #ffa07f;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a:active
{
	position: relative;
	color: #FF6347;
}
p a:hover
{
	color: #FFFFFF;
	background: #ffa07f;
}
p a:hover::after
{
	opacity: 0.2;
}
::selection
{
	background: #FFD266;
	color: #C88E00;
}
p::selection
{
	background: #FFD266;
	color: #C88E00;
}
h1{font-size: 36px;}
h2{font-size: 22px;}
h3{font-size: 18px;}
h4{font-size: 14px;}
h5{font-size: 11px;}
h1, h2, h3, h4, h5, h6
{
	font-family: 'Roboto', sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
h1::selection, 
h2::selection, 
h3::selection, 
h4::selection, 
h5::selection, 
h6::selection
{
	
}
::-webkit-input-placeholder
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #a5a5a5 !important;
}
:-moz-placeholder /* older Firefox*/
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #a5a5a5 !important;
}
::-moz-placeholder /* Firefox 19+ */ 
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #a5a5a5 !important;
} 
:-ms-input-placeholder
{ 
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #a5a5a5 !important;
}
::input-placeholder
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #a5a5a5 !important;
}
.form-control
{
	color: #db5246;
}
section
{
	display: block;
	position: relative;
	box-sizing: border-box;
}
.clear
{
	clear: both;
}
.clearfix::before, .clearfix::after
{
	content: "";
	display: table;
}
.clearfix::after
{
	clear: both;
}
.clearfix
{
	zoom: 1;
}
.float_left
{
	float: left;
}
.float_right
{
	float: right;
}
.trans_200
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.trans_300
{
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.trans_400
{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.trans_500
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.fill_height
{
	height: 100%;
}
.super_container
{
	width: 100%;
	overflow: hidden;
}
.prlx_parent
{
	overflow: hidden;
}
.prlx
{
	height: 130% !important;
}
.nopadding
{
	padding: 0px !important;
}

/*********************************
3. Header
*********************************/

.header
{
	position: fixed;
	top: 45px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 1500px;
	height: 104px;
	background: rgba(248, 246, 246, 0.932);
	z-index: 10;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.header.scrolled
{	
	top: 15px;
}
.header.scrolled .header_content::before
{
	box-shadow: 0px 20px 49px rgba(0,0,0,0.17);
}
.header_content
{
	width: calc(100% - 279px);
	height: 100%;
}
.header_content::before
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	box-shadow: 0px 20px 49px rgba(0,0,0,0.67);
	z-index: -1;
}

/*********************************
3.1 Logo
*********************************/

.logo_container
{
	display: inline-block;
	padding-left: 30px;
}
.logo span
{
	font-family: 'Open Sans', sans-serif;
	font-size: 30px;
	font-weight: 900;
	color: #3a3a3a;
	vertical-align: middle;
	text-transform: uppercase;
	margin-left: 3px;
}

/*********************************
3.2 Main Nav
*********************************/

.main_nav_container
{
	display: inline-block;
	margin-left: auto;
	padding-right: 93px;
}
.main_nav
{
	margin-top: 7px;
}
.main_nav_item
{
	display: inline-block;
	margin-right: 30px;
}
.main_nav_item:last-child
{
	margin-right: 0px;

}
.main_nav_item a
{
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 700;
	color:black;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.main_nav_item a:hover
{
	color: hsl(286, 46%, 49%);
	
}



/*********************************
3.2,5 Menu déroulant
**********************************/



/*********************************
3.3 Header Side
*********************************/

.header_side
{
	width: 279px;
	height: 100%;
	background: hsl(42, 31%, 52%);
}
.header_side img
{
	width: 29px;
	height: 29px;
}
.header_side span
{
	display: block;
	position: relative;
	font-size: 18px;
	font-weight: 500;
	color: #FFFFFF;
	padding-left: 12px;
}

/*********************************
3.4 Hamburger
*********************************/

.hamburger_container
{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 20px;
	display: none;
	cursor: pointer;
}
.hamburger_container i
{
	font-size: 24px;
	padding: 10px;
	color: #3a3a3a;
}
.hamburger_container:hover i
{
	color: hsl(0, 49%, 48%);
}



/*********************************
4. Menu
*********************************/

.menu_container
{
	position: fixed;
	top: 0;
	right: -50vw;
	width: 50vw;
	height: 100vh;
	background: #FFFFFF;
	z-index: 12;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	visibility: hidden;
	opacity: 0;
}

.menu_inner {
	display: block;
}
.menu_container.active
{
	visibility: visible;
	opacity: 1;
	right: 0;
}
.menu
{
	position: absolute;
	top:150px;
	left: 0;
	padding-left: 15%;
}
.menu_list
{
	-webkit-transform: translateY(3.5rem);
	-moz-transform: translateY(3.5rem);
	-ms-transform: translateY(3.5rem);
	-o-transform: translateY(3.5rem);
	transform: translateY(3.5rem);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 1000ms 600ms ease;
	opacity: 0;
}

.main_nav_item_inner {

	display: block;
}

.main_nav_item_inner  a
{
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: black;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.main_nav_item_inner a:hover
{
	color: hsl(0, 49%, 48%);
}
.menu_container.active .menu_list
{
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
}
.menu_item
{
	margin-bottom: 9px;
}
.menu_item  a
{
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: black;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_item a:hover
{
	color: hsl(0, 49%, 48%);
}
.menu_close_container
{
	position: absolute;
	top: 86px;
	right: 79px;
	width: 21px;
	height: 21px;
	cursor: pointer;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.menu_close
{
	top: 9px;
	width: 21px;
	height: 3px;
	background: #3a3a3a;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close::after
{
	display: block;
	position: absolute;
	top: -9px;
	left: 9px;
	content: '';
	width: 3px;
	height: 21px;
	background: #3a3a3a;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close_container:hover .menu_close,
.menu_close_container:hover .menu_close::after
{
	background: hsl(0, 49%, 48%);
}

/*********************************
4.1 Menu Social
*********************************/

.menu_social_container
{
	margin-top: 100px;
	-webkit-transform: translateY(3.5rem);
	-moz-transform: translateY(3.5rem);
	-ms-transform: translateY(3.5rem);
	-o-transform: translateY(3.5rem);
	transform: translateY(3.5rem);
	-webkit-transition: all 1000ms 1000ms ease;
	-moz-transition: all 1000ms 1000ms ease;
	-ms-transition: all 1000ms 1000ms ease;
	-o-transition: all 1000ms 1000ms ease;
	transition: all 1000ms 1000ms ease;
	opacity: 0;
	padding-left: 4px;
}
.menu_social_item
{
	display: inline-block;
	margin-right: 30px;
}
.menu_social_item a i
{
	color: #3a3a3a;
}
.menu_social_item a i:hover
{
	color: #ffb606;
}
.menu_container.active .menu_social_container
{
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
}

/*********************************
4.2 Menu copyright
*********************************/

.menu_copyright
{
	margin-top: 60px;
	-webkit-transform: translateY(3.5rem);
	-moz-transform: translateY(3.5rem);
	-ms-transform: translateY(3.5rem);
	-o-transform: translateY(3.5rem);
	transform: translateY(3.5rem);
	-webkit-transition: all 1000ms 1200ms ease;
	-moz-transition: all 1000ms 1200ms ease;
	-ms-transition: all 1000ms 1200ms ease;
	-o-transition: all 1000ms 1200ms ease;
	transition: all 1000ms 1200ms ease;
	opacity: 0;
	padding-left: 3px;
}
.menu_container.active .menu_copyright
{
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
}

/*********************************
5. Home
*********************************/

.home
{
	width: 100%;
	height: 100vh;
}

/*********************************
5.1 Hero Slider
*********************************/

.hero_slider_container
{
	width: 100%;
	height: 100%;
}
.hero_slide
{
	width: 100%;
	height: 100%;
}
.hero_slide_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.hero_slide_container
{
	width: 100%;
	height: 100vh;
}
.hero_slide_content
{
	max-width: 80%;
	-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	-ms-transform: translateY(30px);
	-o-transform: translateY(30px);
	transform: translateY(30px);
}
.hero_slide_content h1
{
	font-size: 72px;
	font-weight: 400;
	color: #FFFFFF;
}
.hero_slide_content h1 span
{
	background: rgba(75, 84, 138, 0.5);
	border-style:inset;
	border-radius: 25% 10%;
	padding-left: 13px;
	padding-right: 13px;
	margin-left: -12px;
	margin-right: -12px;
}
.animated
{
	-webkit-animation-duration : 1s !important;
	animation-duration : 1s !important;
	-webkit-animation-delay : 500ms;
	animation-delay : 500ms;
}
.animate-out
{
	-webkit-animation-delay : 0ms;
	animation-delay : 0ms;
}

/*********************************
5.2 Hero Slider Navigation
*********************************/

.hero_slider_nav
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(calc(-50% + 30px));
	width: 58px;
	height: 58px;
	background:rgba(100, 115, 190, 0.5);
	z-index: 9;
	cursor: pointer;
}
.hero_slider_nav:hover
{
	background: hsl(290, 42%, 24%);
}
.hero_slider_nav:hover span
{
	color: #FFFFFF;
}
.hero_slider_nav span
{
	display: block;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	color: #121212;
	line-height: 1;
}
.hero_slider_left
{
	left: 4.32%;
}
.hero_slider_right
{
	right: 4.32%;
}

/*********************************
6. Hero Boxes
*********************************/

.hero_boxes
{
	width: 100%;
	height: 0px;
	z-index: 9;
	padding-top: 0px;
}
.hero_boxes_inner
{
	position: absolute;
	top: -212px;
	left: 0;
	width: 100%;
}
.hero_box
{
	width: 100%;
	height: 161px;
	background: rgba(63, 19, 32, 0.5) ;
	border-radius: 30px;
	padding-left: 50px;
	cursor: pointer;
}
.hero_box:hover
{
	background: rebeccapurple;
}
.hero_box img
{
	width: 62px;
	height: auto;
	margin-top: -6px;
}
.svg path
{
	fill: #ffb606;
}
.hero_box svg
{
	width: 62px;
	height: auto;
}
.hero_box:hover svg path
{
	fill: #FFFFFF;
}
.hero_box_content
{
	padding-left: 13px;
	padding-top: 11px;
	margin-left: 30px;
	margin-top: -6px;
}
.hero_box_title
{
	font-size: 24px;
	font-weight: 500;
	color: #FFFFFF;
	margin-bottom: 7px;
}
.hero_box_link
{
	font-size: 12px;
	font-weight: 500;
	/*text-transform: uppercase;*/
	color: #FFFFFF;
	padding-left: 3px;
}
.hero_box_link:hover
{
	color: #1a1a1a;
}

/*********************************
7. Page Section
*********************************/

.page_section
{
	padding-top: 117px;
	padding-bottom: 117px;
}
.section_title
{

}
.section_title h1
{
	display: block;
	color: #1a1a1a;
	font-weight: 500;
	padding-top: 24px;
}
.section_title h1::before
{
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 55px;
	height: 4px;
	content: '';
	background: #ffb606;
}

/*********************************
8. Buttons
*********************************/

.button
{
	cursor: pointer;
}
.button:hover
{
	box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}
.button a
{
	font-size: 14px;
	line-height: 48px;
	font-weight: 700;
	text-transform: uppercase;
}
.button_1
{
	width: 202px;
	height: 48px;
}

/*********************************
9. Popular
*********************************/

.popular
{

}
.course_boxes
{
	margin-top: 68px;
}
.card
{
	display: block;
	background: #f8f9fb;
	border: none;
}
.card-img-top
{
	border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.card-body
{
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	padding-right: 15px;
}
.card-title
{
	margin-top: 55px;
}
.card-title a
{
	font-size: 22px;
	font-weight: 500;
	color: #1a1a1a;
	line-height: 1.2;
}
.card-title a:hover
{
	color: #a5a5a5;
}
.card-text
{
	font-size: 14px;
	font-weight: 500;
	color: #a5a5a5;
	margin-top: -12px;
}
.price_box
{
	width: 100%;
	height: 67px;
	background: #eaebec;
	margin-top: 41px;
	padding-left: 35px;
}
.course_author_image
{
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
}
.course_author_name
{
	font-size: 14px;
	font-weight: 500;
	color: #1a1a1a;
	padding-left: 20px;
	margin-top: 7px;
}
.course_author_name span
{
	color: #a5a5a5;
}
.course_price
{
	width: 67px;
	height: 67px;
	background: #ffb606;
	margin-left: auto;
}
.course_price span
{
	color: #FFFFFF;
	font-size: 18px;
	font-weight: 500;
	margin-top: 7px;
}
Sujet clos
Aller à