@charset "utf-8";

/*-----------анімація--------------*/
.appear{
	animation: 0.4s appears, 0.4s move100;
}

@keyframes appears{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 100;
	}
}

@keyframes move300 {
  0% {
    margin-left: 300px;
  }
  100% {
    margin-left: 0px;
  }
}

@keyframes move100 {
  0% {
    margin-left: 100px;
  }
  100% {
    margin-left: 0px;
  }
}

/*-----------написи першого вікна--------------*/



@media (min-width: 767px) {
  .page-title h1{
   font-size: 30px;
  animation: 0.5s backwards appears ease-out 1s, 0.5s backwards move100 ease-out 1s;	  
  }
	
	.page-title h1:before{
	background-color: #FF2C34;
    width: 130px;
    height: 3px;
    content: '';
    position: relative;
   top: 135px;
	box-sizing: border-box;
	transform: translateX(-50%);
    left: 50%;
	display: block;	
	}
	
 .page-title p{
   font-size: 18px;
  animation: 0.5s backwards appears ease-out 1.5s, 0.5s backwards move100 ease-out 1.5s;	  
  }
	
	.page-title button{
  animation: 0.5s backwards appears ease-out 1.8s, 0.5s backwards move100 ease-out 1.8s;	  
  }	
}


@media (min-width: 1200px) {
  .page-title h1{
   font-size: 45px;
  animation: 0.5s backwards appears ease-out 1s, 0.5s backwards move300 ease-out 1s;	  
  }
  .page-title h1:before{
	background-color: #FF2C34;
    width: 200px;
    height: 3px;
    content: '';
    position: relative;
    top: 185px;
	box-sizing: border-box;
	transform: translateX(-50%);
    left: 50%;
	display: block;	
	}
	
 .page-title p{
   font-size: 20px;
  animation: 0.5s backwards appears ease-out 1.5s, 0.5s backwards move300 ease-out 1.5s;	  
  }
	
	.page-title button{
  animation: 0.5s backwards appears ease-out 1.8s, 0.5s backwards move300 ease-out 1.8s;	  
  }		
}



@media (min-width: 1400px) {
  .page-title h1{
   font-size: 60px;
  animation: 0.5s backwards appears ease-out 1s, 0.5s backwards move300 ease-out 1s;	  
  }
  .page-title h1:before{
	background-color: #FF2C34;
    width: 250px;
    height: 4px;
    content: '';
    position: relative;
    top: 250px;
	box-sizing: border-box;
	transform: translateX(-50%);
    left: 50%;
	display: block;	
	}
	
 .page-title p{
   font-size: 25px;
  animation: 0.5s backwards appears ease-out 1.5s, 0.5s backwards move300 ease-out 1.5s;	  
  }
	
	.page-title button{
  animation: 0.5s backwards appears ease-out 1.8s, 0.5s backwards move300 ease-out 1.8s;	  
  }		
}




@media (max-width: 766.99px) {
  .page-title h1{
   font-size: 35px;
  animation: 1s appears, 1s move100;	  
  }
	
	.page-title h1:before{
	background-color: #FF2C34;
    width: 100px;
    height: 3px;
    content: '';
    position: relative;
   top: 150px;
	box-sizing: border-box;
	transform: translateX(-50%);
    left: 50%;
	display: block;	
	}
	
 .page-title p{
   font-size: 18px;
  animation: 0.5s backwards appears ease-out 1s, 0.5s backwards move100 ease-out 1s;	  
  }
	
	.page-title button{
  animation: 0.5s backwards appears ease-out 1.3s, 0.5s backwards move100 ease-out 1.3s;	  
  }	
}


.title{
 text-align: center;
}


.title::after {
background-color: #FF2C34;
    width: 200px;
    height: 3px;
    content: '';
    position: relative;
   top: 25px;
	box-sizing: border-box;
	transform: translateX(-50%);
    left: 50%;
	display: block;	
	}

.draggable-text {
  cursor: move;
  user-select: none;	
}