
body{
  margin :0px;
  padding: 0px;
  background-color: #191f26 /*#262626*/;
}

.myheader{
  width: 100%;
  height: 3.75rem;
  background-color: #21403f;
}
.fa-bars{
  color: white;
  font-size: x-large;
  padding-right: 0.625rem;
}

.nav-bar{
  width :97%%;
   padding: 15px 0px 15px 15px;
   text-align: center;
}
#header-title{
  color: white;
  font-family: "Ubuntu", sans-serif;
  font-size: x-large;
}
.navmenu a {
  text-decoration: none;
}
.fa{
  color: white;
}

ul.navmenu {
  font-size: 1.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  white-space: nowrap;
}

ul.navmenu:after {
  content: "";
  clear: both;
  display: block;
}

ul.navmenu li {
  cursor: pointer;
  list-style: none;
  display: block;
  position: relative;
  padding: 0;
}

ul.navmenu li a {
  display: inline-block;
}

/* switch symbol for showing child */
ul.navmenu li span {
  display: inline-block;
  text-align: right;
  width: 1.4em;
}

/* show child */
/*ul.navmenu li:hover ul,*/
ul.navmenu li ul.childopen
{
  display: block;
}

ul.navmenu li ul {
  display: none;
}

/* expanded nav child menu */
ul.navmenu li ul {
  padding: 0;
}

/* expanded nav menu */
@media (min-width: 61rem) {

  .navicon {
    display: none;
  }

  .navmenu {
    display: block;
  }

  ul.navmenu {
    float: right;
    display: inline-table;
    padding: 0 1em;
  }

  ul.navmenu li {
    float: left;
    padding:0rem 0.625rem 0rem 0.625rem;
  }

  ul.navmenu li a {
    line-height: 7.1875rem;
    padding: 0 1.5625rem;
  }

  /* expanded nav child menu */
  ul.navmenu li ul {
    position: absolute;
    z-index: 999;
    top: 100%;
    left: 0;
  }

  ul.navmenu li ul li {
    float: none;
  }

  ul.navmenu li ul li a {
    width: 100%;
    line-height: 4.5rem;                                  
    padding: 0 2.1875rem;
  }

}

/* collapsed nav menu */
@media (max-width: 61rem) {

  .navicon {
    float: right;
    font-size: 1.65rem;
    //line-height: 2.8125rem;
    text-align: center;
    width: 3.4rem;
    //margin: 2.1875rem 2rem 2.1875rem 0;
    cursor: pointer;
  }

  .navmenu {
    clear: left;
    display: none;
  }

  .navmenu.show {
    display: block;
  }

  ul.navmenu li a {
    width: 100%;
    line-height: 4.5rem;
    padding: 0 2.1875rem;
  }

  /* collapsed nav child menu */
  ul.navmenu li ul {
    position: relative;
    left: 0;
  }

}

@media (max-width: 37.5rem) {
  .navicon  {
    margin-right: 1.5rem;
  }
}

.effect1{
    -webkit-box-shadow: 0 7px 6px -6px #000;
       -moz-box-shadow: 0 7px 6px -6px #000;
            box-shadow: 0 7px 6px -6px #000;
}

.main-section{
  width: 100%;
  text-align: center;
  margin-top:1.875rem; 
}

#image-container{
  display: block;
    max-width: 100%;
    max-height: 380px;/*26.23rem;*/
    width: auto;
    height: auto;
    margin: 0 auto !important;
    display: inline-block;
}

.effect8
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect8:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}
.fa-angle-double-left{
  font-size: xx-large;
  float :left;
}
.fa-angle-double-right{
  font-size: xx-large;
  float :right;
}
.main-section-content{
  text-align: center;
  width: 70%;
  margin:auto;
}

.round-button {
  width: 5.5%;
  text-align: center;
  margin: auto;
  padding-top: 10px;
}

.round-button-circle {
  /*width: 100%;
  height:0;
  padding-bottom: 100%;
  border-radius: 50%;
  border:10px solid #cfdcec;
  overflow:hidden;
    
  background: #4679BD; 
  box-shadow: 0 0 3px gray;*/
  width: 80px;
    height: 60px;
    padding-bottom: 20px;
    padding-left: 4px;
    border-radius: 30%;
    /*border: 3px solid #82dc1a;*/
    overflow: hidden;
    background: #145b5f;
    box-shadow: 0px 0px 21px #211f1d;
    visibility: hidden;
}
.round-button-circle:hover {
  background:#197579;
}
.round-button a {
    display:block;
  float:left;
  width:100%;
  padding-top:50%;
    padding-bottom:50%;
  line-height:1em;
  margin-top:-0.5em;
    
  text-align:center;
  color:#e2eaf3;
    font-family:Verdana;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
}

#menu {
    margin-left: -240px;
    width: 240px !important;
    
  }

  #menu .pure-menu ul{
    border-top:none !important;
  }

#profile-pic{
  padding: 10px !important;
  float: left;
  background-color: #21403f !important;
}    

#profile-pic-holder{
  height: 60px !important;
  padding: 0px !important;
  display: inline-block;
    width: 100%;
   background-color: #21403f !important;
} 

#profile-name{
  padding-top: 15px;
    font-size: 15px;
    float: left;
    font-family: "Ubuntu", sans-serif;
    text-transform: none !important;
}
#menu .pure-menu li a{
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
}

#menu .pure-menu li{
  text-align: left;

}

#menu .pure-menu li:hover{
  border-bottom: 1px solid #D62929;
}

#footer{
    width: 100%;
    height: 30px;
    text-align: center;
    margin-top: 10px;
    padding-top: 15px;
    bottom: 0;
    

}
#msg{
  margin: 0 auto;
  color: white;
  font-family: 'Poiret One', cursive;
  /*float:right;*/
  padding-right: 10px;
}

#style-2{
   height: 80vh;
   overflow-y:scroll;
   max-height: 90vh;
}
.pure-menu ul{
  /*height:200px;*/
  /*overflow:hidden; */
 /* position: absolute;*/

  
}

#menu{
overflow-y: hidden; 
overflow-x: hidden;
}

#style-2::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #171D20;
}

#style-2::-webkit-scrollbar
{
  width: 5px;
  background-color: #171D20;
}

#style-2::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #D62929;
}

#link-adder{
  width: 100%;
}
#album-name{
  margin-top: 15px
}
#album-link{
  margin-top: 15px
}

.pure-button-primary{
  background-color: #D62929;
  width: 90%;
  font-family: 'Roboto Condensed', sans-serif;
  margin-top:15px;
}

input#album-name:focus {
  -webkit-box-shadow: inset 0 0 5px #D62929 !important;
  -moz-box-shadow: inset 0 0 5px #D62929 !important;
  box-shadow: inset 0 0 5px #D62929 !important;
  outline: none; /* Newer versions of Chrome has input outline on focus */
}

#love{
    color: red;
}
#menu{
    background-color: #171D20 !important;
}

