@charset "utf-8";
/* CSS Document */
html{}

.logomain{
	max-width: 400px;
}


body{
	background: url(pics/buildings.png) no-repeat left center fixed;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;
	/*min-height: 100vh;*/
	display: flex;
	flex-direction:row;
	height: 100%;
	width: 100%;
	overflow: hidden;

	margin-top: 3vh;
	/*margin: 0,0,10px,0;*/
}
.left{
	display: flex;
	flex-direction:column;
	width:25%;
}
.cent{

	display: flex;
	flex-direction:column;
	width: 50%;
}
.right{

	display: inline-flex;
	flex-direction:column;
	justify-content: flex-end;	
	align-items: center;
	width: 25%;
	height:100vh;
}

#dot{

    margin-bottom: 10%;
    margin-left: 10%;
}

@media (min-width: 901px) {
.balloon{
	z-index: 10;
	min-width: 30%;
	display: block;
	position: absolute;
	top:30%;
	left:85%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%); 	
 	-webkit-animation: animate ease-in-out 5s infinite;
 	animation: animate ease-in-out 6s infinite;
}
.bal{
	display: inline-block;
	animation: 5s ease-out 0s 1 slideInFromBot;

}

@keyframes animate
{
	0%
	{
		transform: translate(-50%,-50%) rotate(3deg);
	}
	50%
	{
		transform: translate(-50%,-50%) rotate(-3deg);
	}
	100%
	{
		transform: translate(-50%,-50%) rotate(3deg);
	}
}
@keyframes slideInFromBot {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
}

@media (max-width: 900px) {
  body{
	background: url(pics/buildings.png) no-repeat left center fixed;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;
	/*min-height: 100vh;*/
	display: flex;
	flex-direction:column;
	height: 100%;
	width: 100%;
	max-width: 100vh;
	overflow: hidden;

	margin-top: 3vh;
	/*margin: 0,0,10px,0;*/
}
a{
	font-size: 1em;
}

.logomain{
	max-width: 300px;
}

#dot{

    display: none;
}
.left{
	display: flex;
	flex-direction:column;
	width:25%;
}
.logcon{
	margin-left: -30%;
	transform:scale(0.7);
}

ul{
	display:flex;
	flex-direction:column;
	justify-content:space-evenly;
	list-style-type: none;
	width:100%;
	padding: 0;
	margin-left: 10%;
}

ul li {
	margin-bottom: 5vh;
}
.cent{

	display: flex;
	flex-direction:column;
	width: 50%;
}
.right{

	display: inline-flex;
	flex-direction:column;
	justify-content: flex-end;	
	align-items: center;
	width: 25%;
	height:100vh;
}
.balloon{
	z-index: 10;
	min-width: 20%;
	max-width: 40%;
	display: block;
	position: absolute;
	top:25%;
	left:60%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%); 	
 	-webkit-animation: animate ease-in-out 5s infinite;
 	animation: animate ease-in-out 6s infinite;
}
.bal{
	width: 85vw;
	display: inline-block;
	animation: 5s ease-out 0s 1 slideInFromBot;

}
@keyframes animate
{
	0%
	{
		transform: translate(-50%,-50%) rotate(3deg);
	}
	50%
	{
		transform: translate(-50%,-50%) rotate(-3deg);
	}
	100%
	{
		transform: translate(-50%,-50%) rotate(3deg);
	}
}
@keyframes slideInFromBot {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
}

@media (max-width: 414px) {
	ul{
	display:flex;
	flex-direction:column;
	justify-content:space-evenly;
	list-style-type: none;
	width:100%;
	padding: 0;
	margin-left: 20%;
}


}


}