/*
Theme Name: Hyper Landing Page
Author: Julian Chaniolleau
Description: Hyper Landing Page for 97Display
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
@font-face {
    font-family: 'Liberator';
    src: url('assets/fonts/LiberatorMedium.woff2') format('woff2'),
        url('assets/fonts/LiberatorMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Museo Sans 300';
    src: url('assets/fonts/MuseoSans-300.woff2') format('woff2'),
        url('assets/fonts/MuseoSans-300.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
html *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
} 

body{
	background: #ffffff;
	color: #fff;
	font-family: 'Museo Sans 300','Lato','Open Sans', sans-serif;
	font-size: 20px;
	line-height: 28px;
	font-weight: 500;
	margin:0;
	padding:0;
	position: relative;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

::selection{background-color:#2cb1a7;color:#fff;}
::-moz-selection{background-color:#2cb1a7;color:#fff;}

/* width */
::-webkit-scrollbar { width: 12px; }
/* Track */
::-webkit-scrollbar-track { background: #ffffff;  }
/* Handle */
::-webkit-scrollbar-thumb { background: #2cb1a7; border-radius: 2px;  }
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { cursor: ns-resize !important; }

.gecko * {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.inv{ display: none; }
/*----------------------------------*/
/*	 TYPOGRAPHY						*/
/*----------------------------------*/
a, input.button{
	cursor:pointer;
	text-decoration:none;
	  -webkit-transition: all 0.2s ease-in-out;
		 -moz-transition: all 0.2s ease-in-out;
		   -o-transition: all 0.2s ease-in-out;
			  transition: all 0.2s ease-in-out;
}


h1{
	font-family: 'Liberator';
	font-style: normal;
	font-weight: 500;
	color: inherit;
}
h2 , h3 , h4 , h5 , h6 {
font-family: museo-sans-condensed, sans-serif;
font-weight: 900;
font-style: normal;
text-transform: uppercase;
}
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong{ font-weight: bold; font-weight: 500; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img{ display: inline-block; }

h1{ font-size: calc(36px + (130 - 36) * ((100vw - 300px) / (2000 - 300))); font-weight: 600; line-height: 100%; margin-bottom: 10px; }
h1 span.life{ display: inline-block; vertical-align: middle; margin-right: 20px; }
h2{ font-size: calc(30px + (80 - 30) * ((100vw - 300px) / (2000 - 300))); line-height: 100%; margin-bottom: 10px; }
h3{ font-size: 30px; line-height: 45px; margin-bottom: 10px; }
h4{ font-size: 24px; line-height: 30px; margin-bottom: 10px; }
h5{ font-size: 18px; line-height: 24px; margin-bottom: 10px; }
h6{ font-size: 16px; line-height: 19px; margin-bottom: 10px; }

strong { font-weight: bold; }
em     { font-style: italic; }
small  { font-size: 80%; line-height: 60%;}
sup{
	position: relative;
	font-size: 60%; line-height: 12px;
	top: -5px;
}

.giant{ font-size: calc(30px + (100 - 30) * ((100vw - 300px) / (2000 - 300))); line-height: 100%; }

.biglines{   font-size: 36px; line-height: 48px;}
.blockquote p{   font-size: calc(20px + (32 - 20) * ((100vw - 300px) / (2000 - 300))); line-height: 150%; }
.blockquote cite{ display:none; font-size: 24px; line-height: 36px; }

/*----------------------------------*/
/*	 ICONS 							*/
/*----------------------------------*/
/*----------------------------------*/
/*	 COLUMNS						*/
/*----------------------------------*/
.row:after{
content:".";display:block;height:0;clear:both;visibility:hidden
}
.row_col{
	display: block; float: left;
}
.col_gap_20{}
.col_gap_20 .row_col{ padding-left: 20px; padding-right: 20px; }

.c-1-1{ width:100%; }
.c-1-2{ width:50%; }
.c-1-3{ width:33.33333336%; }
.c-1-4{ width:25%; }
.c-1-5{ width:20%; }
.c-1-6{ width:16.66666667%; }
	.c-2-2{ width:100%; }
	.c-2-3{ width:66.33333336%; }
	.c-2-4{ width:50%; }
	.c-2-5{ width:40%; }
	.c-2-6{ width:32.33333336%; }
		.c-3-4{ width:75%; }
		.c-3-5{ width:60%; }
		.c-3-6{ width:100%; }
			.c-4-5{ width:100%; }
			.c-4-6{ width:100%; }
				.c-5-6{ width:100%; }



/*----------------------------------*/
/*	 MARGINS & BLOCKS				*/
/*----------------------------------*/
.gap-10, .gap-20, .gap-30, .gap-40, .gap-50, .gap-60, .gap-70, .gap-80, .gap-90, .gap-100{ display:block; width:100%; }
.gap-10{ height: 10px; } .gap-20{ height: 20px; } .gap-30{ height: 30px; } .gap-40{ height: 40px; } .gap-50{ height: 50px; } .gap-60{ height: 60px; } .gap-70{ height: 70px; } .gap-80{ height: 80px; } .gap-90{ height: 90px; } .gap-100{ height: 100px; }

.max100{ width: 100%; max-width: 100px !important; margin-left: auto; margin-right: auto; float: none;}
.max200{ width: 100%; max-width: 200px !important; margin-left: auto; margin-right: auto; float: none;}
.max300{ width: 100%; max-width: 300px !important; margin-left: auto; margin-right: auto; float: none;}
.max400{ width: 100%; max-width: 400px !important; margin-left: auto; margin-right: auto; float: none;}
.max500{ width: 100%; max-width: 500px !important; margin-left: auto; margin-right: auto; float: none;}
.max600{ width: 100%; max-width: 600px !important; margin-left: auto; margin-right: auto; float: none;}
.max700{ width: 100%; max-width: 700px !important; margin-left: auto; margin-right: auto; float: none;}
.max800{ width: 100%; max-width: 800px !important; margin-left: auto; margin-right: auto; float: none;}
.max900{ width: 100%; max-width: 900px !important; margin-left: auto; margin-right: auto; float: none;}
.max1000{ width: 100%; max-width: 1000px !important; margin-left: auto; margin-right: auto; float: none;}
.max1100{ width: 100%; max-width: 1100px !important; margin-left: auto; margin-right: auto; float: none;}
.max1200{ width: 100%; max-width: 1200px !important; margin-left: auto; margin-right: auto; float: none;}
.max1280{ width: 100%; max-width: 1280px !important; margin-left: auto; margin-right: auto; float: none;}
.max1400{ width: 100%; max-width: 1400px !important; margin-left: auto; margin-right: auto; float: none;}
.max1440{ width: 100%; max-width: 1440px !important; margin-left: auto; margin-right: auto; float: none;}
.max1600{ width: 100%; max-width: 1600px !important; margin-left: auto; margin-right: auto; float: none;}

.w300{ max-width: 300px;  }
.w400{ max-width: 400px;  }
.w500{ max-width: 500px;  }
.w600{ max-width: 600px;  }
.w700{ max-width: 700px;  }
.w800{ max-width: 800px;  }
.w900{ max-width: 900px;  }

.m-b-0{ margin-bottom: 0px; }
.m-b-10{ margin-bottom: 10px; }
.m-b-20{ margin-bottom: 20px; }
.m-b-30{ margin-bottom: 30px; }
.m-b-40{ margin-bottom: 40px; }
.m-b-50{ margin-bottom: 50px; }
.m-b-60{ margin-bottom: 60px; }
.m-b-70{ margin-bottom: 70px; }
.m-b-80{ margin-bottom: 80px; }
.m-b-90{ margin-bottom: 90px; }
.m-b-100{ margin-bottom: 100px; }

.m-t-0{ margin-top: 0px; }
.m-t-10{ margin-top: 10px; }
.m-t-20{ margin-top: 20px; }
.m-t-30{ margin-top: 30px; }
.m-t-40{ margin-top: 40px; }
.m-t-50{ margin-top: 50px; }
.m-t-60{ margin-top: 60px; }
.m-t-70{ margin-top: 70px; }
.m-t-80{ margin-top: 80px; }
.m-t-90{ margin-top: 90px; }
.m-t-100{ margin-top: 100px; }

.px-10{ padding-left: 10px; padding-right: 10px; }
.px-20{ padding-left: 20px; padding-right: 20px; }
.px-30{ padding-left: 30px; padding-right: 30px; }
.px-40{ padding-left: 40px; padding-right: 40px; }
.px-50{ padding-left: 50px; padding-right: 50px; }
.px-60{ padding-left: 60px; padding-right: 60px; }
.px-70{ padding-left: 70px; padding-right: 70px; }
.px-80{ padding-left: 80px; padding-right: 80px; }
.px-90{ padding-left: 90px; padding-right: 90px; }
.px-100{ padding-left: 100px; padding-right: 100px; }

.py-10{ padding-top: 10px; padding-bottom: 10px; }
.py-20{ padding-top: 20px; padding-bottom: 20px; }
.py-30{ padding-top: 30px; padding-bottom: 30px; }
.py-40{ padding-top: 40px; padding-bottom: 40px; }
.py-50{ padding-top: 50px; padding-bottom: 50px; }
.py-60{ padding-top: 60px; padding-bottom: 60px; }
.py-70{ padding-top: 70px; padding-bottom: 70px; }
.py-80{ padding-top: 80px; padding-bottom: 80px; }
.py-90{ padding-top: 90px; padding-bottom: 90px; }
.py-100{ padding-top: 100px; padding-bottom: 100px; }

.pb-10{ padding-bottom: 10px; }
.pb-20{ padding-bottom: 20px; }
.pb-30{ padding-bottom: 30px; }
.pb-40{ padding-bottom: 40px; }
.pb-50{ padding-bottom: 50px; }
.pb-60{ padding-bottom: 60px; }
.pb-70{ padding-bottom: 70px; }
.pb-80{ padding-bottom: 80px; }
.pb-90{ padding-bottom: 90px; }
.pb-100{ padding-bottom: 100px; }
.pb-110{ padding-bottom: 110px; }
.pb-120{ padding-bottom: 120px; }
.pb-130{ padding-bottom: 130px; }
.pb-140{ padding-bottom: 140px; }
.pb-150{ padding-bottom: 150px; }
.pb-160{ padding-bottom: 160px; }

.pt-10{ padding-top: 10px; }
.pt-20{ padding-top: 20px; }
.pt-30{ padding-top: 30px; }
.pt-40{ padding-top: 40px; }
.pt-50{ padding-top: 50px; }
.pt-60{ padding-top: 60px; }
.pt-70{ padding-top: 70px; }
.pt-80{ padding-top: 80px; }
.pt-90{ padding-top: 90px; }
.pt-100{ padding-top: 100px; }
.pt-110{ padding-top: 110px; }
.pt-120{ padding-top: 120px; }
.pt-130{ padding-top: 130px; }
.pt-140{ padding-top: 140px; }
.pt-150{ padding-top: 150px; }
.pt-160{ padding-top: 160px; }

.space{ padding-top: 3vw; padding-bottom: 3vw; }



/*----------------------------------*/
/*	 SECTIONS						*/
/*----------------------------------*/
.mainContainer{ padding:10px 30px 4px 30px; }
.section{ margin-bottom: 26px; }
.section .content{ position: relative; z-index: 3; padding: 80px 60px; }
.noPadBt .content{ padding-bottom: 0px; }
.roundedBorder, .roundedBorder:before, .roundedBorder:before, .roundedBorder:after, .roundedBorder:after{ border-radius: 10px; }
.section.intro{ padding: 20px; }

.greenStripes{ background:#2cb1a7; position: relative; }
.greyStripes{ background:#666666; position: relative; }
.greenStripes:before, .greyStripes:before{ background: url( https://97displaylive.blob.core.windows.net/aqua/Resources/landingpages/HyperBullyAwareness/assets/images/pattern.png ) repeat center center; opacity: 0.2; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.greenStripes:after, .greyStripes:after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.greenStripes:after{ background: rgb(44,177,167); background: linear-gradient(180deg, rgba(44,177,167,1) 0%, rgba(44,177,167,0.2819502801120448) 100%); }
.greyStripes:after{ background: rgb(102,102,102); background: linear-gradient(180deg, rgba(102,102,102,1) 0%, rgba(102,102,102,0.2819502801120448) 100%); }


/*----------------------------------*/
/*	 FOOTER							*/
/*----------------------------------*/
.footer{ background-color: #000; color: #999999; font-size: 0; padding: 10px 30px; }
.footer a{ color: #999999; }
.footer a:hover{ color: #2cb1a7; }
.copyright,
.links{ display: inline-block; font-size: 15px; width: 50%;  }
.links{ text-align: right; }

/*----------------------------------*/
/*	 INTRO	 						*/
/*----------------------------------*/
.intro{ }
.videoPlayerBox{ font-size: 20px; display: block; float: left; padding-right: 40px; width: 60%; vertical-align: top; }
.videoPlayerBox--inner{ margin: 0 auto; max-width: 876px; overflow: hidden; position: relative; border-radius: 10px;background: #fff;  }
.videoPlayerBox--inner.pause:after{ content: ''; position: absolute; top: 0; left: 0; right: 0;bottom: 0; z-index: 2;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(44,177,167,1) 100%);
opacity: 0.7; }
.videoPlayerBox--inner.pause .thevideo{ display: none; }
.videoPlayerBox--inner .thevideo{ display: block; }
#videoPlayerPlay.play{ border:none; background:none; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; transform: translate(-50%, -50%); z-index: 3; }
#videoPlayerPlay.play:after{ display:block; content:''; width: 0; left: 0; margin:0 auto; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 60px solid #fff; }
#videoPlayerPlay.stop {
    border: none;
    background: none;
    position: absolute;
    top: 40px;
    right: 10px;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    z-index: 3;
}
#videoPlayerPlay.stop:after {
    display: block;
    content: '';
    width: 10px;
    height: 30px;
    left: 0px;
    margin: 0 auto;
    border: 1px solid #fff;
    border-width: 0 10px 0 10px;
}
.videoPlayerBox img{ -webkit-filter: grayscale(1); filter: grayscale(1); position: relative; z-index: 1; display:none; opacity: 0; }
.videoPlayerBox--inner.pause img{ display:block; opacity: 1; }
.signmeup{ font-size: 26px; display: block; float: left; width: 40%; vertical-align: top; }
.signmeup h2{ font-size: calc(24px + (40 - 24) * ((100vw - 300px) / (2000 - 300))); line-height: 100%; }



/*----------------------------------*/
/*	 INTRO	 						*/
/*----------------------------------*/
.hyperForm input[type="text"],.hyperForm select{ width: 100%; background-color: #fff; border-radius: 4px; padding: 0 20px; height: 60px; font-size: 18px; border:none;  }
.hyperForm input[type="submit"]{ display: block; max-width:200px; width: 100%; background-color: #fff; color:#2cb1a7; border-radius: 4px; font-weight:900; text-transform: uppercase; padding: 0 20px; height: 60px; font-size: 18px; border:none; margin: 0 auto; }
.hyperForm input[type="submit"]:hover{ background-color: #2cb1a7; color:#ffffff; }
.hyperForm p{ margin-bottom: 10px; }
.hyperForm input[type="submit"].greenButton{  background-color: #2cb1a7; color:#ffffff;  }
.hyperForm input[type="submit"].greenButton:hover{  background-color: #ffffff; color:#2cb1a7;  }


/*----------------------------------*/
/*	 GRIDBOX						*/
/*----------------------------------*/
.gridBox{ display: flex; align-items: center; flex-direction: row-reverse; }
.gridBox--img{ width: 50%; }
.gridBox--img img{ margin: 0 auto;  padding:0 20px; }
.gridBox--txt{ width: 50%; padding:0 30px; }
.gridBox--txt .w600{ margin-right: auto; }
.gridBox.ImgAtRight .gridBox--txt .w600{margin-right: 0; margin-left: auto; }
.gridBox.ImgAtRight{ flex-direction: row; }





/*----------------------------------*/
/*	 TRANSITIONS					*/
/*----------------------------------*/


.fade-bottom{
	visibility: hidden;
	opacity: 0;
}
.fade-bottom.animStart{
	visibility: visible; opacity: 1;
	animation: animfadebottom .4s forwards;
}

@keyframes animfadebottom{
	0%{
		opacity: 0;
		transform: translateY(40px);
	},
	100%{
		opacity: 1;
		transform: translateY(0px);
	}
}


.scaleUp{
	visibility: hidden;
	opacity: 0;
}
.scaleUp.animStart{
	visibility: visible; opacity: 1;
	animation: animscaleUp .7s forwards;
}

@keyframes animscaleUp{
	0%{
		opacity: 0;
		transform: scale(0.8);
	},
	100%{
		opacity: 1;
		transform: scale(1);
	}
}


.scaleDown{
	visibility: hidden;
	opacity: 0;
}
.scaleDown.animStart{
	visibility: visible; opacity: 1;
	animation: animscaleDown .7s forwards;
}

@keyframes animscaleDown{
	0%{
		opacity: 0;
		transform: scale(1.2);
	},
	100%{
		opacity: 1;
		transform: scale(1);
	}
}

.blurry{
	visibility: hidden;
}
.blurry.animStart{
	visibility: visible;
	animation: animblurry 1.4s forwards;
}

@keyframes animblurry{
	0%{
		opacity: 0;
		transform: translateX(40px);
		filter: blur(20px);
	},
	100%{
		opacity: 1;
		transform: translateX(0px);
		filter: blur(0px);
	}
}