:root{
  --c1:black;
  --c2:white;
  --c3:#f1f1f1;
  --p:40px;
  --headerH:80px;
  --f:"Liberation Sans";
  --fn:"Liberation Sans Narrow";
}
body{
  font:20px/1.4em var(--f), sans-serif;
  color:var(--c1);
  background-image: linear-gradient(to bottom, transparent 80%, var(--c3));
  min-height: 100vh;
}

header{
  padding:0px var(--p)!important;
  font-family: var(--fn);
  height:var(--headerH);
  display: flex;
  justify-content: space-between;
  position: fixed;
  opacity: 1;
  top:0;
  left:0;
  background:var(--c1);
  color:var(--c2);
  z-index: 100;
  width:100%;
}

header>h1{
  padding-top: 20px;
  margin-top: 14px;
  font-family:"nanook", serif;
  font-weight: normal;
  position: relative;
  font-size: 40px;
}
header h1 a:hover span {
  transition: all .1s ease-out;
  transform: none;
}
header select{
  font-family: "ppp2";
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 25px;
  margin-top:20px;
  height: calc(var(--headerH) - 24px);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/down.svg) no-repeat right center;
  background-size: 25px;
  border:none;
  border-bottom:2px solid var(--c1);
}

header a{
  text-decoration: none;
}
main{
  padding: var(--headerH) var(--p) 0 var(--p);
}

/* Home */

body.home{
  scroll-behavior: smooth;
}

body[data-page='home'] main{
  padding-top: var(--headerH)!important;
  padding-bottom:0!important;
  align-items: center;
  justify-content: center;
  align-content: center;
}
.ppp-intro-image{
  position: relative;
  height: calc(50vw * .8);
}
.logo{
  position:absolute;
  top:0;
  left:0;
  padding: 2vw;
  animation-duration: .4s;
}
.home-box-list{
  height: calc(100vh - var(--headerH));
  align-content: center;
}
.home-box{
  background: var(--c2);
  border: 3px solid var(--c3);
  padding: var(--p);
  margin-bottom: var(--p);
  position: relative;
  text-decoration: none;
}
.home-box:first-child h2{
  display: none;
}
.home-box:first-child{
  font-family: "ppp2";
  font-size:clamp(40px, 3vw, 80px);
  line-height: 1.3em;
  padding:0;
  border:0;
  margin-bottom:var(--p);
}
.home-box:last-child{
  margin-bottom: 0;
}
a.home-box:hover{
  border-color:var(--c1);
}
a.home-box:active{
  top:3px;
  border-color:var(--c1);
}
a.home-box:hover::after{
  content:"Visit";
  position: absolute;
  /* color: #777; */
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .8em;
  top:var(--p);
  right:var(--p);
}


/* Selection */

.item{
  cursor: pointer;
}

.item img{
  height: 80px;
  object-fit: cover;
  width: 100px;
  border-bottom: 1px solid var(--c1);
}
.ppp-selection{
  background: var(--c2);
  color: var(--c1);
}
.ppp-selection{
  justify-content: center!important; /* temp */
}
.image-board{
  height:40vh;
}
.image-list{
  display: none;
  justify-content:space-around;
  align-items: center;
  width: 100%;
  padding: var(--p);
}
.image-list a{
  width: 10%;
  box-shadow: 0px 5px 10px #ccc;
  position: relative;
}
.image-list img{
  width: 100%;
  display: block;
}
.image-list.picked{
  display: flex;
}
.detail-item.image-list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.detail-item.image-list a{
  width: 15%;
}

.detail-item.image-list img{
  width: 100%;
  display: block;
}

/* Various table fix */

#table_wrapper{
  overflow: hidden;
  width:calc(66.66% + var(--p)/2);
}
#table{
  font-family: var(--fn);
  border-bottom: none;
}
#table th{
  text-transform: uppercase;
  font-size: .8em;
  letter-spacing: 1px;
  line-height: 1.2em;
}
#table tbody td{
  padding: 0 0  0  calc(var(--p) /2 );
}
#table tbody td.image{
  padding-left: 0;
}

#table_length select, .paginate_button {
  background: none;
  border: none;
}

.dataTables_wrapper .dataTables_filter{
  float: none!important;
  text-align: left!important;
}
.dataTables_filter input[type="search"]{
  border:1px solid #ccc;
  width:100%;
  padding: 5px;
  margin: 0!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background: var(--c2)!important;
  color:var(--c1)!important;
  border-radius: 2em;
}
.dataTable tr.selected{
  background: var(--c3)!important;
}
table.dataTable, table.dataTable th, table.dataTable td{
  box-sizing: inherit!important;
}

.detail-box{
  display: none;
  width:50%;
  background: var(--c3);
  padding-bottom: calc(var(--p)/2);
}

.detail-box.picked{
  display: flex;
  flex-wrap: wrap;
}
.detail-item{
  width:50%;
  padding: calc(var(--p)/2) calc(var(--p)/2) 0 calc(var(--p)/2);
  font-family: var(--fn);
}
.detail-item.desc{
  width:100%;
}
.detail-item.desc p+p{
  text-indent: calc(var(--p)/2);
}
.detail-item h3{
  border-bottom: 1px solid var(--c2);
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.country{
  text-transform: capitalize;
}

/* resources  */

#filter-btns{
  border-bottom:1px solid var(--c1);
}
.btn.button{
  margin-bottom: 5px;
  padding: calc(var(--p)/3) calc(var(--p)/3);
}
.btn.active {
  background-color: var(--c3);
  color: var(--c1)!important;
}
.resource{
  overflow: hidden;
  max-height: 0;
  display: flex;
  align-items: flex-start;
  padding: 0!important;
}
.resource .title{
  margin-bottom: 10px;
}
.resource.show{
  max-height:500px;
  padding: calc(var(--p)/2) 0!important;
  border-bottom:1px solid var(--c1);
}

.resource .link{
  color:gray;
  font-family: "liberation mono";
  font-size: 14px;
  line-height: 1.3em;
  font-weight: normal;
}
.resource .link a{
  text-decoration: none;
}
.resource .desc{
  font-size: .8em;
  line-height: 1.3em;
  color:gray;
}
.add-resource{
  background: var(--c3);
  padding: var(--p);
}
.tag{
  background: #eee;
  margin-right: 8px;
  padding:2px 8px;
  text-transform: uppercase;
  font-size: .7em;
  color: #333;
}
#wrap_Inputfield_tags ul{
  display: flex;
  justify-content: space-between;
}

/* About  */

body[data-page="about"] main .box{
  max-width:48%;
  width: 100%;
  border:2px solid var(--c3);
  padding:var(--p);
  margin-bottom: var(--p);
}

/* Contact */

body[data-page=contact] section.box:nth-child(1){
  align-self: flex-start;
  background:var(--c3);
  padding:var(--p);
}
body[data-page=contact] section.box:nth-child(1) ul:nth-of-type(1){
  margin-bottom: var(--p);
}
 body[data-page=contact] section.box:nth-child(2){
  padding-left: var(--p);
} 
body[data-page=contact] section.box:nth-child(2) h3{
  margin:20px 0 0 0;
}

a{color:inherit;}
button, .button{
  font-family: "ppp2";
  background: var(--c1);
  padding: calc(var(--p)/2);
  color: var(--c2);
  cursor: pointer;
  color:#eee;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: .7em;
  text-decoration: none;
}
.text p, .text ul{
  margin-bottom: calc(var(--p)/2);
}
.text ul{
  padding-left: var(--p);
}
.text ::marker{
  content: "—";
}
.text li{
  padding-left: calc(var(--p)/2);
}

/* Submit */

.InputfieldFormBuilderFileUpload input{
  border:0!important  ;
  padding: 7px 0 0px 0!important;
}
.InputfieldContent, .InputfieldHeader{padding-left: 0!important;}

.success{
  font-size: 2em;
  line-height: 1.3em;
  font-family: ppp2;
  border:2px solid black;
  padding: var(--p);
}

/* Utils */

main h1,main h2, main h3{
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 1px;
  font-family: "ppp2";
}
main>h1{
  display: none;
}
main h2{
  font-size: 1.2em;
  margin-bottom: .5em;
}
main h3{
  font-size: .8em;
  line-height: 1em;
  margin-bottom: 0;
}

.container{
  display: flex;
  flex-wrap: wrap;
  padding: var(--p);
  justify-content: space-between;
}

a{color:inherit;}
a:hover{color:var(--c);}
.b11{width:100%;}
.b12{width:50%;}
.b13{width:calc(33.33% - var(--p)/2 );}
.b23{width:66.66%;}
.padding-top {padding: 0; padding-top: var(--p);}
.padding-bottom {padding: 0; padding-bottom: var(--p);}
.nopadding-side {padding-right: 0; padding-left: 0;}
.nopadding-vert {padding-top: 0; padding-bottom: 0;}
.nopadding {padding: 0;}
.text h1{
  margin-bottom: var(--p);
}

@media only screen and (max-width: 700px) {
  header .box{width:40%; font-size: 6vw;}
  header .select{background-size: 15px;}
  .box{
    width:100%;
  }
}
@media only screen and (max-width: 400px) {
  :root{
    --p:20px;
  }
}
@keyframes showLetters {
  0%{opacity:0;}
  1% {opacity: 1;}
  99% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes float {
  0%  {bottom:5px;}
  50% {bottom:15px;}
  100%{bottom:5px;}
}

/* PPP logo */
.p1 {
  transform: scale(1) rotate(0deg) translate(0px,0px) skew(20deg,0deg);
  position: absolute;
  left: .2em;
}
.p2 {
  transform: scale(1) rotate(0deg) translate(0px,0px) skew(-20deg,0deg);
  position: absolute;
  left: 2em;
}
.p3 {
  position: absolute;
  left: 4.1em;
}

@media only screen and (max-width: 700px) {
  .box, body[data-page="about"] main .box{
    width:100%;
    max-width: 100%;
    margin-bottom:var(--p);
  }
  .ppp-intro-image{
    height: 85vw;
    margin-top: 4vh;
  }
  .image-board{display: none;}
  #table,.detail-box,
  #table_wrapper{
    height:43vh!important;
    width:100%;
    overflow: scroll;
  }
  #table_wrapper{
    font-size: 14px;
    line-height: 1.2em;
  }
  .detail-item{width:100%;margin-bottom: var(--p);}
  .home-box-list{padding:0;}
  .image-list{flex-wrap: wrap;}
  .image-list a{width:100px; top:0!important;left:0!important;}
  .Inputfield:nth-child(2n) .InputfieldContent, .Inputfield:nth-child(2n) .InputfieldHeader{padding-left: 0!important;}

}
::selection{
  background: var(--c1);
  color: var(--c2);
}


@keyframes logo-0 {
  0%   {top: -10px; left:0;}
  20%  {top: 10px; left:5px;}
  50%  {top: -5px; left:-2px;}
  100% {top: 0px; left:0px;}
}
@keyframes logo-1 {
  0%   {top: 10px; left:10;}
  20%  {top: -7px; left:5px;}
  50%  {top: 5px; left:-4px;}
  100% {top: px; left:0px;}
}
@keyframes logo-2 {
  0%   {top: 0px; left:-10;}
  20%  {top: 10px; left:-8px;}
  50%  {top: 0px; left:-4px;}
  100% {top: 0px; left:0px;}
}
@keyframes logo-3 {
  0%   {top: -4px; left:-13;}
  20%  {top: 5px; left:-10px;}
  50%  {top: 2px; left:-2px;}
  100% {top: 0px; left:0px;}
}