#page {
  margin: auto;
  width: 90%;
}

.row{
clear: both;

}

.content {
  margin: 0 auto 3.333333333333%; /* 32px / 960px */
  padding-top: 100px;
  width: 100%; /* 960px / 960px */
  max-width: 960px; 
  background-color: #f7f3de;
  border-radius: 12px 12px 0 0;
  padding: 0 40px 40px 40px; 

}

.DOGGIES {
	width: 100%;
	max-width: 960px;
	margin: auto; 
	background-color: #A52C33;
	border-radius: 0 0 15px 15px;
	text-align: center;
	position: relative;
	top:-80px;
	padding: 0 40px;
}

.span3 {
  width: 25%;	
  margin: 0;
  float: left;
}


.span4 {
  width: 30%;	
  float: left;
  margin-right: auto;
}

.span9 {
  width: 66.66666666666%;	
  float: left;
}


.span6 {
  width: 50%;	
  margin: 0;
  float: left;	
	
}



.span12 {
  width: 100%; /* 960px / 960px */
  clear: both;

}

.span12.COVID {
	border-bottom: 1px solid #A52C33;
	border-top: 1px solid #A52C33;
	height: 40px;
}

.span12.ANNOUNCMENT{
	padding: 20px;
	background-color: #e1c59a;
	border-radius: 12px;
	max-width: 920px;
}

.span12.PROMO{
	padding: 10px 100px 100px 50px;
	background-color: #f1e3b1;
	border-radius: 12px;
	max-width: 810px;
	background-image: url(../../ASSETS/GRAPHICS/PROMOS/leaves.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 50%;
	box-shadow: #888888 5px 5px 10px;
}

.span12.kids{
	padding: 10px 10px 10px 10px;
	background-color: #A8CF45;
	border-radius: 12px;
	max-width: 940px;
	background-image: url(../../ASSETS/GRAPHICS/PROMOS/kids.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
	box-shadow: #888888 5px 5px 10px;
	min-height: 1020px;
	text-align: center;
}

.span12.KOKO{
	text-align: center;
	padding: 30px;
	background-color: #f1e3b1;
	border-radius: 12px;
	border: 3px #89ABBA solid;
	max-width: 900px;
	height: auto;
	background-color: #A6C0CB;
	box-shadow: #888888 5px 5px 10px;
	
	display: flex;
	flex-direction: column;
	min-height: 20vh;
	
	
}

.span12.STAFF{
	height: auto;
	display: flex;
	flex-direction: column;
	min-height: 25vh;
	
	
}


img {
  max-width: 100%;
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
 
 .content {

   padding: 0 20px 40px 20px; 
 
 }
 
 .span12.ANNOUNCMENT{
	padding: 2%;
	max-width: 93%;
	
}

.span12.PROMO{
	padding: 2%;
	max-width: 93%;
	min-height: 350px;
	align-content: center;
}

.span12.kids{
	padding: 2%;
	max-width: 93%;
	min-height: 620px;
	align-content: center;
}

.span12.KOKO{
	padding: 2%;
	max-width: 93%;
	align-content: center;
	clear: both;
}

.KOKOVIDEO {
width: 100%;	
height: 480px;
margin-bottom: 50px;

}

.KOKOLOGO{
padding-left: 33.333%;
}


.PROMO H1 {
	font-size: 36px;
}

.PROMO p {
	font-size: 16px;
	max-width: 78%;
}

p.BTN.PROMO {
	font-size: 14px;
}


.kids H1 {
	font-size: 36px;
	margin-bottom: 600px;
}

.kids p {
	font-size: 20px;
	max-width: 100%;
	margin-bottom: 0px;
}

p.BTN.kids {
	font-size: 14px;
}



p.COVID  {
	text-align: left;
	float: none;

}

.span12.COVID {
	height: auto;
}
 
 .content {
  margin: 0 auto 1.25%; /* 4px / 320px */
  width: 97.5%; /* 312px / 320px */
}

.DOGGIES {
	width: 97.5%;
	
}

.span3{
  width: 21.666666666667%; /* 208px / 960px */	
  margin: 0 1.25% 0 1.25%; /* 12px / 960px */	
  float: left;
  padding-bottom: 12px;
}


.span4{
  width: 97.5%; /* 288px / 960px */	
  margin: 0 1.25% 0 1.25%; /* 12px / 960px */	
  float: left;
  
}



.span6 {
  width: 46.875%; /* 440px / 960px */	
  margin: 0 1.25% 0 1.25%; /* 12px / 960px */	
  float: left;
}

.ENTRIES .span6 {

  width: 97.5%; /* 312px / 320px */	
  margin: 0 1.25% 0 1.25%; /* 4px / 320px */	

}

h1.COVID

  {
	float: none;
	margin-top: 15px;
}

ul.COVID {
	float: none;
	margin-left: 20px;
	margin-bottom: 20px;

}

.KOKOMETERCONTAIN{

--predefined-height: 340px; 

}


}


@media screen and (min-width: 0px) and (max-width: 640px) {


h4.top  {
	margin-top: 30px;
	
}

ul {
	float: none;
	
}

ul.COVID {
	margin-left: 20px;
	margin-bottom: 10px;
	float: none;
	
}

h1.COVID  {
	float: none;
	margin-top: 15px;
	
}

.span12.COVID {
	border-bottom: 1px solid #A52C33;
	border-top: 1px solid #A52C33;
	height: auto;

}

.span12.ANNOUNCMENT{
	padding: 2%;
	max-width: 93%;
	
}

.span12.PROMO{
	padding: 2%;
	max-width: 93%;
	min-height: 290px;
	background-size: 45%;
}

.span12.KOKO{
	padding: 2%;
	max-width: 93%;
	text-align: center;
}

.KOKOVIDEO {
width: 100%;
height: 320px;
margin-bottom: 50px;
}

.KOKOLOGO{
align-content: center;
width: 100px;
padding-left: 25%;

}

.KOKO p {
padding-right: 0px;
}

.KOKOITEM{
	background-size: 25%; 

}


.PROMO h1 {
font-size: 24px;
}

.PROMO h2 {
font-size: 20px;
}

.PROMO p {
	font-size: 16px;
	max-width: 300px;
}

p.BTN.PROMO {
	font-size: 14px;
}

.span12.kids{
	padding: 2%;
	max-width: 93%;
	min-height: auto;
	background-size: 100%;
}

.kids H1 {
	font-size: 24px;
	margin-bottom: 260px;
}

.kids p {
	font-size: 14px;
	margin-bottom: 0px;
	padding: 0 5px 0 5px;
	line-height: 16px;
	max-width: auto;
}

.BTN.kids a {
font-size: 12px;
padding: 5px;
}


li.PROMO {
font-size: 18px;
line-height: 22px;

}

.span3 img{
margin: 0 35% 50px;
max-width: 30%;
text-align: center;

	
}

 .content {
  margin: 0 auto 1.25%; /* 4px / 320px */
  width: 97.5%; /* 312px / 320px */
  padding: 0 2% 40px 2%; 
  }
  
  .DOGGIES {
	width: 97.5%;
	padding: 0 2% 40px 2%; 
	
}

  
  #page {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 98%;
}

.span3,
.span4,
.span6{
  width: 97.5%; /* 312px / 320px */	
  margin: 0 1.25% 0 1.25%; /* 4px / 320px */	

}

.ENTRIES .span6 {

  width: 97.5%; /* 312px / 320px */	
  margin: 0 1.25% 0 1.25%; /* 4px / 320px */	

}


.span4{
  padding-bottom: 12px;	

}

.span3{
  margin-bottom: 12px;	

}

.slider p {
	font-size: 18px;
}

.slider {
  height: 100px; /* Update to your slider height */
}

  
.nav {
	  font-size: 12px;
	  margin: 0 1.25% 0 1.25%; /* 4px / 320px */	
	
}

.video-wrapper {
  /* Telling our absolute positioned video to 
  be relative to this element */
  position: relative;

  width: auto;
  height: 210px;

  /* Will not allow the video to overflow the
  container */
  overflow: hidden;

}

.hero-unit h1 {
  	font-family: PTSerifItalic;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	margin: 0 0 0 20px;
	position: relative;
	top: 140px;
	max-width: 90%;
	
}

.logo {
	margin: 20px 0 0 10px;
	height: auto;
	width: 160px;
}

.hero-unit {
/* background-image: url(../GRAPHICS/PV_kokyunage.jpg); */
background-position: center center;
height: 210px;
margin-bottom: 20px;
background-position-x: -240px;
background-position-y: -60px;

}

#hero-video {
  width: 100%;
  height: auto;
  fit: cover;
  position: absolute;
  top:0;
  left: 0;
  z-index: 10;
}

div.BTN {
height: 90px;
}

.KOKOMETERCONTAIN{

--predefined-height: 180px; 



}
}