@import url('https://fonts.googleapis.com/css2&family=Lato:ital,wght@0,400;0,700;1,700&display=swap'); 

body { color: #fff; font-size: 100%; background: #000 url(images/bg-peace.png) no-repeat fixed center; text-align: center; }
html {margin:0; font-family: Lato, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;   }
img {max-width:100%; height:auto; border:0; }
img:hover {border:1px; }
* {box-sizing: border-box;}
a:link, a:visited, a:hover, a:active {color:#06F; }
input {color:#555; }
button {background-color:#000; color:#fff; border-radius:10%; border:thin 1px #03F; width:auto; }

h1, h2, h3 { font-family: Papyrus, Parchment, "Lucida Handwriting", Calligrapher, Verdana, fancy; font-weight: 900;   }
h1 {font-size:200%; }
@media only screen and (min-width:601px) and (max-width: 880px) { h1 {font-size:150%; }  }
@media only screen and (max-width: 600px) { h1 {font-size:100%; }  }
h2 {font-size:175%; }
@media only screen and (max-width: 880px) { hw {font-size:135%; }  }
h3 {font-size:150%; }
@media only screen and (max-width: 880px) { h3 {font-size:120%; }  }

#top {width:100%; height:auto; text-align:center; font-size:200%; margin:0; }
#top p {font-size:100%; text-align:left; padding:16px; color:#000; font-style:normal; }
#top h1 {font-style: oblique; }
#main {width:100%; background: #000 url(images/bg-peace.png) no-repeat fixed center; text-align: center; color: #fff; margin:0;  font-style:normal; }
#cont80 {width:80%; margin:0 auto; padding: 18px;  font-style:normal; }
@media only screen and (max-width: 800px) { #cont80 {width:98%; margin:0 auto; padding: 18px; }  }
#ftr {width:100%; text-align:left; font-size:100%; font-style:normal; margin:0; border-top:ridge 2px #CCC; }

.bg, .bgimg-1, .bgimg-1a { background-size:contain; height:100%; width:auto; background-repeat:no-repeat; background-position: center; max-width:100%; max-height:100vh; }
@media only screen and (max-width: 800px) { .bgimg-1, .bgimg-1a  { background-size:contain; height:auto; width:100%;  background-repeat:no-repeat; background-position: center; max-width:100%; } }

.bgimg-1 { background-image: url("/images/Sunflower-2.png"); }
@media only screen and (min-width: 801px) and (max-width: 1600px) {.bgimg-1 { background-image: url("/images/Sunflower-2-1600.png");} }
@media only screen and (max-width: 800px) {.bgimg-1 { background-image: url("/images/Sunflower-2-800.png");} }

.bgimg-1a { background-image: url("/images/Peach-Blossom-2-Imagine-Peace-600.png"); }
@media only screen and (min-width:601px) and (max-width:800px) { .bgimg-1a { background-image: url("/images/Peach-Blossom-2-Imagine-Peace-800.png"); }  }
@media only screen and (min-width:801px) { .bgimg-1a { background-image: url("/images/Peach-Blossom-2-Imagine-Peace.png"); }  }

.bgimg-1-cat, .bgimg-2-cat, .bgimg-3-cat, .bgimg-4-cat, .bgimg-5-cat, .bgimg-6-cat {background-size:contain; width:100%; height:100%; background-repeat:no-repeat; background-position: center; }

.bgimg-1-cat { background-image: url("/images/Sunflower-2-600.png"); }
@media only screen and (min-width: 1800px) { .bgimg-1-cat  {background-image: url("/images/Sunflower-2-800.png"); } }

.bgimg-2-cat {background-image: url("/images/cat-flowers-600.png"); }
@media only screen and (min-width: 1800px)) { .bgimg-2-cat  {background-image: url("/images/cat-flowers-800.png"); } }

.bgimg-3-cat {background-image: url("/images/cat-animals-600.png"); }
@media only screen and (min-width: 1800px) { .bgimg-3-cat  {background-image: url("/images/cat-animals-800.png"); } }

.bgimg-4-cat {background-image: url("/images/cat-abstract-600.png"); }
@media only screen and (min-width: 1800px) { .bgimg-4-cat  {background-image: url("/images/cat-abstract-800.png"); } }

.bgimg-5-cat {background-image: url("/images/cat-views-600.png"); }
@media only screen and (min-width: 1800px) { .bgimg-5-cat  {background-image: url("/images/cat-views-800.png"); } }

.bgimg-6-cat {background-image: url("/images/cat-more-600.png"); }
@media only screen and (min-width: 1800px) { .bgimg-6-cat  {background-image: url("/images/cat-more-800.png"); } }

.th {background-size:contain; width:100%; height:100%; background-repeat:no-repeat; background-position: center; }

.main_txt {  position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index:3; color:yellow; width:100%; }
@media only screen and (min-width:480px) and (max-width: 800px) { .main_txt {  position:absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index:3; color:yellow; width:100%; }  }
@media only screen and (max-width: 800px) { .main_txt {  position:absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); z-index:3; color:yellow; width:100%; }  }

.glow {  -webkit-animation: glow 1s ease-in-out infinite alternate; -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate; }
.gall_txt {  position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index:3; color:white; padding:3% 1% 3% 1%; }

.flt33 {float:left; padding:1%; width:32.5%; height:auto; }
@media only screen and (max-width: 800px) { .flt33 {float:none; padding:1%; width:100%; height:auto; }  }
.flt33r {float:right; padding:1%; width:31%; }
.flt50 {padding:2%; width:50%; height:auto; margin:0 auto; text-align:center; border-radius:5%; border:2px #ccc inset;  }
@media only screen and (max-width: 600px) { .flt50 {float:none; padding:1%; width:100%; height:auto; }  }
.flt50lft {float:left; padding:1%; width:48%; height:auto; margin:.5%; text-align:center; border-radius:5%; border:2px #ccc inset;  }
@media only screen and (max-width: 600px) { .flt50lft {float:none; padding:1%; width:100%; height:auto; }  }

.clr {clear:both; }
.clrlft {clear:left; }
.clrrt {clear:right; }
.ctr {text-align:center; }
.ctrimg {padding:0 4px 0 4px; vertical-align:middle; }
.lft {text-align:left; }
.rt {text-align:right; }
.fltlft {float:left; padding:4px; }
.fltrt {float:right;  padding:4px; }
.small {font-size:85%; }
.small12 { font-size:12pt; }
.txt100blk {color:black; background-color: rgba(255,255,255,0.5);  }
.txt150 {font-size:150%; }
@media only screen and (max-width: 880px) { .txt150 {font-size:120%; }  }
.max50 {max-width:48%; height:auto; margin:0 auto; }
.yellow {color:#FC0; }
.valign { vertical-align:middle; }


@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

/*pop-up */
.popup { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width:100%; }

/* The actual popup */
.popup .popuptext { visibility: hidden; width:100%; background-color: #333; color: #fff; text-align: center; font-size:14pt; border-radius: 6px; padding: 8px; position: absolute; z-index: 1; bottom:0; left: 0;}

/* Popup arrow */
.popup .popuptext::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent;}

/* Toggle this class - hide and show the popup */
.popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s;}

@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeIn {from {opacity: 0;} to {opacity:1 ;}}