/* RESPONSIVE CSS */

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

	/*** GENERAL ***/
	#white_menu {
		position: relative;
		padding: 40px 6.9vw 0;
		z-index: 100;
	}

	.page_sun #sources, 
	#sources {
	    position: relative;
	    bottom: auto;
	    left: auto;
	    padding: 6.4vw 0;
	    font-size: 2.7vw;
	}

	.page_prechoice #sources {
	    padding-top: 0;
	}


	/**** 
		HOME 
	****/
	header.home {
    	justify-content: flex-end;
    	position: relative;
    	z-index: 10;
    }

    .home .connexion {
    	display: none;
    }

    #center_home {
		position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    height: 100%;
	}

		#center_home .ctn_mots_1, 
		#center_home .ctn_mots_2 {
			display: none;
		}

		#center_home .logo {
			top: 50%;
			width: 34.8%;
		}

		#center_home .ctn_connected {
			top: 50%;
			left: 0;
			width: 100%;
			-webkit-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			transform: translateY(-50%);
			font-size: 12.2vw;
			text-align: center;
		}

		#center_home .ctn_connected .red {
			font-size: 12.2vw;
		}

		#center_home .ctn_connected .fleche {
			width: 7.2vw;
			height: 7.2vw;
		}

	#bottom_home {
	    padding-bottom: 1px;
	}

	.home-connect #bottom_home {
	    position: relative;
	}

	.home-connect.menu-open #bottom_home {
	    position: absolute;
	}

	.page_prechoice #bottom_home {
	    position: absolute;
	    margin-top: 0;
	}

		#bottom_home .logos {
		    display: none;
		}

	#information {
		display: none;
	}


	/****
		CONNEXION
	****/
	.page_connexion form, 
	.page_prechoice form {
		display: flex;
	    flex-direction: column;
	    justify-content: center;
	    position: relative;
		width: 86.8vw;
		height: calc(100vh - 160px);
		min-height: 0;
	    margin: 0 auto;
	    z-index: 10;
	}


	/****
		PRECHOICE
	****/
	.page_prechoice form {
		justify-content: flex-start;
	}

	.page_prechoice .logo_client {
		width: 28vw;
		height: 28vw;
		max-width: 110px;
		max-height: 110px;
	    margin-top: 40px;
	    margin-bottom: 40px;
	}


	/****
		New graphs - 06/2020
	****/
	.page_graphs .tt-graphs {
		margin: 7vw 6.9vw 0;
		font-size: 6.1vw;
	}

	.page_graphs .recap {
		height: auto;
		margin: 3.6vw 0 5.2vw;
	}

		.page_graphs ul li {
			padding-left: 0;
			font-size: 3.6vw;
		}

		.page_graphs ul li:first-child {
			padding-left: 0;
		}

		.page_graphs .recap li:first-child:before {
			display: none;
		}

	.d-flex {
		flex-direction: column;
		padding: 0 6.9vw;
	}

	.graph-bar, 
	.graph-age {
		width: auto; 
	}

		.graph-bar .recap .list-hashtags {
			padding: 0.8vw 0;
		}

			.graph-bar .recap .list-hashtags .d-flex {
				flex-direction: row;
				flex-wrap: wrap;
				padding: 0;
			}

				.graph-bar .recap .list-hashtags div div:not(:first-child):before {
					padding: 0 1.2vw;
				}

		.graph-bar .bars {
		    margin-bottom: 10.7vw; 
		}

		    .graph-bar .bars .bar-item {
				width: 100%;
				height: 8.4vw;
				margin-bottom: 2.7vw;
		    }

				.graph-bar .bars .bar-item p, 
				.graph-bar .bars .bar-item div > span {
			        padding-bottom: 0.2vw;
			        font-size: 3.3vw;
			        line-height: 8.2vw;
				}

				.graph-bar .bars .bar-item p {
					width: 50%;
					padding-left: 4.2vw;
				}

				.graph-bar .bars .bar-item div {
					width: 50%;
				}

					.graph-bar .bars .bar-item div > span {
						padding-right: 4.5vw;
					}

					.graph-bar .bars .bar-item div .pointe {
						width: 8.4vw;
						height: 8.4vw;
					}

		.graph-bar .lk-suite {
			font-size: 3.3vw;
		}

	.graph-age {
		padding: 0; 
	}

		.graph-age .age-legende {
			height: auto;
			margin: 18.2vw 0 0 0;
			padding-bottom: 14vw;
		}

			.graph-age .age-legende .femmes, 
			.graph-age .age-legende .hommes {
				font-size: 3.6vw;
			}

			.graph-age .age-legende .femmes {
				margin-right: 3.1vw;
				padding-right: 12.6vw;
			}

			.graph-age .age-legende .femmes:after {
				width: 5.8vw;
				height: 8.9vw;
			}

			.graph-age .age-legende .hommes {
				margin-left: 3.1vw;
				padding-left: 12.6vw;
			}

			.graph-age .age-legende .hommes:before {
				top: -2vw;
				width: 7.8vw;
				height: 7.8vw;
			}

		.graph-age .age-line {
			margin-bottom: 2.7vw;
			font-size: 2.7vw;
		}

			.graph-age .age-line .age-cat {
				width: 17.8vw;
				font-size: 3.3vw;
				line-height: 8.2vw;
		    }

			.graph-age .age-line .age-left, 
			.graph-age .age-line .age-right {
				width: 41.1vw;
			}

				.graph-age .age-line div > span {
					min-width: 11%;
					padding-bottom: 0.2vw;
					line-height: 8.2vw;
				}

				.graph-age .age-line .age-left > span {
					padding-left: 1.8vw;
				}

				.graph-age .age-line .age-right > span {
					padding-right: 1.8vw;
				}


	/****
		Page top 15
	****/
	.main.page_top15 .middle_column, 
	.main.page_gallery .middle_column {
		min-height: 78vh;
	}

	.page_top15 #container_list {
		width: 86.8vw;
		margin-top: 5vh;
		padding: 6.2vw 3.6vw;
		font-size: 3.2vw;
		line-height: normal;
	}


	/****
		Page gallery
	****/
	.page_gallery .container {
		grid-template-columns: 22.3% 22.3% 22.3% 22.3%;
		grid-gap: 3.2vw;
		width: 87.2vw;
		height: auto;
		margin: 5vh 0;
	}

	.a {
		grid-area: 1 / 1 / 3 / 3;
	}

	.b {
		grid-area: 3 / 3 / 5 / 5;
	}

	.c {
		grid-area: 6 / 2 / 8 / 4;
	}

	.d {
		grid-area: 9 / 2 / 11 / 4;
	}

	.e {
		grid-area: 11 / 3 / 13 / 5;
	}


	/****
		Menu mobile
	****/
	.menu-open {
		background-image: url(../img/bg-menu-mobile.jpg);
	}

	.menu-open #white_menu .logo, 
	#white_menu .switch_langue, 
	#white_menu .back, 
	#white_menu .logo-home, 
	.menu-open .middle_column, 
	.menu-open #center_home, 
	.page_prechoice.menu-open form, 
	.page_graphs.menu-open .tt-graphs, 
	.page_graphs.menu-open .d-flex, 
	.main.page_top15.menu-open .middle_column, 
	.main.page_gallery.menu-open .middle_column, 
	.menu-open .description-tags, 
	.home .menu_telechargements, 
	header.home .switch_langue {
		display: none;
	}

	.menu-open #white_menu .logo-menu, 
	.menu-open #white_menu .logo-home {
		display: inline-block;
	}

	#white_menu .back-mob, 
	#white_menu .burger, 
	.home .back-mob, 
	.home .burger {
    	display: block;
    }

    #white_menu .burger .img-open, 
    .home .burger .img-open {
    	display: block;
    }

    #white_menu .burger .img-close, 
    .home .burger .img-close {
    	display: none;
    }

    .menu-open #white_menu .burger .img-open, 
    .menu-open .home .burger .img-open {
    	display: none;
    }

    .menu-open #white_menu .burger .img-close, 
    .menu-open .home .burger .img-close {
    	display: block;
    }

	.menu-open #sources, 
	.menu-open #bottom_home p {
	    color: #a2a2a2;
	}

	.menu-mobile {
	    justify-content: center;
	    align-items: center;
		width: 100%;
	    height: 75vh;
	    text-align: center;
	}

	.menu-open .menu-mobile {
	    display: flex;
	}

		.menu-mobile ul {
	  		margin: 0;
	  		padding: 0;
		}

			.menu-mobile ul li {
		  		list-style: none;
		  		font-family: 'Montserrat-SemiBold';
		  		font-size: 6.4vw;
		  		line-height: 8.7vw;
			}

			.menu-mobile > ul > li {
		  		padding-bottom: 2.8vw;
			}

				.menu-mobile ul li a, 
				.menu-mobile ul li span {
			  		color: #000;
				}

				.menu-mobile ul li .lk-logout {
			  		color: #d83a31;
				}

				.menu-mobile ul li li {
			  		font-size: 4.3vw;
				}

					.menu-mobile ul li li a {
				  		color: #a2a2a2;
					}



	/****
		Texte home
	****/
	.description-tags {
		position: relative;
		margin-top: calc(100vh - 80px);
		padding-bottom: 6vh;
		display: block;
	}

		.description-tags .scroll-down {
			position: absolute;
			top: -45vw;
			left: 50%;
			width: 5.2vw;
			height: 14.4vw;
			margin-left: -2.6vw;
			background: url(../img/scroll-down-1.png) no-repeat;
			background-size: 100% auto;
		}

		@keyframes scrollDown {
			0% {
				bottom: -2vw;
			}
			50% {
				bottom: 0;
			}
			100% {
				bottom: -2vw;
			}
		}

			.description-tags .scroll-down span {
				font-size: 0;
				text-indent: -9999px;
			}

			.description-tags .scroll-down img {
				position: absolute;
				bottom: 0;
				animation-name: scrollDown;
				animation-timing-function: ease-in-out;
				animation-iteration-count: infinite;
				animation-duration: 1.2s;
			}

		.description-tags p {
			margin: 0;
	  		font-size: 4.5vw;
	  		text-align: center;
	  		line-height: 11.4vw;
		}

		.description-tags p + p:before {
			content: '.';
			margin-bottom: 15px;
			font-family: "_Montserrat_bold", sans-serif;
	  		font-size: 8vw;
	  		color: #d83a31;
	  		line-height: 12.4vw;
	  		display: block;
		}

			.description-tags p span {
				font-family: 'Montserrat-SemiBold';
			}

			.description-tags p span.red {
				font-size: 3.7vw;
			}


	/***
	Page slider Tiktok
	***/
	.page_tiktok .slick-active .item:focus, 
	.page_tiktok .slick-active .item:hover {
		transform: none;
	}


}