/*
Theme Name:  ART France Mini GP MOTO
Theme URI:   https://artminigp.fr
Version:     1.1
Description: Un thème enfant de Divi. C\'est un thème personnalisé crée spécifiquement pour le site ART France Mini GP MOTO.
Author:      YD Studio Créatif & Informatique
Author URI:  https://ydinformatique.fr
Template:    Divi
*/

/*-----------------[FONT ICONS]------------------*/

.icon_tags, .icon_profile, .icon_chat, .icon_clipboard, .icon_calendar {
	font-family: 'ETmodules';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px;
	color: #318EC3;
}
.icon_tags:before {
	content: "\e07c";
	padding: 0px 5px 0 0; 
}
.icon_profile:before {
	content: "\e08a";
	padding: 0 5px 0 0;
}
.icon_chat:before {
	content: "\e066";
	padding: 0 5px 0 20px;
}
.icon_clipboard:before {
	content: "\e0e6";
	padding: 0 5px 0 20px;
}
.icon_calendar:before {
	content: "\e023";
	padding: 0 5px 0 20px;
}

/*------------------------------------------------*/
/*----------------[RGPD CONTACT]-------------------*/
/*------------------------------------------------*/

.lien_rgpd {
  text-decoration:underline;
}
.lien_rgpd:after {
  font-family:"ETmodules";
  content:'p';
  position:absolute;
  margin-left:3px;
  bottom:3px;
}

/*------------------------------------------------*/
/*----------------[MENU BURGER]-------------------*/
/*------------------------------------------------*/

main-header {
z-index: 99 !important;
width: 10% !important;
}

.container.et_menu_container {
    z-index: 99 !important;
    padding-left: 30px;
}

/* Taille menu burger */
.mobile_menu_bar:before, span.mobile_menu_bar:after, .et_toggle_slide_menu:after{
    color:#fff !important;
    font-size: 80px 
}

.container {
    width: 95% !important;
    max-width: inherit;
    top:10%
}

/* déplacement du menu hamburger à gauche */
#et-top-navigation {
    float: left;
    padding-left: 0 !important;
}

/*------------------------------------------------*/
/*-----------------[MENU FLOTTANT]-----------------*/
/*------------------------------------------------*/

.menu-flottant {
    width:14em; /* Largeur des items du menu*/
    float: right; /* Je veux que le menu soit à droite*/
    position:fixed; /* Le menu est fixe à l'écran*/
    z-index:9999; /* Il sera au dessus de tous les éléments*/
    top: 35%; /* Il sera à 40% du bord supérieur de l'écran*/
    font-size: 2em; /* Taille de la police*/
    line-height: 2px; /* Hauteur de ligne du menu*/
    color: #000; /* Couleur de la police*/
    font-weight:700; /* Mettre le texte en gras*/
    text-transform:uppercase; /* Mettre le texte en majuscule*/
    right: -10em; /* Décalage du menu sur la droite pour masquer le texte et ne laisser que les icônes de visibles*/
}
.menu-flottant ul {
    list-style: none; /* Le menu est une liste, mais je ne veux pas afficher les puces*/
    margin: 0; /* Choix des marges internes et externes*/
    padding: 0;
}
.menu-flottant ul li {
    display:block; /* Définition des items en tant que bloc*/
    background-color: #333; /* Couleur de fond*/
    height: 2.5em; /* Hauteur des items du menu*/
    padding: 0.8em 1.5em; /* Marges internes des items du menu*/
    position: relative; /* On leur attribut une position relative*/
    -webkit-transition: -webkit-transform 0.5s; /* Effet de déplacement au passage de la souris*/
    -moz-transition: -webkit-transform 0.5s; /* On le définit plusieurs fois pour assurer la compatibilité entre les navigateurs*/
	transition: transform .5s;
}
/*Couleurs de fond des items du menu*/
.menu-flottant ul li:nth-child(1) { 
	background-color: rgba(0,0,0,0); /* 1er item du menu*/
} 
.menu-flottant ul li:nth-child(2) { 
	background-color: rgba(0,0,0,0); /* 2e item du menu*/
} 

/* Si vous en avez plus de 3, ajouteZ ici les mêmes lignes en remplaçant les chiffres et couleurs*/

/* Création de la transformation CSS qui permet d'afficher le menu au passage de la souris*/
.menu-flottant ul li:hover {
    -webkit-transform: translateX(-10em);
    transform: translateX(-10em);
}

/* Mise en forme des liens du menu*/
.menu-flottant ul li a {
    display:block; /* On les définit en tant que bloc*/
    color: #000; /* Couleur du texte*/
    text-decoration: none; /* On ne veut pas qu'ils soient soulignés par exemple*/
    position: absolute; /* On leur attribut une position absolue*/
    font-size:1em; /* Taille de la police*/
    line-height: 1.5em; /* Hauteur de ligne*/
    height:2em; /* Hauteur*/
    top:0; /* Positionnement*/
    bottom:0;
    right: 0.2em;
    margin:0 auto;
    padding:1em 1.5em;
}
  
/* Mise en forme des icônes du menu*/
  .menu-flottant ul li span {
    float: left;  /* On les cale à gauche */
    line-height: 1.5em; /* Hauteur de ligne */
    height:2em;
    padding-bottom: 1em;
    font-size: 35px;
  }

#menu-social.menu-hide {
opacity: 0;
}
#menu-social {
   opacity: 1;
   -webkit-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
}

/*.animated {     
    -webkit-animation-duration: 10s;animation-duration: 10s;
    -webkit-animation-fill-mode: both;animation-fill-mode: both;
}

@-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}*/

/*------------------------------------------------*/
/*---------------[RESPONSIVE LAYOUTS]-------------*/
/*------------------------------------------------*/

@media only screen and ( min-width: 981px ) {

}

/*-------------------[960px]------------------*/
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {

	/*-------------------[Sliders]------------------*/

	/*-------------------[Portfolio]------------------*/

	/*-------------------[Sidebar]------------------*/
	
	/*-------------------[Menu]------------------*/
	
}

/*-------------------[768px]------------------*/
@media only screen and ( max-width: 980px ) {

	/*-------------------[Portfolio]------------------*/
	
	/*-------------------[Sliders]------------------*/
	
	/*-------------------[Menu]------------------*/
	

}

@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {

}

@media screen and ( max-width: 782px ) {

}

/*-------------------[480px]------------------*/
@media only screen and ( max-width: 767px ) {

	/*-------------------[Menu]------------------*/

}

/*-------------------[320px]------------------*/
@media only screen and ( max-width: 479px ) {

}