/*main*/
main{
	width: 100%;
	min-height: 100vh;
	position: fixed;
}

.bg{
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../img/bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 100%;

    transition: all 1s ease;

    transform:scale(1.1);
}

.president{
  bottom: 0;
  height: 91%;
  margin-left: calc(100vw * 760 / 1903);
  position: absolute;
  z-index: 22;
}
.president:before {    /* create a full-height inline block pseudo=element */
  content: ' ';
  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
  height: 100%;
}
.president img  {
  display: inline-block;
  vertical-align: bottom;  /* vertical alignment of the inline element */
}


.text{
	width: calc(100vw * 257/1903);
	position: absolute;
	margin-left: calc(100vw * 570/1903);
	z-index: 13;
  top: 23%;
}

.e_text{
  position: absolute;
  color: rgba(255,255,255,.6);
  font-size: 24px;
  line-height: 30px;
  bottom: calc(100vw * 50/1903);
  margin-left: calc(100vw * 480/1903);
  z-index: 23;
}

.leaves{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.leaf{
	position: absolute;
	transform-origin: 50% 50%;
	top: -50px;
}

.l1{
	z-index: 14;
	animation: leaf_1 20s infinite linear;
	/*animation-delay: 2s;*/
}

@keyframes leaf_1 {
  from {
    top: 10vh;
    left: calc(-100vw * 320/1903);
  }

  to {
    top: calc(100vh + 200px);
    left: calc(100vw * 820/1903);
  }
}

.l2{
	z-index: 15;
	animation: leaf_2 29s infinite linear;
}

@keyframes leaf_2 {
  from {
  	left: calc(100vw * -320/1903);
    top: -150px;
  }

  to {
    top: calc(100vh + 200px);
    left: calc(100vw * 1620/1903);
  }
}

.l3{
	transform: scale(.8);
	animation: leaf_3 22s infinite linear;
	left: calc(100vw * 420/1903);
}

@keyframes leaf_3 {
  from {
  	left: calc(100vw * -320/1903);
    top: 50px;
  }

  to {
  	left: 100vw;
    top: calc(100vh + 200px);
  }
}

.l4{
	transform: scale(.5);
	animation: leaf_4 35s infinite linear;
	left: calc(100vw * 1420/1903);
}

@keyframes leaf_4 {
  from {
  	left: 30vw;
    top: -400px;
  }

  to {
  	left: calc(100vw + 220px);
    top: calc(100vh + 200px);
  }
}

.leaf img{
	transform-origin: 50% 50%;
	
}

.l1 img{animation: leaf_rotate_1 10s infinite linear;}
.l2 img{animation: leaf_rotate_2 29s infinite linear;}
.l3 img{animation: leaf_rotate_3 22s infinite linear;}
.l4 img{animation: leaf_rotate_4 35s infinite linear;}

@keyframes leaf_rotate_1 {
  	0% {transform: rotate(0);}
  	50% {transform: rotate(10deg);}
  	100% {transform: rotate(0);}
}

@keyframes leaf_rotate_2 {
  	0% {transform: rotate(0);}
  	25% {transform: rotate(-30deg);}
  	50% {transform: rotate(0);}
  	75% {transform: rotate(30deg);}
  	100% {transform: rotate(0);}
}

@keyframes leaf_rotate_3 {
  	0% {transform: rotate(0);}
  	50% {transform: rotate(-60deg);}
  	100% {transform: rotate(0);}
}

@keyframes leaf_rotate_4 {
  	0% {transform: rotate(0);}
  	50% {transform: rotate(-90deg);}
  	75% {transform: rotate(-45deg);}
  	90% {transform: rotate(-60deg);}
  	100% {transform: rotate(0);}
}

.mr_pages{
  text-align: center;
  margin: 50px auto 0;
}
.mr_pages a {
  color: #000000;
  font-size: 16px;
  text-decoration: none;
}
.mr_pages a.selected {
  color: #2c7825;
  text-decoration: underline;
}
.mr_pages a.selected:hover {
  text-decoration: none;
}
@media only screen and (max-height: 800px) {
  .president img {
    width: 80%;
  }
}
@media only screen and (max-width: 1300px) {
  .text{
    width: 15%;
  }
}
@media only screen and (max-width: 990px) {
  .text{
    width: 20%;
    margin-left: 20%;
  }
}
@media only screen and (max-width: 768px) {
	.president{
		width: 100%;
		margin-left: -30%;
		left: 50%;
		bottom:0;
	}
  .president img {
    width: 100%;
  }

	.text{
		width: 34%;
		margin-left: 8%;
    top: 15%;
	}
  .e_text {
    margin-left: 6%;
    font-size: 18px;
  }
}