@charset "utf-8";
/* CSS Document */
/*=============================Reset=====================================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	color:#F4690B;
	font-family: 'Jost', sans-serif;
}

:focus {
	outline: 0;
}

html {
	height:100vh;
}
	
body {
background-color: #68030B;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}


h1 {
	font-style: italic;
}


/*=============================layout=====================================================*/


.bread {
	height:100vh;
	width:100vw;
	margin-left:auto;
	margin-right:auto;
}

.banner {
	display:flex;
	align-items: center;
	height: 100%;
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.illu {
	position: fixed;
	z-index: -10;
	top: 0;
	left: 0;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;

}



.title0 {
	position: absolute;
}

.title0 p {
	width: 30vw;
	padding: 0 0 0 1vw;
	
}

.title0 p a {
	text-decoration: none;
	color:#C2CBFF;
	
}


.footer {
	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: center;
	position:fixed;
	top:73vh;
	height:27vh;
	width:100vw;
	z-index: 10;
	background-color:#091338;
	border-top:  1px solid #C2CBFF;
	box-sizing:border-box; 
}


.daname {
	position:relative;
	top:-8vh;
	text-align: right;
	
}

.daname p {
		text-align: left;
}

.logo {
	position:relative;
	top:-8vh;
 	animation-duration: 1000ms;
  	animation-iteration-count: 3;
  	animation-timing-function: linear;
	
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.menu {
	position:relative;
	top:-8vh;
	
}

.menu ul {
	list-style:disc;
}

.menu ul li a {
	text-align: left;
	text-decoration: none;
}


.social {
	display: flex;
}

.profession {
	font-style: italic;
}



/* The grid: Four equal columns that floats next to each other */

.gallery {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
margin-left:auto;
mergin-right: auto;
padding-top: 5vh;
padding-bottom: 29vh;
}

/* Style the images inside the grid */
.column img {
  width:100%;
  margin-top: 8px;
  vertical-align: middle;
  cursor: pointer;
  border: solid 0.2vw #C2CBFF;
   -webkit-transform: translateZ(0);

          transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

  -webkit-backface-visibility: hidden;

          backface-visibility: hidden;

      -moz-osx-font-smoothing: grayscale;

  -webkit-transition-duration: 0.3s;

          transition-duration: 0.3s;

  -webkit-transition-property: transform;

          transition-property: transform;
}

.column img:hover {
	  -webkit-transform: scale(1.1);

          transform: scale(1.1);
}


/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
  	position: fixed;	
	width:100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 60;
	display: none;
	align-content: center;
	justify-content: center;
	background:  rgba(0,0,0,0.7);
	cursor: pointer;
	
}

#expandedImg {
	align-content: center;
	justify-content: center;
	position: relative;
	width: 80vw;
	object-fit: contain;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: #C2CBFF;
  font-size: 20px;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #C2CBFF;
  font-size: 35px;
  cursor: pointer;
}

/*=============================Slideshow=====================================================*/

.slide {
 display: none;
 height: 100%;
 width:100%;
}

.prev, .next {
  cursor: pointer;
  position: fixed;
  top: 30vh;
  width: auto;
  color:#F4690B;
  font-weight: bold;
  font-size: 10vh;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  padding: 0 2vw 0 2vw;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

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

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

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




/*=============================Responsive=====================================================*/



@media (min-width : 0px) 
{ 
	
	h1 {
	font-size:30px;
	text-shadow: 5px 4px 3px rgba(60,11,11, 0.8);
	}
	
	.prev, .next {
	text-shadow: 5px 4px 3px rgba(60,11,11, 0.8);
	}
	
	.illu2 {
	content:url("img/photo2.jpg");		
	}
	
	.banner {
	vertical-align: middle;
	}
	
	.banner .title0 {
	top:20vh;
	left:45vw;
	}
	
	.banner .title0 h1 {
	font-size:20px;
	text-shadow: 5px 4px 3px rgba(60,11,11, 0.8);
	}
	
	.banner .title0 p {
	font-size:12px;
	text-shadow: 2px 2px 2px rgba(60,11,11, 0.8);
	}
	
	
	.daname {
	width:120px;
	padding-left: 30px;
	padding-top: 10px;
	line-height: 14px;
	
	}

	.daname p {
		font-size: 14px;
	}

	.logo {
	width:80px;
	height:80px;
	}
	
	.menu {
	width:100px;
	padding-top: 10px;
	padding-left: 30px;
	line-height: 14px;
	}
	
	.menu ul li a {
	font-size: 14px;
	}
	
	.social a {
	height:14px;
	width:14px;
	padding-right: 5px;
	}
	
	.profession {
	font-size: 10px;
	}
	
	.column {
  padding: 30px;
	width: 80vw;
}
	

}

@media (min-width: 1200px) { 
	
	
	h1 {
	font-size:70px;
	text-shadow: 5px 4px 3px rgba(60,11,11, 0.8);
	}
	
	.prev, .next {
	text-shadow: 5px 4px 3px rgba(60,11,11, 0.8);
	}
	
	.banner .title0 {
	top:15vh;
	left:55vw;
	}
	
	.banner .title0 h1 {
			font-size:50px;
			text-shadow: 10px 8px 6px rgba(60,11,11, 0.8);
	}
	
	.banner .title0 p {
			font-size:20px;
			text-shadow: 5px 4px 3px rgba(60,11,11, 0.8);
	}
	
	
	
	.daname {
	width:250px;
	padding-left: 70px;
	padding-top: 30px;
	line-height: 25px;
	
	}

	.daname p {
		font-size: 25px;
	}

	.logo {
	width:160px;
	height:160px;
	}
	
	.menu {
	width:250px;
	padding-top: 30px;
	padding-left: 70px;
	line-height: 25px;
	}
	
	.menu ul li a {
	font-size: 25px;
	}
	
	.social a {
	height:25px;
	width:25px;
	padding-right: 10px;
	}
	
	.profession {
	font-size: 14px;
	}
	
		.column {
  padding: 30px;
	width: 40vw;
}

}

@media only screen and (min-device-width: 1686px) and (max-device-height: 1444px) and (orientation: landscape)  { 
	
	h1 {
	font-size:100px;
	text-shadow: 10px 8px 6px rgba(60,11,11, 0.8);
	}
	
	.prev, .next {
	 text-shadow: 10px 8px 6px rgba(60,11,11, 0.8);
	}
	
	.banner .title0 {
	top:15vh;
	left:55vw;
	}
	
	.banner .title0 h1 {
	font-size:100px;
	text-shadow: 10px 8px 6px rgba(60,11,11, 0.8);
	}
	
	.banner .title0 p {
	font-size:35px;
	text-shadow: 5px 4px 3px rgba(60,11,11, 0.8);
	}
	
	
	.daname {
	width:500px;
	padding-left: 120px;
	padding-top: 60px;
	line-height: 50px;
	
	}

	.daname p {
		font-size: 45px;
	}

	.logo {
	top:-6vh;	
	width:400px;
	height:400px;
	}
	
	.menu {
	width:500px;
	padding-top: 60px;
	padding-left: 120px;
	line-height: 50px;
	}
	
	.menu ul li a {
	font-size: 45px;
	}
	
	.social a {
	height:45px;
	width:45px;
	padding-right: 20px;
	}
	
	.profession {
	font-size: 40px;
	}
	
.column {
  padding: 20px;
  width: 40vw;
}

}

@media (min-width : 1800px) 
{ 
	
	h1 {
	font-size:80px;
	text-shadow: 10px 8px 6px rgba(60,11,11, 0.8);
	}
	
	.prev, .next {
	 text-shadow: 10px 8px 6px rgba(60,11,11, 0.8);
	}
	
	.banner .title0 {
	top:25vh;
	left:55vw;
	}
	
	.banner .title0 h1 {
	font-size:80px;
	text-shadow: 10px 8px 6px rgba(60,11,11, 0.8);
	}
	
	.banner .title0 p {
	font-size:25px;
	text-shadow: 5px 4px 3px rgba(60,11,11, 0.8);
	}
	
	.daname {
	width:400px;
	padding-left: 120px;
	padding-top: 40px;
	line-height: 50px;
	
	}

	.daname p {
		font-size: 35px;
	}

	.logo {
	width:250px;
	height:250px;
	}
	
	.menu {
	width:400px;
	padding-top: 40px;
	padding-left: 120px;
	line-height: 35px;
	}
	
	.menu ul li a {
	font-size: 35px;
	}
	
	.social a {
	height:35px;
	width:35px;
	padding-right: 15px;
	}
	
	.profession {
	font-size: 30px;
	}
	
	.column {
 	padding: 30px;
	width: 20vw;
}

}

@media (min-width : 3000px) 
{ 
	
	h1 {
	font-size:160px;
	text-shadow: 10px 8px 6px rgba(60,11,11, 0.8);
	}
	
	.prev, .next {
	text-shadow: 10px 8px 6px rgba(60,11,11, 0.8);
		}
	
	
	.banner .title0 {
	top:25vh;
	left:55vw;
	}
	
	.banner .title0 h1 {
	font-size:100px;
	text-shadow: 10px 8px 6px rgba(60,11,11, 0.8);
	}
	
	.banner .title0 p {
	font-size:35px;
	text-shadow: 5px 4px 3px rgba(60,11,11, 0.8);
	}
	
	
	
	.daname {
	width:500px;
	padding-left: 120px;
	padding-top: 60px;
	line-height: 50px;
	
	}

	.daname p {
		font-size: 45px;
	}

	.logo {
	width:400px;
	height:400px;
	}
	
	.menu {
	width:500px;
	padding-top: 60px;
	padding-left: 120px;
	line-height: 50px;
	}
	
	.menu ul li a {
	font-size: 45px;
	}
	
	.social a {
	height:45px;
	width:45px;
	padding-right: 20px;
	}
	
	.profession {
	font-size: 40px;
	}
	
		.column {
  	padding: 30px;
	width: 20vw;
}
}
	

@media screen and (min-width : 0px)
	and (orientation: portrait)   {
	
	h1 {
	font-size:30px;
	text-shadow: 5px 4px 3px rgba(60,11,11, 0.8);
	}
	
	.prev, .next {
	text-shadow: 5px 4px 3px rgba(60,11,11, 0.8);
	}
		
		
	.banner .title0 {
	top:10vh;
	left:45vw;
	}
		
	.banner .title0 h1 {
	font-size:18px;
	text-shadow: 5px 4px 3px rgba(60,11,11, 0.8);
	}
		
	.banner .title0 p {
	width: 25vw;
	font-size:12px;
	text-shadow: 3px 2px 2px rgba(60,11,11, 0.8);
	}
		
	
	.logo{
	top:-10vh;
	}
	
	
	.daname {
	width:120px;
	padding-left: 30px;
	padding-top: 10px;
	line-height: 14px;
	
	}

	.daname p {
		font-size: 14px;
	}

	.logo {
	width:80px;
	height:80px;
	}
	
	.menu {
	width:100px;
	padding-top: 10px;
	padding-left: 30px;
	line-height: 14px;
	}
	
	.menu ul li a {
	font-size: 14px;
	}
	
	.social a {
	height:14px;
	width:14px;
	padding-right: 5px;
	}
	
	.profession {
	font-size: 10px;
	}
		
	.column {
  	padding: 10px;
	width: 80vw;
	}
	
}

@media (min-width : 800px)
	and (orientation: portrait)   {
	
	h1 {
	font-size:60px;
	text-shadow: 8px 6px 3px rgba(60,11,11, 0.8);
	}
	
	.prev, .next {
	 text-shadow: 8px 6px 3px rgba(60,11,11, 0.8);
	}	
	
		
	.banner .title0 {
	top:10vh;
	left:35vw;
	}
		
	.banner .title0 h1 {
	font-size:60px;
	text-shadow: 8px 6px 3px rgba(60,11,11, 0.8);
	}
		
	.banner .title0 p {
	font-size:25px;
	text-shadow: 5px 4px 3px rgba(60,11,11, 0.8);
	}
		
	.daname {
	width:200px;
	padding-left: 60px;
	padding-top: 30px;
	line-height: 25px;
	
	}

	.daname p {
		font-size: 20px;
	}

	.logo {
	top:-10vh;	
	width:300px;
	height:300px;
	}
	
	.menu {
	width:200px;
	padding-top: 60px;
	padding-left: 30px;
	line-height: 25px;
	}
	
	.menu ul li a {
	font-size: 20px;
	}
	
	.social a {
	height:20px;
	width:20px;
	padding-right: 25px;
	}
	
	.profession {
	font-size: 15px;
	}
		
	.column {
	padding: 10px;
	width: 80vw;
	}
	
}

@media (min-width : 1200px)
	and (orientation: portrait)   {
	
	h1 {
	font-size:90px;
	text-shadow: 10px 8px 6px rgba(60,11,11, 0.8);
	}
	
	.prev, .next {
	 text-shadow: 10px 8px 6px rgba(60,11,11, 0.8);
	}	
	

		
	.banner .title0 {
	top:10vh;
	left:55vw;
	}
		
	.banner .title0 h1 {
	font-size:60px;
	text-shadow: 10px 8px 6px rgba(60,11,11, 0.8);
	}
		
	.banner .title0 p {
	font-size:25px;
	text-shadow: 5px 4px 3px rgba(60,11,11, 0.8);
	}
		
		
	.logo{
	top:-10vh;
	}

	.daname {
	width:500px;
	padding-left: 120px;
	padding-top: 60px;
	line-height: 45px;
	
	}

	.daname p {
		font-size: 35px;
	}

	.logo {
	top:-6vh;	
	width:400px;
	height:400px;
	}
	
	.menu {
	width:500px;
	padding-top: 60px;
	padding-left: 120px;
	line-height: 45px;
	}
	
	.menu ul li a {
	font-size: 35px;
	}
	
	.social a {
	height:35px;
	width:35px;
	padding-right: 20px;
	}
	
	.profession {
	font-size: 30px;
	}
		
	.column {
 	padding: 20px;
	width: 40vw;
	}
		
	
}