@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root
{
	--dark-background-color:#DBE2EC;
	--bright-background-color:#F8FAFF;
	--color-1-dark:#F2AA7E;
	--color-1-bright:#FAE1D2;
	--color-2-dark:#3DB4B1;
	--color-2-bright:#A7E1E1;
	--color-3-dark:#FF899F;
	--color-3-bright:#FFD9E0;
	--text-color-dark:black;
	--text-color-lightdark:#5C5C5C;
	--text-color-bright:white;
	--max-content-width:1140px;
	--defaut-font-size:17px;
	--small-font-size:12px;
	--default-spacing:1rem;
	--default-border-radius:10px;
	--font-2:"Inter", sans-serif;
	--font-1:"Inter", sans-serif;
}

*
{
	-moz-hyphens:auto;
    hyphens:auto;
	font-family: var(--font-1);
	font-size:var(--defaut-font-size);
}

body
{
	font-size:var(--defaut-font-size);
    font-style: normal;
    font-weight: normal;
	background:white;
	min-width:400px;
	min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container
{
	max-width:1130px;
}

h1, h2, h3, h4, h5
{
	font-family:var(--font-2);
	font-weight:600;
}

a
{
	text-decoration:none;
	color:var(--text-color-lightdark);
	-webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
    -ms-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
}

a:hover
{
	color: var(--text-color-dark);
}

/* Required when using Bootstrap flex elements: the children are also impacted, which is not wanted 
.flex-fill p, .flex-fill ul, .flex-column p, .flex-column ul, p, ul
{
	flex:initial;
	width:100%;
}*/

#top
{
	position:sticky;
	top:0;
	z-index:9999;
	background-color: white;
}

.upper
{
	padding-top:15px;
	padding-bottom:15px;
	border-bottom: 1px solid var(--text-color-lightdark);
}

#logo img
{
	max-height:40px;
}

/********************
	Menu
	
	Order of the classes:
	
		.main-navigation or .main-small-navigation (nav)
			.container (div)
				.menu-toggle (h3)
				.menu-menu-principal-container (ul)
					.menu-item (li)
						.sub-menu (ul)
							.menu-item (li)
				
********************/

/* Menu niveau 1, large */

.main-navigation
{
	height: 40px;
}

.main-navigation .menu-toggle, .main-small-navigation .menu-toggle
{
	display:none; /* For the mobile version */
}

.main-navigation a:hover
{
	text-decoration:none;
	color:var(--text-color-dark);
}


.main-navigation li ul
{
	display:none;
}

.main-navigation ul li
{
	display:inline-block;
	height: 40px;
}

.main-navigation ul li
{
	-webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
    -ms-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
}

.main-navigation ul li a
{
	display:block;
	color: var(--text-color-lightdark);
	height:40px;
	line-height:40px;
	padding-left:10px;
	padding-right:10px;
}

#menu-item-263, .button
{
	background-color:var(--text-color-dark);
	border-radius:5px;
	-webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
    -ms-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
	height: 40px;
  	line-height: 40px;
  	padding-left: 10px;
  	padding-right: 10px;
	width: fit-content;
	color:white;
	border:none;
}

/*  768px = bootstrap's medium breakpoint */
@media screen and (max-width: 768px)
{
	#menu-item-263, .button
	{
		margin:auto;
	}
}

#menu-item-263:hover, .button:hover
{
	background-color:var(--text-color-lightdark);
}

#menu-item-263 a, .button a
{
	color:white;
	text-decoration:none;
}

#menu-item-263 a:hover, .button a:hover
{
	color:white;
	text-decoration:none;
}

/* Menu principal, niveau 2, large */

.main-navigation li:hover ul
{
	display: block;
	position: absolute;
	top: 40px;
	padding: 0;
}

.main-navigation li:hover li
{
	display:block;
	height:40px;
	background-color: rgb(128, 171, 200);
	border-bottom:1px solid #0e1820;
	border-top:none;
}

.main-navigation li:hover li:last
{
	border-bottom:2px solid white;
}


.main-navigation li:hover li a
{
	display:block;
	color: #0e1820;
	height:40px; /* 40px hauteur de top - 5px épaisseur de la bordure */
	padding-left:10px;
	padding-right:10px;
	line-height:40px;
}

.main-navigation li:hover li:hover
{
	border-top:none;
	background-color: #0e1820;
}

.main-navigation li:hover li:hover a
{
	color: rgb(128, 171, 200);

}

/* Menu, small */

@media screen and (max-width: 990px) 
{
	.main-navigation
	{
		height: 40px;
		width:40px;
	}

	.main-navigation .menu, .main-small-navigation .menu
	{
		/* The following are a workaround "diplay:none" not being animatable */
		opacity:0;
		visibility: hidden;
		transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out, background 0.5s ease-in-out;

		position: absolute;
		top:70px;
		left:0px;
		margin: 0px;

		width:100%;
		height:0px;

		background-color: var(--bright-background-color);
		padding:0;
		padding-top:30px;
		clear: left;
		border-top: 1px solid var(--text-color-lightdark);
		text-align:center;
	}
	
	.main-navigation .menu-toggle, .main-small-navigation .menu-toggle
	{
		display:block;
		height:40px;
		width:40px;
    }

	#hamburger
	{
		height:40px;
		width:40px;
		transition: opacity 0.5s ease-in-out, transform 0.5s ease;
	}

	.main-small-navigation 	#hamburger
	{
		transform:rotate(90deg);
		opacity: 0.75;
	}

    .main-small-navigation .menu
    {
		/*  Required to make the menu appear */
		visibility:visible;
		opacity:1;
		height:100vh;
    }
	
	.main-navigation .menu ul, .main-small-navigation .menu ul
	{
		padding-left:0px;
		margin-bottom:0px;
	}
   
    .main-navigation .menu li, .main-small-navigation .menu li
	{
		border:none;
		display: block;
		padding-left:20px;
		padding-right:20px;
		height:40px;
		line-height:40px;
		margin:0;
		margin-bottom:15px;
		max-width:none;
		width:100%;
		-webkit-transition: 0.25s ease-in-out;
		-moz-transition: 0.25s ease-in-out;
		transition: 0.25s ease-in-out;
		-ms-transition: 0.25s ease-in-out;
		-o-transition: 0.25s ease-in-out;
	}
}

#banner
{
	background-color:#f5f6f7;
	background-image: linear-gradient(54deg, #ff837a40, #ff837a00 28%), linear-gradient(241deg, #ef98cf40, #ef98cf00 36%);
	padding-top:80px;
	padding-bottom:80px;
}

#banner h1
{
	font-weight: 600;
}

/*  768px = bootstrap's medium breakpoint */
@media screen and (max-width: 768px)
{
	#banner h1
	{
		text-align:center;
	}
}

#main-picture
{
	width:80%;
}

main
{
	padding-top:15px;
}

main a, #resend-license-link
{
	text-decoration:underline;
	text-decoration-style: dashed;
	color:var(--text-color-lightdark);
	-webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
    -ms-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
}

main a:hover
{
	color: var(--text-color-dark);
}

main h1
{
	text-align:center;
}

main .row
{
	margin-bottom:15px;
}

main h4
{
	margin-bottom:20px;
}

main .feature-card-a
{
	background-image: linear-gradient(45deg, #f1ddda, #fff);
	border-radius:20px;
	padding:30px;
	width:100%;
	height:100%;
}

main .feature-card-a:hover
{
	background-image: linear-gradient(45deg, #e8d0cc, #fff);
}

main .feature-card-b
{
	background-color: #f5f0f1;
  	background-image: linear-gradient(45deg, #f0e5ef 53%, #fff);
	border-radius:20px;
	padding:30px;
	width:100%;
	height:100%;
}

main .feature-card-b:hover
{
	background-image: linear-gradient(45deg, #e5d7e4 53%, #fff);
}

.feature-small img
{
	filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

.halfpage-image
{
	max-width:100%;
}

.post-content .aligncenter 
{
	text-align:center;
}

video
{
	width:100%;
}

/* Disable grayscale on hover */
.feature-small:hover img
{
  -webkit-filter: grayscale(0);
  filter: none;
}

.cta
{
	padding-top:50px;
	padding-bottom:50px;
}

.cta .button
{
	margin:auto;
}

footer
{
	background-color: var(--back-grey);
	background-image: linear-gradient(54deg, #ff837a40, #ff837a00 28%), linear-gradient(241deg, #ef98cf40, #ef98cf00 36%);
	padding-top:50px;
	padding-bottom:50px;
	font-size:13px;
	margin-top:75px;
}

/*  768px = bootstrap's medium breakpoint */
@media screen and (max-width: 768px)
{
	footer
	{
		text-align:center;
	}
}

footer h3
{
	text-transform: uppercase;
	color:var(--text-color-lightdark);
	padding-bottom:15px;
	font-size:13px;
}

footer .col-md-3:hover h3
{
	color:var(--text-color-dark);
}

footer ul
{
	padding:0px;
}

footer li
{
	list-style: none;
	margin-bottom:15px;
}

footer a
{
	color:var(--text-color-lightdark);
}


footer a:hover
{
	color:var(--text-color-dark);
}

#logo-footer
{
	text-align:center;
}

#logo-footer img
{
	max-width:200px;
}

footer .legal-and-others
{
	margin-top:30px;
	padding-top:30px;
	border-top:1px solid white;
}

footer .legal-menu
{
	text-align:right;
}

/*  768px = bootstrap's medium breakpoint */
@media screen and (max-width: 768px)
{
	footer .legal-menu
	{
		text-align:center;
	}
}

/* ============= Specific elements ================*/

/* Keyboard strokes */

.keyboard
{
    display:inline-block;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 4px;
    padding-left: 4px;
    margin-right: 2px;
    background-color:#f7f7f7;
    color: #3a3a3a;
    box-shadow: inset 0 -2px 0 #aaaaaa, inset 0px 1px 1px -1px #fff, 0px 1px 1px 0px #7a7a7a;
    text-transform: uppercase;
    letter-spacing:0.5px;
    border-radius:3px;
}

.keyboard:hover
{
    background-color:#fbfbfb;
    box-shadow: inset 0 -1px 0 #aaaaaa, inset 0px 1px 1px -1px #fff, 0px 1px 1px 0px #7a7a7a;
}

/* Plans */

#pricing 
{
	padding-top:50px;
	padding-bottom:50px;
	background-size: 100% 100%;
	background-position: 0px 0px,0px 0px,0px 0px;
	background-image: radial-gradient(49% 81% at 55% 81%, #7aa7ff69 0%, #073AFF00 100%),radial-gradient(113% 91% at -22% 30%, #D0090963 40%, #FF000000 99%, #FFFFFF00 99%),linear-gradient(0deg, #000000 0%, #000000 100%);
}

.pricing-block
{
	padding:var(--default-spacing);
	border-radius:var(--default-border-radius);
	background-color:rgba(255, 255, 255, 0.9);
	text-align:center;
}

.pricing-block:hover
{
	background-color:rgba(255, 255, 255, 1);
}

.pricing-block .plan-name
{
	font-variant-caps: small-caps;
	margin-bottom:calc(var(--default-spacing) / 2);
}

.pricing-block .price
{
	font-size:calc(var(--defaut-font-size) * 2);
	margin-bottom:calc(var(--default-spacing) / 2);
	font-weight: 600;
}

.pricing-block .frequency
{
	font-variant-caps: small-caps;
	padding-bottom:20px;
	border-bottom:1px solid var(--text-color-dark);
	color:var(--text-color-lightdark);
}

.pricing-block .button
{
	margin:auto;
}

.pricing-block ul
{
	margin:0px;
	padding:0px;
}

.pricing-block li
{
	list-style:none;
	margin-bottom:var(--default-spacing);
}

/* Registration steps */

.registration-steps
{
	border:1px solid var(--text-color-dark);
	border-radius:5px;
	margin-bottom:20px;
	text-align: center;
	padding:15px;
	margin-left:0;
	margin-right:0;
}

/*  768px = bootstrap's medium breakpoint */
@media screen and (max-width: 768px)
{
	#lightning-email-form, #resend-license-form
	{
		text-align:center;
	}
}

#resend-license-link
{
	display:block;
	cursor: pointer;
	margin-top:30px;
}

/*  768px = bootstrap's medium breakpoint */
@media screen and (max-width: 768px)
{
	#resend-license-link
	{
		text-align:center;
	}
}

input[type="text"], input[type="email"]
{
	border: 1px solid #e7ecf0;
	background-color: #f5f6f7;
	border-radius: 9px;
	min-width: 120px;
	height: 44px;
	margin-bottom: 16px;
	padding: 19px 12px;
	font-size: 15px;
	line-height: 1.4em;
	transition: border-color .2s;
}

input[type="text"]:focus, input[type="email"]:focus
{
	border-color: var(--text-color-dark);
}