@import url('http://weloveiconfonts.com/api/?family=entypo');
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

@import url('//hello.myfonts.net/count/2d8f2f');
@font-face {font-family: 'AmsiProCond-Bold';
src: url('./webfonts/2D8F2F_0_0.eot');
src: url('./webfonts/2D8F2F_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2D8F2F_0_0.woff2') format('woff2'),url('webfonts/2D8F2F_0_0.woff') format('woff'),url('webfonts/2D8F2F_0_0.ttf') format('truetype');
}

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

.footer img.logo {
width:80%;
max-width: 100px;
}

.entypo-check {
color:#45c6e5;
margin-right:10px;
}

html,body,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:inherit;
font-size:100%;
vertical-align:baseline
}
 
 
html {
line-height:1
}
 
 
ol,ul {
list-style:none
}
 
 
table {
border-collapse:collapse;
border-spacing:0
}
 
 
caption,th,td {
text-align:left;
font-weight:normal;
vertical-align:middle
}
 
 
q,blockquote {
quotes:none
}
 
 
q:before,q:after,blockquote:before,blockquote:after {
content:"";
content:none
}
 
 
a img {
border:none
}
 
 
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
display:block
}
 
 
@-webkit-keyframes fadein {
0% {
opacity:0
}
 
 
100% {
opacity:1
}
 
 

}
 
 
@-moz-keyframes fadein {
0% {
opacity:0
}
 
 
100% {
opacity:1
}
 
 

}
 
 
@-ms-keyframes fadein {
0% {
opacity:0
}
 
 
100% {
opacity:1
}
 
 

}
 
 
@keyframes fadein {
0% {
opacity:0
}
 
 
100% {
opacity:1
}
 
 

}
.intro {
color:#fff;
} 

body {
color:#555555;
font-family: 'Roboto Slab';
font-size:20px;
font-style:normal;
font-weight:400;
line-height:1.5;
text-align:left;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased
}
 
 
a {
color:#555555;
font-style:italic;
font-weight:600;
text-decoration:none;
-webkit-transition:color 0.15s linear;
-moz-transition:color 0.15s linear;
-ms-transition:color 0.15s linear;
-o-transition:color 0.15s linear;
transition:color 0.15s linear
}
 
 
a:hover {
color:#AAAAAA
}
 
 
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box
}
 
 
html,body {
height:100%;
min-height:100%;
position:relative;
z-index:1
}
 
 
.wrapper {
background:#fff;
position:relative;
width:100%;
z-index:2
}
 
 
.show .wrapper {
-moz-transform:translateX(200px);
-ms-transform:translateX(200px);
-webkit-transform:translateX(200px);
transform:translateX(200px)
}
 
 
.wrapper .splitlayout {
min-height:100%;
position:relative;
width:100%
}
 
 
.wrapper .side {
height:100%;
position:relative;
top:0;
width:50%;
-webkit-backface-visibility:hidden;
z-index:100
}
 
 
@media screen and (max-width: 768px) {
.wrapper .side {
width:100%
}
 
 

}
 
 
.wrapper .side-left {
left:0
}
 
 
.wrapper .side-right {
position:fixed;
right:0;
top:0;
-moz-transform:translateY(100%);
-ms-transform:translateY(100%);
-webkit-transform:translateY(100%);
transform:translateY(100%);
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-ms-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out
}
 
 
.wrapper .side-right.current {
-moz-transform:translateY(0%);
-ms-transform:translateY(0%);
-webkit-transform:translateY(0%);
transform:translateY(0%)
}
 
 
@media screen and (max-width: 768px) {
.wrapper .side-right {
position:relative;
-moz-transform:translateY(0%);
-ms-transform:translateY(0%);
-webkit-transform:translateY(0%);
transform:translateY(0%)
}
 
 

}
 
 
.wrapper .image {
height:90%;
left:50%;
margin-right:-50%;
position:absolute;
top:50%;
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
width:90%
}
 
 
@media screen and (max-width: 768px) {
.wrapper .image {
position:relative;
top:0;
-moz-transform:translate(-50%, 0);
-ms-transform:translate(-50%, 0);
-webkit-transform:translate(-50%, 0);
transform:translate(-50%, 0)
}
 
 

}
 
.icons {font-size:30px;margin:4px 20px;}
.intro {
position:relative
}
 
 
@media screen and (max-width: 768px) {
.intro {
height:auto !important
}
 
 

}
 
 
.intro .side-right {
-moz-transform:translateY(0);
-ms-transform:translateY(0);
-webkit-transform:translateY(0);
transform:translateY(0);
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none
}
 
 
.intro .bc-logo {
fill:#AAAAAA;
height:23px;
left:50%;
margin-right:-50%;
position:absolute;
text-align:center;
top:8%;
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
width:90px
}
 
 
@media screen and (max-width: 768px) {
.intro .bc-logo {
margin-top:20%;
position:relative;
-moz-transform:translate(-50%, 0);
-ms-transform:translate(-50%, 0);
-webkit-transform:translate(-50%, 0);
transform:translate(-50%, 0)
}
 
 

}
 
 
@media screen and (max-width: 375px) {
.intro .bc-logo {
margin-top:0%
}
 
 

}
 
 
@media screen and (max-width: 320px) {
.intro .bc-logo {
margin-top:10%
}
 
 

}
.white {background:#fff;} 
.orange {background:#ff814a;}
 
.intro .content {
padding:60px;
position:absolute;
top:48%;
left:50%;
margin-right:-50%;
max-width:540px;
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
width:90%
}
 
 
@media screen and (max-width: 768px) {
.intro .content {
padding:60px 20px 20%;
position:relative;
-moz-transform:translate(-50%, 0);
-ms-transform:translate(-50%, 0);
-webkit-transform:translate(-50%, 0);
transform:translate(-50%, 0)
}
 
 

}
 
 
@media screen and (max-width: 375px) {
.intro .content {
padding-bottom:15%
}
 
 

}
 
 
@media screen and (max-width: 320px) {
.intro .content {
padding-bottom:10%;
padding-top:10px
}
 
 

}
 
 
.intro .content h1 {
background:url("./img/vexter-logo.svg") no-repeat scroll center center  rgba(0, 0, 0, 0);
background-size:cover;
font-family: "AmsiProCond-Bold", Helvetica, Arial, sans-serif;
font-size:250px;
font-weight:500;
line-height:0.5;
text-align:center;
text-indent:-9999px;
width:100%
}
 
 
.intro .content h2 {
font-family: "AmsiProCond-Bold", Helvetica, Arial, sans-serif;
font-size:15px;
font-weight:500;
letter-spacing:3.55px;
margin-top:30px;
text-align:center;
text-transform:uppercase
}
 
 
@media screen and (max-width: 540px) {
.intro .content h2 {
font-size:13px;
margin-top:0
}
 
 

}
 
 
.intro .scroll-message {
bottom:4%;
left:50%;
margin-right:-50%;
position:absolute;
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%)
}
 
 
@media screen and (max-width: 768px) {
.intro .scroll-message {
display:none
}
 
 

}
 
 
.intro .scroll-message .mouse-icon {
bottom:60%;
fill:#AAAAAA;
height:23px;
left:50%;
margin-right:-50%;
position:absolute;
width:15px;
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%)
}
 
 
.intro .scroll-message p {
font-family: "AmsiProCond-Bold", Helvetica, Arial, sans-serif;
font-size:20px;
font-style:normal;
font-weight:500;
letter-spacing:2.5px;
text-align:center;
text-transform:uppercase
}
 
 
.intro .intro-bg {
background-color:#fff;
}
 
 
.chapters {
position:relative
}
 
 
@media screen and (max-width: 768px) {
.chapters {
height:auto !important
}
 
 

}
 
 
.chapter {
height:100%;
}
 
 
@media screen and (max-width: 768px) {
.chapter {
height:100%
}
 
 

}
 
 
.chapter .copy {
margin:40px auto;
max-width:500px
}
 
 
@media screen and (max-width: 1200px) {
.chapter .copy {
padding-left:42px;
padding-right:42px
}
 
 

}
 
 
@media screen and (max-width: 768px) {
.chapter .copy {
margin:100px auto
}
 
 

}
 
 
@media screen and (max-width: 540px) {
.chapter .copy {
font-size:16px;
margin:60px auto
}
 
 

}
 
 
@media screen and (max-width: 375px) {
.chapter .copy {
padding-left:34px;
padding-right:34px
}
 
 

}
 
 
@media screen and (max-width: 320px) {
.chapter .copy {
padding-left:30px;
padding-right:30px
}
 
 

}
 
 
.chapter .copy h4 {
font-family: "AmsiProCond-Bold", Helvetica, Arial, sans-serif;
font-size:40px;
font-weight:300;
margin-bottom:-8px;
margin-top:44px
}
 
 
@media screen and (max-width: 768px) {
.chapter .copy h4 {
font-size:30px
}
 
 

}
 
 
.chapter .copy h5 {
margin-top:44px
}
 
 
.chapter .copy h5 a {
color:#ff814a;
font-size:24px;
-webkit-transition:color 0.15s linear;
-moz-transition:color 0.15s linear;
-ms-transition:color 0.15s linear;
-o-transition:color 0.15s linear;
transition:color 0.15s linear
}
 
 
.chapter .copy h5 a:hover {
color:#ff814a
}
 
 
.chapter .copy p {
margin-bottom:24px
}
.chapter .copy p:first-child {
    border-bottom: 3px dotted #bac4c6;
    font-weight: bold;
    padding-bottom: 1em;
}

.chapter-one p:first-child, .chapter-six p:first-child {
color:#ff814a;
font-size:36px;
padding-top:50%;
font-weight: 700;
border-bottom: none !important;
}
 
 
@media screen and (max-width: 768px) {
.chapter-one p:first-child {
font-size:21px;
padding-top:10%;
font-weight: 700;
}
 
 

}
 
 
.chapter-one-bg {
background-color:#eee
}
 
 
.chapter-one h4 {
color:#ff814a
}
 
 
.chapter-two-bg {
background-color:#eee
}
 
 
.chapter-two h4 {
color:#ff814a
}
 
 
.chapter-three-bg {
background-color:#eee
}
 
 
.chapter-three h4 {
color:#ff814a
}
 
 
.chapter-four-bg {
background-color:#eee
}
 
 
.chapter-four h4 {
color:#ff814a
}
 
 
.chapter-five-bg {
background-color:#eee
}
 
 
.chapter-five h4 {
color:#ff814a
}
 
 
.chapter-six-bg {
background-color:#eee
}
 
 
.chapter-six h4 {
color:#ff814a
}
 
 
.chapter-seven-bg {
background-color:#eee
}
 
 
.chapter-seven h4 {
color:#ff814a
}
 
 
.chapter-eight-bg {
background-color:#eee
}
 
 
.chapter-eight h4 {
color:#ff814a
}
 
 
.chapter-nine-bg {
background-color:#eee
}
 
 
.chapter-nine h4 {
color:#ff814a
}
 
 
.chapter-ten-bg {
background-color:#ff814a
}
 
 
.chapter-ten {
height:100%
}
 
 
.chapter-ten h4 {
color:#ff814a
}
 
 
.footer {
margin-top:-18%;
padding:20px;
position:relative;
width:50%;
z-index:200
}
 
 
@media screen and (max-width: 768px) {
.footer {
margin-top:0;
width:100%
}
 
 

}
 
 
.footer .social {
height:100%
}
 
 
.footer .social-urls {
margin:40px auto;
text-align:center
}
 
 
.footer .social-urls p {
margin-bottom:24px
}
 
 
@media screen and (max-width: 1200px) {
.footer .social-urls {
padding-left:42px;
padding-right:42px
}
 
 

}
 
 
@media screen and (max-width: 768px) {
.footer .social-urls {
margin:100px auto
}
 
 

}
 
 
@media screen and (max-width: 540px) {
.footer .social-urls {
font-size:16px;
margin:60px auto
}
 
 

}
 
 
.footer .social-urls a {
margin:0 8px
}
 
 
.footer .social-urls a svg {
height:28px;
width:28px
}