/*@font-face {
  font-family: 'MyriadPro';
  src: url('MyriadPro-Regular.eot');
  src: url('MyriadPro-Regular.woff2') format('woff2'), 
       url('MyriadPro-Regular.woff') format('woff'), 
       url('MyriadPro-Regular.ttf')  format('truetype'), 
       url('MyriadPro-Regular.svg#svgFontName') format('svg'); 
  font-weight:normal;
}

@font-face {
  font-family: 'MyriadPro';
  src: url('MyriadPro-Bold.eot'); 
  src: url('MyriadPro-Bold.woff2') format('woff2'), 
       url('MyriadPro-Bold.woff') format('woff'), 
       url('MyriadPro-Bold.ttf')  format('truetype'), 
       url('MyriadPro-Bold.svg#svgFontName') format('svg'); 
  font-weight:bold;
}

@font-face {
  font-family: 'MyriadPro';
  src: url('MyriadPro-Light.eot'); 
  src: url('MyriadPro-Light.woff2') format('woff2'), 
       url('MyriadPro-Light.woff') format('woff'), 
       url('MyriadPro-Light.ttf')  format('truetype'), 
       url('MyriadPro-Light.svg#svgFontName') format('svg'); 
  font-weight:light;
}
*/

@font-face {
  font-family: 'MyriadPro';
  src: url('MyriadPro-Regular.eot');
  src: url("MyriadPro-Regular.otf") format("opentype");
  font-weight:normal;
}

@font-face {
  font-family: 'MyriadPro';
  src: url('MyriadPro-Bold.eot'); 
  src: url("MyriadPro-Bold.otf") format("opentype");
  font-weight:bold;
}

/* h1, h2, h3, h4, h5, h6 { */
    /* font-family: MyriadPro !important; */
    /* margin: 10px 0; */
/* } */

@-webkit-keyframes fadeIn { 
  0% { opacity:1; } 
  20%  { opacity:1; }
  50% { opacity:0; }
  90%  { opacity:0; }
  100% { opacity:1; }
}

/* Firefox */
@-moz-keyframes fadeIn { 
  0% { opacity:1; } 
  40%  { opacity:1; }
  50% { opacity:0; }
  90%  { opacity:0; }
  100% { opacity:1; }
}

@keyframes fadeIn { 
  0% { opacity:1; } 
  40%  { opacity:1; }
  50% { opacity:0; }
  90%  { opacity:0; }
  100% { opacity:1; }
}

@-webkit-keyframes fadeIn1 { 
  0% { opacity:0; } 
  40%  { opacity:0; }
  50% { opacity:1; }
  90%  { opacity:1; }
  100% { opacity:0; }
}

/* Firefox */
@-moz-keyframes fadeIn1 { 
  0% { opacity:0; } 
  40%  { opacity:0; }
  50% { opacity:1; }
  90%  { opacity:1; }
  100% { opacity:0; }
}

@keyframes fadeIn1 { 
  0% { opacity:0; } 
  40%  { opacity:0; }
  50% { opacity:1; }
  90%  { opacity:1; }
  100% { opacity:0; }
}

.logo
{
	width:12vh;

}

#clickable
{
	display:none;
	position:fixed;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	z-index:1000;
	color: black;
	background: url("images/clickable.png") no-repeat center center fixed; 
	background-size: cover;
}

.text-animated-one
{
 
    -webkit-animation:fadeIn ease-in 12s infinite;
    -moz-animation:fadeIn ease-in 12s infinite;
    animation:fadeIn ease-in 12s infinite;

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.text-animated-two
{

    -webkit-animation:fadeIn1 ease-in 12s infinite;
    -moz-animation:fadeIn1 ease-in 12s infinite;
    animation:fadeIn1 ease-in 12s infinite;

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}


.clickable-animated-one
{
    
    -webkit-animation:fadeIn ease-in 6s infinite;
    -moz-animation:fadeIn ease-in 6s infinite;
    animation:fadeIn ease-in 6s infinite;

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.clickable-animated-two
{

    -webkit-animation:fadeIn1 ease-in 6s infinite;
    -moz-animation:fadeIn1 ease-in 6s infinite;
    animation:fadeIn1 ease-in 6s infinite;

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.clickabletext
{
	position:fixed;
	font-size:20px;
	width:300px;
	color: white;
	font-weight:bold;

}

.blinkdot2
{
	position:fixed;
	width:32px;
}

@-webkit-keyframes fadeDot { 
  0% { opacity:0; opacity: 1\9; /* IE9 only */ } 
  50% { opacity:0.6; }
  100% { opacity:0; }
}

@-webkit-keyframes fadeDot { 
  0% { opacity:0; opacity: 1\9; /* IE9 only */ } 
  50% { opacity:0.6; }
  100% { opacity:0; }
}

@keyframes fadeDot { 
  0% { opacity:0; opacity: 1\9; /* IE9 only */ } 
  50% { opacity:0.6; }
  100% { opacity:0; }
}

.blinkdot2-animated-two
{

    -webkit-animation:fadeDot ease-in 1.5s infinite;
    -moz-animation:fadeDot ease-in 1.5s infinite;
    animation:fadeDot ease-in 1.5s infinite;

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.blinkdot
{
	position:fixed;
	width:20px;
}


#LanguageSelectPage .heading1 {
	position:absolute;
	text-align:center;
	width:100%;
	color:#FFFFFF;
	font-weight:700;
}

#LanguageSelectPage .heading2
{
	position:absolute;
	text-align:center;
	width:100%;
	font-weight:normal;
	color: #E0E0E0;
}

#LanguageSelectPage .Maintitle {
	position:absolute;
	text-align:center;
	width:100%;
    transform: scale(1, 1);
	font-weight:bold;
	color:#A8DF46;
	min-width:1px;
	line-height:1.3;
}

#LanguageSelectPage .heading3
{
	position:absolute;
	text-align:center;
	width:100%;
	margin: 30px 0;
	color:#FFFFFF;
}

#LanguageSelectPage .heading4 {
	padding: 15px;
	margin:5px;
	font-weight:normal;
	background-color: rgba(66,114,157,0.5);
	border-radius: 5px;
	cursor:pointer;
	color:#E8E8E8;
}

#LanguageSelectPage .heading4:hover {
	background-color: rgba(66,114,157,1);
}



#IconSelection .heading1 {
    margin-top: 20px;
	margin-bottom:4px;
	font-weight:bold;
	color:#A8DF46;
	transform: scale(1,1);
}




body {
   margin: 0;
   padding: 0;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1;
}

#LanguageSelectPage
{
	display:none;
}

#IconSelection
{
	display:none;	
}

#IconSelection h1{
	font-size: 3vw;
	font-weight:bold;
	z-index:100;
	line-height:1;
}

#IconSelection h3{
	font-size: calc(12px + 1.1vw)!important;
	font-weight:bold;
	z-index:100;
	line-height:1;
	color: #878787;
}

#IconSelection h4{
	font-size: calc(12px + 0.8vw)!important;
	font-weight:bold;
	z-index:100;
	line-height:1;
	color: #878787;
}


#IconSelection h4{
	font-size: 1.3vw;
	font-weight:bold;
	z-index:100;
}

.repeating-linear {
	top:0;
	left:0;
	position:absolute;
	width: 100vw;
	height: 100vh;	
	background: url("images/bg1.jpg") no-repeat center center fixed; 
	background-size: cover;
	/* filter: brightness(50%); */
	/* -webkit-filter:  brightness(50%); */
}

.Title
{
	position:relative;
	margin-top:30vh;
	width:100vw;
	text-align:center;
	z-index: 10;
}

.Title h1
{	
	color:#A8DF46;
	font-weight:bold;
}

.Title h3
{	
	color:#fff;
	font-weight:bold;
}

.Title h4
{	
	color:#fff;
	font-weight:bold;
}

.Title hr {
	width: 168px;
	align: right !important;
	display: block; 
	margin: 10px auto;
	height: 2vh;
	background: url(wave.png) repeat-x 0 0;
    border: 0;
}

.Languagebar
{
	position:relative;
	margin-top:68vh;
	text-align:center;
	z-index: 10;
}

.Languagebar h4
{
	background-color: rgba(72,120,165,0.7);
	line-height:  40px;
	color:#fff;
}

.Languagebar h4:hover
{
	background-color: rgba(72,120,165,1);
	cursor: pointer;
}

.repeating-linear-nobackground1{
	width: 100vw;
	height: 100vh;
	background: repeating-linear-gradient(90deg, transparent, transparent calc(100vh/9), #D6FFFE calc(100vh/9), #D6FFFE calc(100vh/9 + 2px)),
	repeating-linear-gradient(-180deg, white,white calc(100vh/9), #D6FFFE calc(100vh/9), #D6FFFE calc(100vh/9 + 2px));
}

.repeating-linear-nobackground
{
	top:0;
	left:0;
	position:absolute;
	width: 100vw;
	height: 100vh;	
	z-index:-100;
	background: url("images/Texture.png") no-repeat center center fixed; 
	background-size: cover;
	/* filter: brightness(100%);
	-webkit-filter: brightness(100%); Safari 6.0 - 9.0 */
	/*filter: grayscale(100%);
    -webkit-filter: grayscale(100%);  Safari 6.0 - 9.0 */

}

.iconset1
{
	right: 56vw; 
	margin-top: -webkit-calc(8vw + 10px);
	margin-top: -moz-calc(8vw + 10px);
	margin-top: calc(35vw + 10px);
}

.iconset2
{
	right: 60vw;  
	margin-top: 23vw;
}

.iconset3
{
	right: 51vw;
	margin-top: 13vw;
	display:block;
}

.iconset4
{
	right: 56vw; 
	margin-top: -webkit-calc(8vw + 10px);
	margin-top: -moz-calc(8vw + 10px);
	margin-top: calc(8vw + 10px);
}

.iconset5
{
	right: 56vw; 
	margin-top: -webkit-calc(8vw + 10px);
	margin-top: -moz-calc(8vw + 10px);
	margin-top: calc(8vw + 10px);
}

.iconset6
{
	right: 56vw; 
	margin-top: -webkit-calc(8vw + 10px);
	margin-top: -moz-calc(8vw + 10px);
	margin-top: calc(8vw + 10px);
}

.iconset7
{
	right: 56vw; 
	margin-top: -webkit-calc(8vw + 10px);
	margin-top: -moz-calc(8vw + 10px);
	margin-top: calc(8vw + 10px);
}



.canvasIcons
{
	position:absolute;
	bottom:0;
	width: 100vw;
	min-height: calc(85vh);
	display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
	display: -webkit-flex;
    align-items: center;
	justify-content: center;
}

.MKmap{
	width:16vw;
	display:block;
    margin:auto;
}

.MKmap:hover {
	width: 18vw;
	cursor: pointer;
	transition: 1s;
}

.icons
{
	position:fixed;
	width: 6.5vw;
	height: 6.5vw;
	transition: 0.3s;
	margin:1.1vw;
}


.icontext
{
	position:fixed;
}



.icons:hover
{
	/* transform:scale(1.1); */
	cursor: pointer;
}


.icontitle
{
	color: #373737;
	transition: 0.2s;
	
}

.icontitlehover
{
	color: #37B34A;
	text-shadow: 1px 0px 0px  #C5CDDC;
}

#languagecorner
{
	padding-top: 30px;
	padding-right: 30px;
	z-index:100;
}

#languagecorner1
{
	padding-bottom: 30px;
	z-index:100;
}

#languagecorner0
{
	padding-bottom: 30px;
	padding-right: 30px;
	z-index:100;
}

.languagecornerflag
{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0.6;
}

.languagecornerflag:hover
{
	opacity: 1;
}

#IconContent
{
	display:none;
}



/* Add some content at the bottom of the video/page */

.layoutcontent
{
	position: fixed;
    left: 0;
	top:0;
    width: 100%;
	height: 100%;
}
	
.contentleft {
    position: fixed;
    left: 0;
    background: rgba(55, 179, 74, 0.7); 
    width: 30%;
	height: 100%;
	transition: 1s;
	overflow: hidden;
}

.minimize
{
	background: rgba(255, 255, 255, 0.8);
	padding: 5px;
	cursor:pointer;
}

.hiddenselectedIcon
{	
	position:absolute;
	top: 20px;
	left: 20px;
	transition: 3s;
	opacity:0;
}

.hiddenexpandicon
{
	position:absolute;
	top: 0px;
	left: 0px;
	transition: 3s;
	opacity:0;
}

#iconselected
{
	position:absolute;
	top: calc(15% - 5.5vw);
	width:100%;
	text-align:center;
	z-index:100;
	transition: 0.5s;
}



.greendish
{
	color: #91C03E;
	font-weight:bold;
}




.contentbottom li::before 
{
  content: "•   ";
  margin-top:3px;
  width: 30px;
  font-size: 150%; /* or whatever */
  line-height: 10px;
  color: #3E83C4; /* or whatever color you prefer */
}

.menubottom
{
	position: fixed;
    bottom: 0;
	right:0;
	height: auto;
	width: 70%;
	text-align:center;
	margin-bottom:20px;
	transition: 1s;
}

.menubottom img
{
	padding-left:10px;
}


.iconsx
{
	transition: 0.5s;
	width: 6vw;
	opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

.opa70
{
	opacity: 0.9;
	filter: alpha(opacity=90); /* For IE8 and earlier */
}


.iconsx:hover
{
	transform: scale(1.2);
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}

.line {
	width: 100%;
	height: 1px;
	/*background-color: #D5E1BC;  797979 ---- 3F3F3F ---- D5E1BC */
	border:1px dashed #D5E1BC;	

}

@media screen and (orientation:portrait) {


#LanguageSelectPage .heading1{
	font-size:3.4vw;
	top: 4vh;
}

#LanguageSelectPage .heading2{
	font-size:0.8rem;
	letter-spacing:0.0001em;
	top: 8vh;
}

#LanguageSelectPage .Maintitle {
	font-size:5vw;
	padding: 20px;
	top: 34vh;
}

#LanguageSelectPage .heading3{
	font-size:1.1rem;
	letter-spacing:0.2em;
	top: 50vh;
}

#LanguageSelectPage .heading4{
	font-size:1.1rem;
}

#IconSelection .heading1 {
	font-size:4.9vw;
	padding:2px 10px;
	margin-left:5px;
	margin-right:5px;
	margin-top:5px;
	margin-bottom:0px;
	
}

#IconSelection .heading2 {
	color:#FFFFFF;
	background-color:#3E83C4;
	line-height:1.3;
	padding-top: 3px;
	padding-bottom:2px;
	padding-right: 7px;
	padding-left: 7px;
	border-radius:2px;
}

#IconSelection .heading2 {
	font-size:0.9rem;
	margin-top:0px;
}

.icontitle 
{
  font-size: 1.25vw;
}

.landscapescreen
{
	display:none !important;
}

.languagecornerflag1
{
	width: calc(5vh + 5px);
	height: calc(5vh + 5px);
	cursor: pointer;
	opacity: 0.8;
}

.languagecornerflag1:hover
{
	opacity: 1;
}

.contentbottom
{	
	position:fixed;
	width:100%;
	height:85%;
	top:0;
	left:0;
	background: white;
	padding:20px 40px;
	overflow-y: scroll;
	font-size: 1.1rem;
	color:#373737;
	line-height:1.3;
}

.contentbottom ui {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contentbottom li {
  padding-left: 1em; 
  text-indent: -1.8em;
}

.contentbottom h1
{
	font-size: 1.7rem;
	font-weight: 600;
	border-bottom: 1px solid grey;
}

.titlemenu
{
	position: fixed;
	top:15%;
	bottom:10%;
	width:100%;
	height:70%;
	overflow-y:scroll;
}

#languagecorner2
{
	position: fixed;
	bottom:0;
	width:100%;
	height:15%;
	z-index:100;
	background-color:#FFFFFF;

}

.languagecornerflag
{
	width: 5vh;
	height: 5vh;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0.6;
}

.icontitle 
{
  font-size: 0.9rem !important;
  background-color: #E3F4BD;
  color: #787878;
  overflow-wrap: normal !important;
  border-radius: 15px;
  cursor: pointer;
 }

}

@media screen and (orientation:landscape) {	

#LanguageSelectPage .heading1{
	font-size:1.7vw;
	top: calc(4vh);
}

#LanguageSelectPage .heading2{
	font-size:1.7vw;
	letter-spacing:0.0001em;
	top: calc(9vh + 5px);
}

#LanguageSelectPage .Maintitle {
	font-size:2.6vw;
	top: calc(41vh);
}

#LanguageSelectPage .heading3{
	font-size:1.8vw;
	letter-spacing:0.2em;
	top: calc(45vh);
}

#LanguageSelectPage .heading4{
	font-size:1.8vw;
}

#IconSelection .heading1 {
	font-size:2.6vw;
	
}


#IconSelection .heading2 {
	color:#FFFFFF;
	background-color:#3E83C4;
	line-height:2;
	margin-top:10px;
	padding-top: 7px;
	padding-bottom:5px;
	padding-right: 15px;
	padding-left: 15px;
	border-radius:2px;
	height:20px;
}

#IconSelection .heading2 {
	font-size:1.35vw;
}

.icontitle 
{
  font-size: 1.25vw;
}



.portraitscreen
{
	display:none !important;
}

#myVideo {
    position: fixed;
    top: calc(-2vh - 15px);
    min-width: 100%; 
    min-height: calc(102vh + 15px);
	transition: 1s;
}

#cf7 {
	position: fixed; 
	top: -10%; 
	left:30%;
	width: 110%; 
	height: 110%;
	margin:0;
	z-index: -100;
	overflow: hidden;
	transition: 1s;
}

#cf7bg
{
	position: fixed; 
	top: 0;
	left: 0;
	width: 100%; 
	height: 100%;
	margin:0;
	z-index: -100;
	overflow: hidden;
	background-repeat: no-repeat;
    background-size: cover; 
	background-position: center center;	
}

#cf7 img {	
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	margin: auto; 
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
}

#cf7 img.opaque {
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
}


.contentbottom ui {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contentbottom li {
  padding-left: 1em; 
  text-indent: -1.8em;
}

.contentbottom
{	
	position:absolute;
	width:100%;
	height:80%;
	bottom:0;
	left:0;
	background: white;
	padding:20px 3vw;
	overflow-y: scroll;
	font-size: calc(12px + 0.4vw);
	line-height:1.5;
	color:#373737;
}


.contentbottom h1
{
	font-size: calc(12px + 1.1vw);
	font-weight: normal;
	margin-top:6.5vh;
	padding-bottom: 10px;
	border-bottom: 1px solid grey;
}


}