@charset "UTF-8";
/* CSS Document */

*{

	margin: 0px;
	padding: 0px;
	
	font-size: 0px;
	line-height: 0px;
	
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-weight: 300;
	letter-spacing: 1px;
	
	overflow: hidden;
	
	z-index: 0;
	
	object-fit: contain;
	border-collapse: collapse;
	border: none;
	box-shadow: none;
	box-sizing: border-box;
	text-decoration: none;
	cursor: default;
	
	resize: none;	
		
}


body{
	width:100vw;
	height: 100vh;
	overflow: auto;
	background-color: #f2f2f2
}

.body{
	text-align: center;
}


a, span{
	color: inherit;
}

a, a *{
	cursor: pointer;
}

/* Modal */

#modal{
	position: absolute;
	width:100vw;
	height:100vh;
	background-color:rgba(0,0,0,0.85);
	z-index: 500;
	display: none;
	opacity: 0;
}

#modalclose{
	position: absolute;
	top:32px;
	right:32px;
	
	
}

#modalcontent{
	width:100%;
	height:100%;
	text-align: center;
	padding:32px;
}

#modalcontent img{
	
	max-width:64%;
	height:auto;
	max-height: 100%;
	background-color: white;
	padding:16px;
	border-radius: 8px;
}

/* Icon button */
.iconbutton{
	background-color: #ff4438;
	border-radius: 100%;
	height:32px;
	width:32px;
}

.iconbutton img{
	width:100%;
	height:100%;
	padding:8px;
	
}

.iconbutton, .iconbutton *{
	cursor: pointer
}

.iconbutton:hover{
	background-color:rgba(0,0,0,0.85);
		
	-webkit-transition: 180ms ease-out;
	-moz-transition: 180ms ease-out;
	-o-transition: 180ms ease-out;
	transition: 180ms ease-out;
	
}

/* Backtotop */
#backtotop{
	position: fixed;
	right: 24px;
	bottom:16px;
	z-index: 100;
	display: none;
}

/* Section */
.section{
	padding:32px 64px;
}

.bgdark{
	background-color:rgba(0,0,0,0.85);
}

.bgdark p{color: white}

/* Text */
p, br{
	font-size: 18px;
	line-height: 24px;
}

p.bold{font-weight:400;}
p.red{color:#ff4438;}
p.white{color:white}
p.large{font-size: 24px; line-height: 32px;}

p.title{margin: 24px auto 8px auto;}

p.title:first-of-type{margin-top:0px;}



/* Header */
.header .logo{
	margin-bottom:8px;
}

/* Company info */
.companyinfo div{
	display: inline-block;
	vertical-align: top;
	padding:16px 32px 0px 32px;
}

.companyinfo a:hover p{
	text-decoration: underline;
		
	-webkit-transition: 180ms ease-out;
	-moz-transition: 180ms ease-out;
	-o-transition: 180ms ease-out;
	transition: 180ms ease-out;

}



/* Imgtitle navbar */

.imgnavbar .imgtitle{
	display: inline-block;
	vertical-align: top;
	margin:16px;
}


.imgtitle{
	width: 180px;;
	height:180px;
	border-radius: 16px;
	background-color: white;
	padding:16px;
	margin: auto;
	
}

.imgtitle p{
	height:24px;
	font-size:16px;
	line-height: 24px;
	color: black;
}

.imgtitle img{
	width:124px;;
	height:124px;
	padding-top:8px;
}

.imgnavbar .imgtitle:hover img{
	width:100px;
		
	-webkit-transition: 180ms ease-out;
	-moz-transition: 180ms ease-out;
	-o-transition: 180ms ease-out;
	transition: 180ms ease-out;
}

.imgnavbar .imgtitle:hover p{
	color: #ff4438;
		
	-webkit-transition: 180ms ease-out;
	-moz-transition: 180ms ease-out;
	-o-transition: 180ms ease-out;
	transition: 180ms ease-out;
}


/* Imgalbum */
.imgalbum_item{
	display: inline-block;
	vertical-align: top;
	background-color: white;
	border-radius: 4px;
	margin: 4px;
	padding:8px;
	cursor: pointer;
}

.imgalbum.small .imgalbum_item{	height:62px;}
.imgalbum.small.wide .imgalbum_item{	height:72px;}
.imgalbum.medium .imgalbum_item{	height:120px;}


.imgalbum_item:hover{
	border-radius:8px;
	opacity: 0.32;
	
	-webkit-transition: 180ms ease-out;
	-moz-transition: 180ms ease-out;
	-o-transition: 180ms ease-out;
	transition: 180ms ease-out;
	
}
