body, html {
height: 100%;
margin: 0;
top:0;
}
* {
box-sizing: border-box;
}
hr {
border: 0;
border-top: 1px solid #eee;
width: 60%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
left: 50%;
position: absolute;
}
a {
text-decoration: none
}
a:active {
color: rgba(214, 201, 18, 0.44)
}
a:any-link {
color: black
}
a:hover {
color: rgba(183, 110, 2, 0.44)
}
.arrow:hover {
color: rgba(183, 110, 2, 0.44)
}
[class*="col-"] {
float: left;
/* padding 15px */
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.hero-image {
background-image: url("Images/slide1.jpg");
background-color: #cccccc;
height: 100%;
max-width: 100%;
left: 8.33%;
right: 8.33%;
top:4%;
margin: -0px 0 90px 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
padding: 0 0 0 0;
z-index: 95;
opacity: 6%;
}
.noHover {
pointer-events: none;
}
.header {
text-align: center;
width: 100%;
position: fixed;
background-color: rgba(255,255,255,0.97);
color: black;
z-index: 999;
padding: 15px 0 15px 0;
}
.footer {
position: fixed;
bottom: 0px;
text-align: center;
background-color: rgba(255,255,255,0.97);
width: 100%;
color: dimgray;
z-index: 99;
padding: 20px 0 1px 0;
}
.image {
height: 600px;
width: 100%;
z-index: 99;
}
/* Information Overlay im Header Links und Projektbeschreibung*/
#overlayInfo {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255,255,255,0.9);
z-index: 2;
cursor: pointer;
}
/* Karten KRI, Stroke & Maale */
.overlay2 {
position: absolute;
height: 100%;
bottom: 0;
background-color: rgba(0, 0, 0, 0);
overflow: hidden;
width: auto;
z-index: 95;
transition: 4s ease;
-webkit-animation-name: fade;
-webkit-animation-duration: 11.5s;
animation-name: fade;
animation-duration: 11.5s;
}
.overlay3 {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0);
overflow: hidden;
width: auto;
z-index: 95;
height:0;
transition-delay: 10s ease;
-webkit-animation-name: fade;
-webkit-animation-duration: 20.5s;
animation-name: fade;
animation-duration: 20.5s;
}
.overlay4 {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0);
overflow: hidden;
width: auto;
z-index: 95;
height:0;
transition: 10s;
transition-delay: 15s ease;
-webkit-animation-name: fade;
-webkit-animation-duration: 30.5s;
animation-name: fade;
animation-duration: 30.5s;
}
/* Karten KRI, Stroke & Maale */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:0.9; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:0.9; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:0.9; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn 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:15s;
-moz-animation-duration:15s;
animation-duration:15s;
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
animation-delay:0s;
}
@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
.fade-in2 {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn 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:5s;
-moz-animation-duration:5s;
animation-duration:5s;
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
animation-delay:0s;
}
@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
.fade-in3 {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn 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:15s;
-moz-animation-duration:15s;
animation-duration:15s;
-webkit-animation-delay:5s;
-moz-animation-delay:5s;
animation-delay:5s;
}
@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
.fade-in4 {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn 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:22s;
-moz-animation-duration:22s;
animation-duration:22s;
-webkit-animation-delay:10s;
-moz-animation-delay:10s;
animation-delay:10s;
}
@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
.fade-in5 {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn 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:40s;
-moz-animation-duration:40s;
animation-duration:40s;
-webkit-animation-delay:30s;
-moz-animation-delay:30s;
animation-delay:30s;
}
@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
/* Karten KRI, Stroke & Maale */
.container:hover .overlay {
height: 100%;
bottom: 0;
z-index: 95
}
.container2:hover .overlay2{
height: 100%;
bottom: 0;
z-index: 95
}
.container3:hover .overlay3 {
height: 100%;
bottom: 0;
z-index: 95
}
.container4:hover .overlay4 {
height: 100%;
bottom: 0;
z-index: 95
}
.row::after {
content:"";
clear: both;
}
.content {
text-align: center;
height: 100%;
z-index: 95;
}
/* Vor-Zurück Flächen */
.prevbox {
cursor: w-resize;
height: 100%;
width: 99.99%;
background-color: transparent;
position: relative;
z-index: 98;
float: left;
}
.nextbox {
cursor: e-resize;
height: 100%;
width: 99.99%;
background-color: transparent;
position: relative;
z-index: 98;
float: right;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation Bilder */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 0.5s;
animation-name: fade;
animation-duration: 0.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
/*ComplaintCardsStrictAction1*/
.section {
position: fixed;
}
/*Contact Tabelle & Chennai*/
table, th, td {
border: 10px solid rgba(0 0 0 1);
border-collapse: collapse;
font-family: "Courier New", Courier, monospace;
padding: 3px;
text-align: left;
}
.Balken {
background-color: black
}
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE and Edge */
.example {
-ms-overflow-style: none;
}
:hover + .tooltip {
display: block;
}
.BOM {
z-index: 95;
position: relative;
}
.MAALE {
z-index: 95;
position: relative;
}
.HAVEN {
z-index: 95;
position: relative;
}
.CHENNAI{
z-index: 95;
position: relative;
}
.KAUNAS {
z-index: 95;
position: relative;
}
.TEMPLE {
z-index: 95;
position: relative;
}
.STROKE {
z-index: 95;
position: relative;
}
.vertical-center {
margin: 0;
position: relative;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
.vertical {
margin: 0;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.headline {
text-align: center;
font-weight: 400;
}
.absatz {
text-align: center;
font-weight: 400;
}
.absatzL {
text-align: left;
font-weight: 400;
}
.ZeileInfo {
padding: 3% 0 0 0;
}
.ZeileText {
padding: 5% 0 0 0;
}
/* Bis 600px */
@media (max-width: 600px) {
h1 {
text-decoration: none;
color: black;
font-family: Helvetica;
font-size: 0.3em;
font-weight: lighter;
z-index: 94;
letter-spacing: 0.14em;
line-height: 120%;
}
h2 {
text-decoration: none;
color: black;
line-height: 140%;
font-family: Helvetica;
font-size: 0.25em;
font-weight: lighter;
z-index: 94;
text-align: center;
}
h2:hover {
background-color: rgba(0, 0, 0, 0);
color: gold;
}
h3 {
font-size: 0.4em;
font-weight: 100;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
color: rgba(0, 0, 0, 0.9);
line-height: 170%;
}
h4 {
font-size: 0.9em;
font-weight: lighter;
letter-spacing: 8px;
text-align: center;
padding: 8px 0 0 0;
font-family: "Courier New", Courier, monospace;
color: rgba(0, 0, 0, 0.7);
}
h5 {
font-size: 0.7em;
font-weight: lighter;
letter-spacing: 4px;
text-align: center;
padding: 4px 0 0 0;
font-family: "Courier New", Courier, monospace;
color: rgba(0, 0, 0, 0.5);
}
h6 {
font-size: 0.3em;
font-weight: 200;
letter-spacing: 3px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: rgba(0, 0, 0, 0.6);
}
h6:hover {
color: rgba(180, 180, 169, 0.6);
}
.mobile-br900 {
display: none;
}
.hide {
display: none;
}
.IndexPadding {
padding: 5% 0%
}
/* About */
.gal-col-3 {
width: 8.33%;
}
.gal-col-6 {
width: 83.33%;
}
.gal-col-0 {
width: 8.33%;
}
.gal-col-12 {
width: 83.33%;
}
.con-col-1 {
width: 8.33%;
}
.con-col-10 {
width: 83.33%;
}
.CV-col-1 {
width: 8.33%;
}
.CV-col-10 {
width: 83.33%;
}
/* BOM, MAALE, TEMPLE & KRI */
.EXH-col-3 {
width: 8.33%;
}
.EXH-col-6 {
width: 83.33%;
}
/* VPIndex */
.VP-col-1 {
width: 0%;
}
.VP-col-4 {
width: 100%;
padding:0% 16.66% 0% 16.66%;
}
/* KRI */
.KRI-col-1 {
width: 0%;
}
.KRI-col-2 {
width: 100%;
}
.KRI-Index {
padding: 0 38% 0 38%;
}
.KRIS-col-5 {
width: 48%;
}
.KRIS-col-2 {
width: 4%;
}
/* MKW, KRI2,3 */
.KRIS-col-1 {
width: 2%;
}
.KRIS-col-4 {
width: 32%;
}
/* KRI2 */
.RefugeeL {
width: 100%;
z-index: 148;
}
.RefugeeM {
width: 130%;
margin-left: -15%;
z-index: 150;
}
.RefugeeR {
width: 105%;
z-index: 148;
}
/* STROKE */
.Chandi-col-1 {
width: 2%;
}
.Chandi-col-2 {
width: 23.5%;
}
.ChandiTree {
margin: 0% -25% 0% -25%;
height: 100%;
}
/* STRICT 1 */
.CHE-col-3 {
width: 0%;
}
.CHE-col-6 {
width: 100%;
}
/* STRICT 2 */
.KAU-col-3 {
width: 0%;
}
.KAU-col-6 {
width: 100%;
}
/* STROKE, KRI2,3 & STRICT 2 */
.KAUDOPPEL-col-2 {
width: 0%
}
.KAUDOPPEL-col-5 {
width: 100%
}
/* Ma'ale Sicherheitsstrasse
.overlayImg {
position: fixed;
display: none;
top: 30%;
left: 12%;
right: 0;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width: 76%;
}
*/
.overlayImg {
position: fixed;
display: none;
top: 30%;
left: 8.33%;
right: 0;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width: 83.33%;
}
/* Kaunas Maske */
.overlayKAU1 {
position: fixed;
display: none;
top: 8%;
right: 1.5%;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 66.66%;
}
.overlayKAU2 {
position: fixed;
display: none;
top: -14%;
left: 0%;
right: 0;
bottom: 0;
opacity: 0.6;
z-index: 2;
cursor: pointer;
width: 100%;
}
.overlayKAU3a {
position: fixed;
display: none;
top: 0.1%;
left: 4.5%;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width:91%;
}
.overlayKAU3b {
position: fixed;
display: none;
top: 50.3%;
right: 5%;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width:91%;
}
.overlayKAU4 {
position: fixed;
display: none;
top: 0%;
left: 16.66%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 66.66%;
}
.PolaKAU {
padding: 0 16.66% 0 16.66%;
}
.ChandiText {
left: 8.33%;
width: 83.33%;
position: fixed;
}
.overlayIll {
position: fixed;
display: none;
top: 0%;
left: 8.33%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 83.33%;
background-color: rgba(255,255,255,0.8);
}
.PolaCHE_H {
padding: 0 8.33% 0 8.33%;
}
.PolaCHE_Q {
padding: 0 8.33% 0 8.33%;
}
#textImg{
position: absolute;
width: 88%;
color: white;
}
.overlayCHE_H {
position: fixed;
display: none;
top: 0%;
left: 8.33%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width:83.33%;
}
.overlayCHE_Q {
position: fixed;
display: none;
top: 0%;
left: 8.33%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width:83.33%;
}
.CHE_Lock {
position: fixed;
top:-10px;
left: 0;
height: 15%;
background-color: white;
}
/* Lebenslauf Jahreszahl Extrazeile */
.JahrLeer {
color: white;
}
/* Overlay Vertical Perspective */
.containerVer {
position: relative;
width: 100%;
}
.imageVer {
display: block;
width: 100%;
height: auto;
}
.overlayVer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 1s ease;
background-color: rgba(255,255,255, 0.8);
}
.containerVer:hover .overlayVer {
opacity: 1;
}
.textVer {
color: white;
position: absolute;
top: 50%;
left: 50%; width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.OverlayHide {
display:none;
}
.OverlayHideMo {
display: block;
}
.hero-image2 {
background-image: url("Bu/China-10--002.jpg");
background-color: #cccccc;
height: 100%;
max-width: 100%;
left: 8.33%;
right: 8.33%;
top:-40px;
margin: -0px 0 90px 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
padding: 0 0 30px 0;
z-index: 95;
opacity: 45%;
}
/* Mall Overlay */
.Mall {
padding:0 8.33% 0% 16.66%;
}
.overlayKRI1 {
position: fixed;
display: none;
top: 31%;
left: 4%;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 33%;
}
#SafeHavenInfoTextTop {
position: absolute;
top: 25%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#SafeHavenInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#KRISafeHavenKRI {
position: absolute;
top: 40%;
right: 8.33%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#KRISafeHavenInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#KRI-SafeHavenInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#KRIInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#textInfo {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
width: 66.66%;
}
/* Maps Kurdistan */
.Turkey {
left: 33.33%;
top:-10%;
position: absolute;
}
.Iran {
right: 0%;
top:20%;
position: absolute;
}
.Iraq {
left: 55%;
top:95%;
position: absolute;
}
.Syria {
left: 0%;
top:40%;
position: absolute;
}
.KRI {
right: 30%;
top:23%;
height: 100%;
position: absolute;
}
.IS {
left: 21%;
top: 32%;
height: 100%;
position: absolute;
}
.Dispute {
left: 24%;
top:32%;
position: absolute;
}
}
/* 601px - 991px */
@media (min-width: 601px) {
h1 {
text-decoration: none;
color: black;
font-family: Helvetica;
font-size: 0.9em;
font-weight: lighter;
z-index: 94;
letter-spacing: 0.14em;
line-height: 1.3em;
}
h2 {text-decoration: none;
color: black;
line-height: 140%;
font-family: Helvetica;
font-size: 0.85em;
font-weight: lighter;
z-index: 94;
text-align: center;
}
h2:hover {
background-color: rgba(0, 0, 0, 0);
color: gold;
}
h3 {
font-size: 0.7em;
font-weight: 100;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
line-height: 170%;
color: rgba(0, 0, 0, 0.9);
}
h4 {
font-size: 0.9em;
font-weight: lighter;
letter-spacing: 8px;
text-align: center;
padding: 8px 0 0 0;
font-family: "Courier New", Courier, monospace;
color: rgba(0, 0, 0, 0.7);
}
h5 {
font-size: 0.7em;
font-weight: lighter;
letter-spacing: 4px;
text-align: center;
padding: 4px 0 0 0;
font-family: "Courier New", Courier, monospace;
color: rgba(0, 0, 0, 0.5);
}
h6 {
font-size: 0.6em;
font-weight: 200;
letter-spacing: 3px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: rgba(0, 0, 0, 0.8);
}
h6:hover {
color: rgba(180, 180, 169, 0.6);
}
.mobile-br {
display: none;
}
.IndexPadding {
padding: 5% 0%;
}
/*About*/
.gal-col-3 {
width: 16.66%;
}
.gal-col-6 {
width: 66.66%;
}
.gal-col-0 {
width: 16.66%;
}
.gal-col-12 {
width: 66.66%;
}
.con-col-1 {
width: 16.66%
}
.con-col-10 {
width: 66.66%;
}
.CV-col-1 {
width: 16.66%;
}
.CV-col-10 {
width: 66.66%;
}
/* BOM, MAALE, TEMPLE & KRI */
.EXH-col-3 {
width: 16.66%;
}
.EXH-col-6 {
width: 66.66%;
}
/* VPIndex */
.VP-col-1 {
width: 9.0909%;
}
.VP-col-4 {
width: 36.36363636%;
}
/* KRI */
.KRI-col-1 {
width: 0%;
}
.KRI-col-2 {
width: 100%;
}
.KRI-Index {
padding: 0 42% 0 42%;
}
.KRIS-col-5 {
width: 48%;
}
.KRIS-col-2 {
width: 4%;
}
/* MKW, KRI2,3 */
.KRIS-col-1 {
width: 3%;
}
.KRIS-col-4 {
width: 31.333333333333333333333334%;
}
/* KRI2 */
.RefugeeL {
width: 130%;
margin-left: -30%;
z-index: 148;
}
.RefugeeM {
width: 150%;
margin-left: -25%;
z-index: 150;
}
.RefugeeR {
width: 130%;
margin-right: -30%;
z-index: 148;
}
/* STRICT 1 */
.CHE-col-3 {
width: 8.33%;
}
.CHE-col-6 {
width: 83.33%;
}
/* STRICT 2 */
.KAU-col-3 {
width: 8.33%;
}
.KAU-col-6 {
width: 83.33%;
}
/* STROKE, KRI2,3 & STRICT 2 */
.KAUDOPPEL-col-2 {
width: 0%
}
.KAUDOPPEL-col-5 {
width: 100%
}
/* STROKE */
.Chandi-col-1 {
width: 2%;
}
.Chandi-col-2 {
width: 23.5%;
}
.ChandiTree {
margin: 0% -16.66% 0% -16.66%;
height: 100%;
}
/* Ma'ale Sicherheitsstrasse
.overlayImg {
position: fixed;
display: none;
top: 32%;
left: 20%;
right: 0;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width: 60%;
}
*/
.overlayImg {
position: fixed;
display: none;
top: 32%;
left: 16.66%;
right: 0;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width: 66.66%;
}
#textImg{
position: absolute;
width: 88%;
color: white;
}
/* Kaunas Maske */
.overlayKAU1 {
position: fixed;
display: none;
top: 8%;
right: 6%;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width:55%;
}
.overlayKAU2 {
position: fixed;
display: none;
top: -10%;
left: 10%;
right: 0;
bottom: 0;
opacity: 0.6;
z-index: 2;
cursor: pointer;
width:80%;
}
.overlayKAU3a {
position: fixed;
display: none;
top: 0%;
left: 11%;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width:77%;
}
.overlayKAU3b {
position: fixed;
display: none;
top: 50%;
left: 11%;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width:77%;
}
.overlayKAU4 {
position: fixed;
display: none;
top: 0%;
left: 22.5%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width:55%;
}
.overlayCHE_H {
position: fixed;
display: none;
top: 0%;
left: 22.25%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 55.5%;
}
.overlayCHE_Q {
position: fixed;
display: none;
top: 0%;
left: 22.25%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 55.5%;
}
.CHE_Lock {
position: fixed;
top:-10px;
left: 0;
height: 10%;
background-color: white;
}
.PolaKAU {
padding: 0 16.66% 0 16.66%;
}
.ChandiText {
left: 16.66%;
width: 66.66%;
position: fixed;
}
.overlayIll {
position: fixed;
display: none;
top: 0%;
left: 16.66%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 66.66%;
background-color: rgba(255,255,255,0.8);
}
.PolaCHE_H {
padding: 0 16.66% 0 16.66%;
}
.PolaCHE_Q {
padding: 0 16.66% 0 16.66%;
}
/* Overlay Projektinfo */
#textInfo{
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
width: 50%;
}
/* Overlay Vertical Perspective */
.containerVer {
position: relative;
width: 100%;
}
.imageVer {
display: block;
width: 100%;
height: auto;
}
.overlayVer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: rgba(255,255,255, 0.8);
}
.containerVer:hover .overlayVer {
opacity: 1;
}
.textVer {
color: white;
position: absolute;
top: 50%;
left: 50%; width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.OverlayHide {
display: none;
}
.OverlayHideMo {
display: block;
}
.hero-image2 {
background-image: url("Bu/China-10--002.jpg");
background-color: #cccccc;
height: 100%;
max-width: 100%;
left: 8.33%;
right: 8.33%;
top:-40px;
margin: -0px 0 90px 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
padding: 0 0 30px 0;
z-index: 95;
opacity: 45%;
}
/* Mall Overlay */
.Mall {
padding:0% 8.33% 0% 16.66%;
}
.overlayKRI1 {
position: fixed;
display: none;
top: 30%;
left: 12%;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width:28%;
}
/* Lebenslauf Jahreszahl Extrazeile*/
.JahrLeer {
color: white;
display: none;
}
#SafeHavenInfoTextTop {
position: absolute;
top: 50%;
left: 25%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#SafeHavenInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#KRISafeHavenInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#KRI-SafeHavenInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#KRIInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
/* Maps Kurdistan */
.Turkey {
left: 33.33%;
top:-10%;
position: absolute;
}
.Iran {
right: 0%;
top:20%;
position: absolute;
}
.Iraq {
left: 55%;
top:95%;
position: absolute;
}
.Syria {
left: 0%;
top:40%;
position: absolute;
}
.KRI {
right: 32%;
top:23%;
position: absolute;
}
.IS {
left: 22%;
top:32%;
position: absolute;
}
.Dispute {
left: 30%;
top:33%;
position: absolute;
}
}
/* Quer 992px - 1999px */
@media (min-width: 992px) and (orientation: landscape) {
h1 {
text-decoration: none;
color: black;
font-family: Helvetica;
font-size: 0.9em;
font-weight: lighter;
z-index: 94;
letter-spacing: 0.14em;
line-height: 1.3em;
}
h2 {text-decoration: none;
color: black;
line-height: 140%;
font-family: Helvetica;
font-size: 0.85em;
font-weight: lighter;
z-index: 94;
text-align: center;
}
h2:hover {
background-color: rgba(0, 0, 0, 0);
color: gold;
}
h3 {
font-size: 0.7em;
font-weight: 100;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
line-height: 170%;
color: rgba(0, 0, 0, 0.9);
}
h4 {
font-size: 0.8em;
font-weight: lighter;
letter-spacing: 8px;
text-align: center;
padding: 8px 0 0 0;
font-family: "Courier New", Courier, monospace;
color: rgba(0, 0, 0, 0.7);
}
h5 {
font-size: 0.6em;
font-weight: lighter;
letter-spacing: 4px;
text-align: center;
padding: 4px 0 0 0;
font-family: "Courier New", Courier, monospace;
color: rgba(0, 0, 0, 0.5);
}
h6 {
font-size: 0.6em;
font-weight: 200;
letter-spacing: 3px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: rgba(0, 0, 0, 0.8);
}
h6:hover {
color: rgba(180, 180, 169, 0.6);
}
.mobile-br {
display: none;
}
.hide {
display: none;
}
.IndexPadding {
padding: 2.2% 0%;
}
/*About*/
.gal-col-0 {
width: 25%;
}
.gal-col-12 {
width: 50%;
}
.gal-col-3{
width: 33.33%;
}
.gal-col-6{
width: 33.33%;
}
.con-col-1 {
width: 25%;
}
.con-col-10 {
width: 50%;
}
.CV-col-1 {
width: 25%;
}
.CV-col-10 {
width: 50%;
}
/* BOM, MAALE, TEMPLE & KRI */
.EXH-col-3 {
width: 33.33%;
}
.EXH-col-6 {
width: 33.33%;
}
/* BOM, MKW, KRI, STROKE */
.Portrait {
padding: 0 10% 0 10%;
}
/* VP & STRICT */
.VP-col-1 {
width: 16.666%;
}
.VP-col-4 {
width: 25%;
}
/* KRI */
.KRI-col-1 {
width: 10%;
}
.KRI-col-2 {
width: 20%;
}
.KRI-Index {
padding: 0 15% 0 15%;
}
.KRIS-col-5 {
width: 48%;
}
.KRIS-col-2 {
width: 4%;
}
/* MKW, KRI2,3 */
.KRIS-col-1 {
width: 3%;
}
.KRIS-col-4 {
width: 31.333333333333333333334%;
}
/* KRI2 */
.RefugeeL {
width: 180%;
margin-left: -80%;
}
.RefugeeM {
width: 200%;
margin-left: -50%;
}
.RefugeeR {
width: 180%;
margin-right: -80%
}
/* STRICT 1 */
.CHE-col-3 {
width: 16.66%;
}
.CHE-col-6 {
width: 66.66%;
}
/* STRICT 2 */
.KAU-col-3 {
width: 33.33%;
}
.KAU-col-6 {
width: 33.33%;
}
/* STROKE, KRI2,3 & STRICT 2 */
.KAUDOPPEL-Margin {
margin-left: -50%;
margin-right: -50%;
}
.KAUDOPPEL-col-2 {
width: 0%
}
.KAUDOPPEL-col-5 {
width: 50%;
}
.KAUDOPPELTEXT-col-2 {
width: 12%;
}
.KAUDOPPELTEXT-col-5 {
width: 44%;
}
/* STROKE */
.Chandi-col-1 {
width: 2%;
}
.Chandi-col-2 {
width: 23.5%;
}
.ChandiTree {
margin: 0% -80% 0% -80%;
height: 100%;
}
/* CoP */
.Condition-col-1{
width: 16.6%;
}
.RathausVier-col-3{
width: 24.5%;
}
.Rathaus5-col-2{
width: 20%;
}
.NegHoch {width: auto;
}
.NegQuer {
margin-left: -10%;
margin-right: -10%;
}
.DiaMFHoch {width: auto;
}
.Back{
width: 100%;
}
.Boden{
padding: 0 16.33% 0 16.33%
}
.PortraitFilm{
padding: 0 5% 0 5%;
}
.Ruhrpark-col-1{
width: 1%;
}
.Ruhrpark-col-2{
width: 23.5%;
}
.Fassade-col-1 {
width: 8.29%;
}
.Fassade-col-2 {
width: 15%;
}
.Doppelhaus-col-1{
width: 6%
}
.Doppelhaus-col-2{
width:20.5%
}
.Space-col-1 {
width: 2%;
}
/* Ma'ale Sicherheitsstrasse
.overlayImg {
position: fixed;
display: none;
top: 29%;
left: 36.33%;
right: 0;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width: 28%;
}
*/
.overlayImg {
position: fixed;
display: none;
top: 29%;
left: 33.33%;
right: 0;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width: 33.33%;
}
#textImg{
position: absolute;
width: 64%;
color: white;
}
.WestbankAnimation {
padding: 20% 20% 20% 20%;
}
/* Kaunas Maske */
.overlayKAU1 {
position: fixed;
display: none;
top: 5%;
left:50%;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 25%;
}
.overlayKAU2 {
position: fixed;
display: none;
top: -12%;
left: 33.5%;
right: 0;
bottom: 0;
opacity: 0.6;
z-index: 2;
cursor: pointer;
width: 33%;
}
.overlayKAU3a {
position: fixed;
display: none;
top: 0.4%;
left: 18.5%;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width:30%;
}
.overlayKAU3b {
position: fixed;
display: none;
top: 0.2%;
left: 51.5%;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width:30%;
}
.overlayKAU4 {
position: fixed;
display: none;
top: 0%;
left: 39%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 22.3%;
}
.PolaKAU {
padding:0 16.66% 0 16.66%;
}
.overlayCHE_H {
position: fixed;
display: none;
top: 0%;
left: 36.75%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 26.5%;
}
.overlayCHE_Q {
position: fixed;
display: none;
top: 0%;
left: 33.25%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 33.5%;
}
.PolaCHE_H {
padding:0 30% 0 30%;
}
.PolaCHE_Q {
padding:0 25% 0 25%;
}
/*Lock&Seal Hintergrund Weiss*/
.CHE_Lock {
position: fixed;
top:-10px;
left: 0;
height: 15%;
background-color: white;
}
/* Overlay Projektinfo */
#textInfo{
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
width: 50%;
}
/*Chandi Maske*/
.ChandiText {
left: 33.33%;
width: 33.33%;
position: fixed;
}
.overlayIll {
position: fixed;
display: none;
top: 0%;
left: 25%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 50%;
background-color: rgba(255,255,255,0.8);
}
/* Overlay Vertical */
.overlayBoM {
position: fixed;
display: none;
top: 0%;
left: 3%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 50%;
background-color: rgba(255, 255, 255, 0.6);
}
.overlayMaa {
position: fixed;
display: none;
top: 0%;
left: 50;
right: 3%;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 50%;
background-color: rgba(255, 255, 255, 0.6);
}
/* Overlay Vertical Perspective */
.containerVer {
position: relative;
width: 100%;
}
.imageVer {
display: block;
width: 100%;
height: auto;
}
.overlayVer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(255,255,255, 0.8);
}
.containerVer:hover .overlayVer {
opacity: 1;
}
.textVer {
color: white;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.OverlayHide {
display:block;
}
.OverlayHideMo {
display:none;
}
/* Lebenslauf Jahreszahl Extrazeile*/
.JahrLeer {
color: white;
display: none;
}
.hero-image2 {
background-image: url("Bu/China-10--002.jpg");
background-color: #cccccc;
height: 100%;
max-width: 100%;
left: 8.33%;
right: 8.33%;
top:-40px;
margin: -0px 0 90px 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
padding: 0 0 30px 0;
z-index: 95;
opacity: 45%;
}
/* Mall Overlay */
.Mall {
padding:0 0% 0% 0%;
}
.overlayKRI1 {
position: fixed;
display: none;
top: 27%;
left:21.5%;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 40%;
padding: 0 20% 0 0;
}
#SafeHavenInfoTextTop {
position: absolute;
top: 50%;
left: 16.66%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#SafeHavenInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#KRISafeHavenInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#KRI-SafeHavenInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#KRIInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
/* Maps Kurdistan */
.Turkey {
left: 33.33%;
top:-10%;
position: absolute;
}
.Iran {
right: 0%;
top:15%;
position: absolute;
}
.Iraq {
left: 55%;
top:95%;
position: absolute;
}
.Syria {
left: 0%;
top:40%;
position: absolute;
}
.KRI {
right: 30.5%;
top:21%;
position: absolute;
}
.IS {
left: 20%;
top:29%;
position: absolute;
}
.Dispute {
left: 24%;
top: 30%;
position: absolute;
}
}
/* Hoch 992px - 1999px */
@media (min-width: 992px) and (orientation: portrait) {
h1 {
text-decoration: none;
color: black;
font-family: Helvetica;
font-size: 0.9em;
font-weight: lighter;
z-index: 94;
letter-spacing: 0.14em;
line-height: 150%;
}
h2 {text-decoration: none;
color: black;
line-height: 140%;
font-family: Helvetica;
font-size: 0.85em;
font-weight: lighter;
z-index: 94;
text-align: center;
}
h2:hover {
background-color: rgba(0, 0, 0, 0);
color: gold;
}
h3 {
font-size: 0.8em;
font-weight: 100;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
line-height: 170%;
color: rgba(0, 0, 0, 0.9);
}
h4 {
font-size: 0.8em;
font-weight: lighter;
letter-spacing: 8px;
text-align: center;
padding: 8px 0 0 0;
font-family: "Courier New", Courier, monospace;
color: rgba(0, 0, 0, 0.7);
}
h5 {
font-size: 0.6em;
font-weight: lighter;
letter-spacing: 4px;
text-align: center;
padding: 4px 0 0 0;
font-family: "Courier New", Courier, monospace;
color: rgba(0, 0, 0, 0.5);
}
h6 {
font-size: 0.6em;
font-weight: 200;
letter-spacing: 3px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: rgba(0, 0, 0, 0.8);
}
h6:hover {
color: rgba(180, 180, 169, 0.6);
}
.mobile-br {
display: none;
}
.hide {
display: none
}
.IndexPadding {
padding: 4% 0%
}
/*About*/
.gal-col-0 {
width: 16.66%;
}
.gal-col-12 {
width: 66.66%;
}
.gal-col-3 {
width: 16.66%;
}
.gal-col-6 {
width: 66.66%;
}
.con-col-1 {
width: 16.66%;
}
.con-col-10 {
width: 66.66%;
}
.CV-col-1 {
width: 16.66%;
}
.CV-col-10 {
width: 66.66%;
}
/* BOM, MAALE, TEMPLE & KRI */
.EXH-col-3 {
width: 16.66%;
}
.EXH-col-6 {
width: 66.66%;
}
/* BOM, MKW, KRI, STROKE */
.Portrait {
padding: 0 0% 0 0%;
}
/* VPIndex */
.VP-col-1 {
width: 9.0909%;
}
.VP-col-4 {
width: 36.36363636%;
}
/* KRI */
.KRI-col-1 {
width: 10%;
}
.KRI-col-2 {
width: 20%;
}
.KRI-Index {
padding: 0 15% 0 15%
}
.KRIS-col-5 {
width: 48%;
}
.KRIS-col-2 {
width: 4%;
}
/* MKW, KRI2,3 */
.KRIS-col-1 {
width: 3%;
}
.KRIS-col-4 {
width: 31.333333333333333333334%;
}
/* KRI2 */
.RefugeeL {
width: 180%;
margin-left: -80%;
}
.RefugeeM {
width: 200%;
margin-left: -50%;
}
.RefugeeR {
width: 180%;
margin-right: -80%;
}
/* STRICT 1 */
.CHE-col-3 {
width: 16.66%;
}
.CHE-col-6 {
width: 66.66%;
}
/* STRICT 2 */
.KAU-col-3 {
width: 16.66%;
}
.KAU-col-6 {
width: 66.66%;
}
/* STROKE, KRI2,3 & STRICT 2 */
.KAUDOPPEL-col-2 {
width: 0%;
}
.KAUDOPPEL-col-5 {
width: 50%;
}
.KAUDOPPELTEXT-col-2 {
width: 12%;
}
.KAUDOPPELTEXT-col-5 {
width: 44%;
}
/* STROKE */
.Chandi-col-1 {
width: 2%;
}
.Chandi-col-2 {
width: 23.5%;
}
.ChandiTree {
margin: 0% -16.66% 0% -16.66%;
height: 100%;
}
/* Ma'ale Sicherheitsstrasse
.overlayImg {
position: fixed;
display: none;
top: 29%;
left: 19.3%;
right: 0;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width: 61.33%;
}
*/
.overlayImg {
position: fixed;
display: none;
top: 29%;
left: 16.66%;
right: 0;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width: 66.66%;
}
#textImg{
position: absolute;
width: 64%;
color: white;
}
/* Kaunas Maske */
.overlayKAU1 {
position: fixed;
display: none;
top: 7%;
left:52%;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 44%;
}
.overlayKAU2 {
position: fixed;
display: none;
top: -10%;
left: 18%;
right: 0;
bottom: 0;
opacity: 0.6;
z-index: 2;
cursor: pointer;
width: 64%;
}
.overlayKAU3a {
position: fixed;
display: none;
top: -0.1%;
left: 18%;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width:30.5%;
}
.overlayKAU3b {
position: fixed;
display: none;
top: 0.1%;
left: 51.4%;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width:30.5%;
}
.overlayKAU4 {
position: fixed;
display: none;
top: 0%;
left: 28%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 44%;
}
.PolaKAU {
padding:0 16.66% 0 16.66%;
}
.overlayCHE_H {
position: fixed;
display: none;
top: 0%;
left: 27.5%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 45%;
}
.overlayCHE_Q {
position: fixed;
display: none;
top: 0%;
left: 27.5%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 45%;
}
.PolaCHE_H {
padding:0 16.66% 0 16.66%;
}
.PolaCHE_Q {
padding:0 16.66% 0 16.66%;
}
/*Lock&Seal Hintergrund Weiss*/
.CHE_Lock {
position: fixed;
top:-10px;
left: 0;
height: 15%;
background-color: white;
}
/* Overlay Projektinfo */
#textInfo {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
width: 50%;
}
/*Chandi Maske*/
.ChandiText {
left: 16.66%;
width: 50%;
position: fixed;
}
.overlayIll {
position: fixed;
display: none;
top: 0%;
left: 0%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 100%;
background-color: rgba(255,255,255,0.8);
}
/* Overlay Vertical */
.overlayBoM {
position: fixed;
display: none;
top: 0%;
left: 3%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 50%;
background-color: rgba(255, 255, 255, 0.6);
}
.overlayMaa {
position: fixed;
display: none;
top: 0%;
left: 50;
right: 3%;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 50%;
background-color: rgba(255, 255, 255, 0.6);
}
/* Overlay Vertical Perspective */
.containerVer {
position: relative;
width: 100%;
}
.imageVer {
display: block;
width: 100%;
height: auto;
}
.overlayVer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(255,255,255, 0.8);
}
.containerVer:hover .overlayVer {
opacity: 1;
}
.textVer {
color: white;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.OverlayHide {
display:none;
}
.OverlayHideMo {
display:block;
}
/* Lebenslauf Jahreszahl Extrazeile*/
.JahrLeer {
color: white;
display: none;
}
.hero-image2 {
background-image: url("Bu/China-10--002.jpg");
background-color: #cccccc;
height: 100%;
max-width: 100%;
left: 8.33%;
right: 8.33%;
top:-40px;
margin: -0px 0 90px 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
padding: 0 0 30px 0;
z-index: 95;
opacity: 45%;
}
/* Mall Overlay */
.Mall {
padding:0 8.33% 0% 16.66%;
}
.overlayKRI1 {
position: fixed;
display: none;
top: 27%;
left:10.33%;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 50%;
padding: 0 20% 0 0;
}
#SafeHavenInfoTextTop {
position: absolute;
top: 50%;
left: 16.66%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#SafeHavenInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#KRISafeHavenInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#KRI-SafeHavenInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#KRIInfoText {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
/* Maps Kurdistan */
.Turkey {
left: 33.33%;
top:-10%;
position: absolute;
}
.Iran {
right: 0%;
top:15%;
position: absolute;
}
.Iraq {
left: 55%;
top:95%;
position: absolute;
}
.Syria {
left: 0%;
top:40%;
position: absolute;
}
.KRI {
right: 33%;
top:24%;
position: absolute;
}
.IS {
left: 22%;
top:34%;
position: absolute;
}
.Dispute {
left: 33%;
top:35%;
position: absolute;
}
}
/* Über 2000px */
@media (min-width: 2000px) {
h1 {
font-size: 1.1em;
font-weight: 200;
letter-spacing: 3px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: rgba(0, 0, 0, 0.9);
}
h2 {
font-size: 1.1em;
font-weight: 200;
letter-spacing: 3px;
text-align: center;
padding: 0 0 5% 0;
font-family: Arial, Helvetica, sans-serif;
color: rgba(0, 0, 0, 0.9);
}
h2:hover {
background-color: rgba(0, 0, 0, 0);
color: gold;
}
h3 {
font-size: 1.1em;
font-weight: 100;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
line-height: 170%;
color: rgba(0, 0, 0, 0.9);
}
h4 {
font-size: 1.4em;
font-weight: lighter;
letter-spacing: 8px;
text-align: center;
padding: 8px 0 0 0;
font-family: "Courier New", Courier, monospace;
color: rgba(0, 0, 0, 0.7);
}
h5 {
font-size: 1.2em;
font-weight: lighter;
letter-spacing: 4px;
text-align: center;
padding: 4px 0 0 0;
font-family: "Courier New", Courier, monospace;
color: rgba(0, 0, 0, 0.5);
}
h6 {
font-size: 1.1em;
font-weight: 200;
letter-spacing: 3px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: rgba(0, 0, 0, 0.8);
}
h6:hover {
color: rgba(180, 180, 169, 0.6);
}
.mobile-br {
display: none;
}
.hide {
display: none;
}
.IndexPadding {
padding: 3% 0%;
}
/*About*/
.gal-col-0 {
width: 25%;
}
.gal-col-12 {
width: 50%;
}
.gal-col-3{
width: 33.33%;
}
.gal-col-6{
width: 33.33%;
}
.con-col-1 {
width: 25%;
}
.con-col-10 {
width: 50%;
}
.CV-col-1 {
width: 25%;
}
.CV-col-10 {
width: 50%;
}
/* BOM, MAALE, TEMPLE & KRI */
.EXH-col-3 {
width: 33.33%;
}
.EXH-col-6 {
width: 33.33%;
}
/* BOM, MKW, KRI, STROKE */
.Portrait {
padding: 0 10% 0 10%;
}
/* VPIndex */
.VP-col-1 {
width: 9.0909%;
}
.VP-col-4 {
width: 36.36363636%;
}
/* KRI */
.KRI-col-1 {
width: 10%;
}
.KRI-col-2 {
width: 20%;
}
.KRI-Index {
padding: 0 15% 0 15%;
}
.KRIS-col-5 {
width: 48%;
}
.KRIS-col-2 {
width: 4%;
}
/* MKW, KRI2,3 */
.KRIS-col-1 {
width: 2%;
}
.KRIS-col-4 {
width: 31.33%;
}
/* KRI2 */
.RefugeeL {
width: 180%;
margin-left: -80%;
}
.RefugeeM {
width: 200%;
margin-left: -50%;
}
.RefugeeR {
width: 180%;
margin-right: -80%;
}
/* STRICT 1 */
.CHE-col-3 {
width: 16.66%;
}
.CHE-col-6 {
width: 66.66%;
}
/* STRICT 2 */
.KAU-col-3 {
width: 16.66%;
}
.KAU-col-6 {
width: 66.66%;
}
/* STROKE, KRI2,3 & STRICT 2 */
.KAUDOPPEL-col-2 {
width: 0%;
}
.KAUDOPPEL-col-5 {
width: 50%;
}
.KAUDOPPELTEXT-col-2 {
width: 12%;
}
.KAUDOPPELTEXT-col-5 {
width: 44%;
}
/* STROKE */
.Chandi-col-1 {
width: 2%;
}
.Chandi-col-2 {
width: 23.5%;
}
/* Ma'ale Sicherheitsstrasse
.overlayImg {
position: fixed;
display: none;
top: 29%;
left: 36.33%;
right: 0;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width: 28%;
}
*/
.overlayImg {
position: fixed;
display: none;
top: 29%;
left: 33.33%;
right: 0;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width: 33.33%;
}
#textImg{
position: absolute;
width: 64%;
color: white;
}
/* Kaunas Maske */
.overlayKAU1 {
position: fixed;
display: none;
top: 5%;
left:50%;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 50%;
}
.overlayKAU2 {
position: fixed;
display: none;
top: -10%;
left: 18%;
right: 0;
bottom: 0;
opacity: 0.6;
z-index: 2;
cursor: pointer;
width: 64%;
}
.overlayKAU3a {
position: fixed;
display: none;
top: -0.1%;
left: 18%;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width:30.5%;
}
.overlayKAU3b {
position: fixed;
display: none;
top: 0.1%;
left: 51.4%;
bottom: 0;
opacity: 0.9;
z-index: 2;
cursor: pointer;
width:30.5%;
}
.overlayKAU4 {
position: fixed;
display: none;
top: 0%;
left: 25%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 50%;
}
.PolaKAU {
padding:0 16.66% 0 16.66%;
}
.overlayCHE_H {
position: fixed;
display: none;
top: 0%;
left: 27.5%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 45%;
}
.overlayCHE_Q {
position: fixed;
display: none;
top: 0%;
left: 27.5%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 45%;
}
.PolaCHE_H {
padding:0 16.66% 0 16.66%;
}
.PolaCHE_Q {
padding:0 16.66% 0 16.66%;
}
/*Lock&Seal Hintergrund Weiss*/
.CHE_Lock {
position: fixed;
top:-10px;
left: 0;
height: 15%;
background-color: white;
}
/* Overlay Projektinfo */
#textInfo{
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
width: 50%;
}
/*Chandi Maske*/
.ChandiText {
left: 25%;
width: 50%;
position: fixed;
}
.overlayIll {
position: fixed;
display: none;
top: 0%;
left: 25%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 50%;
background-color: rgba(255,255,255,0.8);
}
/* Overlay Vertical */
.overlayBoM {
position: fixed;
display: none;
top: 0%;
left: 3%;
right: 0;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 50%;
background-color: rgba(255, 255, 255, 0.6);
}
.overlayMaa {
position: fixed;
display: none;
top: 0%;
left: 50;
right: 3%;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 50%;
background-color: rgba(255, 255, 255, 0.6);
}
/* Overlay Vertical Perspective */
.containerVer {
position: relative;
width: 100%;
}
.imageVer {
display: block;
width: 100%;
height: auto;
}
.overlayVer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(255,255,255, 0.8);
}
.containerVer:hover .overlayVer {
opacity: 1;
}
.textVer {
color: white;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.OverlayHide {
display:block;
}
.OverlayHideMo {
display:none;
}
/* Lebenslauf Jahreszahl Extrazeile*/
.JahrLeer {
color: white;
display: none;
}
.hero-image2 {
background-image: url("Bu/China-10--002.jpg");
background-color: #cccccc;
height: 100%;
max-width: 100%;
left: 8.33%;
right: 8.33%;
top:-40px;
margin: -0px 0 90px 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
padding: 0 0 30px 0;
z-index: 95;
opacity: 45%;
}
/* Mall Overlay */
.Mall {
padding:0% 0% 0% 0%;
}
.overlayKRI1 {
position: fixed;
display: none;
top: 5%;
left:50%;
bottom: 0;
opacity: 1;
z-index: 2;
cursor: pointer;
width: 20%;
}
/* Maps Kurdistan */
.Turkey {
left: 33.33%;
top:-10%;
position: absolute;
}
.Iran {
right: 0%;
top:15%;
position: absolute;
}
.Iraq {
left: 55%;
top:95%;
position: absolute;
}
.Syria {
left: 0%;
top:40%;
position: absolute;
}
.KRI {
right: 30%;
top:21%;
position: absolute;
}
.IS {
left: 20%;
top:33%;
position: absolute;
}
.Dispute {
left: 27%;
top:32%;
position: absolute;
}
}
/* Chennai Lock And Seal Hoehenanpassung Hochformat */
@media (max-height: 800px) {
.Tabelle {
height: 450px;
}
.Westbank {
padding: 0 10% 0 10%;
}
}
@media (min-height: 801px) {
.Tabelle {
height: 600px;
}
.Westbank {
padding: 0 25% 0 25%;
}
}
@media (min-height: 1000px) {
.Tabelle {
height: 800px;
}
.Westbank {
padding: 0 25% 0 25%;
}
}
@media (min-height: 1200px) {
.Tabelle {
height: 1000px;
}
.Westbank {
padding: 0 25% 0 25%;
}
}
@media (orientation:landscape) {
.BoxPadding {
padding: 0% 0% 0% 0%;
}
.Top {padding: 15% 0% 0% 0%}
}
@media (orientation:portrait) {
.BoxPadding {
padding:0% 0% 0% 0%;
}
.Top {padding: 65% 0% 0% 0%}
}