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

body{
    height:7000px;
}

.container {
    z-index: 1;
    position: relative;
    float: left;
    display:block;
    margin:2%;
    width: 96%;
    align-content: center;
    justify-content: center;
    text-align: center;
    
    
}
#F{
	color:#000;
}
#R{
	color:#000;
}
#N {
    animation:N  8s ease-in-out infinite alternate;
    transform-origin: center;
}#O {
    animation:O  8s ease-in-out infinite alternate;
    transform-origin: center;
}#W {
    animation:W  8s ease-in-out infinite alternate;
    transform-origin: center;
}

@keyframes N {
    0% { 
        transform:scale(.8)
        
    }
    100% {
        transform: scale(1.2)
    }

}
@keyframes O {
    0% { 
        transform:scale(.8)
        
    }
    100% {
        transform: scale(1.2)
    }

}
@keyframes W {
    0% { 
        transform:scale(.8)
        
    }
    100% {
        transform: scale(1.2)
    }

}

.hero{
	margin-top: 50px;
    box-shadow: 0 3px 15px #000;
    margin-bottom:25vh;
	height:600px;
	width: 100%;
	line-height: 60px;
	align-items: center;
	

}
#myVideo {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: -3;
  }


.branch{
	padding-top: 20px;
	display: inline-flex;
	justify-content: space-between;
	width:40%;
	
}
.branch {
	animation: 5.5s anim-branch ease-out;
  }
  @keyframes anim-branch {
	0% {
	  opacity: 0;
	  transform: translateY(70%);
	}
	20% {
	  opacity: 0;
	}
	50% {
	  opacity: 0;
	  transform: translateY(0%);
	}
	100% {
	  opacity: 1;
	  transform: translateY(0%);
	}
  }
.fancy{
	padding-top:100px;
		height:100%;
		width:100%;
		text-align:center;
		align-items: center;
	
}
.black{
	width:50%;
	background-color: #000;
	color:#FFF;
	font-size: 35pt;
	margin:0;

}
.black SVG{
	margin-top:50px;
}
.black p{
	margin:0 0 80px;
}
.white{
	width:50%;
	background-color: #FFF;
	color:#000;
}
.head{
	margin-top: 100px;
}
.t1{
	font-size: 45pt;
	text-align: left;
	margin:50px 0 0 50px;
	
}
.t2{
	font-size: 20pt;
	margin:10px;
	
}
.t3{
	font-size: 45pt;
	text-align: right;
	margin:10px 50px;
	
}


.comvis {
	height: auto;
	width:auto;
	margin-top: 200px;
    display: flex;
	flex-direction: row;
	position:relative;
	border-bottom:solid 2px #32e317;
	box-shadow: 0 0 5px  #FFF, 0 0 20px #FFF;

	
}


.comvis img{
    width:100%;
	height:auto;
	opacity: 0.8;
	filter:blur(5px);
}

.comvis img:hover {
	opacity: 1;
	transition: 1s ease;
	filter:blur(0px);
	box-shadow: 0 0 5px  #32e317, 0 0 20px #32e317;
}
.comvis a:link{
	cursor: pointer;

}
.comvis a:hover{
	width:100%;
	opacity: 1;
}
  .vistxt{
	width:100%;
	text-align: center;
	 font-size: 30px;
	 font-weight: bold;
	 color: #FFF;
	
}

img {
	width:100%;
  }
  

.qtxt{
	font-style:italic;
	font-weight:lighter;
	color:#fff;
	font-size: 30px;
	text-align: center;
	margin-bottom: 10px;

}

.about-banner {
	display: flex;
	width:100%;
	margin-top: 200px;
	margin-bottom: 200px;
    
}

.square{
    display: flex;
    width:100%;
    
}

.square1 {
    position: relative;
    display:block;
    width:30%;
	margin-left: 5%;
	margin-right: 5%;
    color:#000;
    text-align: center;
    align-content: center;
    box-shadow: 0 3px 15px #000;
   
}

.square1 img{
	width:100%;
	height:auto;
	box-shadow: 0 0 5px  #FFF, 0 0 20px #FFF;
}
.square1 img:hover {
	box-shadow: 0 0 5px  #32e317, 0 0 20px #32e317;
}
.square2 {
	margin-top: 100px;
    position: relative;
    display:block;
    width:100%;

    text-align: left;
    font-size:50px;
    color: #FFF;
	
   
}
.testi{
	width:100%;
	height:auto;
	display: flex;
	flex-direction: row;
}
.square3 {
    margin-left: 5%;
	margin-right: 5%;
	margin-top: 100px;
    position: relative;
    display:block;
    width:40%;
    text-align: left;
    font-size:30px;
    color: #FFF;
}
.square4 {
    margin-left: 10%;
	margin-right: 10%;
	margin-top: 100px;
    position: relative;
    width:30%;

}
.square4 img{
	width:100%;
	height:auto;
	opacity: .9;
	box-shadow: 0 0 5px  #FFF, 0 0 20px #FFF;
}
.square4 img:hover {
	box-shadow: 0 0 5px  #32e317, 0 0 20px #32e317;
}

 
.bodytxt{
    height:100px;
    color:#FFF;
    text-align:left;
    font-size: 30px;
    line-height: 50px;
}
.bodytxt2{
    margin: 100px 20%;
	text-align: justify;
	width:60%;
    color:#000;
    font-size: 18pt;
    line-height: 25pt;
}


 .buttn {
    bottom: 5%;
    color:#FFF;
    font-size: 2.5rem;
     
}

.buttn a:link {
     text-decoration: none;
	 cursor: pointer;
	 color: #32E317;
	 text-align: center;
     border: 3px solid #32E317;
	 font-weight:400;
     letter-spacing: 4px;
     padding:10px 20px;
    
	 
}


.buttn a:visited {
	border-color: #32E317;
    color:#32E317;
    background-color: transparent;
	
}
.buttn a:hover {
	text-decoration: none;
	background-color: #32E317;
	color: #000;
	box-shadow: 0 0 20px  #32E317, 0 0 30px #32E317;
	box-shadow: 0 0 10px #32E317, 0 0 40px #32E317, 0 0 50px #32E317;
	
}

.aboutbutt{
	position: absolute;
	left:0;
    margin-top: 50px;
	color:#FFF;
	text-align: left;
	font-size: 30px;
     
}
    

.aboutbutt a:link {
     text-decoration: none;
	 cursor: pointer;
	 color: #32E317;
	 text-align: left;
     border: 2px solid #32E317;
	 font-weight:400;
     padding:5px 10px;
    
	 
}


.aboutbutt a:visited {
	border-color: #32E317;
    color:#32E317;
    background-color: transparent;
	
}
.aboutbutt a:hover {
	text-decoration: none;
	background-color: #32E317;
	color: #000;
	box-shadow: 0 0 20px  #32E317, 0 0 30px #32E317;
	box-shadow: 0 0 10px #32E317, 0 0 40px #32E317, 0 0 50px #32E317;
	
}
.buttn2{
	display: none;
}

.simon{
    display: block;
    text-align: left;
    color:#FFF;
    font-size: 50px;
    font-weight: bolder;
    margin-left: 0px;
    letter-spacing: 20px;
    margin-top: 100px;
    
}
.simon1{
    display: block;
    text-align: left;
    color:#32E317;
    font-size: 50px;
    font-weight: bolder;
    margin-left: 10%;
    letter-spacing: 20px;
    margin-top: 100px;
}
	.simon1 a:link {
		text-decoration:none;
		color:#32E317;
	}
	.simon1 a:visited {
	
		color:#32E317;
	}
	

.contact{
    font-family: 'Roboto', sans-serif;
    width:50%;
	height: auto;
}
.title {
    text-align:center;
    width:100%;
    top:200px;
    font-size: 2.5rem;
    letter-spacing:10px;
    font-weight: bolder;
	color:#FFF;
}
.form {
    
    display:flex;
    flex-direction:column;
    align-items:center;
    width:80%;
    margin:10%;
    height:50px;
    position:relative;
    overflow: hidden;
  
    
}

.form input {
	border-radius:5px;
    width:100%;
    height:100%;
    color: #FFF;
    padding-top: 20px;
    border: none;
    outline: none;
    font-size: 30px;
	background-color: #151515;
    
}

.form label {
    position:absolute;
    bottom:0px;
    left:0%;
    width:100%;
    height:100%;
    pointer-events:none;
   border-bottom: 2px solid #000;
   color: #FFF;
    
}

.form label::after {
    content:"";
    position:absolute;
    left:0px;
    bottom:-2px;
    height: 100%;
    width:100%;
    border-bottom: 3px solid #32E317;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.content-name {
    position: absolute;
    bottom:5px;
    left:10px;
    transition: all 0.3s ease;
    
}


textarea {
  margin-top: 10px;
  height: 150px;
  color:#FFF;
  width:80%;
  margin-bottom: 50px;
  border: 2px solid #000;
  border-radius: 4px;
  background-color: #151515;
  resize: none;
  outline:none;
  
    
    
}

textarea ::after {
    color:#32E317;
    
}

.form input:focus + .lable-name .content-name, .form input:valid + .lable-name .content-name{
    transform:translateY(-150%);
    font-size: 14px;
    color:#32E317;
    
}

.form input:focus + .lable-name::after,
.form input:valid + .lable-name::after {
    transform: translateX(0%);
}


.info{
    width:100%;
    display:block;
    text-align:center;
    box-shadow: 0 3px 15px #000;
    padding:50px;
	margin-top: 220px;
	margin-bottom: 200px;
	background-color: #000;
	box-shadow: 0 0 5px #FFF, 0 0 20px #FFF;
    
}
.info-contact{
    width:100%;
    display:flex;
    height:auto;
    text-align:center;
    
}

.map{
    
    flex-direction:column;
    width:50%;
    margin-top:110px;
    
}

.google {
    height:300px;
    width:100%;
    margin-top:20px; 
    border: 100px solid #000;
    background-color: #000;
    padding:5px;
   
    
}

.text {
    display:block;
    text-align: center;
    width:100%;
    height:250px;
	color: #FFF;
    padding-top:50px;
	font-size: 30px;
	line-height: 30pt;
}



button {
    width:200px;
    height:50px;
    color:#000;
}

button:hover {
    outline:none;
    color:#32E317;
    box-shadow: 0 0 10px #32E317, 0 0 20px #32E317;
}


.logo1{
	display:flex;
}
.one{
	font-size:60px;
}
.archtitle{
	font-size: 40px;
	margin-top: 10px;
}

.lineUp {
	animation: 2.5s anim-lineUp ease-out;
  }
  @keyframes anim-lineUp {
	0% {
	  opacity: 0;
	  transform: translateY(80%);
	}
	20% {
	  opacity: 0;
	}
	50% {
	  opacity: 1;
	  transform: translateY(0%);
	}
	100% {
	  opacity: 1;
	  transform: translateY(0%);
	}
  }
  .lineUp1 {
	animation: 5s anim-lineUp ease-in-out;
	animation-delay: 2ms;
  }
  @keyframes anim-lineUp1 {
	0% {
	  opacity: 0;
	  transform: translateY(80%);
	}
	20% {
	  opacity: 0;
	}
	50% {
	  opacity: 1;
	  transform: translateY(0%);
	}
	100% {
	  opacity: 1;
	  transform: translateY(0%);
	}
  }
.hook {
	color: #FFF;
	font-size:80px;
	line-height: 90px;
	text-align: center;
}
.subhook {
	color: #FFF;
	font-size:50px;
	text-align: center;
	animation: forwards;
	animation-delay: 1s ;
}
.action a{
	font-size:30px;
	background-color: #FFF;
	color:#000;
	border:3px solid #32E317;
	padding:10px 30px;
	cursor:pointer;
	text-decoration: none;
	margin:0 20px;
	z-index:2;
}
.action a:hover{
	font-size:30px;
	background-color: #32E317;
	color:#FFF;
	border:3px solid #32E317;
	padding:10px 30px;
	cursor:pointer;
	text-decoration: none;
	
}

.triangles{
	width:100%;
	display:flex;
	flex-direction: row;
	position: absolute;
	justify-content: space-around;
	align-items: center;
	z-index:-3;
	
}

.feature {
	display:flex;
	flex-direction: row;
    width: 100%;
	height:500px;
	margin-bottom: 20vh;
}
.featxt{
	height: 100px;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	color: #FFF;
}
.fea1 {
	display: flex;
	width:30%;
	margin-left: 1.6%;
	margin-right: 1.6%;
}

.fea2 {
	width:30%;
	margin-left: 1.6%;
	margin-right: 1.6%;
}
.fea3 {
	width:30%;
	margin-left: 1.6%;
	margin-right: 1.6%;
}

.fea1 img {
	height: auto;
	box-shadow: 0 0 5px  #FFF, 0 0 20px #FFF;
}
.fea2 img {
	height: auto;
	box-shadow: 0 0 5px  #FFF, 0 0 20px #FFF;
}
.fea3 img {
	height: auto;
	box-shadow: 0 0 5px  #FFF, 0 0 20px #FFF;
}
.fea1 img:hover {
	height: auto;
	box-shadow: 0 0 10px #32E317, 0 0 20px #32E317;
}
.fea2 img:hover {
	height: auto;
	box-shadow: 0 0 10px #32E317, 0 0 20px #32E317;
}
.fea3 img:hover {
	height: auto;
	box-shadow: 0 0 10px #32E317, 0 0 20px #32E317;
}






@keyframes upg {


	0% {
		transform: translateY(0);
		opacity:.5;
	}50% {
		transform: translateY(2);
		opacity:.5;
	}100% {
		transform: translateY(-98vh);
		opacity:.5;
	}
}

@media screen and (max-width:1620px){	

	
	.square2 {
		margin-top: 50px;
		position: relative;
		display:block;
		width:100%;
		color:#000;
		text-align: left;
		font-size:50px;
		color: #FFF;
		
	   
	}
	
}



@media screen and (max-width:1255px){
    
    body{
        height:9000px;
    }
	
	


.black{
	display: flex;
	flex-direction: column;
	width:50%;
	background-color: #000;
	color:#FFF;
	font-size: 35pt;
	margin:0;

}
.black SVG{
	margin-top:50px;
	width:80%;
	margin: 50px;
	
}
.black p{
	color:#FFF;
	margin:0 0 80px;
	font-size: 20pt;
}
.white{
	width:50%;
	min-width:420px;
	background-color: #FFF;
	color:#000;
}
.head{
	margin-top: 100px;
	display: flex;
	flex-direction: column;
}
.t1{
	font-size: 35pt;;
	margin:50px 0 0 50px;
	
}
.t2{
	font-size: 15pt;
	margin:10px;
	
}
.t3{
	font-size: 35pt;
	margin:10px 50px;
	
}
	
	.bodytxt2{
	margin-top: 15px;
	width:69%;
    display:flex;
	text-align:justify;
    color:#000;
    font-size: 18pt;
    line-height: 25pt;
}
	
    
    



    
	
.buttn a:link {
	 font-weight:100;
     letter-spacing: 2px;
     padding:0px 20px;
}


.buttn a:visited {
	border-color: #32E317;
    color:#32E317;
    background-color: transparent;
	
}
.buttn a:hover {
	text-decoration: none;
	background-color: #32E317;
	color: #000;
	box-shadow: 0 0 20px  #32E317, 0 0 30px #32E317 ;
	
}
    .info {
        height:1600px;
        display:block;
    }
  .info-contact {
        display:block;
    }
  
    .map {
        width:100%;
        height:auto;
        margin-top:0;
    }
    
    .contact{
        width:100%;
        height:700px;
        
    }
    
    .text {
        margin-top:0;
        
    }
    .address ul li p {
        font-size:18px;
    }
    .simon{
    display: block;
    text-align: left;
    color:#FFF;
    font-size: 50px;
    font-weight: bolder;
    margin-left: 0px;
    letter-spacing: 10px;
    margin-top: 100px;
    
}
.simon1{
    display: block;
    text-align: left;
    color:#32E317;
    font-size: 50px;
    font-weight: bolder;
    margin-left: 10%;
    letter-spacing: 10px;
    margin-top: 100px;
}
	.simon1 a:link {
		text-decoration:none;
		color:#32E317;
	}
	.simon1 a:visited {
	
		color:#32E317;
	}


	.fancy{
		padding-top:100px;
		display:flex;
		flex-direction: column;
		height:100%;
		width:100%;
		text-align: center;
	}
.one{
	font-size:50px;
	color:#000;
}
.archtitle{
	font-size: 30px;
	margin-top: 5px;
	color:#000;
}
.hook {
	font-size:60px;
	color:#FFF;
	line-height: 60px;
}
.subhook {
	font-size:30px;
	color:#FFF;
	line-height: 50px;
}
.action a{
	font-size:30px;
	background-color: #FFF;
	color:#000;
	border:3px solid #32E317;
	padding:10px 30px;
	margin:20px;
	cursor:pointer;
	text-decoration: none;
}
.action a:hover{
	font-size:30px;
	background-color: #32E317;
	color:#FFF;
	border:3px solid #32E317;
	padding:10px 30px;
	cursor:pointer;
	text-decoration: none;
	
}

.triangles{
	width:100%;
	display:flex;
	flex-direction: row;
	position: absolute;
	justify-content: space-around;
	align-items:center;
	z-index:-5;
	
}

    .branch{
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width:50%;
	margin:0 25%;
	
}
	.action{
		margin:10px;
	}
	.buttn2{
		display: none;
	}
	.comvis img{
		width:100%;
		height:auto;
		opacity: 1;
		filter:blur(0px)
	}
	
	.comvis img:hover {
		opacity: 1;
		transition: 1s ease;
		filter:blur(0px)
	}
	.square1 {
		width:50%;
		margin-left: 10%;
		margin-right: 40%;
	}
	.square2 {
		position: relative;
		display:block;
		width:50%;
		margin-left: 10%;
		margin-right: 40%;
		color:#000;
		text-align: left;
		font-size:50px;
		color: #FFF;
		line-height: 70px;
		
	   
	}
	.bodytxt{
 
		color:#FFF;
		text-align:left;
		font-size: 20x;
		line-height: 50px;
	}
	  
	.aboutbutt{
		
		margin-top: 20px;
		color:#FFF;
		text-align: left;
		font-size: 30px;
		 
	}
	.feature {
		display:flex;
		flex-direction: column;
		width: 100%;
		height:auto;
		margin-bottom: 200px;
	}
	.featxt{
		height: 100px;
		text-align: center;
		font-size: 30px;
		font-weight: bold;
		color: #FFF;
	}
	.fea1 {
		display: flex;
		width:100%;
		
	}
	
	.fea2 {
		width:100%;
		
	}
	.fea3 {
		width:100%;
		
	}

@media screen and (max-width:780px){
    
    body{
        height:9000px;
    }
	


.black{
	display: flex;
	flex-direction: column;
	width:100%;
	height:700px;
	background-color: #000;
	color:#FFF;
	font-size: 35pt;
	margin:0;
	position: relative;

}
.black SVG{
	margin-top:50px;
	width:80%;
	margin: 50px;
	
}
.black p{
	position: absolute;
	color:#FFF;
	font-size:30pt;
	bottom:55px;
	left:10%;
}
	
.white{
	width:100%;
	min-width:420px;
	height:700px;
	background-color: #FFF;
	color:#000;
}
.head{
	margin-top: 100px;
	display: flex;
	flex-direction: column;
}
.t1{
	font-size: 35pt;;
	margin:50px 0 0 50px;
	
}
.t2{
	font-size: 15pt;
	margin:10px;
	
}
.t3{
	font-size: 35pt;
	margin:10px 50px;
	
}

	.bodytxt2{
	width:80%;
	margin:50px 10%;
    display:flex;
	text-align:justify;
    color:#000;
    font-size: 18pt;
    line-height: 25pt;
}
	
    

   


.buttn a:link {
	 font-weight:100;
     letter-spacing: 2px;
     padding:0px 20px;
}


.buttn a:visited {
	border-color: #32E317;
    color:#32E317;
    background-color: transparent;
	
}
.buttn a:hover {
	text-decoration: none;
	background-color: #32E317;
	color: #000;
	box-shadow: 0 0 20px  #32E317, 0 0 30px #32E317 ;
	
}
	
	.buttn2{
		display:inline;
		font-size: 2.5rem;
		margin-bottom: 50px;
	}
	.buttn2 a:link {
	 text-decoration: none;
	 cursor: pointer;
	 color: #32E317;
	 text-align: center;
     border: 3px solid #32E317;
	 font-weight:400;
     letter-spacing: 4px;
     padding:5px 10px;
}

.buttn2:active {
	
}
.buttn2 a:visited {
	border-color: #32E317;
    color:#32E317;
    background-color: transparent;
	
}
.buttn2 a:hover {
	text-decoration: none;
	background-color: #32E317;
	color: #000;
	box-shadow: 0 0 20px  #32E317, 0 0 30px #32E317 ;
	
}
    .info {
        height:1600px;
        display:block;
    }
  .info-contact {
        display:block;
    }
  
    .map {
        width:100%;
        height:auto;
        margin-top:0;
    }
    
    .contact{
        width:100%;
        height:700px;
        
    }
    
    .text {
        margin-top:0;
        
    }
    .address ul li p {
        font-size:18px;
    }
    .simon{
    display: block;
    text-align: left;
    color:#FFF;
    font-size: 35px;
    font-weight: bolder;
    margin-left: 0px;
    letter-spacing: 10px;
    margin-top: 100px;
    
}
.simon1{
    display: block;
    text-align: left;
    color:#32E317;
    font-size: 35px;
    font-weight: bolder;
    margin-left: 10%;
    letter-spacing: 10px;
    margin-top: 100px;
}
	.simon1 a:link {
		text-decoration:none;
		color:#32E317;
	}
	.simon1 a:visited {
	
		color:#32E317;
	}
	.simon1 a:hover {
	
	}

.one{
	font-size:50px;
	color:#000;
}
.archtitle{
	font-size: 30px;
	margin-top: 5px;
	color:#000;
}
.hook {
	font-size:60px;
	color:#FFF;
	line-height: 60px;
}
.subhook {
	line-height: 50px;
	font-size:30px;
	color:#FFF;

}
.action a{
	font-size:30px;
	background-color: #FFF;
	color:#000;
	border:3px solid #32E317;
	padding:10px 30px;
	margin:20px;
	cursor:pointer;
	text-decoration: none;
}
.action a:hover{
	font-size:30px;
	background-color: #32E317;
	color:#FFF;
	border:3px solid #32E317;
	padding:10px 30px;
	cursor:pointer;
	text-decoration: none;
	
}
.bottomone{
	position: absolute;
	bottom:0;
	right:0;
	width:25%;
	background-color:#000;
	height: 60px;
}
.topone{
	position: absolute;
	top:0;
	right:0;
	width: 0;
	height: 0;
	border-left: 250px solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 200px solid #000;
	
}
.bodyone{
	position: absolute;
	bottom:0;
	right:0;
	width:60px;
	background-color:#000;
	height:600px;
}
.triangles{
	width:100%;
	display:flex;
	flex-direction: row;
	position: absolute;
	justify-content: space-around;
	align-items:center;
	z-index:-5;
	
}
.upgrade1{
	position: absolute;
    bottom:-200px;
	left:15%;
	width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-bottom: 150px solid #DCFCBD;
	animation: upg 5s linear infinite;
	animation-delay: .5s;
	
}
.upgrade2{
	display:none;
}

.upgrade3{
	position: absolute;
    bottom:-200px;
	right:15%;
	width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-bottom: 150px solid #DCFCBD;
	animation: upg 5s linear infinite;
	animation-delay: 2.5s;
	
}
    .branch{
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width:50%;
	margin:0 25%;
	
}
	.action{
		margin:10px;
	}
  
	
	}
	.square{
   
		width:100%;
		flex-direction: column;
		
	}

	.vistxt{
		width:100%;
		text-align: center;
		 font-size: 30px;
		 font-weight: bold;
		 color: #FFF;
		
	}

	.bfr{
		text-align: left;
		right: 500px;
		 font-size: 30px;
		 font-weight: bold;
		 color: #FFF;
	}
	.aftr{
		text-align: right;
		font-size: 30px;
		font-weight: bold;
		color: #FFF;
	} 
	.testi{
		flex-direction: column;
	}
	.square3{
		width:100%;
		width:auto;
	}
	.square3{
		width:100%;
		width:auto;
	}
}
@media screen and (max-width:480px){
    
    body{
        height:15000px;
    }
}