/*
==============================================================================
# The MIT License (MIT)
==============================================================================
# Copyright (c) 2014-2021 Jonathan Dan Zaretsky (The CryptoCoderz Team)

# Permission is hereby granted, free of charge, to any person obtaining a copy
# of this software and associated documentation files (the "Software"), to deal
# in the Software without restriction, including without limitation the rights
# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
# copies of the Software, and to permit persons to whom the Software is
# furnished to do so, subject to the following conditions:

# The above copyright notice and this permission notice shall be included in all
# copies or substantial portions of the Software.

# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
# SOFTWARE.

# PupaCoin PPCN website is a public website created for general purposes. 
# This bot was developed to better support the PupaCoin PPCN blockchain community.
*/

html, body {
  width: 100%;
  height: 100%;
  min-width: 950px;
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
}

body {
  font: normal 1em/1.5em 'Open Sans', sans-serif;
  color: #000;
  margin-bottom: 20px;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#807154+0,564b36+100 */
background: #807154; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #807154 0%, #564b36 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #807154 0%,#564b36 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #807154 0%,#564b36 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#807154', endColorstr='#564b36',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
/*
  background: url("bin/img/london guards.jpg") center center;
  background-size: cover;
  background-attachment: fixed;
*/

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 360px;
  z-index: 999;
  text-align: center;
  
    /* shadow for body text */
  
   color: white;
text-shadow: 0 5px 15px #000;
}

#main-content {
  text-align: left;
  margin-top: 50px;
  margin-left: 25px;
}

.wrapper {
  max-width: 1250px;
  width: 90%;
  margin: 0 auto;
}

.splash-title {
  color: white;
  font-size: 3em;
  margin-top: 100px;
  text-shadow: 0 2px 10px #000;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
}

a.splash-arrow {
  color: white;
  background:#202020;
  font-size: 1.2em;
  position: top;
  bottom: 55px;
  left: 50%;
  margin-left: -25px;
  padding: 10px;
  width: 150px;
  height: 150px;
  font-weight: bold;
  -webkit-transition: all 0.1s ease;
          transition: all 0.1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  border: 0px solid white;
  border-radius: 500%;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.7);
}

a.splash-arrow:hover {
  text-decoration: none;
  bottom: 50px;
}

header {
  height: 5em;
}

header a {
  text-decoration: none;
}

/*PupaCoin header*/
header h1 {
  float: left;
  font-size: 1rem;
  line-height: 1.5;
}

header nav ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  float: right;
  list-style: none;
}

header nav li {
  -webkit-align-content: center;
  -moz-align-content: center;
  -ms-flex-line-pack: center;
          align-content: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-box-pack: start;
          justify-content: flex-start;
  -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 0 .5em;
  list-style: none;
}

/* logo */
.logo {
float: left;

}

@media all and (max-width: 690px) {
  header h1 {
    width: 100%;
    text-align: center;
  }

  .splash-title {
    font-size: 2em;
  }

  .splash-h3 {
    font-size: 1em;
  }
}
@media all and (max-width: 480px) {
  .splash-title {
    font-size: 1.5em;
  }

  .splash-h3 {
    font-size: 1em;
  }
}
.splash {
  background: rgb(108, 95, 71,0.2);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 360px;
  z-index: 999;
  text-align: center;
}

/* BELOW HERE ARE NAVIGATION CSS CONTROLS */

nav {
  display: block;
  float: right;
}
nav ul {
  list-style: none;
  margin-top: 10px;
  margin-right: 35px;
  cursor: pointer;
}
nav ul li {
  display: inline;
 /* padding: 5px; */
  padding: 10px 15px 10px 15px;
  margin-right: 5px;
  border-radius: 5px;
  background: #807154;
  color: white;
  -webkit-transition: all .3s ease;
          transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
}

  nav ul li:hover {
  background: #f3ed49;
  color: #fff;
  -webkit-transition: all .3s ease;
          transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
}



@media only screen and (max-width: 768px) {
  .container {
    width: 100%;
  }

  #nav-colapse {
    display: block;
    margin: 5px 10px 0 0;
    float: right;
    cursor: pointer;
    padding: 5px;
    background: gray;
    color: white;
    border-radius: 3px;
  }

  #nav-colapse:hover {
    background: silver;
  }

  .nope {
    display: none;
  }

  .hero {
    height: 300px;
  }
}

#navbar {
  height: 44px;
  width: 98%;
  background: rgba(216, 222, 62, 0.7);
  padding: 10px;
  margin-left: 2%;
  border-radius: 50px 5px 50px 5px;

  z-index: 1;
}
#navbar::after {
  clear: both;
  content: "";
  display: table;
}

/* h1 font color control */
.headcolor a {
color: white;
  font-size: 1em;
  text-shadow: 0 2px 10px #000;
}

/* Href design */
#linkclr {
    border-radius: 0;
    color: white;
    background: #807154;
    text-shadow: 0 2px 10px #000;
    font-weight: bold;
    -webkit-transition: all .3s ease;
          transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -ms-animation-delay: 1.5s;
}

#linkclr:hover {

    border-radius: 0;
    background: #f3ed49;
    text-shadow: 0 2px 10px #000;
    font-weight: bold;
    -webkit-transition: all .3s ease;
          transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -ms-animation-delay: 1.5s;
}

/* Roadmap reference */
.roadmap {
    background-image: url(ROADMAP_SMALL.jpg);
    background-position: left;
    height: 382px;
    background-repeat: no-repeat;
    margin-top: 5px;
    z-index:999999;
    position:relative;
    width: 600px;
    margin-top: 8px;
    margin-left: 20%;
}

/*  buttons/links disabled and moved to downloads page.css
.configdown {
    background-image: url(config.png);
    background-position: left;
    height: 80px;
    background-repeat: no-repeat;
    margin-top: 5px;
    z-index:999999;
    position:relative;
    width: 325px;
}

.sourcedown {
    background-image: url(source.png);
    background-position: left;
    height: 80px;
    background-repeat: no-repeat;
    margin-top: 5px;
    z-index:999999;
    position:relative;
    width: 325px;
    margin-left: 162.5px;
}

.chaindown {
    background-image: url(blockchain.png);
    background-position: left;
    height: 80px;
    background-repeat: no-repeat;
    margin-top: -80px;
    z-index:999999;
    position:relative;
    width: 325px;
    margin-left: 487.5px; 
}

.winwalletdown {
    background-image: url(325x80_winwall.png);
    background-position: left;
    height: 80px;
    background-repeat: no-repeat;
    margin-top: 5px;
    z-index:999999;
    position:relative;
    width: 325px; 
}

.macwalletdown {
    background-image: url(325x80_macwall.png);
    background-position: left;
    height: 80px;
    background-repeat: no-repeat;
    margin-top: 5px;
    z-index:999999;
    position:relative;
    width: 325px;
    margin-top: -80px;
    margin-left: 325px;
}

.ubuntuwalletdown {
    background-image: url(325x80_ubuntuwall.png);
    background-position: left;
    height: 80px;
    background-repeat: no-repeat;
    margin-top: 5px;
    z-index:999999;
    position:relative;
    width: 325px;
    margin-top: -80px;
    margin-left: 650px;
}

 Normal styles for the modal 
#modal {
  left:50%;
  margin:-250px 0 0 -40%;
  opacity: 0;
  position:absolute;
  top:-50%;
  visibility: hidden;
  width:80%;
 
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
   Make the modal appear when targeted 
  #modal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#modal .header,#modal .footer {
  border-bottom: 1px solid #e7e7e7;
  border-radius: 5px 5px 0 0;
}
  #modal .footer {
    border:none;
    border-top: 1px solid #e7e7e7;
    border-radius: 0 0 5px 5px;
  }
#modal h2 {
  margin:0;
}
#modal .btn {
  float:right;
  margin-top: -10px;
}
#modal .copy,#modal .header, #modal .footer {
  padding:15px;
}
.modal-content {
  background: navy;
  position: relative;
  z-index: 20;
  border-radius:5px;
}
#modal .copy {
  background: silver;
}

#modal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}
*/