

body.container{
  background-image: linear-gradient(rgb(255,255,255),90%,rgb(248,171,165));
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  /*border:1px black solid;*/
}
/*ul {
  list-style-type: none;
  padding:0rem 0rem 0rem 0rem;
  overflow: hidden;
  
}
#nav { 
    display: table;
    height: 60px;
    width: 100%;
}

#nav li {
    display: table-cell;
    width: 33.333%;  /* (100 / numItems)% 
    text-align: center;
    background: rgb(86,196,195);
    border-right: 1px solid #fff;
	border-radius:0.25rem;
    white-space: nowrap;
}​


/*li {

	text-align:justify;
	margin-left: auto;
	margin-right:auto;
}

li a {
	
	font-family: 'Inter', sans-serif;
	font-size:2rem;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	display: block;
	color: rgb(255,255,255);
	text-align: center;
	padding: 1rem;
	text-decoration: none;
	border-radius:0.25rem;
	
}

li a:hover {
  background-color: rgb(8,113,98);
}*/
.header{
	width:100%;
	margin-left: auto;
	margin-right: auto;
}

h1 {
	position: relative;
	display:block;
	width:100%;
	font-family: 'Inter', sans-serif;
	text-align:center;
	font-weight: 850;
	color: rgb(8,113,98);
	/*border:2px blue solid;*/
}
/*h1.intro{
	
	width:100%;
	border:2px black solid;
	text-align:center;
	text-height:5rem;
	letter-spacing:3rem;
	padding-right: 0rem;
	
}*/

h2 {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 2rem;
    color: rgb(84,196,197);
	/*border:2px blue solid;*/
	text-align:right;
	padding-right: 2rem;
	
}
.column {
  display:grid;
  grid-auto-flow: column;
  /*border:3px yellow solid;*/
  width: 100%;
  padding: 15px;
 /* border: 1px black solid;*/
}
.column img{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

table{
	min-width:100%;
	font-family:'Inter', sans-serif;
	font-size: 1em;
	color:rgb(8,113,98);
	text-align: center;
	margin:1rem;
	/*border: 2px red solid;*/
	
}
.time{
	width:33%;
}
#date{
	font-weight:700;
	vertical-align:top;
	text-align:center;
	border-top:1px solid rgb(8,113,98);
}
#price{
	font-size: x-large;
	color:rgb(192, 11, 11);
}
#freeclass{
	vertical-align:top;
	text-align:center;
}
.button{
	display: flex;
	justify-content: center;
	
}
.btn{
	width:40%;
	margin-left: auto;
	margin-right: auto;
	padding: 1rem;
	font-family: 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 400;
	letter-spacing:0.5rem;
	text-shadow: -1px -1px 0 rgb(8,113,98), 1px -1px 0 rgb(8,113,98),
	 -1px 1px 0 rgb(8,113,98), 1px 1px 0 rgb(8,113,98);
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 8px;
    text-decoration: none;
    color: rgb(255, 255, 255);
	border-style: solid; 
	border-color: rgb(8,113,98);
    background-color:transparent;
    /*border-color: rgba(0,0,0,0.2);*/
	transition: 0.3s;
	
}
.btn2{

	padding: 0.5rem;
	font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
	line-height: 1.6;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

	text-decoration: none;
	color:1px rgb(8,113,98) solid;
    background-color:transparent;
    /*border-color: rgba(0,0,0,0.2);*/
	transition: 0.3s;
	
}
.btn:hover {
	transform: scale(1.2);
}
.btn2:hover{
	transform: scale(1.2);
}

.tail{
	width: 100;
	/*border: 1px black solid;*/
	font-size: large;
}
.yoga-girl {
	position:absolute;
	width:50%
}

.yoga-girl {
	position:absolute;
	top:50%;
	
}

.yoga-girl img{
	position:absolute;
	left:200px;
	z-index:1;	
	filter:drop-shadow( 1rem 1rem 1rem rgba(253, 195, 195,1))
}
.yoga-dude {
	position: fixed;
	bottom:1%;
	width:100%
}

.yoga-dude img{
	display:block;
	z-index:2;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 767px) {
   /* #nav li {
        display: block;
        width: 100%;
    }*/
	h1 {
	width:100%;
	font-size:2rem;
	/*border:1px black solid;*/
	}

	h2 {
	display: block;
	font-size: 1.5rem;
	/*border:2px blue solid;*/
	text-align:center;
	padding-right: 0;
	}
	table tr, td{
		font-size: 1rem;
		align-items: center;
	}
	.time{
	width:20%;
	}
	.column{
	display: block;
	padding:0;
	width: 100%;
	height:auto;
	}	
	.btn{
	width: auto;
	}
	.tail{
	color:black;
	font-size:0.5rem;
	}
}
/*--END OF MEDIA QUERY----------------------------------------------------------*/

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.waves{
	position: fixed;
	bottom:0;
	width:100%;
	z-index: -1;
	/*border:1px black solid;*/
}
svg path{
	animation:pathAnim 30s; 
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
svg path:nth-child(2){
	animation-delay: 1s
}
svg path:nth-child(3){
	animation-delay: 3s
}
svg path:nth-child(4){
	animation-play-state: paused;
}

@keyframes pathAnim{
	0%{
		d: path("M0,192	C220,100,440,100,660,192 C880,290,1100,290,1320,192	L1320 500 L0 500");
	}
	25%{
		d: path("M0,100	C220,100,440,292,660,292 C880,292,1100,100,1320,100	L1320 500 L0 500");
	}
	50%{
		d: path("M0,192	C220,290,440,290,660,192 C880,100,1100,100,1320,192	L1320 500 L0 500");
	}
	75%{
		d: path("M0,292	C220,292,440,100,660,100 C880,100,1100,292,1320,292	L1320 500 L0 500");
	}
	100%{
		d: path("M0,192	C220,100,440,100,660,192 C880,290,1100,290,1320,192	L1320 500 L0 500");
	}
}
