@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

@media (min-width: 330px) {
  td{
    padding: 0;
    line-height: 80%;
  }

  h1 {
    font-size: 5.5vh;
    margin: 0;
  }

  .standard {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0% 10% 0% 10%;
    color: white;
    border: 10px solid white;
    margin-left: 10%;
    margin-right: 10%;
    z-index: 99;
    background-color:inherit;
    min-width: 50vw;
    font-size: 2.9vh;
  }
  .block-left{
    margin-top: 2vh;
    position: relative;
    transform: none;
    border: none;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    width: 100%

  }
  .block-right{
      position: relative;
      transform: none;
      border: none;
      display: inline-block;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
  }

  .block-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0% 10% 0% 10%;
    border: 10px solid white;
    margin-left: 10%;
    margin-right: 10%;
    z-index: 99;
    background-color:inherit;
    min-width: 50vw;
    line-height: normal;
  }

  .timeline{
    border-right: 10px solid white;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
    float: left;
    position: absolute;
    left: 50%;
    z-index: 1;
  }

  .timelinekiller{
    width: 100%;
    height: 50%;
    float: left;
    position: absolute;
    z-index: 2;
    background-color: inherit;
  }

  .dot{
    width: 1.2vw;
    height: 1.2vw;
    border-radius: 1.3vw;
    display: inline-block;
    margin: .05rem;
  }
  .yearlabel{
    margin:0;
    font-size: 3.0vw;
  }
  .imgblock{
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .imgblock img{
    width: 30%;
  }

}
.imgcenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.center {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
}

a {
  font-family: "Roboto";
  font-weight: 400;
  text-decoration: none;
  color: #00A323;
}

a:hover {
  color: gray;
}

.whitelinks a{
    font-family: "Roboto";
    font-weight: 400;
    text-decoration: none;
    color: white;
}
.whitelinks a:hover{
  color: #DDD;
}


h2,h3,h4 {
  margin: 0;
}

html,
body {
  min-height: 100% !important;
  height: 100%;
  margin: 0;
}

.panel {
  height: 100%;
  width: 100%;
  font-family: "Rokkitt";
  font-size: 2.9vh;
  margin-bottom: 300px;
  line-height: 90%;
}
#instructions{
  text-align: center;
  font-family: 'Indie Flower', cursive;
  position:absolute;
  top: 65vh;
  left: 65vw;
  font-size: 4vh;
  animation-name: pop;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  color: white;

}
@keyframes pop{
  0% {top: 65vh;}
  50% {top: 63vh;}
  100% {top: 65vh;}
}

.panel.green {

  background-color: #B7DCAF;
}

.blue {
  background-color: #3883d8;
}

.turqoise {
  background-color: #38ced7;
}

.brown {
  background-color: #a66f28;
}

.salmon {
  background-color: #F58B7C;
}

.skin {
  background-color: #FCD19F;
}

.black {
  background-color: #000000;
}

.white {
  background-color: #FFFFFF;
}

.red {
  background-color: #cf3535;
}

.green {
  background-color: #B7DCAF;
}

.orange {
  background-color: #ea6300;
}

.grey {
  background-color: #5F666D;
}

.sand {
  background-color: #DBCCBE;
}

.emerald {
  background-color: #088A73;
}

.chalkboard {
  background-color: #4D8161;
}

.light {
  background-color: #F6F7F8;
}

.eggshell {
  background-color: rgb(239, 239, 239);
}

.dark {
  padding: 10%;
  color: black;
}

.city {
  background-image: url('/img/sophal_street.png');
  background-size: cover;
}

.sandals {
  background-image: url('/img/sophal_sandals.png');
  background-size: cover;
}

.education {
  background-image: url('/img/sophal_education.png');
  background-size: cover;
}

.row{
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  font-size: 0px;
  width: 100%;
}
.dotblue{
  background-color: #0951A1;
  color: #0951A1;
}
.dotorange{
  background-color: #FFAE32;
  color: #FFAE32;
}
.dotyellow{
  background-color: #FFD132;
  color: #FFD132;
}
.dotpurple{
  background-color: #5143DD;
  color: #5143DD;
}
#popgrowth{
  display: inline-block;
  line-height: normal;
}
.notdot{
  background-color: transparent;
}
td{
  padding: .25em;
}
input{
  border: none;
  border-bottom: 1px white solid;
  font-family: "Rokkitt";
  font-size: 4vh;
  background-color: transparent;
  display:inline;
  color: white;
}
#amt{
  width: 4em;
  text-align: center;
}
#email{
  text-align: center;
}
#names{
  width: 8em;
}
#city{
  width: 12em;
}
#street{
  width: 16em;
}
#zip{
  width: 5em;
}
#state{
  width: 2em;
}
#cc{
  width: 16em;
}
#cvc{
  width: 4em;
}
#donate_form{
  text-align:center;
  margin-top: 5vh;
  margin-bottom: 5vh;
  font-size: 6vh;
  display: none;
  line-height: normal;

}
#contact_form{
  text-align:center;
  margin-top: 5vh;
  margin-bottom: 5vh;
  font-size: 6vh;
  display: none;
  line-height: normal;

}
button{
  font-family: "Rokkitt";
  font-size: 4vh;
  border: none;
  background-color: #00A323;
  border-radius: 1vh;
  border: 1px solid white;
  color: white;
  padding: 1.5vh;
}

input[type=radio].css-checkbox {
							position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
						}

						input[type=radio].css-checkbox + label.css-label {
							padding-left:55px;
							height:50px;
							display:inline-block;
							line-height:50px;
							background-repeat:no-repeat;
							background-position: 0 0;
							font-size:5vh;
							vertical-align:middle;
							cursor:pointer;

						}

						input[type=radio].css-checkbox:checked + label.css-label {
							background-position: 0 -50px;
						}
						label.css-label {
				background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_6f8ba1b8becacc84c53c3fb2a008baa7.png);
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

table{
  font-size: 2.3vh;
}
form{
  font-size: 3vh;
}
.top{
  top: 50%;
}
@media (min-width: 800px) {
  h1 {
    font-size: 8vh;
    margin: 0;
  }
  .standard{
    padding: 0% 10% 0% 10%;
    color: white;
    z-index: 99;
    border: none;
    font-size: 2.9vh;
  }

  .block-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0% 10% 0% 10%;
    border: 10px solid white;
    margin-left: 10%;
    margin-right: 10%;
    z-index: 99;
    background-color:inherit;
    min-width: 50vw;
    line-height: normal;
  }

  .block-right {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%,-50%);
    border: none;
    padding: 0% 10% 0% 10%;
    color: white;
    margin-left: 10%;
    margin-right: 10%;
    z-index: 99;
    background-color: transparent;
    min-width:0;
    margin-left: 1em;
    margin-right: 0;
    width: auto;

  }

  .block-left {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-100%,-50%);
    border: none;
    padding: 0% 10% 0% 10%;
    color: white;
    margin-left: 10%;
    margin-right: 10%;
    z-index: 99;
    background-color: transparent;
    min-width:0;
    margin-left: 1em;
    margin-right: 0;
    width: auto;
  }
  .pokie-right{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2%;
    background-color: white;
    height: .5em;
  }
  .pokie-left{
    position: absolute;
    top: 50%;
    left: 48%;
    width: 2%;
    background-color: white;
    height: .5em;
  }
  .dot{
    width: .8vw;
    height: .8vw;
    border-radius: .8vw;
    display: inline-block;
    margin: .05rem;
  }
  .yearlabel{
    margin:0;
    font-size: 2.0vw;
  }
  .imgblock img{
    width: 85%;
    border: 10px solid white;
  }
}