@CHARSET "ISO-8859-1";

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}

body{
	font-family: 'Jungka', Helvetica, Arial;
  color: black;
	width: 100%;
	background: white;
	font-size: 2vh;
  hyphens: auto;
  cursor: url('1.png') 16 16, auto;   
}

/*TYPOGRAPHY*/

@font-face {
    font-family: 'Jungka';
    src: 
      url('type/Jungka-Regular.woff2') format('woff2'),
      url('type/Jungka-Regular.woff') format('woff'),
      url('type/Jungka-Regular.eot') format('embedded-opentype');
}

a{
	text-decoration: underline;
  color: black;
  cursor: url('1.png') 16 16, pointer;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    margin:0;
    padding:0;
}
q:before,q:after {
    content:'';
}

h1 {
	font-size: 1.75em;
}

h2 {
  font-size: 4.25em;
}


/*STARTPAGE DIASHOW*/

.title {
  height: 100vh;
  width: 100vh;
  cursor: url('down.png') 28 16, s-resize;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;  
  text-align: center;
  position: absolute;
  z-index: 100;
  display: flex;
}

.title_txt {
  margin: auto;
  text-align: center; 
}

.circle0 {
	height: 100vh;
	width: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;  
	text-align: center;
	border-radius: 50%;
	background-color: grey;
	overflow: hidden;
  position: absolute;
} 

.mySlides {
  width: 100vh;
  height: 100vh;
} 

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s;
}

@-webkit-keyframes fade {
  from {opacity: .1} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .1} 
  to {opacity: 1}
}


/*SLIDES AND SECTIONS*/

.section{
	text-align: center;
  width: 100%;
  height: 100vh;
}

.slide {
	background-color: white;
  height: 100vh;
}

.ser1 {
  height: 100vh;
  width: 100%;
}

.ser2 {
  height: 100vh;
  width: 50%;
  float: left;
  overflow: hidden;
}

/*IMAGES and VIDEO*/

img {
  height: 100%;
}

.land0 {
  height: auto;
  width: 100%;
  margin-top: -7.5vw;
}

.land1 {
  height: 100%;
  width: auto;
}

.land2 {
  height: 80vh;
  width: auto;
  margin-top: 10vh;
}

.land3 {
  height: 70vh;
  width: auto;
  margin-top: 15vh;
}

.port1 {
  height: 100vh;
  width: auto;
  margin: auto;  
}

.port2 {
  height: 90vh;
  width: auto;
  margin: auto;  
}

.start_l {
  width: 100%;
  height: auto;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important; 
  position: absolute;
  }

.start_p {
  width: auto;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important; 
  position: absolute;
  } 

iframe {
  position:absolute;
  top:10%;
  left:0;
  width:100%;
  height:80%;"
} 


/*DROPDOWNS*/

.home {
  display: block;
  width: 100%;
  height: 100%;
  cursor: url('2.png') 16 16, pointer;
}

#myDropdown {
  pointer-events: auto !important;
}

#myDropdown2 {
  pointer-events: auto !important;
}


.drop1 {
	position: fixed;
	z-index: 900;
	width: 60%;
	top: 0.5em;
	left: 0.5em;
  pointer-events: none;
}

.drop2 {
	position: fixed;
	z-index: 900;
	top: 0.5em;
  width: 40%; 
	left: auto;
	right: 0.5em;
  text-align: right;
  pointer-events: none;
}

.dropbtn {
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 999;
}

.dropdown-content a {
  color: black;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {text-decoration: underline;}

.show {display:block;}

.dropbtn2 {
}

.dropdown2 {
  position: relative;
  display: inline-block;
}

.dropdown-content2 {
  display: none;
  position: absolute;
  width: 100%;
  text-align: right;
  z-index: 999;
}

.dropdown-content2 a {
  color: black;
  text-decoration: none;
  display: block;
}

.dropdown-content2 a:hover {text-decoration: underline;}

.show {display:block;}

#circle1 {
	width: 25vh;
	height: 25vh;
	background-color: black;
	border-radius: 50%;
  pointer-events: auto !important;
}

#circle2 {
	width: 12.5vh;
	height: 12.5vh;
  margin-left: auto;
	background-color: black;
	border-radius: 50%;
  pointer-events: auto !important;  
}

/*PROJECT INFO*/

.circle3 {
  width: 15vh;
  height: 15vh;
  top: 75%;
  left: 33%;
  transform: translate(-50%, -50%);  
  border-radius: 50%;
  display: flex;
  cursor: url('1.png') 16 16, pointer;
  position: absolute;
  z-index: 900;
}

.circle4 {
  width: 100vh;
  height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
  border-radius: 50%;
  display: none;
  cursor: url('x.png') 16 16, pointer;   
  position: absolute;
  z-index: 999;
  overflow: hidden;
}

.txt_circle3 { 
  margin: auto;
  text-align: center;
  font-size: 0.85em;
}

.txt_circle4 { 
  margin: 17.5% 15% 17.5% 17.5%;
  text-align: left; 
}

/*OTHER*/


.ser3 {
  height: 100vh;
  width: 33.3%;
  float: left;
  overflow: hidden;
}

.circle5 {
  height: 33.3vw;
  width: 100%;
  text-align: center;
  border-radius: 50%;
  background-color: #df2004;;
  overflow: hidden;
  position: relative;
} 

.other {
  width: 100%;
  height: auto;
}

.txt_o {
  margin: 0 2.5em 0 2em;
  text-align: left;  
}

.logo {
  width: 20%;
  height: auto;
  margin-left: 75%;
  margin-top: -5em;
}


/*ABOUT*/

.txt_a {
  text-align: left;
  width: 100vh;
  margin: auto;
  font-size: 1.2em;
}


label  {
  font-size: 0.7em;
}





/*SMARTPHONE*/

@media only screen 
  and (max-device-width: 812px)
  and (orientation: portrait) 
 { 

body {
  font-size: 1.6vh;
  }

.drop1 {
  width: 80%;
}

.drop2 {
  width: 50%; 
}

#circle1 {
  width: 17.5vh;
  height: 17.5vh;
}

#circle2 {
  width: 10vh;
  height: 10vh;
}

.home {
  display: none;
}

.title {
  width: 100%;
}

.ser1 {
  height: auto;
  width: 100%;
  overflow: hidden;
}

.ser2 {
  width: 100%;
  height: auto;
  overflow: auto;
  float: right;
}

.ser3 {
  margin-top: 33%;
  line-height: 1.2;
  height: 100%;
}

.circle0 {
  height: 100vw;
  width: 100vw;
} 

.circle3 {
  width: 15vh;
  height: 15vh;
  top: 80%;
  left: 80%;
  z-index: 950;  
}

.circle4 {
  width: 150vw;
  height: 150vw;
  border-radius: 50%;
  z-index: 900;    
}

.txt_circle4 { 
  padding: 15% 22.5% 10% 25%;
  margin: 0;
  text-align: left; 
}

.txt_a {
  width: 90%;
  margin: 0;  
  padding: 25% 5% 1em 5%;
  font-size: 1.25em;
}

.txt_o {
  margin: 0.5em;
  text-align: left;  
}

.land0 {
  height: auto;
  width: 200vw;
  margin-top: 0;
  margin-left: -50vw;
}

.land1 {
  height: auto;
  width: 150vw;
  margin-left: -25vw;  
}

.land2 {
  height: auto;
  width: 100%;
  margin-top: 0;
}

.land3 {
  height: auto;
  width: 100%;
  margin-top: 0;
}

.port1 {
  height: auto;
  width: 80%;
}

.port2 {
  height: auto;
  width: 60%;
}

.section{
  overflow: hidden;
}

.logo {
  width: 20%;
  height: auto;
  margin-left: 0;
  margin-top: 1em;
}



 }