/* -----------------------------------------------------------------------------------
	
		MEMO
						Hexa			RVB
		Bleu nuit		#0c2d69       	12, 45, 105
		Magenta			#d91965       	217, 25, 101
		Gris			#ccc2c0       	204,194,192
		Gris foncé 		#494342       	73,67,66

	*/
	
	
	/* ----------------------------------------------------------------------------------- 
	
		INIT 
		
	*/

	* {
		margin:0;
		padding:0;
	}
	html {
		width:100%; 
		height:100%;
	}
	body {
		width:100%;
	}
	body { background:#fff; }



	
	/* -----------------------------------------------------------------------------------
	
		TEXT 
		
	*/

	@font-face {
		font-family: 'RobotoLight';
		src: url('../fonts/Roboto-Light-webfont.eot');
		src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/Roboto-Light-webfont.woff') format('woff'),
			 url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
			 url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
		font-weight: 100;
		font-style: normal;
	}
	@font-face {
		font-family: 'RobotoCondensed';
		src: url('../fonts/RobotoCondensed-Regular-webfont.eot');
		src: url('../fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
			 url('../fonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
			 url('../fonts/RobotoCondensed-Regular-webfont.svg#RobotoLight') format('svg');
		font-weight: 100;
		font-style: normal;
	}
	@font-face {
		font-family: 'RobotoSlab';
		src: url('../fonts/RobotoSlab-Regular-webfont.eot');
		src: url('../fonts/RobotoSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/RobotoSlab-Regular-webfont.woff') format('woff'),
			 url('../fonts/RobotoSlab-Regular-webfont.ttf') format('truetype'),
			 url('../fonts/RobotoSlab-Regular-webfont.svg#RobotoThin') format('svg');
		font-weight: 100;
		font-style: normal;
	}
	p, div, a, h1, h2, h3, h4, h5, h6 {
		color:#fff;
		font-family: 'RobotoLight';
		font-weight: 200;
		font-size:16px;
		line-height:20px;		
	}
	h1 {
		font-family: 'RobotoSlab';
		font-weight: 600;
		color:#fff;
		font-size:28px;
		line-height:34px;
		margin-bottom:10px;
	}
	h2 {
		font-family: RobotoSlab;
		font-weight: 600;
		font-size:20px;
		line-height:28px;
		margin-bottom:40px;
	}
	h3 { 
		font-family: RobotoSlab;
		font-weight: 600;
		font-size:20px;
		line-height:24px;
		margin-bottom:10px;
		margin-top:40px;
	}
	h4 {	font-size:14px; line-height:18px; }
	a {
		display:block;
		color:#fff;
		text-decoration:none;
	}
	ul {
	  list-style-type: none;
	}
	.bulle_content li {
		font-size:22px;
		line-height:28px;
	}
	.page_content h1 {
		font-size:36px;
		line-height:40px;
		padding-top:120px;
		margin-bottom:10px;
	}
	.article_content p {
		font-size:22px;
		line-height:28px;
		margin-bottom:20px;
	}





	/* -----------------------------------------------------------------------------------
	
		ELEMENTS 
		
	*/
	/* FOND */
	/* <img src="./img/bg/fond-01.jpg" alt="En-voile : Julien Calvet" class="home_fond"> */
	
	/* HEADER */
	.bt-icone {
		border-radius:50%;
		cursor:pointer;
		margin-right:10px;
	}
	.icone {
		width:40px;
		height:40px;
	}
	.icone.big {
		width:60px;
		height:60px;
	}
	
	.profil {
		margin-right: 15px;
		margin-left: 10px;
		overflow:hidden;
	}
	.icone.avatar {
		background:url('../img/julien-calvet.png') no-repeat center center;
	}
	.icone.email {
		background:url('../img/email.png') no-repeat center center;
	}
	.icone.facebook {
		background:url('../img/facebook.png') no-repeat center center;
	}
	.icone.instagram {
		background:url('../img/instagram.png') no-repeat center center;
	}
	.icone.maps {
		background:url('../img/maps.png') no-repeat center center;
	}
	.icone.fr {
		background:url('../img/fr.jpg') no-repeat center center;
	}
	.icone.en {
		background:url('../img/en.jpg') no-repeat center center;
	}
	.floatright {
		position:absolute;
		right:10px;
		top:0px;
	}
	.bt-icone.right {
		width:20px;
		height:20px;
		float:right;
		border-radius:5px;
		overflow:hidden;
		margin-left:10px;
		
	}
	.bt-icone.right .icone {
		width:20px;
		height:20px;
		background-size:contain;
	}
	
	
	
	.outremer {
		background:url('../img/outremer.jpg') no-repeat center center;
	}
	.acm {
		background:url('../img/acm.jpg') no-repeat center center;
	}
	.catamaran {
		background:url('../img/catamaran.jpg') no-repeat center center;
	}
	.thalassacup {
		background:url('../img/thalassacup.jpg') no-repeat center center;
	}
	.teamwinds {
		background:url('../img/teamwinds.jpg') no-repeat center center;
	}
	.musto {
		background:url('../img/musto.jpg') no-repeat center center;
	}
	.spinlock {
		background:url('../img/spinlock.jpg') no-repeat center center;
	}
	.grandlarge {
		background:url('../img/grandlarge.jpg') no-repeat center center;
	}
	.logo_partenaire {
		width:200px;
		height:200px;
		border-radius:50%;
		overflow:hidden;
		background-color: #fff;
		background-size:160px 160px;
	}
	.bt_partenaire {
		width:200px;
		height:200px;
		display:inline-block;
		margin-right:10px;
		margin-top:10px;
	}
	
	/* HOME */
	.logo_home {
		width:350px;
		margin-left: 20px;
		margin-bottom: 18px;
	}
	.home {
		background:url('../img/En-Voile-Julien-Calvet-skipper-formateur-Navigation-Formation-mise-en-main-convoyage-transatlantique-manoeuvre-routage-securite-communication-outremer-4X-2.jpg') no-repeat center center;
		background-size:cover;
		background-color:#fff;
	}
	.home_content {
		transform: rotate(0deg);
		width:100%;
		height:100%;
		display:flex;
		flex-direction:row;
		align-items:center;
		justify-content:center;
	}
	.bulle {
		cursor:pointer;
		overflow:hidden;
		background:#0c2d69;
		color:#fff;
		border-radius:50%;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		flex-shrink: 0;
	}
	.home_logo {
		width:480px;
		height:480px;
		margin-top:0;
	}
	.home_projets {
		width:330px;
		height:330px;
		margin-right:-70px;
		/* margin-top:300px; */
	}
	.home_formations {
		width:380px;
		height:380px;
		margin-left:-70px;
		/* margin-top:-300px; */
	}
	
	/* PAGE */
	.exp li {
		font-family: 'RobotoCondensed';
		display:block;
		width:fit-content;
		background:#fff;
		padding:10px 20px;
		color:#0c2d69;
		font-weight:bold;
		margin-bottom: 5px;
		margin-right: 1px;
		border-radius: 40px;
	}
	.part li {
		font-family: 'RobotoCondensed';
		display:inline-block;
		width:auto;
		
		background:#0c2d69;
		border:1px solid #fff;
		padding:10px 20px;
		color:#fff;
		
		font-weight:bold;
		margin-bottom: 5px;
		margin-right: 1px;
	}
	


	/* -----------------------------------------------------------------------------------
	
		SCREEN 
		
	*/
	.header {
		position:absolute;
		top:10px;
		left:10px;
		display:flex;
		height:60px;
		flex-direction:row;
		align-items:center;
		width:calc(100% - 10px);
	}
	.main {
		width:100%;
		position:relative;
	}
	.home {
		width:100%;
		height:100vh;
		position:relative;
	}
	.page {
		width:100%;
		padding:0 100px 140px 100px;
		box-sizing:border-box;
		position:relative;
		background:#0c2d69;
	}
	.footer {
		display:flex;
		position: relative;
		height:100px;
		padding:10px;
		box-sizing:border-box;
		flex-direction:row;
		align-items:center;
	}
	.footer .floatright {
		top: 57px;
	}
	
	


	/* ----------------------------------------------------------------------------------- 
	
		TOOLS
		
	*/
	.overflow-hidden {
		overflow:hidden;
	}


	
	
	/* ----------------------------------------------------------------------------------- 
	
		ANIMATION 
		@-webkit-keyframes anim_home
	*/
	
	@keyframes anim_home {
		from {
			transform: rotate(0deg);
		}

		45% {
			transform: rotate(30deg);
		}

		60% {
			transform: rotate(35deg);
		}

		65% {
			transform: rotate(30deg);
		}

		to {
			transform: rotate(0deg);
		}
	}
	@keyframes anim_bulles {
		from {
			transform: rotate(0deg);
		}

		45% {
			transform: rotate(-30deg);
		}

		60% {
			transform: rotate(-35deg);
		}

		65% {
			transform: rotate(-30deg);
		}

		to {
			transform: rotate(0deg);
		}
	}
	@keyframes anim_bulle {
		from {
			transform: scale(1);
		}

		45% {
			transform: scale(1.2);
		}

		60% {
			transform: scale(1.25);
		}

		80% {
			transform: scale(1.15);
		}

		to {
			transform: scale(1.2);
		}
	}
	@keyframes anim_bulle_out {
		from {
			transform: scale(1.2);
		}

		45% {
			transform: scale(1);
		}

		60% {
			transform: scale(0.95);
		}

		80% {
			transform: scale(1.05);
		}

		to {
			transform: scale(1);
		}
	}
	
	.home_projets_content
	{
		-webkit-transition-delay: 0.3s;
		transition-delay: 0.3s;
	}
	.home_logo_content
	{
		-webkit-transition-delay: 0.6s;
		transition-delay: 0.6s;
	}
	.home_formations_content
	{
		-webkit-transition-delay: 0.9s;
		transition-delay: 0.9s;
	}
	/* .home_content:hover .home_projets .bulle_content
	{
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}
	.home_content:hover .home_logo .bulle_content
	{
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.6s;
	}
	.home_content:hover .home_formations .bulle_content
	{
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.9s;
	}
	.home_content:hover
	{
		-webkit-animation: anim_home 5s ease-in-out infinite;
		animation: anim_home 5s ease-in-out infinite;
	}
	.home_content:hover .bulle_content
	{
		-webkit-animation: anim_bulles 5s ease-in-out infinite;
		animation: anim_bulles 5s ease-in-out infinite;
	} */
	
	
	.bulle, .bt-icone
	{
		transform: scale(1);
		z-index:0;
	}
	.bulle:hover, .bt-icone:hover
	{
		transform: scale(1.15);
		z-index:1;
	}
	.bt_partenaire {
		transform: scale(1);
	}
	.bt_partenaire:hover {
		transform: scale(0.8);
	}
	
	/* .bulle .bulle_content
	{
		transform: scale(1);
	}
	.bulle:hover .bulle_content
	{
		transform: scale(1.1);
	}
	
	.bt-icone:hover
	{
		-webkit-animation: anim_bulle 0.6s steps(300);
		animation: anim_bulle 0.6s steps(300);
	}
	.bt-icone
	{
		-webkit-animation: anim_bulle_out 0.6s steps(300);
		animation: anim_bulle_out 0.6s steps(300);
	} */
	
	.bulle, .bt-icone, .bt_partenaire	{
		-ms-transition: -ms-transform 0.5s ease;
		-o-transition: -o-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-moz-transition: -moz-transform 0.5s ease;
		transition: transform 0.5s ease;
		/* transition-delay: 0.05s; */
	}
	.home_content, .home_projets_content, .home_logo_content, .home_formations_content	{
		transform: rotate(0deg);
		-ms-transition: -ms-transform 5s ease-in-out;
		-o-transition: -o-transform 5s ease-in-out;
		-webkit-transition: -webkit-transform 5s ease-in-out;
		-moz-transition: -moz-transform 5s ease-in-out;
		transition: transform 5s ease-in-out;
		/* transition-delay: 0.05s; */
	}
	.home {
		opacity: 1;
		transform: scale(1);
		-ms-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
	}
	/*
	.home_logo {
		-ms-transition: -ms-margin-top 5s ease;
		-o-transition: -o-margin-top 5s ease;
		-webkit-transition: -webkit-margin-top 5s ease;
		-moz-transition: -moz-margin-top 5s ease;
		transition: margin-top 5s ease;
	}*/

	
	
	/* ----------------------------------------------------------------------------------- 
	
		MEDIAQUERIES
		
	*/
	@media (max-width: 550px){
		
		.home_projets {
			display:none;
		}
		.home_formations {
			display:none;
		}
		.home_logo {
			width: 280px;
			height: 280px;
		}
		.logo_home {
			width: 230px;
		}
		.header {
			top:0px;
			left:0px;
		}
		.floatright {
			top:5px;
			right:0;
		}
		.page {
			padding: 0 20px 40px 20px;
		}
		.page_content h1 {
			padding-top: 60px;
		}
		.profil {
			margin-left: 0;
		}
		.bt-icone {
			transform:scale(0.8);
			margin-right: 0px;
		}
	}
	@media (min-width: 551px) and (max-width: 970px){
		
		.home_projets {
			display:none;
		}
		.home_formations {
			display:none;
		}
		.home_logo {
			width: 480px;
			height: 480px;
		}
		
	}
	/*
	@media (min-width: 750px) and  (max-width: 750px) {
		.main {	width:auto; margin-left:0; left:20px; right:20px;	margin-top:550px;}
		.header {  position: absolute; left:50%; margin-left:-110px; }
		.article { margin-top:80px; }
	}*/