:root {
    --graydrk: #434343;
    --yellow1: #ffc107;
}

body {
    max-width: 500px;
    /* max-height: 812px; */
    margin: 0 auto;
    overflow-x: hidden;
  }
   
.nav img{
    max-height: 98px;
}

body,#content{position: relative;}

.bg-gray {
    background: var(--graydrk);
    color: white;
}
.bg-yellow { background:var(--yellow1); }
body,
.txt-lato {
    font-family: 'Lato', sans-serif;
}

a {
    cursor: pointer;
    text-decoration: none !important;
}

.txt-u {
    text-decoration: underline;
}

.scl a i {
    font-size: 30px;
    color: white;
}
/*Desktop content css*/
.hdrd-title {
    letter-spacing: 5px;
    border-bottom: 2px solid var(--yellow1);
}
#aboutme .col ul { justify-content: center;text-align: center; }

#blog .card-columns .card { margin:3em 0 2em 0;border:1.5px solid #434343; }
#scrollspy_nav a { font-size:1.5em; }
#scrollspy_nav a.active { background:#434343;color:white; }

#content section { padding:50px 0 30px 0; }
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background: var(--yellow1);
  z-index:998;
}
.sticky + #content {
  padding-top: 60px;
}
/*mobile content css*/
.name h4 {
    margin: 0 0 5px 0;
}

.rounded-20 {
    border-radius: 20px;
}

.btn-grp a figcaption {
    color: black;
}

.btn-grp .card img {
    width: 70px;
}

.title {
    background: transparent;
    border: none;
}

.title .card-body {
    background: var(--graydrk);
    color: white;
    padding: 10px;
    border-radius: 15px;
}

.title .card-body .card-title {
    font-size: 25px;
    text-align: center;
    margin: auto;
}

.back2 {
    background: url("../../assets/img/back2.png");
    background-size: auto;
    background-position: top right;
    background-repeat: no-repeat;
}

.hdr-title {
    letter-spacing: 5px;
}

.ltr-spc {
    letter-spacing: 3px;
}

.ltr-spc p {
    font-size: 20px;
    margin: 3px 0;
}

.border-btm50 {
    border-bottom: 2px solid #434343;
    width: 50%;
}

.dvdr {
    background: #434343;
}

.text-small {
    font-size: 14px;
    color: #707070;
}

#pills-tab .nav-link {
    padding: 0;
}

#pills-tab a.active {
    background: black;
}

.nav-icon {
    height: 19vmin;
}

li.dropup {
    position: static;
}

.dropdown-menu {
    padding: 10px;
    margin: 0 0 15px 10px !important;
    border-radius: 20px;
    border: none;
}

.dropdown-menu:before {
    content: "";
    position: absolute;
    bottom: -15px;
    right: 25px;
    width: 0;
    height: 0;
    border-top: 20px solid #434343;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
}

.dropdown-menu ul li {
    display: inline-block;
}

.dropup .nav-link:focus {
    background: black;
}

.tab-pane {
    padding-bottom: 15vh;
}

#tab2 .card,
.card-group-tab .card {
    background: transparent;
    border: 2px solid gray;
    border-radius: 20px;
    margin-bottom: 80px;
}

#tab2 .card-body {
    text-align: center;
}

#tab2 .upquote-div {
    left: 10px;
    position: absolute;
}

#tab2 .upquote-div i {
    background: white;
    padding-left: .5rem;
    margin: -1.5rem 0 0 10px;
    width: 75px;
    font-size: 4em;
}

#tab2 .badge-div {
    bottom: -1%;
    right: 45%;
    position: absolute;
}

#tab2 .badge {
    font-size: 18px;
    margin-right: 10px;
    width: 100%;
}

#tab2 .dwn-div {
    bottom: -15px;
    right: 5%;
    position: absolute;
}

#tab2 .dwn-div a i {
    width: 55px;
    padding: .25rem;
    margin-bottom: -1.4rem;
    background: white;
}
/*Stories tab*/
#tab5 .card
    {
    background: transparent;
    border: 2px solid gray;
    border-radius: 20px;
    margin-bottom: 50px;
}

#tab5 .date-div { top:-5%; left:10%;position: absolute;margin-bottom: -0.5rem; } 
#tab5 .date-div .badge { margin-right:10px;width:100%; }

#cntfrm .input-group {
    border: 1.1px solid #434343;
    border-radius: 20px;
    padding: 6px;
    background: white;
}

#cntfrm .input-group-text {
    border: 0;
    background: transparent;
    width: 50px;
    padding: 0;
}

#cntfrm .form-control {
    border: 0;
    border-radius: inherit;
    align-self: center;
}

#cntfrm .btn {
    font-size: 28px;
    border-radius: 20px;
    letter-spacing: 10px;
    text-decoration: underline;
}

#tab5 .card .badge {
    font-size: 20px;
}

#tab4 .card {
    background: transparent;
    border: 0;
}

#loading {
    background: white;
    height: 100vh;
}

.fixed-middle {
    position: fixed;
    top: 45vh;
    text-align: center;
    width: 100vw;
}

#nav1 {
    z-index: 1;
}

/*Blog tab content css*/
#blogtabcontent .tab-pane {
    padding-bottom: 15px;
}

.blog-badge {
    top: -5%;
    left: 10%;
    position: absolute;
}

.blog-badge .badge {
    margin-right: 10px;
    width: 100%;
    background: white;
    font-size: 1rem;
}

.blog-bottom {
    bottom: -15px;
    left: 10%;
    position: absolute;
    background: white;
    margin-bottom: -16px;
}

#blogtab {
    border: 0;
}

#blogtab a {
    font-size: 1.5rem;
    padding: 0 10px;
}

.prev,
.next {
    padding: 0 10px;
    color: black;
    font-size: 1.5rem;
}

.prev:focus,
.prev:active,
.next:focus,
.next:active {
    color: black;
}

#blogtab .nav-item {
    border: 1.5px solid gray;
}

#blogtab .nav-link {
    margin: 0;
    color: black;
    border-radius: 0;
}

#blogtab .nav-item a.active {
    background: #ffc107;
    border-color: #ffc107;
    border-radius: 0;
    color: black;
}

#blogtab .nav-item a:hover,
#blogtab .nav-item a:focus {
    background: #ffc107;
    border-color: #ffc107;
    border-radius: 0;
    color: black;
}

/*hide the border by default in bootstrap input elements*/
.btn:focus,
textarea:focus,
.page-link:focus,
select.form-control:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
    box-shadow: inset 0 -1px 0 transparent;
}
/*Blog page css*/
#navblog .nav-link { padding:0; }