/* ============================ */
/* MKTV BOILERPATE GLOBAL STYLE */
/* ============================ */

/* ============= */
/* PREREQUESITES */
/* ============= */
/*

html { font-size: 62.5% };
COS WEBSITE

*/

/* ========= */
/* GUIDELINES */
/* ========= */
/*

vw :  BIG ELEMENTS / SECTIONS / IMAGES
rem : FONTS / MARGINS / PADDING
px :  SMALL ELEMENTS / BURGER MENU / BEFORE / AFTER

*/

/* =================================== */

/*

INDEX
1. RESET
2. HUBL VARIABLES
3. GENERAL STYLE
4. UTILITY CLASSES TO USE IN THE TEMPLATE BUILDER
5. CTA STYLE
6. GETTING THE HANDLE ON THE DISPLAY OF THE MENU IN THE HEADER
7. WRAPPER DECLARATION
8. HEADER
9. LP HEADER
10. FOOTER STYLE
11. LANGUAGE SWITCHER STYLE
12. BLOG LANGUAGE SWITCHER
13. MOBILE BURGER STYLE
14. FORM
15. RESPONSIVE

*/

/* FONTS  */

@font-face {
    font-family: 'Gotham';
	font-weight: bold; 
    src:url('https://cdn2.hubspot.net/hubfs/5756847/Gotham-font/otf/Gotham-Bold.otf') format('oft'),
        url('https://cdn2.hubspot.net/hubfs/5756847/Gotham-font/woff/Gotham-Bold_Web.woff') format('woff'), 
        url('https://cdn2.hubspot.net/hubfs/5756847/Gotham-font/woff2/Gotham-Bold_Web.woff2') format('woff2');
}

@font-face {
    font-family: 'Gotham';
	font-weight: medium; 
    src:url('https://cdn2.hubspot.net/hubfs/5756847/Gotham-font/otf/Gotham-Medium.otf') format('oft'),
        url('https://cdn2.hubspot.net/hubfs/5756847/Gotham-font/woff/Gotham-Medium_Web.woff') format('woff'), 
        url('https://cdn2.hubspot.net/hubfs/5756847/Gotham-font/woff2/Gotham-Medium_Web.woff2') format('woff2');
}

@font-face {
    font-family: 'Gotham';
	font-weight: normal;
    src:url('https://cdn2.hubspot.net/hubfs/5756847/Gotham-font/otf/Gotham-Book.otf') format('oft'),
        url('https://cdn2.hubspot.net/hubfs/5756847/Gotham-font/woff/Gotham-Book_Web.woff') format('woff'), 
        url('https://cdn2.hubspot.net/hubfs/5756847/Gotham-font/woff2/Gotham-Book_Web.woff2') format('woff2');
}

/* ======== */
/* 1. RESET */
/* ======== */
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

body .row-fluid [class*="span"] {
min-height: 0;
}

/* ============== */
/* 2. HUBL VARIABLES */
/* ============== */





/* FONT SIZE (rem) - DESKTOP */









/* FONT SIZE (rem) - TABLET */









/* FONT SIZE (rem) - MOBILE */









/* LINE HEIGHTS (rem) - DESKTOP */









/* LINE HEIGHTS (rem) - TABLETS */









/* LINE HEIGHTS (rem) - SMARTPHONES */









/* FONT WEIGHTS */




/* FONT ALIGNMENTS */





/* BACKGROUND COLORS */





/* FONT COLORS */





/* WRAPPER SIZES */




/* ASSIGNMENT TO CLASSES - TEXT ALIGNMENT */
.text-align-center{
 text-align: center; 
}
.text-align-left{
 text-align: left; 
}
.text-align-right{
 text-align: right; 
}
.text-align-justify{
 text-align: justify; 
}

/* ASSIGNMENT TO CLASSES - FONT WEIGHT */
.font-weight-light{ 
font-weight:300;
}
.font-weight-regular{
font-weight:400;
}
.font-weight-bold{
font-weight:700;
}

/* ASSIGNMENT TO CLASSES - BACKGROUND COLOR */
.primary-bg {
background: #111111; 
}

.secondary-bg {
background: #555555; 
}

.white-bg {
background: #ffffff; 
}

.black-bg {
background: #000000;
}

/* ASSIGNMENT TO CLASSES - FONT COLOR */
.primary{
color: #111111;
}

.secondary{
color: #555555;
}

.white{
color: #ffffff;
}

.black{
color: #000000;
}

/* ================ */
/* 3. GENERAL STYLE */
/* ================ */
*{
-webkit-box-sizing: inherit;
box-sizing: inherit;
outline: 0;
}

html{
font-size: 62.5%; /* 1rem = 10px */ 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
}

body{
font-size: 1.8em; /* 18px EQUIVALENT -> FOR EXAMPLE BUT PUT YOUR OWN FONT SIZE RELATIVE TO YOU PROJECT */ 
font-weight:400;
font-family: 'Gotham', sans-serif;
line-height: 1.5;/* RELATIVE TO YOUR PROJECT */
font-family: '', Gotham, Arial, sans-serif;
color: #111111;
margin: 0;
padding: 0;
min-height: 100vh;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}


h1 {
font-size: 4rem;
font-size: 4rem;
}


h2{
font-size: 3.2rem;
}

h3{
font-size: 2.8rem;
font-size: 2.8rem;
}

h4{
font-size: 2.4rem;
font-size: 2.4rem;
}

p{
font-size: 1.8rem;
	line-height: inherit;
}

ul{
padding: 0;
margin: 0;
list-style: none;
	line-height: inherit;
}

ul li {
    position: relative;
	line-height: inherit;
}

.color-list ul li:before {
    content: '';
	position: absolute;
	top: 1rem;
	left: -4rem;
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 50%;
	background-color: #00FFCC;
}

a, button{
text-decoration: none;
cursor: pointer;
-webkit-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}

/* BECAUSE IMAGES ARE PUT IN SPAN WITH NO HEIGHT IN HUBSPOT */
span{
display: block; 
}

/* "a" TAG IN LI TO GET A HEIGHT */
/* PUT IT BACK IN INLINE-BLOCK WHEN LINKS */
a{
display: block;
line-height: 1;
-webkit-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}

img{
max-width: 100%;
height: auto;
}

b, strong {
font-weight:700;
}

/* ================================================= */
/* 4. UTILITY CLASSES TO USE IN THE TEMPLATE BUILDER */
/* ================================================= */

.text-transform-lowercase{
text-transform: lowercase;
}

.text-transform-capitalize{
text-transform: capitalize;
}

.text-transform-uppercase{
text-transform: uppercase;
}

/* FOR IMAGES & IMAGE CONTAINERS */
.no-line-height{
line-height: 0;
}

/* TEXT ALIGNMENT */
.text-align-left{
text-align: left; 
}

.text-align-center{
text-align: center; 
}

.text-align-right{
text-align: right; 
}

.text-align-justify{
text-align: justify; 
}

/* DISPLAYS */
.d-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.flex-row {
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
    -ms-flex-flow:row;
        flex-flow:row;
}

.flex-row-wrap {
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
        flex-flow:row wrap;
}

.flex-column {
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
    -ms-flex-flow:column;
        flex-flow:column;
}

.flex-column-wrap {
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
    -ms-flex-flow:column wrap;
        flex-flow:column wrap;
}

.align-items-start {
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: flex-start;
}

.align-items-end {
-webkit-box-align: end;
    -ms-flex-align: end;
        align-items: flex-end;
}

.align-items-center {
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}

.justify-content-start {
-webkit-box-pack: start;
    -ms-flex-pack: start;
        justify-content: flex-start;
}

.justify-content-end {
-webkit-box-pack: end;
    -ms-flex-pack: end;
        justify-content: flex-end;
}

.justify-content-center {
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
}

.overflow-hidden{
overflow:hidden;
}

.overflow-visible{
overflow: visible;
}

/* PADDINGDS */
/* PADDING TOP */
.pt-1{padding-top:1rem;}
.pt-2{padding-top:2rem;}
.pt-3{padding-top:3rem;}
.pt-4{padding-top:4remw;}
.pt-5{padding-top:5rem;}
.pt-6{padding-top:6rem;}
.pt-7{padding-top:7rem;}
.pt-8{padding-top:8rem;}
.pt-9{padding-top:9rem;}
.pt-10{padding-top:10rem;}

/* PADDING BOTTOM */
.pb-1{padding-bottom:1rem;}
.pb-2{padding-bottom:2rem;}
.pb-3{padding-bottom:3rem;}
.pb-4{padding-bottom:4rem;}
.pb-5{padding-bottom:5rem;}
.pb-6{padding-bottom:6rem;}
.pb-7{padding-bottom:7rem;}
.pb-8{padding-bottom:8rem;}
.pb-9{padding-bottom:9rem;}
.pb-10{padding-bottom:10rem;}

/* PADDING LEFT */
.pl-1{padding-left:1rem;}
.pl-2{padding-left:2rem;}
.pl-3{padding-left:3rem;}
.pl-4{padding-left:4rem;}
.pl-5{padding-left:5rem;}
.pl-6{padding-left:6rem;}
.pl-7{padding-left:7rem;}
.pl-8{padding-left:8rem;}
.pl-9{padding-left:9rem;}
.pl-10{padding-left:10rem;}

/* PADDING RIGHT */
.pr-1{padding-right:1rem;}
.pr-2{padding-right:2rem;}
.pr-3{padding-right:3rem;}
.pr-4{padding-right:4rem;}
.pr-5{padding-right:5rem;}
.pr-6{padding-right:6rem;}
.pr-7{padding-right:7rem;}
.pr-8{padding-right:8rem;}
.pr-9{padding-right:9rem;}
.pr-10{padding-right:10rem;}

/* MARGINS */

/* MARGIN TOP */
.mt-05{margin-top:.5rem;}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mt-4{margin-top:4rem;}
.mt-5{margin-top:5rem;}
.mt-6{margin-top:6rem;}
.mt-7{margin-top:7rem;}
.mt-8{margin-top:8rem;}
.mt-9{margin-top:9rem;}
.mt-10{margin-top:10rem;}

/* MARGIN BOTTOM */
.mb-05{margin-bottom:.5rem;}
.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}
.mb-4{margin-bottom:4rem;}
.mb-5{margin-bottom:5rem;}
.mb-6{margin-bottom:6rem;}
.mb-7{margin-bottom:7rem;}
.mb-8{margin-bottom:8rem;}
.mb-9{margin-bottom:9rem;}
.mb-10{margin-bottom:10rem;}

/* MARGIN LEFT */
.ml-05{margin-left:.5rem;}
.ml-1{margin-left:1rem;}
.ml-2{margin-left:2rem;}
.ml-3{margin-left:3rem;}
.ml-4{margin-left:4rem;}
.ml-5{margin-left:5rem;}
.ml-6{margin-left:6rem;}
.ml-7{margin-left:7rem;}
.ml-8{margin-left:8rem;}
.ml-9{margin-left:9rem;}
.ml-10{margin-left:10rem;}

/* MARGIN RIGHT */
.mr-05{margin-left:.5rem;}
.mr-1{margin-right:1rem;}
.mr-2{margin-right:2rem;}
.mr-3{margin-right:3rem;}
.mr-4{margin-right:4rem;}
.mr-5{margin-right:5rem;}
.mr-6{margin-right:6rem;}
.mr-7{margin-right:7rem;}
.mr-8{margin-right:8rem;}
.mr-9{margin-right:9rem;}
.mr-10{margin-right:10rem;}

/* ============ */
/* 5. CTA STYLE */
/* ============ */
/* USE CTA IN SIMPLE PLAIN TEXT & MAKE HERE THE STYLE */

.cta-button a,
.input[type='submit'],
.hs-button.primary.large{
	color: #fff;
    text-decoration: none;
    padding: 1rem 1.5rem;
	height: auto;
    background: #000000;
    display: inline-block;
    border-radius: 0rem;
	font-family: 'Gotham', sans-serif;
    font-weight: 700;
	font-size: 1.6rem;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
	border: none;
	cursor: pointer;
	margin: 1rem 0;
}

.cta-button a:hover,
.input[type='submit']:hover, 
.hs-button.primary.large:hover {
	background: #FFFFFF;
	color: #000000;
}

.hubspot-link__container {
	padding: 40px 0;
}

/* ============================================================== */
/* 6. GETTING THE HANDLE ON THE DISPLAY OF THE MENU IN THE HEADER */
/* ============================================================== */
.header-container-wrapper .row-fluid:before, 
.header-container-wrapper .row-fluid:after{
display: none;
}

/* ====================== */
/* 7. WRAPPER DECLARATION */
/* ====================== */
/* WITH THIS DECLARATION NO !important NEEDED */
.container-fluid .row-fluid .wrapper{
margin: 0 auto;
float: none;
max-width: 144rem;;
}

@media(max-width: 1440px) {
	.container-fluid .row-fluid .wrapper{
		max-width: 100%;
		margin: 0 3%;
	}
}

/* ========= */
/* 8. HEADER */
/* ========= */

/* ============ */
/* 9. LP HEADER */
/* ============ */

/* =============== */
/* 10. FOOTER STYLE */
/* =============== */

.lp1-footer > div > span {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.lp1-footer a,
.lp1-footer p {
	font-family: 'Gotham', cursive;
	font-size: 1.9rem;
	margin: 5rem 2.5rem;
	color: #29599B;
	line-height: inherit;
}

/* ========================== */
/* 11. LANGUAGE SWITCHER STYLE */
/* ========================== */

/* ========================= */
/* 12. BLOG LANGUAGE SWITCHER */
/* ========================= */

/* ======================= */
/* 13. MOBILE BURGER STYLE */
/* ======================= */

.burger {
	display: none;
	z-index: 2;
}

.burger-bars {
    height: 40px;
    width: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.burger-bars div {
	width: 100%;
	height: 20%;
}

.burger-bars span {
	width: 100%;
	height: 100%;
	border-radius: 1rem;
	background: #141D85;
}

.mobile-open {
	height: 100%;
	overflow: hidden;
}

@media (max-width: 768px) {
	.burger {
		display: block;
	}
	body {
		position: relative;
	}
	.ty1-header-container img {
		max-width: 50%;
	}
	.ty1-header-right {
		position: fixed;
		top: 0rem;
		height: 100%;
		width: 28rem;
		background: #FFF;
		right: -100vw;
		transition: all .5s ease-in-out;
		align-items: flex-start;
		flex-direction: column;
		padding: 11rem 1rem 1rem;
	}
	.mobile-open .ty1-header-right {
		right: 0;
	}
	.ty1-header-nav {
		width: 100%;
	}
	.ty1-header-right ul {
		display: flex;
		flex-direction: column;
	}
	.ty1-header-right li {
		padding: 0.5rem 0 0.5rem 2rem;
		margin-right: 0;
		border-top: solid 1px #000000;
	}
	.ty1-header-right li:first-child {
		border-top: none;
	}
	.ty1-header-right .ty1-header-cta-button a {
        padding: 0.5rem 2rem;
        border-radius: 2rem;
		display: inline-block;
	}
	body:before {
		content: '';
		position: fixed;
		top: 10.44rem;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0;
		z-index: 0;
		transition: opacity .25s ease-in-out;
	}
	body.mobile-open:before {
		background: #000;
		opacity: 0.3;
		z-index: 0;
		transition: opacity .25s ease-in-out;
	}
}

@media (max-width: 420px) {
	html {
		font-size: 57%;
	}
}

/* ******************************* */
/* ******************************* */
/* ********** ANIMATION ********** */
/* ******************************* */
/* ******************************* */

.burger-bars span#bar2 { /* 1 - middle bar opacity [animation OUT] */
	opacity: 1;
	transition: all .5s ease-in-out;
}

.mobile-open .burger-bars span#bar2 { /* 2 - middle bar opacity [animation IN] */
	opacity: 0;
}

.burger-bars span#bar1, .burger-bars span#bar3 { /* 3 - top/bottom bars turns back to blue [animation OUT] */
	background-color: #141D85;
	transition: all .5s ease-in-out;
}

.mobile-open .burger-bars span#bar1, .mobile-open .burger-bars span#bar3 { /* 4 - top/bottom bars turns green [animation IN] */
    background-color: #00F0C0;
}

.burger-bars span#bar1, .burger-bars span#bar3 { /* 5 - top/bottom bars initial rotation [animation OUT] */
    transform: rotate(0deg);
	transition: all .25s ease-in-out;
}

.mobile-open .burger-bars span#bar1 { /* 6 - top bar wait .25s, then rotate 45deg clockwise [animation IN] */
    transform: rotate(45deg);
	transition: all .25s ease-in-out .25s;
}

.mobile-open .burger-bars span#bar3 { /* 7 - bottom bar wait .25s, then rotate 45deg counter-clockwise [animation IN] */
    transform: rotate(-45deg);
	transition: all .25s ease-in-out .25s;
}

.burger-bars div#bar1-container, .burger-bars div#bar3-container { /* 8 - top/bottom bars initial translation [animation OUT] */
    transform: translate(0, 0);
	transition: all .25s ease-in-out .25s;
}

.mobile-open .burger-bars div#bar1-container { /* 9 - top bar translate down 16px [animation IN] */
    transform: translate(0, 16px);
	transition: all .25s ease-in-out;
}

.mobile-open .burger-bars div#bar3-container { /* 10 - top bar translate down 16px [animation IN] */
    transform: translate(0, -16px);
	transition: all .25s ease-in-out;
}

/* ************************** Animation frames ************************** */
/* ********************************************************************** */
/* [ IN]   0s -  .5s > middle bar disappear and top/bottom bars turns green [2;4] */
/* [ IN]   0s - .25s > top/bottom bars goes up and down to merge to center [9;10] */
/* [ IN] .25s -  .5s > top/bottom bars rotate 45deg to form cross [6;7] */
/* [OUT]   0s -  .5s > middle bar reappear and top/bottom bars turns back to blue [1;3] */
/* [OUT]   0s - .25s > top/bottom bars rotate 45deg back to merge the cross and be at initial rotation [5] */
/* [OUT] .25s -  .5s > top/bottom bars goes up and down to be at initial position [8] */
/* ********************************************************************** */

/* ******************************* */
/* **************END************** */
/* ********** ANIMATION ********** */
/* ******************************* */
/* ******************************* */

/* ======== */
/* 14. FORM */
/* ======== */

/* ============== */
/* 15. RESPONSIVE */
/* ============== */

@media (max-width: 768px) {
	.lp1-footer > div > span {
	    flex-direction: column-reverse;
    }
	.lp1-footer a,
    .lp1-footer p {
		margin: 2.5rem 2.5rem;
	}
	.lp1-footer a {
		margin-top: 0.5rem;
	}
    .lp1-footer p {
		margin-bottom: 0.5rem;
	}
}

@media (max-width: 1440px) {
	.ty1-header-content {
		margin: 0 3.25rem;
	}
}

@media (max-width: 992px) {
	html {
		font-size: 60%;
	}
	.ty1-header-container img {
		max-width: 80%;
	}
}
@media (max-width: 920px) {
	html {
		font-size: 58%;
	}
	.ty1-header-container img {
		max-width: 70%;
	}
	.ty1-header-right .ty1-header-cta-button a {
		padding: 1rem 2rem;
	}
}
@media (max-width: 900px) {
	.ty1-header-container img {
		max-width: 65%;
	}
	.ty1-header-right li {
		margin-right: 3rem;
	}
	.ty1-header-right .ty1-header-cta-button a {
		padding: 0.75rem 1.5rem;
	}
}
@media (max-width: 850px) {
	.ty1-header-container img {
		max-width: 60%;
	}
	.ty1-header-right li {
		margin-right: 1rem;
	}
}