* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
}

body {
  background-color: #FFFFFF;
  background-image: url("http://antarctica-ufo.com/images/snow_bg.jpg");
  margin: 0;
}

@font-face {
  	font-family: 'Bauhaus';
  	src: url("fonts/bauhaus.ttf") format("truetype");
}
.Bauhaus1 {
	font-family: 'Bauhaus', 'Candara', 'Verdana', cursive;
	font-size: 90px;
	font-weight: 600;
}

@font-face {
  	font-family: 'Satisfy';
  	src: url("fonts/satisfy-regular.ttf") format("truetype");
}
.Satisfy1 {
	font-family: 'Satisfy', 'Candara', 'Verdana', cursive;
	font-size: 30px;
	text-align: center;
	font-style: italic;
	font-weight: bold;
	color: #00383F;
}
.Satisfy2, .Satisfy2.alt {
	font-family: 'New', 'Candara', 'Verdana', cursive;
	font-size: 46px;
	text-align: center;
	font-style: italic;
	font-weight: bold;
	color: #00383F;
  text-shadow: 2px 2px 5px rgba(6, 71, 87, 0.31);font-size:40px;line-height:0;padding-right:10px;
}
.Satisfy2 .alt {
  color:#c70808;
  text-shadow: 2px 2px 5px rgba(130, 11, 11, 0.31);font-size:40px;line-height:0;padding-right:10px;
}

@font-face {
  	font-family: 'New';
  	src: url("fonts/new.ttf") format("truetype");
}
.new {
	font-family: 'New', 'Candara', 'Verdana', cursive;
	font-size: 30px;
	text-align: center;
	font-style: italic;
	font-weight: bold;
	color: #00383F;
}


.shad {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.58);
}



.navtop {
  background-color: #86B0B6;
  height: 70px;
  width: 100%;
  border: 0;
}

.navtop div {
  display: flex;
  margin: 0 auto;
  width: 680px;
  height: 100%;
}

.navtop div h1, .navtop div a {
  display: inline-flex;
  align-items: center;
}

.navtop div h1 {
  flex: 1;
  padding: 0;
  margin: 0;
  color: #00383F;
}

.navtop div h1 a {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.31);
  font-weight: 650;
  font-size: 40px;
  padding: 0;
  color: #00383F;
  font-family: 'New', 'Candara', 'Verdana', cursive;
	text-align: center;
	font-style: italic;
  margin-bottom:4px;
}

.navtop div h1 a:hover {
  font-weight: 650;
  font-size: 40px;
  padding: 0;
  color: #005b67;
  font-family: 'New', 'Candara', 'Verdana', cursive;
	text-align: center;
	font-style: italic;
}

.navtop div a {
  padding: 0 14px;
  text-decoration: none;
  color: #00383F;
  font-weight: 700;
  font-size: 18px;
  padding-bottom:1px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.28);
}

.navtop div a i {
  font-size: 19px;
  padding: 2px 8px 0 0;
}

.navtop div a:hover {
  color: #ebebeb;
}

.content {
  width: 680px;
  margin: 0 auto;
}

.content p {
  padding: 25px 0;
  margin: 0;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  padding: 0px 0 0px 0;
  width:100%;
}

.pagination .ac {                    /*   Page Buttons   */
  text-decoration: none;
  background-color: #86B0B6;
  font-weight: 600;
  color: #00383F;
  padding: 6px 12px 10px 12px;
  margin-top:6px;
  border-radius:8px;
  font-size: 18px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.27);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.92);
}

.pagination .ac2 {                    /*   Page Buttons   */  text-decoration: none;
  background-color: #86B0B6;
  font-weight: 600;
  color: #00383F;
  padding: 6px 18px 10px 18px;
  margin-top:6px;
  border-radius:8px;
  font-size: 18px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.27);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.92);
}

.pagination .ac.alt2, .pagination .ac2.alt2, .pagination .ac.alt2:hover, .pagination .ac2.alt2:hover, .pagination .ac.alt2:active, .pagination .ac2.alt2:active { 
  background-color:hsla(0, 0%, 13%, 0.231);
  color:hwb(0 13% 87% / 0.5);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.0);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.37);
  outline:0px;
}

.pagination .ac.alt, .pagination .ac2.alt, .pagination .ac.alt:hover, .pagination .ac2.alt:hover { 
  background-color:hsla(0, 0%, 13%, 0.231);
  color:hwb(0 13% 87% / 0.5);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.0);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.37);
}

.pagination .b {                    /*   Page Buttons   */
  display: inline-block;
  text-decoration: none;
  background-color: hsla(0, 0%, 0%, 0.2);
  font-weight: bold;
  color: #888;
  padding: 9px 16px;
  border-radius:8px;
  font-size: 18px;
  padding-top:7px;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.98);
}

.pagination b {                    /*   Page Buttons   */
  display: inline-block;
  text-decoration: none;
  background-color: #00363d;
  font-weight: bold;
  color: #00363d;
  padding: 9px 16px;
  border-radius: 4px;
  font-size: 18px;
}

.pagination .ac:hover, .pagination .ac2:hover {
  background-color: #00383F;
  color: #86B0B6;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.28);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.94);
}

.pagination div {
  display: inline-block;
  font-size: 14px;
  color: #70767c;
  font-weight: bold;
  padding: 7px 12px;
}

.pagination, .pagination span, .pagination div {
  font-size:18px;
}


.page-title {
   border-bottom: 0px solid #c0c5cb;
}

.page-title h2 {
  display: inline-block;
  margin: 0;
  padding: 20px 0px 15px 0px;
  font-size: 23px;
  font-weight: 600;
  border-bottom: 3px solid #428a95;
  color: #004953;
  margin-top:0px;
}

.page-title .categories-description {
  font-size: 17px;
  font-weight: 400;
  color: #004953;
  
}

.page-title h3 {
  display: inline-block;
  margin: 0;
  padding: 0px 0px 15px 0px;
    margin: 0px 0px 0px 0px;
  font-size: 23px;
  font-weight: 600;
  border-bottom: 3px solid #428a95;
  color: #004953;
}


.media-popup {
  display: none;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999999;
}

.media-popup .con {
  display: flex;
  position: relative;
  text-align: justify;
  align-items: center;
  flex-flow: column;
  background-color: #EBF2F3;
  padding: 25px;
  border-radius: 22px;
  width: 1044px;
  max-width:1044px;
}

.media-popup .con h3 {
  display: flex;
  align-items: center;
  text-align: left;
  margin: 0px;
  font-size: 22px;
  color: #000;
  font-weight:650;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.20);
  word-break: break-word;
}

.media-popup .con h3 a {
  text-decoration: none;
  font-size: 15px;
  color: #dfe2e6;
  padding: 5px 0px 5px 10px;
}

.media-popup .con h3 a i {              /*  Pen Link */
  font-size: 12px;
  padding:7px;
  background-color: #C6DADD;
  color: #2d2d2d;  
  border-radius:50%;
  position:relative;
  top:2px;
}

.media-popup .con h3 a:hover {
  display:normal;
}

.media-popup .con h3 a i:hover {
  background-color: #7EB5C0;
  color: #fff;  
}

.media-popup .con h3 a i:active {
   text-shadow: 0px 0px 8px rgba(255, 255, 255, 1);
}

.media-popup .con img {
  object-fit: contain;   /*  
              contain: (was)
              was:  scale-down  (this stops the image from stretching vertically, 
                        leaves space on top&btm if image is very large and wider)
              inherit - space on top     
              cover - crops    
              fill - squeezes      */
  max-width: 100%;
  text-align:center;
}

.media-popup .con .like-con {
  display: flex;
  padding-top: 15px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}

.media-popup .con .like-con a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background-color: #C6DADD;
  color: #2d2d2d;
  border-radius: 50px;
  width: 54px;
  height: 54px;
}
.media-popup .con .like-con a:active {
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.9);
}
.media-popup .con p {
 text-shadow: none;
}
.media-popup .con .like-con a.like.active, .media-popup .con .like-con a.like:hover {
  background-color: #7EB5C0;
  color: #fff;
}

.media-popup .con .like-con span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 14px 10px 0 10px;
  color: #949699;
  font-weight: 500;
  font-size: 18px;
}

.media-popup .con .like-con .action-btns {
  align-self: flex-end;
  margin-left: auto;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}

.media-popup .con .like-con .action-btns a {  /*  Space before Bookmark!! */
  margin-left: 5px;
}

.media-popup .con .like-con .action-btns a.active, .media-popup .con .like-con .action-btns a:hover {
  background-color: #7EB5C0;
  color: #fff;
}

.media-popup .con .like-count {
  color: #2d2d2d;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
  padding:15px 4px 0 8px;
}

.media-popup .prev {
  padding: 0 25px;
}

.media-popup .next {
  padding: 0 25px;
}

.media-popup .next, .media-popup .prev {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.3);
}

.media-popup .next:hover, .media-popup .prev:hover {
  color: rgba(255, 255, 255, 0.4);
}

.media-popup .next.hidden, .media-popup .prev.hidden {
  visibility: hidden;
}

.media-popup .close {
  position: absolute;
  top: 25px;
  right: 25px;
  color: rgba(198, 218, 221, 0.4);
}

.media-popup .close:hover {
  color: white;
}

.media-popup .close:active {
  color: white;
  text-shadow: 0px 0px 8px rgba(255, 255, 255, 1);
}

.home .con, .collection .con {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0 0px;
}
.home .con .close, .collection .con .close {
  margin-top: 8px;
}

.home .con form label, .collection .con form label {
  padding: 0 5px 0 15px;
  font-weight: bold;
}
.home .con form input[type=checkbox] {
		outline: 0px solid black;
		border: 0px solid black;
		box-shadow: 0px 0px 10px hsla(188, 25%, 62%, 0.0), inset 0 0 7px hsla(188, 25%, 62%, 0.0);
}
.home .con form input[type=checkbox]:focus {
		outline: 0px solid black;
		border: 0px solid black;
		box-shadow: 0px 0px 10px hsla(188, 25%, 62%, 0.0), inset 0 0 7px hsla(188, 25%, 62%, 0.0);
}

.home .con form select, .home .con form input, .collection .con form select, .collection .con form input {
  border-radius: 4px;
  border: 1px solid #dfe2e6;
  padding: 5px 10px;
  height: 40px;
  color:#222;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

  background-color: #F1F7F8;
  outline: 0.11em solid #53848A;
}

.home .con form select:focus, .collection .con form select:focus, .collection .con form input:focus {
  border: 0px solid #b4bbc4;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 10px hsla(188, 94%, 20%, 0.92), inset 0 0 7px hsla(188, 25%, 62%, 0.62);
  background-color: #b7d2d6;
  outline: 0.11em solid #00383F;
}

.home .con form input:focus, .collection .con form input:focus {
  border: 0px solid #b4bbc4;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 10px hsla(188, 94%, 20%, 0.92), inset 0 0 7px hsla(188, 25%, 62%, 0.62);
  background-color: #b7d2d6;
  outline: 0.11em solid #00383F;
}

.home .con form input::placeholder {
  color: #222;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

}

.home .con form input:focus::placeholder, .collection .con form input:focus::placeholder {
  color: #222;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  background-color: white;

}

.home .con form select::placeholder, .collection .con form select::placeholder, .collection .con form input::placeholder {
  color: #222;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  background-color: #F1F7F8;
  
}


.home .desc, .collection .desc {
  padding: 0px 0 0px 0;
}

.home .media-list, .collection .media-list {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.home .media-list .flexible-column, .collection .media-list .flexible-column {
  width: 30%;
}

.home .media-list a, .collection .media-list a {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  grid-row: auto;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  
}

.home .media-list a:hover .description, .collection .media-list a:hover .description {
  opacity: 1;
  background-color:hsla(0, 0%, 0%, 0.6);
  transition: all .45s ease-in-out;
}

.home .media-list .placeholder, .collection .media-list .placeholder {
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: #e7e9ec;
  color: #c0c2c5;
  font-weight: bold;
  margin-top:10px;
}

.home .media-list .placeholder i, .collection .media-list .placeholder i {
  padding-bottom: 15px;
}

.home .media-list .description, .collection .media-list .description {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  color: #fff;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 15px;
  transition: opacity 1s;
}

.view img {
    width: 100%;
    height: auto;
    max-height:820px;

/*  
              was:  scale-down  (this stops the image from stretching vertically, 
                        leaves space on top&btm if image is very large and wider)
              inherit - space on top     
              cover - crops
              fill - squeezes       */
}


.sound {
  width:50%;
  background-image: url("http://antarctica-ufo.com/gallery/images/music_notes.png") ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 280px;
}

.vid {
  background-color:black;
      width: 694px;
    height: auto;
    max-height:390px;
}

.view video {
    width: 694px;
    height: auto;
    max-height:390px;
}

.gallery-form {
  padding: 15px 0;
  display: flex;
  flex-flow: column;
  width: 300px;
}

.gallery-form.full {
  width: 300px;
}

.gallery-form label {
  display: inline-flex;
  width: 100%;
  padding: 10px 0;
  margin-right: 25px;
  font-weight: 600;
}

.gallery-form select, .gallery-form input, .gallery-form textarea {
  padding: 10px;
  width: 100%;
  border-radius: 8px;         /*    Other Buttons  btn  */
  margin-right: 25px;
  margin-bottom: 15px;
  outline: 0;
  border: 1px solid #dfe2e6;;
  background-color: white;
}

.gallery-form select:focus, .gallery-form input:focus, .gallery-form textarea:focus {
  border: 1px solid #b4bbc4;
}

.gallery-form select::placeholder, .gallery-form input::placeholder, .gallery-form textarea::placeholder {
  color: #8994a3;
}

.gallery-form textarea {
  height: 260px;
}

.gallery-form .btn {
  width: 150px;
  margin-top: 15px;
}
.gallery-form .btn:focus {
  border: 1px solid #b4bbc4;
  background-color: #00383F;
  color: #86B0B6;
  }
.gallery-form .btn:active {
  color: #00383F;
  background-color: #00383F;
  outline:2px solid black;
  outline-offset: -1px;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 1),0px 0px 5px rgba(255, 255, 255, 0.8),0px 0px 5px rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 1),0px 0px 5px rgba(0, 0, 0, 0.8),0px 0px 5px rgba(0, 0, 0, 0.8);

}

.gallery-form #media, .gallery-form .thumbnail {
  display: none;
}

.gallery-form #drop_zone {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 4px dashed #86B0B6;
  background-color: #C5D9DC;
  padding: 20px;
  margin: 15px 0 15px 0;
  border-radius: 4px;
  transition: all 0.18s ease-in-out;
}

.gallery-form #drop_zone p {
  font-size: 17px;
  font-weight: 600;
  color: #59636c;
  text-align: center;
  padding: 10px 5px;
  transition: all 0.18s ease-in-out;
}

.gallery-form #drop_zone div {
  font-size: 17px;
  font-weight: 600;
  color: #59636c;
  text-align: center;
  padding: 0px 4px;
  transition: all 0.18s ease-in-out;
}

.gallery-form #drop_zone i {
  color: #696969;
  font-size:65px;
  padding: 8px 5px 15px 5px;
  transition: all 0.18s ease-in-out;
}

.gallery-form #drop_zone.dragover, .gallery-form #drop_zone:hover {
  border: 4px dashed #006D79;
  background-color: #86B0B6;
  transition: all 0.18s ease-in-out;
}

.gallery-form #drop_zone.dragover p, .gallery-form #drop_zone:hover p {
  color: #00383F;
  transition: all 0.18s ease-in-out;
}

.gallery-form #drop_zone:hover div {
  color: #00383F;
  transition: all 0.18s ease-in-out;
}

.gallery-form #drop_zone.dragover i, .gallery-form #drop_zone:hover i {
  color: #00383F;
  transition: all 0.18s ease-in-out;
}

.gallery-form #preview {
  display: none;
  margin-bottom: 15px;
  border: 2px dashed #dbdfe6;
  background-color: #eef1f5;
  padding: 15px;
}

.gallery-form .previews {
  display: flex;
}

.gallery-form .previews {
  display: 700px;
}


.gallery-form .preview {
  display: block;
  margin: 15px 0px;
  background-color: #eef1f5;
  padding-right: 4px;
}

.gallery-form .btn_wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.gallery-form .upload-result, .gallery-form .result, .gallery-form .upload-result2, .gallery-form .result2 {
  /* padding: 0px 0 5px 0; */
  margin-top:1px;

}

.gallery-form .separator {
  width: 100%;
  height: 1px;
  margin: 15px 25px 15px 0;
  border-bottom: 1px solid #dfe2e6;
}

.collections .login-register {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.collections .login-register .page-title {
  margin-bottom: 0px;
}

.collections .actions {
  padding-top: 30px;
}

.collections .collection-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 30px 0;
}

.collections .collection-list a {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border: 2px solid #00383F;
  background-color: #86B0B6;
  color: #00383F;
  width: 176px;
  height: 176px;
  border-radius: 20px;
  transition: all 0.28s ease-in-out;
}

.collections .collection-list a .title {
  text-align:center;
}

.collections .collection-list a i {
  padding-bottom: 10px;
  transition: all .28s;
}

.collections .collection-list a span {
  font-weight: 500;
  padding: 3px;
}

.collections .collection-list a .num {
  font-size: 14px;
  color: #00383F;
  text-align:center;
  transition: all 0.28s ease-in-out;
}

.collections .collection-list a .description {
  display: none;
}

.collections .collection-list a:hover {
  border: 2px solid #00383F;
  background-color: #00383F;
  color: #86B0B6;
  border-radius:28px;
  transition: all 0.28s ease-in-out;
}

.collections .collection-list a:hover .num {
  color: #86B0B6;
  transition: all 0.28s ease-in-out;
}

.collections .collection-list a:hover i {
  color: #86B0B6;
  transform: scale(1.11);
  transition: all 0.28s ease-in-out;
}

.btn, .btn_wrapper .btn, .btn:after, .btn_wrapper .btn:after {
  display: inline-block;
  text-decoration: none;
  background-color: #86B0B6;
  border: 0;
  font-weight: bold;
  text-align: center;
  font-size: 17px;
  color: #00383F;
  cursor: pointer;
  border-radius: 8px;
  padding: 12px 17px 14px 17px;
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
  border: 0px solid #00383F;
  outline:2px solid black;
  outline-offset: -2px;
  height:50px;
}

.btn:hover {
  background-color: #00383F;
  color: #86B0B6;

}

.btn:disabled {
  background-color: #00383F;
  color: #86B0B6;
}

.btn.alt {
  color:whitesmoke;
  background-color: #c22626;
}

.btn.alt:hover {
  color:black;
  background-color: #ff4d4d;
}

.btn:active, .btn.alt:active {
  color: #00383F;
  background-color: #00383F;
  outline:2px solid black;
  outline-offset: -1px;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 1),0px 0px 5px rgba(255, 255, 255, 0.8),0px 0px 5px rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 1),0px 0px 5px rgba(0, 0, 0, 0.8),0px 0px 5px rgba(0, 0, 0, 0.8);

}

.btn.alt:disabled {
  background-color: #b9b9b9;
}

.media-save {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999999;
}

.media-save h2 {
  color: #696b6e;
  margin: 0;
  padding: 0px 0 0 0;
}

.media-save .con {
  padding: 0 15px;
  width: 300px;
  background-color: #fff;
  border-radius: 9px;
}

.media-save form > select, .media-save form > select:hover, .media-save form > select:active, .media-save form > select:focus {
  /* border:1px solid black; */
  border:0.1em solid black;
}

.media-save .btn {
  width: 100px;
}

.media-save input[type="submit"] {
  margin: 15px 10px 0 0;
}

.media-save p {
  margin: 0;
  padding: 5px 0 0 0;
}

.no-touch {
  -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
  -o-user-select: none;
	user-select: none;
}



[shadow-title]:hover:after {
    opacity: 1;
    visibility: visible;
}
[shadow-title]:after {
    content: attr(shadow-title);
    background-color: #000000;
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    padding: 10px 12px 10px 12px;
    bottom: 1.65em;
    right: -9.0em;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
    line-height: 150%;
    white-space: pre;
    border-radius: 14px;
    text-align: left;
}
[shadow-title] {
    position: relative;
    align-items: left;
}


[shadow-title2]:hover:after {
    opacity: 1;
    visibility: visible;
}
[shadow-title2]:after {
    content: attr(shadow-title2);
    background-color: #000000;
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    padding: 10px 12px 10px 12px;
    bottom: 2.85em;
    right: -0.4em;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
    line-height: 150%;
    white-space: pre;
    border-radius: 14px;
    text-align: left;
}
[shadow-title2] {
    position: relative;
    align-items: left;
}

[shadow-title3]:hover:after {
    opacity: 1;
    visibility: visible;
}
[shadow-title3]:after {
    content: attr(shadow-title3);
    background-color: #000000;
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    padding: 10px 12px 10px 12px;
    bottom: 2.42em;
    right: -0.4em;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
    line-height: 150%;
    white-space: pre;
    border-radius: 14px;
    text-align: left;
}
[shadow-title3] {
    position: relative;
    align-items: left;
}


	.icons {
		font-size:32px;
		color:#00383F;
		position:relative;
		vertical-align: middle;
		padding-left:1px;
    padding-right:3px;
		align-items:right;
		white-space: nowrap;
		display: flex;
		flex-direction: row;
		float:right;
	}
	.icons:hover {
		color:#86B0B6;
	}
	.icons3 {
		font-size:32px;
		color:rgb(175, 0, 0);
		vertical-align: middle;
		align-items:right;
		white-space: nowrap;
		display: flex;
		flex-direction: row;
		float:right;
		background-color:rgba(0, 0, 0, 0);
		background:rgba(0, 0, 0, 0);
		border:0px;
		outline:0px;
		border-radius:50%;
    box-shadow: 1px 1px 3px rgba(6, 6, 6, 0.33), inset 2px 2px 2px rgb(175, 0, 0);
	}
	.icons3:hover, .icons3:focus {
		color:#cd2121;
		background-color:rgba(0, 0, 0, 0);
		background:rgba(0, 0, 0, 0);
		outline:2px solid black;
		border-radius:50%;
    box-shadow: 1px 1px 3px rgba(6, 6, 6, 0.33), inset 2px 2px 2px rgb(175, 0, 0);
	}

.extra-padding {
  padding-left:0px;
}

.totals {
    float:right;
}

.empty-blocks {
  padding:0px;
}

.center-small {
  
  text-align:right;
}

.show-small {
  display:none;
}

.hide-small {
  display:normal;
}

.search-message {
  margin-bottom:0px;
  margin-top:0px;
  line-height:0;
  text-align:right;
  padding-right:6px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.23);
}

.smaller-small {
  font-size:18px;
}





.arrows {
  font-size:15px;
  color: rgba(198, 218, 221, 0.4);
  /*  color:#8FB7BC;  */
}
.arrows:hover {
  color: white;
  /* color: rgba(78, 196, 186, 0.374); */
}
.arrows:active {
  color: white;
  text-shadow: 0px 0px 8px rgba(255, 255, 255, 1);
  /* color: rgba(78, 196, 186, 0.374); */
}

.center {
  justify-content: center;
  text-align:center;
}

.collection-label {
  text-align:left;
  font-weight:600;
  margin:0px;
  padding:0px;
}

.add-to-collection {
  text-align:center;
  line-height:0.0;
  padding-top:12px;
}

.mb {
    width:58px;
}













/* Responsive design code below */
@media screen and (max-width: 680px) {



  .navtop {
    height: auto;
    padding: 10px;
    margin-top:0px;
    padding-top:0px;
  }
  .navtop div {
    flex-flow: wrap;
    width: 100%;
  }
  .navtop div h1 {
    display: block;
    flex-basis: 100%;
  }
  .navtop div h1 i {
      display:none;
  }
  .navtop div a {
    padding: 8px 0;
    flex-basis: 50%;
  }
  .content {
    padding: 0px;
    width: 100%;
  }
  .content form input[type="text"], .content form input[type="password"], .content form input[type="email"] {
    width: 100%;
  }
  .upload form {
    width: 100%;
  }
  .gallery-form {
    width: 100%;
  }
  .home .con, .collection .con {
    flex-flow: column;
    justify-content: flex-end;
    align-items: flex-start;
  }
  .home .con .upload-media, .collection .con .upload-media {
    margin-bottom: 15px;
  }
  .home .con form, .collection .con form {
    display: flex;
    flex-flow: column;
    width: 100%;
  }

/* The container */
.home form .container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 32px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.home form .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.home form .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 45px;
  width: 45px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.home form .container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.home form .container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.home form .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.home form .container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.home form .container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

  .home .con form label, .collection .con form label {
    display: inline-flex;
    margin: 0;
    width: 100%;
    padding: 7px 0;
  }




.media-popup .con h3 {

  font-size: 18px;
  padding-bottom:6px;

}

  .home .con form select, .home .con form input, .collection .con form select, .collection .con form input {
    width: 100%;
    margin-bottom: 10px;
  }
  .home .media-list, .collection .media-list {
    align-items: center;
    justify-content: center;
  }
    .home .media-list audio {
    max-width: 260px;
  }
    .collection .media-list audio {
    max-width: 260px;
  }
  .home .media-list a img, .collection .media-list a img {
    width: 100%;
  }
  .media-popup .con {
    width: 95%;
    max-height: 85%;
    padding: 10px;
    border-radius: 15px;
  }
  .media-popup .con img {
    width: 100%;
    height: 390px;
    max-height:390px;
  }
  .media-popup .con video {
    width: 100%;
    height: auto;
    max-height:390px;
  }
  .media-popup .con audio {
    width: 260px;
  }
  .media-popup .next, .media-popup .prev {
    padding: 0 5px;
    font-size: 12px;
  }
  .media-popup .close {
    font-size: 12px;
    right: 10px;
    top: 10px;
  }
.home .con form input[type=checkbox] {
    transform: scale(1.5);
    padding-right:18px;
}
.home .con form input[type=checkbox]:focus {
  transform: scale(1.5);
    padding-right:18px;
}

.Satisfy2 {
	font-family: 'New', 'Candara', 'Verdana', cursive;
	font-size: 46px;
	font-style: italic;
	font-weight: bold;
	color: #00383F;
  text-align:left;
  float:left;
  align-items:left;
  padding-left:20px;
}
.Satisfy3 {
	font-family: 'New', 'Candara', 'Verdana', cursive;
	font-size: 46px;
	text-align: center;
	font-style: italic;
	font-weight: bold;
	color: #00383F;
  padding-top:20px;
  padding-bottom:20px;
}

[shadow-title2]:hover:after {
    opacity: 1;
    visibility: visible;
}
[shadow-title2]:after {
    content: attr(shadow-title2);
    background-color: #000000;
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    padding: 10px 12px 10px 12px;
    bottom: 3.25em;
    right: -3.6em;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
    line-height: 150%;
    white-space: pre;
    border-radius: 14px;
    text-align: left;
}
[shadow-title2] {
    position: relative;
    align-items: left;
}
.extra-padding {
  padding-left:1px;
}

.totals {
  float:none;
  display: block;
  text-align:center;
  align-items:center;  
  justify-content:center;
  font-size:16px;
}

.pagination, .pagination span, .pagination div {
  text-align:center;
  display: normal;
  justify-content: center;
  font-size:17px;
}

.pagination .ac {                    /*   Page Buttons   */
  padding: 7px 7px 11px 8px;
  font-size:16px;
}

.pagination .ac2 {                    /*   Page Buttons   */
  padding: 7px 12px 11px 14px;
  font-size:16px;
}

.empty-blocks {
  display: none;
}

.home, .collection {
  display:normal;
  width:100%;
  text-align:center;
  align-items:center;
  justify-content:center;
  padding:0px;
  margin:0px;
}

.home .con, .collection .con {
  display:normal;
  width:100%;
  text-align:center;
  align-items:center;        /*   Change this to Left to make Gallery title go left */
  justify-content:center;
  padding:0px;
  margin:0px;
    border-radius: 22px;

}

.home .con form, .collection .con form {
  display:block;
  width:100%;
  padding:0px;
  margin:0px;
}

.home .con form select, .home .con form input, .collection .con form select, .collection .con form input {
  width:42%;
}

.home .con form select:focus, .collection .con form select:focus, .collection .con form input:focus {
  width:42%;
}

.home .con form input:focus {
  width:42%;
}

.collection .con form select, .collection .con form input {
  width:100%;
}

.collection .con form select:focus, .collection .con form input:focus {
  width:100%;
}

.home .con form input:focus {
  width:100%;
}



.icons {
  display: none;
  text-align:center;
}

.center-small {
  align-items:center;
  text-align:center;
  word-wrap:break-word;
  
}


.show-small {
  display: normal;
}

.hide-small {
  display:none;
  padding:0px;
  margin:0px;
}



.search-message {
  text-align:center;
  padding:0px;
  margin:0px;
}

.media-list {
  padding-top:12px;
}

.navtop, .navtop h1 {
  padding-top:4px;
  margin-top:0px;
}
.navtop div a {
  padding-top:0px;
  margin-top:4px;
  padding-bottom:0px;
  margin-bottom:11px;

}

.smaller-small {
  font-size:28px;
}


.sound {
  /* max-width:280px; */
  width:100%;
}
/*
  height:280px;
  height: auto;
  background-image: url("http://antarctica-ufo.com/gallery/images/music_notes.png") ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 280px;
}         
*/

.mb {
    width:50px;
}

}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,latin-ext);

.tooltips {
  position: relative;
  display: inline;
}

.tooltips span {
  font:300 12px 'Open Sans', sans-serif;
  position: absolute;
  color: #FFFFFF;
  background: #000000;
  padding:5px 10px;
  width:140px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  transition: transform .3s, opacity .6s, margin-left .2s, margin-top .2s;
}

.tooltips > span img{max-width:100px;}

.tooltips[tooltip-position="top"] span{
  padding-bottom:8px;
  margin-left:10px;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.tooltips[tooltip-position="bottom"] span{
  padding-bottom:8px;
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.tooltips[tooltip-position="left"] span{
  left:-150px;
  padding-bottom:8px;   /* add width here */
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.tooltips[tooltip-position="right"] span{
  margin-top:30px;
  padding-bottom:8px;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.tooltips span:after {
  content: '';
  position: absolute;
  width: 0; height: 0;
}

.tooltips[tooltip-position="top"] span:after{
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid transparent;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.tooltips[tooltip-position="bottom"] span:after{
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  border-bottom: 8px solid transparent;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.tooltips[tooltip-position="left"] span:after{
  top: 50%;
  left: 100%;
  margin-top: -8px;
  border-left: 0px solid transparent;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.tooltips[tooltip-position="right"] span:after{
  top: 50%;
  right: 100%;
  margin-top: -8px;
  border-right: 8px solid transparent;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.tooltips:hover span {
  visibility: visible;
  opacity: 1;
  z-index: 999;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  filter: alpha(opacity=100);
}

.tooltips[tooltip-position="top"]:hover span{
  bottom: 30px;
  left: 50%;
  margin-left: -76px;
}

.tooltips[tooltip-position="bottom"]:hover span{
  top: 25px;
  left: 50%;
  margin-left: -76px;
  padding-top:10px;
}

.tooltips[tooltip-position="left"]:hover span{
  right: 100%;
  top: 50%;
  margin-left:10px;
  margin-top: -15px;
}

.tooltips[tooltip-position="right"]:hover span{
  left: 100%;
  top: 50%;
  margin-right:15px;
  margin-top: -15px;
  margin-left: 15px;
}

.tooltips[tooltip-type="primary"] > span {
  background-color:#2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="top"] > span:after{
  border-top: 8px solid #2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="bottom"] > span:after{
  border-bottom: 8px solid #2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="left"] > span:after{
  border-left: 8px solid #2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="right"] > span:after{
  border-right: 8px solid #2980b9;
}

.tooltips[tooltip-type="success"] > span {
  background-color:#27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="top"] > span:after{
  border-top: 8px solid #27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="bottom"] > span:after{
  border-bottom: 8px solid #27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="left"] > span:after{
  border-left: 8px solid #27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="right"] > span:after{
  border-right: 8px solid #27ae60;
}

.tooltips[tooltip-type="warning"] > span {
  background-color:#f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="top"] > span:after{
  border-top: 8px solid #f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="bottom"] > span:after{
  border-bottom: 8px solid #f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="left"] > span:after{
  border-left: 8px solid #f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="right"] > span:after{
  border-right: 8px solid #f39c12;
}

.tooltips[tooltip-type="danger"] > span {
  background-color:#c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="top"] > span:after{
  border-top: 8px solid #c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="bottom"] > span:after{
  border-bottom: 8px solid #c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="left"] > span:after{
  border-left: 8px solid #c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="right"] > span:after{
  border-right: 8px solid #c0392b;
}