@font-face {
  font-family: 'Brisa';
  src: url('/assets/fonts/BrisaAlternates/regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'AvenirNext';
  src: url('/assets/fonts/AvenirNext/AvenirNextCyr-Light.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'AvenirNext';
  src: url('/assets/fonts/AvenirNext/AvenirNextCyr-Demi.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'AvenirNext';
  src: url('/assets/fonts/AvenirNext/AvenirNextCyr-Heavy.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

/* Italic */

@font-face {
  font-family: 'AvenirNext';
  src: url('/assets/fonts/AvenirNext/AvenirNextCyr-LightItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'AvenirNext';
  src: url('/assets/fonts/AvenirNext/AvenirNextCyr-DemiItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'AvenirNext';
  src: url('/assets/fonts/AvenirNext/AvenirNextCyr-HeavyItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
}

body
{
	background-color:#ffffff;
	color:#000000;
	font-family: "AvenirNext", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight:400;
	line-height: 1.4;
	margin:0;
	-webkit-font-smoothing: subpixel-antialiased;
}

*
{
	box-sizing: border-box;
}

p,
h1,
h2,
h3
{
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: inherit;
}

a
{
	color: #0da7d8;
	text-decoration: none;
	transition: color 0.5s;
}
	
	a:hover
	{
		color: #0080e2;
		text-decoration: none;
	}

strong
{
	font-weight:600;
}

ul
{
	list-style: none;
	margin: 10px 10px 10px 30px;
	padding: 0;
}
	
	ul + p,
	ul + div
	{
		margin-top: 50px;
	}

li
{
	list-style-type: none;
	margin: 15px 0;
	padding: 0;
	position: relative;
	text-align: left;
}
	
	li:before
	{
		content: "\f061";
		font-family: "FontAwesome";
		left: -30px;
		width: 20px;
		position: absolute;
	}
		
		.podcastics li
		{
			color: #777777;
		}
			
			.podcastics li:before
			{
				color: #009bff;
			}
		
		.who li:before
		{
			color: #ffe980;
		}

.superStrong
{
	font-weight:900;
}

.greyed
{
	color: #666666;
}

hr
{
	margin:40px 0;
	height:1px;
	border:none;
	color:#e5e5e5;
	background-color:#e5e5e5;
}

.contentWrapper
{
	margin: 0 auto;
	max-width: 1300px;
	padding: 0 30px;
}

.mainNav
{
	background: #000000;
	color: #ffffff;
	position: relative;
	z-index: 100;
}

	.mainNav .contentWrapper
	{
		display: flex;
		flex-direction: row;
		height:150px;
		justify-content: space-between;
	}
	
.studiow-logo
{
	align-self: center;
	animation-duration: 0.8s;
	animation-fill-mode: backwards;
	animation-name: displayNavItem;
}
	
	.studiow-logo img
	{
		transition: transform 0.2s;
		width: 110px;
	}
		
		.studiow-logo img:hover
		{
			transform: scale(1.05);
		}

.mainNav_items
{
	display: flex;
	flex-direction: row;
	font-size: 18px;
	text-transform: uppercase;
}

.mainNav_item + .mainNav_item
{
	margin-left: 0;
}

.mainNav_item
{
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 0 28px;
	position: relative;
}

		.mainNav_item .hoverBg
		{
			display: flex;
			left:0;
			top: 0;
			height: 100%;
			width: 100%;
			position: absolute;
			z-index: 0;
		}
	
			.mainNav_item .hoverBg div
			{
				width: 10%;
				z-index: 0;
			}
	
			.mainNav_item:not(.active) .hoverBg div
			{
				height: 0;
			}
	
			.mainNav_item.active .hoverBg div
			{
				height: 100%;
			}
	
		.mainNav_item:nth-child(1) .hoverBg div
		{
			background-color: #21c2f5;
		}
	
		.mainNav_item:nth-child(2) .hoverBg div
		{
			background-color: #97d852;
		}
	
		.mainNav_item:nth-child(3) .hoverBg div
		{
			background-color: #009bff;
		}

		.mainNav_item:nth-child(4) .hoverBg div
		{
			background-color: #ff4080;
		}

		.mainNav_item:nth-child(5) .hoverBg div
		{
			background-color: #ffe980;
		}

		.mainNav_item:nth-child(6) .hoverBg div
		{
			background-color: #ffffff;
		}
	
			.mainNav_item:not(.active) .hoverBg div:nth-child(1) {	transition: height 0.30s;  }
			.mainNav_item:not(.active) .hoverBg div:nth-child(2) {	transition: height 0.35s;  }
			.mainNav_item:not(.active) .hoverBg div:nth-child(3) {	transition: height 0.40s;  }
			.mainNav_item:not(.active) .hoverBg div:nth-child(4) {	transition: height 0.45s;  }
			.mainNav_item:not(.active) .hoverBg div:nth-child(5) {	transition: height 0.50s;  }
			.mainNav_item:not(.active) .hoverBg div:nth-child(6) {	transition: height 0.55s;  }
			.mainNav_item:not(.active) .hoverBg div:nth-child(7) {	transition: height 0.60s;  }
			.mainNav_item:not(.active) .hoverBg div:nth-child(8) {	transition: height 0.65s;  }
			.mainNav_item:not(.active) .hoverBg div:nth-child(9) {	transition: height 0.70s;  }
			.mainNav_item:not(.active) .hoverBg div:nth-child(10) {	transition: height 0.75s;  }
	
			.mainNav_item:not(.active):hover .hoverBg div
			{
				height: 100%;
			}
			
		.mainNav_item .aLabel
		{
			animation-duration: 0.8s;
			animation-fill-mode: backwards;
			animation-name: displayNavItem;
			position: relative;
			transition: color 0.5s;
			z-index: 1;
		}
		
			.mainNav_item:nth-child(1) .aLabel
			{
				animation-delay: 0.1s;
				color: #21c2f5;
			}
			
			.mainNav_item:nth-child(2) .aLabel
			{
				animation-delay: 0.2s;
				color: #97d852;
			}
			
			.mainNav_item:nth-child(3) .aLabel
			{
				animation-delay: 0.3s;
				color: #009bff;
			}
			
			.mainNav_item:nth-child(4) .aLabel
			{
				animation-delay: 0.4s;
				color: #ff4080;
			}
			
			.mainNav_item:nth-child(5) .aLabel
			{
				animation-delay: 0.5s;
				color: #ffe980;
			}
			
			.mainNav_item:nth-child(6) .aLabel
			{
				animation-delay: 0.6s;
				color: #ffffff;
			}
			
		@keyframes displayNavItem
		{
			0%		{opacity: 0; transform: translateY(-80px);}
			100%	{opacity: 1;}
		}
		
			.mainNav_item.active .aLabel
			{
				color: #000000;
				font-weight: 600;
			}

			.mainNav_item:hover .aLabel
			{
				color: #000000;
			}

#mobileNavIcon
{
	display: none;
	height: 40px;
	width: 40px;
	position: fixed;
	top: 40px;
	left: 40px;
	z-index: 1000;
}
	
	#mobileNavIcon:before
	{
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 35px;
		content: "";
		position: absolute;
		height: 70px;
		left: -15px;
		transition: background-color 0.4s;
		top: -15px;
		width: 70px;
	}

		#mobileNavIcon.open:before
		{
			background-color: rgba(255, 255, 255, 0.2);
		}
	
	#menuCheck
	{
		display: none;
	}
	
	#mobileNavIcon label
	{
		align-items: center;
		display: flex;
		height: 100%;
		position: relative;
		width: 100%;
	}
		
		#mobileNavIcon label:hover
		{
			cursor: pointer;
		}
	
	.menuBar,
	.menuBar:after,
	.menuBar:before
	{
		background-color: #ffffff;
		border-radius: 3px;
		height: 3px;
		width: 100%;
		transition: all 0.3s;
	}
	
	.menuBar
	{
		position: relative;
	}
		
		.menuBar:after,
		.menuBar:before
		{
			content:"";
			position: absolute;
		}
		
		.menuBar:after
		{
			bottom:-400%;
			transform-origin: bottom right;
		}
		
		.menuBar:before
		{
			top:-400%;
			transform-origin: top right;
		}
		
		#mobileNavIcon label:hover .menuBar
		{
			/*transform: translateX(3px);*/
		}

		#mobileNavIcon label:hover .menuBar:after
		{
			transform: rotate(-45deg) translate(25%, -300%) scaleX(0.60);
		}

		#mobileNavIcon label:hover .menuBar:before
		{
			transform: rotate(45deg) translate(25%, 300%) scaleX(0.60);
		}

		#mobileNavIcon :checked ~ label
		{
			transition: transform 0.4s;
		}
	
			#mobileNavIcon :checked ~ label:hover
			{
				transform: scale(1.2);
			}

		#mobileNavIcon :checked ~ label .menuBar
		{
			/*transform: translateX(-3px);*/
		}
		
		#mobileNavIcon :checked ~ label .menuBar:after
		{
			transform-origin: bottom left;
			transform: rotate(45deg) translate(-25%, -300%) scaleX(0.60);
		}
		
		#mobileNavIcon :checked ~ label .menuBar:before
		{
			transform-origin: top left;
			transform: rotate(-45deg) translate(-25%, 300%) scaleX(0.60);
		}
		
#mobileNavItems
{
	/*box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);*/
	flex-direction: column;
	height: 100%;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 900;
}
	
	#mobileNavItems.closed
	{
		display: none;
	}
	
	#mobileNavItems.open
	{
		display: flex;
	}
	
	.mobileNavItem
	{
		align-items: center;
		animation-fill-mode: both;
		display: flex;
		font-size: 42px;
		font-weight: 800;
		height: 16.66%;
		justify-content: center;
		text-transform: uppercase;
		width: 100vw;
	}
		
		a.mobileNavItem
		{
			color: #000000;
		}

		.closed .mobileNavItem
		{
			transform: translateX(-100vw);
		}

		.open .mobileNavItem
		{
			transform: translateX(0);
		}
		
		.mobileNavItem:nth-child(1)
		{
			background-color: #21c2f5;
		}

			.closed .mobileNavItem:nth-child(1)
			{
				animation: closeMobileNavItem 0.4s;
			}
			
			.open .mobileNavItem:nth-child(1)
			{
				animation: openMobileNavItem 0.6s;
			}
		
		.mobileNavItem:nth-child(2)
		{
			background-color: #97d852;
		}

			.closed .mobileNavItem:nth-child(2)
			{
				animation: closeMobileNavItem 0.3s;
			}
			
			.open .mobileNavItem:nth-child(2)
			{
				animation: openMobileNavItem 0.8s;
			}
		
		.mobileNavItem:nth-child(3)
		{
			background-color: #009bff;
		}
			
			.closed .mobileNavItem:nth-child(3)
			{
				animation: closeMobileNavItem 0.5s;
			}
			
			.open .mobileNavItem:nth-child(3)
			{
				animation: openMobileNavItem 0.7s;
			}
		
		.mobileNavItem:nth-child(4)
		{
			background-color: #ff4080;
		}
			
			.closed .mobileNavItem:nth-child(4)
			{
				animation: closeMobileNavItem 0.5s;
			}
			
			.open .mobileNavItem:nth-child(4)
			{
				animation: openMobileNavItem 0.6s;
			}
		
		.mobileNavItem:nth-child(5)
		{
			background-color: #ffe980;
		}
			
			.closed .mobileNavItem:nth-child(5)
			{
				animation: closeMobileNavItem 0.44s;
			}
			
			.open .mobileNavItem:nth-child(5)
			{
				animation: openMobileNavItem 0.76s;
			}
		
		.mobileNavItem:nth-child(6)
		{
			background-color: #ffffff;
		}
			
			.closed .mobileNavItem:nth-child(6)
			{
				animation: closeMobileNavItem 0.36s;
			}
			
			.open .mobileNavItem:nth-child(6)
			{
				animation: openMobileNavItem 0.85s;
			}
		
			@keyframes closeMobileNavItem
			{
				0%		{transform: translateX(0)}
				100%	{transform: translateX(-100vw)}
			}
			
			@keyframes openMobileNavItem
			{
				0%		{transform: translateX(-100vw)}
				100%	{transform: translateX(0)}
			}


.edito
{
	background-color: #222222;
	color: #ffffff;
	font-size: 21px;
	padding: 50px 30px;
	text-align: center;
}
	
	.edito p + p
	{
		margin-top: 15px;
	}

footer
{
	background-color: #000000;
	color: #ffffff;
	padding: 30px;
}

	footer .items
	{
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
		
		footer a
		{
			color: #ffffff;
		}
			
			footer a:hover
			{
				color: #21c2f5;
			}
		
		footer .item:not(:first-child)
		{
			margin-left: 10%;
		}
		
		footer .item
		{
			text-align: center;
		}
			
			footer .item i.fa
			{
				font-size: 28px;
			}

.bottomSpace
{
	height: 150px;
}

.welcomeHeader
{
	align-items: center;
	background-color: #000000;
	background-image:url('/assets/images/homepage/header.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: calc(100vh - 150px);
	overflow: hidden;
	position: relative;
	text-transform: uppercase;
}

.welcomeShadowTop
{
	background: linear-gradient(#000000, transparent);
	height: 40px;
	position: absolute;
	top:0;
	width: 100%;
	z-index: 0;
}

.welcomeShadowBottom
{
	background: linear-gradient(transparent, #000000);
	bottom:0;
	height: 40px;
	position: absolute;
	width: 100%;
	z-index: 0;
}

.welcomeTextWrapper
{
	margin-top: -10vh;
	z-index: 1;
	transition: height 0.3s;
}

.welcomeText
{
	align-items: center;
	display: flex;
	flex-direction: column;
	font-size: 130px;
	font-weight: 400;
	line-height: 1;
}

	.welcomeText1,
	.welcomeText2,
	.welcomeText3
	{
		animation: displayWelcomeText 0.5s;
		animation-fill-mode: both;
	}

	.welcomeText1
	{
		animation-delay: 0.5s;
	}

	.welcomeText2
	{
		animation-delay: 1.5s;
	}

	.welcomeText3
	{
		animation-delay: 2.5s;
		font-weight: 900;
	}
	
@keyframes displayWelcomeText
{
	0% {
		height: 0;
		opacity: 0;
	}
	
	100% {
		height: 130px;
		opacity: 1;
	}
}

.welcomeSubText
{
	animation: displayWelcomeSubText 0.5s;
	animation-delay: 3.5s;
	animation-fill-mode: both;
	background: rgba(0, 0, 0, 0.7);
	font-size: 30px;
	font-weight: 400;
	margin-top: 20px;
	padding: 5px 15px;
	text-align: center;
	z-index: 1;
}

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

.scrolldown
{
	animation: scrollDown 3s infinite;
	animation-delay: 4s;
	animation-fill-mode: backwards;
	border-left: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	bottom: 100px;
	box-sizing: border-box;
	height: 30px;
	left: 50%;
	margin-left: -15px;
	position: absolute;
	transform: rotate(-45deg);
	width: 30px;
	z-index: 1;
}

@keyframes scrollDown
{
	0% {
		transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	
	50% {
		opacity: 1;
	}
	
	100% {
		transform: rotate(-45deg) translate(-40px, 40px);
		opacity: 0;
	}
}

.sections
{
	background-color: #000000;
}
	
	.sections
	{
		display: flex;
		font-size: 30px;
		height: 250px;
		line-height: 1.3;
		overflow: hidden;
	}
		
		.sections .section
		{
			color: #000000;
			overflow: hidden;
			position: relative;
			width: 20%;
		}
	
		.sections:hover .section
		{
		}
	
			.sections .section .sectionContent
			{
				align-items: center;
				display: flex;
				height: 100%;
				justify-content: center;
				position: absolute;
				transition: all 0.5s;
				width: 100%;
			}

				.sections .section:hover .sectionContent
				{
					transform: translateX(-100%);
				}
			
			.sections .section .sectionLink
			{
				align-items: center;
				display: inline-flex;
				flex-direction: column;
				height: 100%;
				justify-content: center;
				overflow: hidden;
				padding: 10px 0;
				position: absolute;
				transform: translateX(100%);
				transition: all 0.5s;
				width: 100%;
			}

				.sections .section:hover .sectionLink
				{
					transform: translateX(0);
				}
			
				.sections .section .sectionLink .text
				{
					background-color: #000000;
					color: #ffffff;
					font-size: 24px;
					margin: 7px 0;
					padding: 6px 12px;
					text-transform: uppercase;
				}
				
			.sections .section.why
			{
				background-color: #21c2f5;
			}

				.sections .section.why:hover .sectionContent
				{
					background-color: #008ebb;
				}
			
			.sections .section.weDo
			{
				background-color: #97d852;
			}
			
				.sections .section.weDo:hover .sectionContent
				{
					background-color: #699d31;
				}
				
			.sections .section.realisations
			{
				background-color: #ff4080;
			}

				.sections .section.realisations:hover .sectionContent
				{
					background-color: #c0265a;
				}
			
			.sections .section.who
			{
				background-color: #ffe980;
			}

				.sections .section.who:hover .sectionContent
				{
					background-color: #b9a546;
				}
			
			.sections .section.contact
			{
				background-color: #ffffff;
			}
			
				.sections .section.contact:hover .sectionContent
				{
					background-color: #bfbfbf;
				}
			
			.sections .section .title
			{
				text-align: center;
				text-transform: uppercase;
			}
			
.sectionBanner
{
	background-color: #1c3483;
	color: #ffffff;
	display: block;
	height: 200px;
	font-size: 30px;
	overflow: hidden;
	position: relative;
}
	
	.sectionBanner:hover
	{
		color: #ffffff;
	}

	.sectionBanner .sectionBannerContent
	{
		align-items: center;
		display: flex;
		justify-content: center;
		height: 100%;
		position: absolute;
		transition: all 0.5s;
		width: 100%;
	}

		.sectionBanner:hover .sectionBannerContent
		{
			transform: translateY(-100%);
		}
	
	.sectionBanner .sectionBannerLink
	{
		align-items: center;
		display: flex;
		height: 100%;
		justify-content: center;
		overflow: hidden;
		padding: 10px 0;
		position: absolute;
		transform: translateY(100%);
		transition: all 0.5s;
		width: 100%;
	}
		
		.sectionBanner:hover .sectionBannerLink
		{
			transform: translateY(0);
		}
	
		.sectionBanner .sectionBannerLink .text
		{
			background-color: #000000;
			color: #ffffff;
			font-size: 24px;
			margin: 7px 0;
			padding: 6px 12px;
			text-transform: uppercase;
		}
		
		.sectionBanner .sectionBannerLink h3.text + h3.text
		{
			margin-left: 30px;
		}
		
	.sectionBanner .title
	{
		text-align: center;
		text-transform: uppercase;
	}
	
	.sectionBanner:hover .sectionBannerContent
	{
		background-color: #122254;
	}
			
.pageHeader
{
	align-items: center;
	color: #000000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	text-transform: uppercase;
}
	
	 .why .pageHeader
	{
		background: linear-gradient(#21c2f5, #a9eaff);
	}
	
	.weDo .pageHeader
	{
		background: linear-gradient(#97d852, #caeda5);
	}
	
	.podcastics .pageHeader
	{
		background: linear-gradient(#009bff, #70c7ff);
	}
	
	.realisations .pageHeader
	{
		background: linear-gradient(#ff4080, #ff8db3);
	}
	
	.who .pageHeader
	{
		background: linear-gradient(#ffe980, #fdf5ce);
	}
	
	.contact .pageHeader
	{
		background: linear-gradient(#ffffff, #eeeeee);
	}
	
	.pageHeader .pageTextWrapper
	{
		color: #ffffff;
		font-size: 39px;
		margin: 100px 0;
		padding: 10px 0;
	}
		
		.pageHeader .pageTextWrapper.small
		{
			font-size: 30px;
			margin: 50px 0;
		}
	
	.pageText1,
	.pageText2,
	.pageText3
	{
		animation: displayPageText 0.1s;
		animation-fill-mode: both;
		background-color: #000000;
		display: inline-block;
		margin: 0 10px;
		min-width: 50px;
		padding: 7px 16px;
		position: relative;
		overflow: hidden;
		white-space: nowrap;
	}
	
	.pageText2
	{
		animation-delay: 1.3s;
	}
	
	.pageText3
	{
		animation-delay: 3s;
	}
	
	.pageTextIcon1,
	.pageTextIcon2,
	.pageTextIcon3,
	.pageTextIcon4
	{
		animation: displayPageText 1s;
		animation-fill-mode: both;
		display: inline-block;
		margin: 0 30px;
		position: relative;
		overflow: hidden;
		text-align: center;
		white-space: nowrap;
	}
		
		.pageTextIcon1 img,
		.pageTextIcon2 img,
		.pageTextIcon3 img,
		.pageTextIcon4 img
		{
			display: block;
			margin: 0 auto;
			width: 150px;
		}
		
		.pageTextIcon1 div,
		.pageTextIcon2 div,
		.pageTextIcon3 div
		{
			background-color: #000000;
			padding: 7px 16px;
			margin-top: 20px;
		}
	
	.pageTextIcon2
	{
		animation-delay: 1s;
	}
	
	.pageTextIcon3
	{
		animation-delay: 2s;
	}
	
	.pageTextIcon4
	{
		animation-delay: 3s;
	}
	
	@keyframes displayPageText
	{
		0% {
			opacity:0;
		}
	
		100% {
			opacity:1;
		}
	}

		.pageText1 span,
		.pageText2 span,
		.pageText3 span
		{
			animation: displayPageTextSpan 0.05s;
			animation-fill-mode: both;
			display: inline-block;
		}

		.pageText1 span:nth-child(1)
		{
			animation-delay: 0.1s;
		}
	
		.pageText1 span:nth-child(2)
		{
			animation-delay: 0.2s;
		}
	
		.pageText1 span:nth-child(3)
		{
			animation-delay: 0.3s;
		}
	
		.pageText1 span:nth-child(4)
		{
			animation-delay: 0.4s;
		}
	
		.pageText1 span:nth-child(5)
		{
			animation-delay: 0.5s;
		}
	
		.pageText1 span:nth-child(6)
		{
			animation-delay: 0.6s;
		}
	
		.pageText1 span:nth-child(7)
		{
			animation-delay: 0.7s;
		}
	
		.pageText1 span:nth-child(8)
		{
			animation-delay: 0.8s;
		}
	
		.pageText1 span:nth-child(9)
		{
			animation-delay: 0.9s;
		}
	
		.pageText1 span:nth-child(10)
		{
			animation-delay: 1s;
		}
	
		.pageText1 span:nth-child(11)
		{
			animation-delay: 1.1s;
		}

		.pageText2 span:nth-child(1)
		{
			animation-delay: 1.5s;
		}
	
		.pageText2 span:nth-child(2)
		{
			animation-delay: 1.6s;
		}
	
		.pageText2 span:nth-child(3)
		{
			animation-delay: 1.7s;
		}
	
		.pageText2 span:nth-child(4)
		{
			animation-delay: 1.8s;
		}
	
		.pageText2 span:nth-child(5)
		{
			animation-delay: 1.9s;
		}
	
		.pageText2 span:nth-child(6)
		{
			animation-delay: 2s;
		}
	
		.pageText2 span:nth-child(7)
		{
			animation-delay: 2.1s;
		}
	
		.pageText2 span:nth-child(8)
		{
			animation-delay: 2.2s;
		}
	
		.pageText2 span:nth-child(9)
		{
			animation-delay: 2.3s;
		}
	
		.pageText2 span:nth-child(10)
		{
			animation-delay: 2.4s;
		}
	
		.pageText2 span:nth-child(11)
		{
			animation-delay: 2.5s;
		}
	
		.pageText2 span:nth-child(12)
		{
			animation-delay: 2.6s;
		}
	
		.pageText2 span:nth-child(13)
		{
			animation-delay: 2.7s;
		}
	
		.pageText2 span:nth-child(14)
		{
			animation-delay: 2.8s;
		}
		
		.pageText3 span:nth-child(1)
		{
			animation-delay: 3.2s;
		}
	
		.pageText3 span:nth-child(2)
		{
			animation-delay: 3.3s;
		}
	
		.pageText3 span:nth-child(3)
		{
			animation-delay: 3.4s;
		}
	
		.pageText3 span:nth-child(4)
		{
			animation-delay: 3.5s;
		}
	
		.pageText3 span:nth-child(5)
		{
			animation-delay: 3.6s;
		}
	
		.pageText3 span:nth-child(6)
		{
			animation-delay: 3.7s;
		}
	
		.pageText3 span:nth-child(7)
		{
			animation-delay: 3.8s;
		}
	
		.pageText3 span:nth-child(8)
		{
			animation-delay: 3.9s;
		}
	
		.pageText3 span:nth-child(9)
		{
			animation-delay: 4s;
		}
	
		.pageText3 span:nth-child(10)
		{
			animation-delay: 4.1s;
		}
	
		.pageText3 span:nth-child(11)
		{
			animation-delay: 4.2s;
		}
	
		.pageText3 span:nth-child(12)
		{
			animation-delay: 4.3s;
		}
	
		.pageText3 span:nth-child(13)
		{
			animation-delay: 4.4s;
		}
	
		.pageText3 span:nth-child(14)
		{
			animation-delay: 4.5s;
		}

@keyframes displayPageTextSpan
{
	0% {
		opacity:0;
		margin-left: -30px;
	}

	80% {
		opacity:0;
	}
	
	100% {
		opacity:1;
		margin-left: 0;
	}
}


.pageChapeau
{
	background-color: #efefef;
	font-size: 24px;
	margin: 50px 0;
	padding: 30px 30px;
	text-align: center;
	text-transform: uppercase;
}

.podcastWrapper
{
	 padding: 50px 0 70px 0;
}

.pageParagraph
{
	margin-top: 60px;
	display: flex;
}

	.pageParagraph + .pageParagraph:not(.noBorder)
	{
		border-top: 1px solid #dfdfdf;
		padding-top: 60px;
	}


.paragraphTitle
{
	margin-bottom: 30px;
	flex-shrink: 0;
	width: 290px;
}
	
	.paragraphTitle img
	{
		width: 100%;
	}
	
	.paragraphTitle .paragraphTitleContent
	{
		font-size: 22px;
		font-weight: 600;
		margin-bottom: 0;
		padding: 7px 16px;
		text-align: right;
		text-transform: uppercase;
	}
		
		.why .paragraphTitle .paragraphTitleContent
		{
			background: #83e1ff;
		}
		
		.weDo .paragraphTitle .paragraphTitleContent
		{
			background: #b9ee81;
		}
		
		.podcastics .paragraphTitle .paragraphTitleContent
		{
			background: #009bff;
			color: #ffffff;
		}
		
		.realisations .paragraphTitle .paragraphTitleContent
		{
			background: #ff8db3;
		}
		
		.who .paragraphTitle .paragraphTitleContent
		{
			background: #fff2b4;
		}
		
		.contact .paragraphTitle .paragraphTitleContent
		{
			background: #efefef;
		}

.paragraphContent
{
	align-items: flex-end;
	display: flex;
	font-size: 20px;
	margin-left: 50px;
	text-align: justify;
	width: 100%;
}
	
	.paragraphContent p + p
	{
		margin-top: 12px;
	}
	
	.paragraphContent p iframe
	{
		margin: 60px 0;
	}
	
.paragraphContentText
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	width: 100%;
}

.paragraphContentImage
{
	flex-shrink: 0;
	margin-left: 50px;
	width: 250px;
}
	
	.paragraphContent .paragraphContentSubtitle
	{
	}
	
	.paragraphContent p + .paragraphContentSubtitle
	{
		margin-top: 30px;
	}
	
	.paragraphContent .paragraphContentSubtitle div,
	.paragraphContent .paragraphContentSubtitle h3
	{
		background-color: #000000;
		color: #ffffff;
		display: inline-block;
		font-size: 22px;
		margin-bottom: 10px;
		padding: 7px 16px;
		text-transform: uppercase;
	}
		
		.paragraphContent .paragraphContentSubtitle.option:before
		{
			content: "Option";
			display: inline-block;
			font-size: 22px;
			padding: 7px 16px;
			text-transform: uppercase;
		}
			
			.paragraphContent .paragraphContentSubtitle.option.free:before
			{
				content: "Offre Free";
			}
			
			.paragraphContent .paragraphContentSubtitle.option.premium:before
			{
				content: "Offre Premium";
			}
			
			.paragraphContent .paragraphContentSubtitle.option.pro:before
			{
				content: "Offre Pro";
			}
			
			.paragraphContent .paragraphContentSubtitle.option.max:before
			{
				content: "Offre Max";
			}

			.paragraphContent .paragraphContentSubtitle.option.extreme:before
			{
				content: "Offre Extrême";
			}

			.paragraphContent .paragraphContentSubtitle.option.terminated:before
			{
				content: "Offre Archive";
			}
			
			.weDo .paragraphContent .paragraphContentSubtitle.option:before
			{
				background-color: #b9ee81;
				color: #000000;
			}

			.podcastics .paragraphContent .paragraphContentSubtitle.option:before
			{
				background-color: #70c7ff;
			}
		
		.paragraphContent .paragraphContentSubtitle.hashed div:before,
		.paragraphContent .paragraphContentSubtitle.hashed h3:before
		{
			content: "#";
		}
		
		.paragraphContent .paragraphContentSubtitle div:not(:last-child),
		.paragraphContent .paragraphContentSubtitle h3:not(:last-child)
		{
			margin-right: 20px;
		}
	
	.paragraphContent .floatRight
	{
		background-color: #fefefe;
		float: right;
		margin: 0 0 20px 40px;
		max-width: 120px;
	}
	
	.paragraphContent .visual
	{
		display: block;
		margin: 40px auto 20px auto;
		max-width: 100%;
	}
	
		.paragraphContent .visual.small
		{
			max-width: 120px;
		}
	
	.paragraphContent .legend
	{
		border-bottom: 1px solid #efefef;
		color: #666666;
		font-size: 18px;
		font-style: italic;
		padding: 0 25px 10px 0;
		margin: 50px -25px 5px 0;
		position: relative;
		text-align: center;
	}
		
		.paragraphContent .legend:after
		{
			bottom: -9px;
			color: #eaeaea;
			content: "\f111";
			font-family: "FontAwesome";
			font-style: normal;
			font-size: 12px;
			position: absolute;
			right: -5px;
		}

.next
{
	margin: 100px 0;
	text-align: center;
}
	
.button
{
	align-items: center;
	color: #000000;
	display: inline-flex;
	font-size: 24px;
	padding: 7px 16px;
	text-transform: uppercase;
	transition: all 0.5s;
	white-space: nowrap;
}
	
	.button:hover
	{
		color: #000000;
		transform: translateX(10px);
	}
	
	.button i
	{
		margin-left: 12px;
	}

	.button.weDo
	{
		background-color: #b9ee81;
	}

		.button.weDo:hover
		{
			background-color: #97d852;
		}


	.button.podcastics
	{
		background-color: #009bff;
		color: #ffffff;
	}

		.button.podcastics:hover
		{
			background-color: #70c7ff;
		}

	.button.realisations
	{
		background-color: #ff8db3;
	}

		.button.realisations:hover
		{
			background-color: #ff4080;
		}

	.button.who
	{
		background-color: #ffe980;
	}

		.button.who:hover
		{
			background-color: #ffe980;
		}

	.button.contact
	{
		background-color: #efefef;
	}

		.button.contact:hover
		{
			background-color: #dfdfdf;
		}
	
	.paragraphContent .button
	{
		margin-top: 30px;
	}
	
.carousel-indicators
{
	bottom: 20px;
}

.carousel-control-next,
.carousel-control-prev
{
	opacity: 0.7;
	transition: opacity 0.5s;
}

.carousel-control-next-icon,
.carousel-control-prev-icon
{
	height: 40px;
	width: 40px;
}

.carousel-caption
{
	background: rgba(0, 0, 0, 0.4);
	padding: 10px 15px 35px 15px;
}

.messengerWrapper
{
	margin: 50px auto;
	max-width: 700px;
}

.messageWrapper
{
	align-items: flex-end;
	animation: displayMessage 0.5s;
	display: flex;
}
	
	.messageWrapper + .messageWrapper
	{
		margin-top: 20px;
	}
	
@keyframes displayMessage
{
	0% {
		opacity:0;
		transform: translateY(40px);
	}

	100% {
		opacity:1;
		transform: translateY(0);
	}
}

div#wave
{
	position: relative;
}

div#wave .dot
{
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 3px;
	background: #303131;
	animation: wave 1.3s linear infinite;
}

	.messageWrapper.studiow.last .message div#wave .dot
	{
		background: #ffffff;
	}

div#wave .dot:nth-child(2)
{
	animation-delay: -1.1s;
}

div#wave .dot:nth-child(3)
{
	animation-delay: -0.9s;
}

@keyframes wave
{
  0%, 60%, 100% {
    transform: initial;
  }
  30% {
    transform: translateY(-5px);
  }
}

	
	.messageWrapper.user
	{
		flex-direction: row-reverse;
	}
	
	.messageWrapper .image
	{
		background-repeat: no-repeat;
		border-radius: 50px;
		height: 70px;
		width: 70px;
		min-width: 70px;
	}
		
		.messageWrapper.studiow .image
		{
			background-color: #000000;
			background-image: url('/assets/images/studio-w-logo.png');
			background-size: 50px 34px;
			background-position: center 19px;
		}

		.messageWrapper.user .image
		{
			background-color: #e5e5ea;
			background-image: url('/assets/images/contact/user.png');
			background-size: 45px 45px;
			background-position: center;
		}

	.messageWrapper .message
	{
		border-radius: 15px;
		padding: 8px 15px;
		position: relative;
	}

		.messageWrapper.studiow .message
		{
			background-color: #e5e5ea;
			margin-left: 20px;
		}
	
			.messageWrapper.studiow.last .message
			{
				background-color: #65b32b;
				color: #ffffff;
			}
	
			.messageWrapper.studiow .message:before
			{
				background-color: #e5e5ea;
				bottom: 11px;
				content: "";
				height: 15px;
				left: -5px;
				position: absolute;
				transform: rotate(45deg);
				width: 15px;
			}
		
				.messageWrapper.studiow.last .message:before
				{
					background-color: #65b32b;
				}

		.messageWrapper.user .message
		{
			background-color: #0386f6;
			color: #ffffff;
			margin-right: 20px;
		}
	
			.messageWrapper.user .message:after
			{
				background-color: #0386f6;
				bottom: 11px;
				content: "";
				height: 15px;
				right: -5px;
				position: absolute;
				transform: rotate(45deg);
				width: 15px;
			}
			
.editorWrapper
{
	animation: displayEditor 0.5s;
	animation-delay: 2.5s;
	animation-fill-mode: backwards;
	margin-top: 50px;
}
	
@keyframes displayEditor
{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

	.editorWrapper input
	{
		background: none;
		border: 1px solid #e5e5ea;
		border-radius: 30px;
		height: 40px;
		padding: 5px 15px;
		width: 100%;
	}

#finishHim
{
	animation: finishBlink 0.8s infinite;
	animation-direction: alternate-reverse;
	background-color: #65b32b;
	border-radius: 30px;
	color: #ffffff;
	cursor: pointer;
	visibility: hidden;
	font-weight: 600;
	margin-top: 20px;
	opacity: 0;
	padding: 8px 15px;
	text-align: center;
	transition: opacity 1s;
}

@keyframes finishBlink
{
	0% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

.teamPhotos
{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: center;
}

.photoFrameWrapper
{
	background: repeating-linear-gradient(-10deg, #fffdf0 0, #f9f8f3 30px, #fffaee 90px, #fffdf0 110px);
	border-radius: 5px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	display: inline-block;
	margin: 0 30px 60px 30px;
	padding: 15px;
	width: 300px;
}

.photoFrame
{
	background-color: #FFFFFF;
	border-radius: 5px;
	display: inline-block;
	overflow: hidden;
	position: relative;
}
	
	.photoFrame img
	{
		max-width: 100%;
		width: 100%;
	}

.photoFrame:after
{
	background: linear-gradient(0deg, rgba(255, 255, 0, 0.15) 60%, rgba(255, 136, 0, 0.2) 80%);
	border-radius: 5px;
	box-shadow: inset -5px -3px 15px 0 rgba(194, 131, 4, 0.6), inset 0 0 0 500px rgba(255, 255, 255, 0.1);
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.photoName
{
	color: #666666;
	font-family: "Brisa";
	font-size: 40px;
	padding: 10px 0 0 0;
	text-align: center;
}
	
	.photoName span
	{
		display: inline-block;
		margin: 0 2px;
		transform: rotateZ(-3deg);
	}
	
	.photoName span:nth-child(2)
	{
		color: #333333;
		font-size: 46px;
	}

.photoTitle
{
	font-weight: 600;
	margin: 5px 0;
}










































































/* ALL DESKTOPS */
@media screen and (min-width: 980px)
{

}


/* LARGE DESKTOPS */
@media screen and (min-width: 1300px)
{

}


/* SMALL DESKTOPS */
@media screen and (min-width: 980px) and (max-height: 700px)
{
	.welcomeText
	{
		font-size: 100px;
	}
	
	@keyframes displayWelcomeText
	{
		0% {
			height: 0;
			opacity: 0;
		}
		
		100% {
			height: 100px;
			opacity: 1;
		}
	}
}


@media screen and (min-width: 980px) and (max-width: 1200px)
{
	.mainNav_items
	{
		font-size: 16px;
	}
	
	.mainNav_item
	{
		padding: 0 14px;
	}
	
	.sections
	{
		font-size: 22px;
		height: 200px;
	}
	
	.sections .section .sectionLink .text
	{
		font-size: 16px;
		padding: 7px 10px;
	}
	
	.sectionBanner
	{
		font-size: 22px;
		height: 150px;
	}
	
	.sectionBanner .sectionBannerLink .text
	{
		font-size: 16px;
		padding: 7px 10px;
	}
}


/* BOTH TABLETS AND PHONES */
@media screen and (max-width: 979px)
{
	.mainNav_items
	{
		display: none;
	}
	
		.mainNav .contentWrapper
		{
			justify-content: center;
		}
	
	#mobileNavIcon
	{
		display: block;
	}
	
	.pageParagraph
	{
		flex-direction: column;
	}
	
	.paragraphTitle
	{
		display: block;
		width: auto;
	}
	
	.paragraphTitle.isImage
	{
		display: none;
	}
	
	.paragraphContent
	{
		align-items: flex-start;
		margin-left: 0;
		text-align: justify;
		width: auto;
	}
}

/* TABLETS */
@media screen and (min-width: 768px) and (max-width: 979px)
{
	.sections
	{
		flex-wrap: wrap;
		font-size: 28px;
		height: auto;
		overflow: auto;
	}

	.sections .section
	{
		height: 250px;
		flex-basis: 50%;
	}

	.sections .section:last-of-type
	{
		height: 150px;
		flex-grow: 2;
	}
	
		.sections .section:last-of-type .sectionLink
		{
			flex-direction: row;
		}
		
			.sections .section:last-of-type .sectionLink .text + .text
			{
				margin-left: 20px;
			}
			
	.sectionBanner
	{
		font-size: 28px;
		height: 150px;
	}
	
		.sectionBanner .sectionBannerLink h3.text + h3.text
		{
			margin-left: 20px;
		}
	
	.pageHeader .pageTextWrapper
	{
		font-size: 30px;
		margin: 20px 0;
		padding: 10px 0;
	}
	
	.pageHeader .pageTextWrapper.small
	{
		font-size: 20px;
		margin: 10px 0;
	}
	
	.pageText1,
	.pageText2,
	.pageText3,
	.pageText4
	{
		margin: 10px 0;
		white-space: normal;
	}
	
	.pageText1:only-child
	{
		text-align: center;
	}
	
	.pageTextIcon1,
	.pageTextIcon2,
	.pageTextIcon3,
	.pageTextIcon4
	{
		margin: 10px 20px;
	}
	
	.pageTextIcon1 img,
	.pageTextIcon2 img,
	.pageTextIcon3 img,
	.pageTextIcon4 img
	{
		height: 140px;
		width: auto;
	}
	
	.pageTextIcon1 div,
	.pageTextIcon2 div,
	.pageTextIcon3 div
	{
		background-color: #000000;
		display: inline-block;
		font-size: 24px;
		padding: 6px 12px;
		margin-top: 10px;
	}
	
	.paragraphTitle .paragraphTitleContent
	{
		text-align: left;
	}
}

/* PHONES */
@media (max-width: 767px)
{
	.contentWrapper
	{
		padding: 0 15px;
	}
	
	.mainNav .contentWrapper
	{
		height:100px;
	}
	
	.studiow-logo img
	{
		transition: transform 0.2s;
		width: 80px;
	}
	
	#mobileNavIcon
	{
		height: 20px;
		width: 25px;
		top: 20px;
		left: 20px;
	}
	
		#mobileNavIcon:before
		{
			height: 45px;
			left: -10px;
			top: -12px;
			width: 45px;
		}
		
	.mobileNavItem
	{
		font-size: 18px;
	}
	
	.menuBar,
	.menuBar:after,
	.menuBar:before
	{
		height: 2px;
	}
	
.welcomeHeader
{
	height: calc(100vh - 100px);
}
	
	.welcomeTextWrapper
	{
		z-index: 1;
		transition: height 0.3s;
	}
	
	.welcomeText
	{
		font-size: 58px;
	}
	
	@keyframes displayWelcomeText
	{
		0% {
			height: 0;
			opacity: 0;
		}
		
		100% {
			height: 58px;
			opacity: 1;
		}
	}
	
	.welcomeSubText
	{
		font-size: 20px;
	}
	
	.sections
	{
		flex-direction: column;
		font-size: 28px;
		height: auto;
	}

		.sections .section
		{
			height: 150px;
			width: 100%;
		}

			.sections .section .sectionLink .text
			{
				font-size: 18px;
				margin: 3px 0;
				padding: 5px 12px;
			}
	
	.sectionBanner
	{
		font-size: 28px;
		height: 150px;
	}

		.sectionBanner .sectionBannerLink
		{
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	
			.sectionBanner .sectionBannerLink .text
			{
				font-size: 18px;
				margin: 3px 0;
				padding: 5px 12px;
			}
			
				.sectionBanner .sectionBannerLink h3.text + h3.text
				{
					margin-left: 0px;
				}
		
	footer
	{
		font-size: 14px;
	}
	
	.pageHeader .pageTextWrapper
	{
		align-items: center;
		display: flex;
		flex-direction: column;
		font-size: 30px;
		justify-content: center;
		margin: 20px 0;
		padding: 10px 0;
	}
	
		.pageHeader .pageTextWrapper.small
		{
			font-size: 20px;
			margin: 10px 0;
		}
		
	.pageText1,
	.pageText2,
	.pageText3,
	.pageText4
	{
		margin: 10px 0;
		white-space: normal;
	}
	
	.pageText1:only-child
	{
		text-align: center;
	}
	
	.pageTextIcon1,
	.pageTextIcon2,
	.pageTextIcon3,
	.pageTextIcon4
	{
		margin: 10px 0;
	}
		
		.pageTextIcon1 img,
		.pageTextIcon2 img,
		.pageTextIcon3 img,
		.pageTextIcon4 img
		{
			height: 60px;
			width: auto;
		}
		
		.pageTextIcon1 div,
		.pageTextIcon2 div,
		.pageTextIcon3 div
		{
			background-color: #000000;
			font-size: 18px;
			padding: 4px 10px;
			margin-top: 10px;
		}
		
	.pageChapeau
	{
		font-size: 18px;
		margin: 30px 0;
		padding: 15px 15px;
	}
	
	.podcastWrapper
	{
		 padding: 20px 0 70px 0;
	}
	
	.paragraphTitle .paragraphTitleContent
	{
		font-size: 18px;
		padding: 5px 12px;
		text-align: left;
	}
	
	.paragraphContent
	{
		flex-direction: column;
		font-size: 16px;
	}
	
	.paragraphContentImage
	{
		flex-shrink: 1;
		margin-left: 0;
		text-align: center;
		width: 100%;
	}
	
	.paragraphContent .legend
	{
		background-color: #efefef;
		border-bottom: none;
		font-size: 14px;
		padding: 7px 12px 7px 40px;
		margin: 40px 0 20px 0;
		text-align: right;
	}
		
		.paragraphContent .legend:after
		{
			bottom: 0;
			content: none;
			right: 0;
		}

		.paragraphContent .legend:before
		{
			bottom: 0px;
			color: #ffffff;
			content: "\f063";
			font-family: "FontAwesome";
			font-style: normal;
			left: 8px;
			font-size: 24px;
			position: absolute;
		}
		
	.paragraphContent .paragraphContentSubtitle.option:before
	{
		font-size: 18px;
		padding: 5px 12px;
	}
		
	.paragraphContent .paragraphContentSubtitle div,
	.paragraphContent .paragraphContentSubtitle h3
	{
		font-size: 18px;
		padding: 5px 12px;
	}
	
	.button
	{
		font-size: 16px;
		padding: 5px 12px;
	}
	
	.paragraphContent .visual
	{
		margin: 20px auto 10px auto;
	}
	
	.edito
	{
		font-size: 16px;
		padding: 20px 10px;
	}
}