@font-face {
    font-family: 'ABC';
    src: url('../fonts/ABC/ABCGintoPlusVariable-Trial.woff2') format('woff2'),
        url('../fonts/ABC/ABCGintoPlusVariable-Trial.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABC';
    src: url('../fonts/ABC/ABCGintoPlusVariable-Trial.woff2') format('woff2'),
        url('../fonts/ABC/ABCGintoPlusVariable-Trial.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABC';
    src: url('../fonts/ABC/ABCGintoPlusVariable-Trial.woff2') format('woff2'),
        url('../fonts/ABC/ABCGintoPlusVariable-Trial.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
  font-family: 'Socicon';
  src:  url('../fonts/socicon-webfont/Socicon.eot?87visu');
  src:  url('../fonts/socicon-webfont/Socicon.eot?87visu#iefix') format('embedded-opentype'),
    url('../fonts/socicon-webfont/Socicon.woff2?87visu') format('woff2'),
    url('../fonts/socicon-webfont/Socicon.ttf?87visu') format('truetype'),
    url('../fonts/socicon-webfont/Socicon.woff?87visu') format('woff'),
    url('../fonts/socicon-webfont/Socicon.svg?87visu#Socicon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="socicon-"], [class*=" socicon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'Socicon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.socicon-facebook:before {
  content: "\e028";
}

.socicon-twitter:before {
  content: "\e08d";
}

.socicon-instagram:before {
  content: "\e044";
}

.socicon-youtube:before {
  content: "\e0a5";
}

.socicon-linkedin:before {
  content: "\e04c";
}


@media (max-width:768px) {
  .intro {
    margin:0 !important;
    width: 100% !important;
    padding: 0 24px;
    margin-bottom: 32px !important;
  }
  .logo {
    position: relative !important;
    margin:auto auto 40px auto !important;
    left: inherit !important;
    max-width: 160px !important;
    display: table !important;
  }
  .social-link {
    display: none !important;
  }
  .social-icon {
    font-size: 24px;
    display: block !important;
  }
	h1 {
		font-size: 40px !important;
		margin-top: 56px !important;
		margin-bottom: 30px !important;
		line-height: 32px !important;
		width: 100% !important;
		margin-left: 0% !important;
	}
	img {
		max-width: 250px !important;
		max-height: 120px !important
	}
	.social p {
		text-align: center;
    margin: 10px 0 5px 0 !important;
		float: none !important
	}
	.social ul {
    clear: none;
	}
	.social ul li {
    opacity: 1 !important;
		margin:15px !important
	}
  .background {
    /* height: 50% !important; */
  }

  .hero {
    position: relative !important;
  }
  h5 {
    font-size: 11px !important;
    letter-spacing: -.2px;
    line-height: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important
  }
  .contactus {
    margin-top: 15px !important
  }
}

input[type="text"],
input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

a,
a:hover {
	-webkit-transition: all 400ms cubic-bezier(0.800, 0.000, 0.200, 1.000);
	-moz-transition: all 400ms cubic-bezier(0.800, 0.000, 0.200, 1.000);
	-o-transition: all 400ms cubic-bezier(0.800, 0.000, 0.200, 1.000);
	transition: all 400ms cubic-bezier(0.800, 0.000, 0.200, 1.000); /* custom */
	-webkit-transition-timing-function: cubic-bezier(0.800, 0.000, 0.200, 1.000);
	-moz-transition-timing-function: cubic-bezier(0.800, 0.000, 0.200, 1.000);
	-o-transition-timing-function: cubic-bezier(0.800, 0.000, 0.200, 1.000);
	transition-timing-function: cubic-bezier(0.800, 0.000, 0.200, 1.000); /* custom */
}

.social-icon {
  display: none;
}
.social-link {
  display: block;
  opacity: .8;
}
.background {
	background: #FFE975;
	position: fixed;
	width: 100%;
	height: 110%;
	top: 0;
	left: 0;
	z-index: 0;
}

.logo-link {
  display: block;
  position: relative;
  z-index: 1000;
  margin-bottom: 128px;
    opacity: 1;
}

.logo-link:hover {
  opacity: .7;
}


h5 {
  font-family: 'ABC';
  letter-spacing: 0;
  font-size: 13px;
  margin: 15px 0 30px 0
  }

* {
	box-sizing: border-box;
}

html,body {
	font-family: 'ABC';
	height: 100%;
  background: #FFE975;
	padding: 0;
	margin: 0;
}

body {
	line-height: 20px;
	color: #000;
}

.logo {
  text-align: center;
  width: 200px;
  margin-bottom: 100px:
}

.content-table {
  display:table !important;
  max-width: 900px;
  z-index: 444;
 	height:100%;
 	width: 100%;
 	margin: auto;
 	text-align: center;
	/*table-layout: fixed;*/
}
.content-vertical {
	display:table-cell;
  height:100%;
  position: relative;
	vertical-align:middle;
}

h1 {
	font-family: 'ABC';
	font-weight: 400;
	font-size: 64px;
	width: 80%;
	margin-top: 50px;
  font-weight: 900;
	margin-bottom: 30px;
	position: relative;
	margin-left: 10%;
  letter-spacing: -2px;
	line-height: 48px;
}

h1 span {
	font-family: 'ABC';
	color: #000;

}

.social {
	display: table;
	margin: auto;
}

.social ul {
	float: left;
	margin: 0;
	padding: 0;
}

.social ul li {
	padding: 0;
	list-style: none;
	float: left;
	font-size: 15px;
	margin: 0 10px;
	font-weight: 300;
	color: #000;
	opacity:.7;
	text-decoration: none;
}

.social p {
	font-weight: 600;
	font-size: 14px;
	margin: 0 15px 0 0;
	float: left;
}

.social ul li:hover {
	opacity: 1;
}

a.button {
	text-decoration: none;
  background: #000;
  font-size:16px;
  margin-top: 96px;
  float: left;
  border-radius: 16px;
  padding: 20px 32px;
  cursor: pointer;
  color: #fff;
}

a.button:hover {
  background: #000;
  opacity: .7;
  color: #fff;
}

a {
	text-decoration: none;
	color: #fff;
}

a:hover {
	color: #fff;
}

.container {
	max-width: 900px;
}

.hero {
  height:70vh;
  vertical-align: center
}
.pull-middle {
	margin: auto ;
}

@-webkit-keyframes fadeInObject { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeInObject { from { opacity:0; } to { opacity:1;} }
@keyframes fadeInObject { from { opacity:0;} to { opacity:1;}}

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeInObject ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeInObject ease-in 1;
	animation:fadeInObject ease-in 1;
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-duration:.6s;
	-moz-animation-duration:.6s;
	animation-duration:.6s;
}

.fade-in.one {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay:0.5s;
	animation-delay: 0.5s;
}

.fade-in.two {
	-webkit-animation-delay: .75s;
	-moz-animation-delay: .75s;
	animation-delay: .75s;
}
.fade-in.three {
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	animation-delay: 1.2s;
}

.fade-in.four {
	-webkit-animation-delay: 1.8s;
	-moz-animation-delay: 1.8s;
	animation-delay: 1.8s;
}

.fade-in.five {
	-webkit-animation-delay: 2.1s;
	-moz-animation-delay: 2.1s;
	animation-delay: 2.1s;
}

.fade-in.six {
	-webkit-animation-delay: 2.4s;
	-moz-animation-delay: 2.4s;
	animation-delay: 2.4s;
}

 html {
height: 100%;
}
  .wrapper {
	height: 100% !important;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}

  .main section  {
  overflow: hidden;background-size: cover !important; background-position: center center !important
}

  .main section.page2 h1 {
  color: rgba(255,255,255,0.85);
  text-align: center;
  line-height: 160%;
  font-weight: 100;
}
.viewing-page-2 .back{
  background: rgba(0, 0, 0, 0.25);
  color: #FFF;
  }
.main section.page3 {
  background:url(tilted-phone.png) no-repeat 156px -150px ;
}
.main section.page3 .page_container {
  overflow: hidden;
  width: 500px;
  right: -285px;
}
.main section.page3 h1 {
  text-align: left;
  padding: 0;
  margin-bottom: 0;
  font-size: 70px;
  letter-spacing: -1px;
  color: black;
}
.main section.page3 h1 {
  color: rgba(0,0,0,0.85);
  text-align: left;
  line-height: 160%;
  font-weight: 100;
  font-size: 21px;
}

body.disabled-onepage-scroll .onepage-wrapper  section {
  min-height: 100%;
  height: auto;
}

body.disabled-onepage-scroll .main section .page_container, body.disabled-onepage-scroll .main section.page3 .page_container  {
  padding: 20px;
  margin-top: 150px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body.disabled-onepage-scroll  section .page_container h1{
  text-align: center;
  font-size: 50px;
}
body.disabled-onepage-scroll section .page_container h1, body.disabled-onepage-scroll section .page_container .credit, body.disabled-onepage-scroll section .page_container .btns{
  text-align: center;
  width: 100%;
}

body.disabled-onepage-scroll .main section.page1 > img {
  position: absolute;
  width: 80%;
  left: 10%;
}

body.disabled-onepage-scroll .main section > img {
  position: relative;
  max-width: 80%;
  bottom: 0;
}
body.disabled-onepage-scroll code {
  width: 95%;
  margin: 0 auto 25px;
  float: none;
  overflow: hidden;
}

body.disabled-onepage-scroll .main section.page3 .page_container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  right: 0;
}


.contactus {
	width: 100%;
	font-size: 11px;
  color: #A0A3AB;
  margin-top: 30px;
	text-align:center;
	z-index: 6;
	display: block;
	font-weight: 300;
}

.contactus a {
	font-weight: 600;
  color: #D0D1D5;
}

.contactus a:hover {
	font-weight: 600;
	color: #fff;
}


.background
{
	background: #FFE975;
  opacity: 1;
	background-size: cover;
	position: fixed;
	width: 100%;
	height: 110%;
	top: 0;
	left: 0;
	z-index: 0;
}

.contactus:hover .privacy:hover {
	font-weight: 300
}


#footer {
  background-image:url('../img/Bloc.png');
  z-index: 6;
  background-position: center;
  width: 100%;
  left: 0;
  height: 30vh;
  bottom: 0;
  right:0;
  text-align: center;
}

.intro {
  margin:16px 0 0px 0;
  opacity:1;
  font-size:20px;
  line-height: 22px;
  padding: 0;
  width:50%;
  margin-left:25%
}