@font-face {
    font-family: "LandnamaRegular";
    src: url("Landnama-Regular.otf") format("opentype");
}

body {
	background-color: #FFFFFF;
	font-family: "Akkurat-Regular";
	margin-left:0px;
	margin-right:0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

#portfolioLink {
        position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 90px;
        text-align: center;
        vertical-align: middle;
        z-index:1000;
}

.logo {
       width: 200px;
}

.mainPhoto {
       width: 100%;
}

.mainPhotoMobile {
       width: 0%;
       visibility: hidden;
}

#topleft {
	color: red;
	position: absolute;
	left: 40px;
	top: 30px;
	width: 200px;
	height: 60px;
    z-index: 10000;
    font-size: 20px;
}

#topcenter {
	position: absolute;
	left: 50%;
	top: 30px;
	width: 200px;
	height: 60px;
    transform: translateX(-50%);
    z-index:1000;
}

#topright {
	color: #85754e;
	position: absolute;
	right: 40px;
	top: 30px;
	width: 200px;
	height: 60px;
	text-align: right;
	z-index: 100;
    font-size: 20px;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	#topleft {
		font-size: 20px;
	}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	.logo {
		height: 17px;
	}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	#topright {
		font-size: 20px;
	}
}

a {
	color: #85754e;
   	text-decoration: none;
}

#center-frontpage {
	font-size:20px;
	line-height: 200%;
	text-align: center;
	color: #85754e;
}

#center-frontpage2 {
	position: absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	background-color: #85754e;
	z-index:200;
}

#fullscreen {
	position: absolute;
	top:50%;
    transform: translateY(-50%);
	left:0px;
	width:100%;
	background-color: white;
	z-index:200;
}

#fullscreenWrapper {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#center {
	line-height: 200%;
}

@media screen and (min-width: 200px) {
	#center {
		background-color: #FFFFFF;
		position: absolute;
		left: 40px;
		right: 40px;
		top: 94px;
	}
}

@media screen and (min-width: 1200px) {
	#center {
		background-color: #FFFFFF;
		position: absolute;
		left: 273px;
		right: 273px;
		top: 94px;
	}
}

@media screen and (min-width: 200px) {
	#center-frontpage {
		background-color: white;
		position: absolute;
		left: 40px;
		right: 40px;
    	top: 96px;
        z-index: 50;
	}
}

@media screen and (min-width: 900px) {
	#center-frontpage {
		background-color: white;
		position: absolute;
		left: 40px;
		right: 40px;
		top: 120px;
    	/*top: 50%;
    	transform: translateY(-50%);*/
	}
}

@media screen and (min-width: 1400px) {
	#topleft {
		left: 273px;
		top: 75px;
	}
	
	#topright {
		right: 273px;
		top: 75px;
	}
	
	#center-frontpage {
		background-color: white;
		position: absolute;
		left: 273px;
		right: 273px;
		top: 120px;
    	/*top: 50%;
    	transform: translateY(-50%);*/
	}
}

#mainText1 {
	font-family: "LandnamaRegular";
	line-height: 160%;
	text-align: center;
	color: white;
	font-size: 80px;
	position: absolute;
	left: 273px;
	right: 273px;
	top: 50%;
	transform:translateY(-50%);
}

#comingSoon {
	font-family: "Akkurat-Regular";
	line-height: 160%;
	text-align: center;
	color: white;
	font-size: 20px;
	position: absolute;
	left: 273px;
	right: 273px;
	bottom: 30px;
}

#aboutText {
	line-height: 200%;
	color: #85754e;
	xcolor: #85754e;
	font-size: 20px;
	position: absolute;
	left: 20%;
	right: 20%;
	top: 0px;
	bottom: 0px;
	padding-top: 30px;
	text-align: center;
	background-color: white;
}

#contactText {
	line-height: 150%;
	color: #ffffff;
	font-size: 20px;
	position: absolute;
	left: 20%;
	right: 20%;
	top: 130px;
	bottom: 0px;
	padding-top: 30px;
	text-align: center;
}

.mainText2 {
	font-size: 24px;
	position: relative;
}

.portrait-notice {
   position: absolute;
   top: 0px;
   left: 0px;
   background-color: white;
   height: 100%;
   width: 100%;
   visibility: hidden;
   z-index: 200;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
   .portrait-notice {
      visibility: visible;
      z-index: 200;
   }
   .hideMaybe {
     visibility: hidden;
     height: 0px;
   }
   .mainPhoto { visibility: hidden; width: 0%; }
   .mainPhotoMobile { visibility: visible; width: 100%; }
}

.portrait-notice-phone {
   position: absolute;
   top: 0px;
   left: 0px;
   background-color: white;
   height: 100%;
   width: 100%;
   visibility: hidden;
   z-index: 200;
   font-size: 30px;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   #center-frontpage { left: 10px; right: 10px; font-size: 40px; }
   #topright {font-size: 40px;}
   #topleft {font-size: 40px;width:48%;}
   textarea {height: 300px;}
   .logo {width: 350px;}
   #topcenter { width: 350px; }
   #aboutText { top: 20px; font-size: 28px; }
   #contactText { top: 20px; font-size: 28px; }
   #portfolioLink { visibility: hidden; }
   .mainPhoto { visibility: hidden; width: 0%; }
   .mainPhotoMobile { visibility: visible; width: 100%; }
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
   #center-frontpage { left: 10px; right: 10px;font-size: 40px; }
   #topright {font-size: 40px;}
   #topleft {font-size: 40px;width:48%;}
   textarea {height: 300px;}
   .logo {width: 350px;}
   #topcenter { width: 350px; }
   #aboutText { top: 20px; font-size: 28px; }
   #contactText { top: 20px; font-size: 28px; }
   #portfolioLink { visibility: hidden; }
   .mainPhoto { visibility: hidden; width: 0%; }
   .mainPhotoMobile { visibility: visible; width: 100%; }
   #comingSoon { font-size: 40px; }
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {
   #center-frontpage { left: 10px; right: 10px;font-size: 40px; }
   #topright {font-size: 40px;}
   #topleft {font-size: 40px;width:48%;}
   textarea {height: 300px;}
   .logo {width: 350px;}
   #topcenter { width: 350px; }
   #aboutText { top: 20px; font-size: 28px; }
   #contactText { top: 20px; font-size: 28px; }
   #portfolioLink { visibility: hidden; }
   .mainPhoto { visibility: hidden; width: 0%; }
   .mainPhotoMobile { visibility: visible; width: 100%; }
   #comingSoon { font-size: 40px; }
}

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px){
   #center-frontpage { left: 10px; right: 10px; font-size: 40px;}
   #topright {font-size: 40px;}
   #topleft {font-size: 40px;width:48%;}
   textarea {height: 300px;}
   .logo {width: 350px;}
   #topcenter { width: 350px; }
   #aboutText { top: 20px; font-size: 28px; }
   #contactText { top: 20px; font-size: 28px; }
   #portfolioLink { visibility: hidden; }
   .mainPhoto { visibility: hidden; width: 0%; }
   .mainPhotoMobile { visibility: visible; width: 100%; }
   #comingSoon { font-size: 40px; }
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) {
   .portrait-notice-phone {
      visibility: visible;
      z-index: 200;
   }
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
   .portrait-notice-phone {
      visibility: visible;
      z-index: 200;
   }
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {
   .portrait-notice-phone {
      visibility: visible;
      z-index: 200;
   }
}

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) {
   .portrait-notice-phone {
      visibility: visible;
      z-index: 200;
   }
}