/*Landing page*/

[data-template="interior-landing"] .shelf[data-shelf="introduction"] {
background-image: url('/images/intros/body-intro-perspective.jpg');
background-position: center -120px;
}

[data-template="interior-landing"] .shelf[data-shelf="introduction"]:before {
background: #75bf97;
}

[data-template="interior-landing"] #intro-content {
top: 40%;
}

#intro-articles {
position: absolute;
bottom: 180px;
width: 100%;
z-index: 10;
}

#intro-articles img {
position: absolute;
width: 70px;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
transition: all ease 1s;
}

#intro-articles img:nth-child(1) {
top: -80px;
left: 0;
}

#intro-articles img:nth-child(2) {
top: -20px;
left: 30%;
}

#intro-articles img:nth-child(3) {
top: 0;
left: 70%;
}

#intro-articles img:nth-child(4) {
top: -50px;
left: 90%;
}

body[data-loaded="true"] #intro-articles img:nth-child(1) {
top: -100px;
}

body[data-loaded="true"] #intro-articles img:nth-child(2) {
top: 0;
}

body[data-loaded="true"] #intro-articles img:nth-child(3) {
top: 20px;
}

body[data-loaded="true"] #intro-articles img:nth-child(4) {
top: -70px;
}

#intro-buttons .button-blue {
padding-left: 55px;
}

#intro-buttons .button-blue:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 100%;
background: rgba(0, 0, 0, 0.1) url('/images/icon-geotag-white.png') center center no-repeat;
background-size: 12px;
}

#invite-button-facebook i,
#invite-button-twitter i {
margin-right: 10px;
}

#invite-button-facebook {
color: #fff !important;
background-color: #4267b2 !important;
}

#invite-button-twitter {
color: #fff !important;
background-color: #1da1f2 !important;
}

/*Sub pages*/

#h-page-heading {
background: #4897d4;
}

@media all and (max-width: 1050px){

/*Landing page*/

[data-template="interior-landing"] .shelf[data-shelf="introduction"] {
background-position: center;
}

[data-template="interior-landing"] #intro-content {
top: 50%;
}

#intro-articles {
display: none;
}

}

@media all and (max-width: 600px){

.content-tab[data-tab="invite"] .button {
display: block;
}

#invite-button-twitter {
margin-left: 0;
margin-top: 20px;
}

}