*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 1.6rem; color: #ffffff;
background-color: #1b2f3c;
}
body::before { content: 'mobile';
display: none;
}
@media only screen and (min-width: 1170px) {
body::before { content: 'desktop';
}
}
a {
color: #3F9AD6;
text-decoration: none;
} @media only screen and (min-width: 1170px) {
.tour-section {
height: 100vh;
}
}
.tour-section h1 {
position: relative;
top: 45%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
font-size: 4.2rem;
color:#fff;
letter-spacing:normal;
}
.tour-section h1 span{
display:block;
font-size: 2.3rem;
color:#fff;
letter-spacing:normal;
color:#92b2c9;
}
@media only screen and (min-width: 768px) {
.tour-section h1 {
font-size: 4.2rem;
}
input.form-control#email_tour {
margin-top:10px;
margin-right:5px;
margin-bottom:0;
}
#submit-tourpage.button{
padding:14px 35px;
margin-top:0;
}
}
@media only screen and (min-width: 1170px) {
.tour-section h1 {
font-size: 6.8rem;
}
}
.full-container, .half-container {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.full-container {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
}
.tour-section:first-of-type .full-container {
visibility: visible;
height: 100vh;
background-color: #1b2f3c; background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
@media only screen and (min-width: 1170px) {
.full-container {
position: fixed;
width: 100%;
min-height: 100vh;
top: 0;
left: 0;
height: 100vh;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
visibility: hidden;
}
.tour-section:first-of-type .full-container {
visibility: visible;
}
.full-container > * {
visibility: visible;
}
}
.half-container {
background: #ffffff;
color: #263b40;
text-align:center;
}
.half-container h3{ font-size: 1.9rem;
}
.half-container:nth-of-type(1) {
height: 60vh;
background-color: #1b2f3c;
background-position: center center;
background-repeat: no-repeat;
}
.half-container:nth-of-type(2) {
padding: 4em 10%;
}
.half-container p {
font-size: 1.3rem;
line-height: 1.6;
}
.tour-section:nth-of-type(2) .half-container:first-of-type { background-size: cover;
}
.tour-section:nth-of-type(3) .half-container:first-of-type { background-size: cover;
}
.tour-section:nth-of-type(4) .half-container:first-of-type { background-size: cover;
}
.tour-section:nth-of-type(5) .half-container:first-of-type { background-size: cover;
}
.tour-section:nth-of-type(6) .half-container:first-of-type { background-size: cover;
}
.tour-section:nth-of-type(7) .half-container:first-of-type { background-size: cover;
}
@media only screen and (min-width: 1170px) {
.half-container {
height: 100vh !important;
width: 50%;
position: absolute;
top: 0;
}
.half-container .txt_container {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 100%;
padding: 0 30%;
text-align:center;
}
.tour-section:nth-of-type(even) .half-container:first-of-type, .tour-section:nth-of-type(odd) .half-container:nth-of-type(2) {
left: 0;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.tour-section:nth-of-type(odd) .half-container:first-of-type, .tour-section:nth-of-type(even) .half-container:nth-of-type(2) {
right: 0;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
}
.vertical-nav {
position: fixed;
z-index: 1;
right: 15px;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
display: none;
}
.vertical-nav a {
display: block;
height: 40px;
width: 40px; overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: transparent url(//www.erich-kaestner-schule-hamburg.de/wp-content/themes/schule-child/img/tour/icon-arrow.svg) no-repeat center center;
-webkit-transition: opacity 0.2s 0s, visibility 0.2s 0s;
-moz-transition: opacity 0.2s 0s, visibility 0.2s 0s;
transition: opacity 0.2s 0s, visibility 0.2s 0s;
}
.vertical-nav a.prev {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
margin-bottom: 10px;
}
.vertical-nav a.inactive {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
-moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
ul.top-nav , ul.vertical-nav{
list-style:none;
margin:0;
padding:0;
}
.top-nav {
position: fixed;
z-index: 1;
right: 15px;
top: 2%;
bottom: auto;
}
.top-nav a{
display: block;
height: 40px;
width: 40px;
font-size:36px;
opacity:0.5;
cursor:pointer;
}
.top-nav a:hover{
color: #3F9AD6;
opacity:1;
}
ul.intro_icons{
list-style:none;
margin:30px 0 0 0;
padding:0;
text-align:center;
width:100%;
}
ul.intro_icons li{
display:inline-block;
text-align:center;
margin:0 5%;
text-transform:uppercase;
font-size:13px;
margin-bottom:20px;
}
ul.intro_icons li i{
display:block;
font-size:60px;
margin-bottom:5px;
}
input.form-control#email_tour {
background-color: #fff;
border:none;
border:2px solid #ededed;
height:50px;
font-size:15px;
padding-left:20px;
width:280px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin:auto;
}
input.form-control#email_tour:focus  {
border-color:none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
color:#444;
}
#submit-tourpage.button{
padding:14px 35px;
margin-top:20px;
}
@media only screen and (min-width: 1170px) {
.vertical-nav {
display: block;
}
}