/* ----------------------------------

Name: main.css
Version: 1.0

-------------------------------------

Table of contents
        
    01. Navbar
    02. Slider
    03. About us
    04. Services
    05. Some Facts
    06. Portfolio
    07. Testimonials
    08. Blog
    09. Contact
    10. Footer
*/

body {
    font-family: 'Muli', sans-serif;
}

/* ==========================
   [01]. Navbar
========================== */
.navbar {
    background: #242527 !important;
    /*padding: 25px 0;*/
}

.navbar .nav-item {
    font-size: 14px;
    font-weight: 600;
    margin: 0 20px;
}

.navbar .nav-item .nav-link {
    color: #7d8792;
}

.navbar .nav-item .nav-link:hover {
    color: #ffffff;
}

.navbar .navbar-nav .dropdown .dropdown-menu {
    margin-top: 25px;
    background:#212222;
}

.navbar .navbar-nav .dropdown span {
    font-size: 10px;
    margin-left: 3px;
}

.navbar .navbar-nav .dropdown .dropdown-menu a {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 10px;
}

.navbar .navbar-nav .dropdown .dropdown-menu a:hover {
    background: #e0a80d;
}

/* ==========================
   [08]. Blog
========================== */

.blog {
    padding: 75px 0 100px 0;
    background: #2d2e2e;
}

.blog h2 {
    font-size: 30px;
    font-weight: 800;
    color: #e0a80d;
    margin-bottom: 75px;
}

.blog .box {
    border-radius: 10px;
    background: #212222;
    margin-bottom: 30px;
}

.blog .box .image {
    position: relative;
}

#guide-content img {
    width: 100%;
}

.blog .box .image img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.blog .box .image a {
    position: absolute;
    right: 20px;
    top: 20px;
    padding: 5px 20px;
    color: #ffffff;
    background: #e0a80d;
    border-radius: 35px;
    font-size: 13px;
    text-decoration: none;
}

.blog .box .text {
    padding: 25px;
}

.blog .box h1 {
    line-height: 25px;
    font-weight: 700;
    color: #e0a80d;
    margin-bottom: 25px;
    margin-top: 30px;
    text-decoration: none;
    cursor: pointer;
}

.blog .box h2 {
    font-size: 22px;
    line-height: 25px;
    font-weight: 700;
    color: #eee;
    margin-bottom: 25px;
    margin-top: 30px;
    text-decoration: none;
    cursor: pointer;
}

.blog .box ul {
    font-size: 16px;
    font-weight: 400;
    color: #eee;
    line-height: 26px;
}

.blog .box h3 {
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    color: #eee;
    margin-bottom: 25px;
    margin-top: 30px;
    text-decoration: none;
}

.blog .box h4 {
    font-size: 13px;
    font-weight: 300;
    color: #e0a80d;
    margin-bottom: 20px;
    margin-top: 10px;
}

.blog .box p {
    font-size: 16px;
    font-weight: 400;
    color: #eee;
    line-height: 26px;
}

.blog .box a {
    font-size: 16px;
    font-weight: 400;
    color: #e0a80d;
    line-height: 26px;
}

/* ==========================
   [09]. Contact
========================== */

.contact {
    padding: 0 0 130px 0;
    background: #2d2e2e;
}

.contact h2 {
    font-size: 30px;
    font-weight: 800;
    color: #e0a80d;
    margin-bottom: 60px;
}

.contact .form-control {
    padding: 25px;
    font-size: 13px;
    margin-bottom: 10px;
    background: #fcf2f2;
    border: 0;
    border-radius: 10px;
}

.contact button.btn {
    padding: 10px;
    border-radius: 10px;
    font-size: 15px;
    background: #e0a80d;
    color: #ffffff;
}
.contact .info {
    padding-left: 40px;
}

.contact .info span {
    font-size: 20px;
    color: #e0a80d;
}

.contact .info p {
    font-size: 14px;
    margin: 10px 0 20px 0;
    color: #eee;
}


/* ==========================
   [10]. Footer
========================== */
.footer {
    padding: 40px 0;
    background: #242527;
}

 .footer .social-icons span{
    color: #e0a80d;
    padding: 0 5px;
}

.footer p {
    color: #ffffff;
    font-size: 14px;
    font-weight: 300;
    margin: 0;
    margin-top: 15px;
}


/* ==========================
   [11]. Media
========================== */
/*Small devices (landscape phones, 576px and up) */
@media (max-width: 575.99px) {

    .blog .box {
        margin-bottom: 30px;
    }

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

    .blog .box {
        margin-bottom: 30px;
    }

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

    .blog .box {
        margin-bottom: 30px;
    }
}


/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
}

.tooltip {
    font-size: 1.5rem;
}

abbr {
    border-bottom: 1px dashed #e0a80d !important;
    text-decoration: none !important;
}

.table {
    color: #eee;
    border: 1px solid rgb(77, 81, 83)
}

.table td, .table th {
    border: 1px solid rgb(77, 81, 83);
    border-bottom: none !important;
}

td.va-center {
    vertical-align: middle;
}

td.center {
    text-align: center;
    vertical-align: middle;
}

td.nowrap {
    white-space: nowrap;
}

.big.container-fluid {
    width: 90%;
}

.tooltip>.tooltip-inner {
    padding: 5px;
    max-width: 325px;
    width: 100%;
    border: 1px solid #151718;
    border-radius: 2px;
    -webkit-box-shadow: 1px 1px 2px #151718;
    box-shadow: 1px 1px 2px #151718;
    background-color: #151718;
    background-size: 630px 647px;
    background-clip: padding-box;
    background-image: URL("https://i.imgur.com/NGHpgrY.png");
    font-size: 16px;
    color: #9d9e9f;
    text-shadow: 1px 1px 1px rgb(21 23 24 / 30%);
    font-family: 'Open Sans', serif;
    text-align: left;
}

/* Conditions */

.condition {
    border-bottom: none!important;
    color: rgb(210, 58, 48);
    white-space: nowrap;
}

.condition:before {
    width: 16px;
    height: 16px;
    content: '';
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: inline-block;
    top: 2px;
    margin-right: 2px;
}

.bleeding:before {
    background-image: url(/assets/guide/images/condition/Bleeding.png);
}

.blinded:before {
    background-image: url(/assets/guide/images/condition/Blinded.png);
}

.burning:before {
    background-image: url(/assets/guide/images/condition/Burning.png);
}

.chilled:before {
    background-image: url(/assets/guide/images/condition/Chilled.png);
}

.confusion:before {
    background-image: url(/assets/guide/images/condition/Confusion.png);
}

.crippled:before {
    background-image: url(/assets/guide/images/condition/Crippled.png);
}

.fear:before {
    background-image: url(/assets/guide/images/condition/Fear.png);
}

.immobile:before {
    background-image: url(/assets/guide/images/condition/Immobile.png);
}

.poisoned:before {
    background-image: url(/assets/guide/images/condition/Poisoned.png);
}

.slow:before {
    background-image: url(/assets/guide/images/condition/Slow.png);
}

.taunt:before {
    background-image: url(/assets/guide/images/condition/Taunt.png);
}

.torment:before {
    background-image: url(/assets/guide/images/condition/Torment.png);
}

.vulnerability:before {
    background-image: url(/assets/guide/images/condition/Vulnerability.png);
}

.weakness:before {
    background-image: url(/assets/guide/images/condition/Weakness.png);
}

/* Boons */

.boon {
    border-bottom: none!important;
    color: #e0a80d;
    white-space: nowrap;
}

.boon:before {
    width: 16px;
    height: 16px;
    content: '';
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: inline-block;
    top: 2px;
    margin-right: 2px;
}

.protection:before {
    background-image: url(/assets/guide/images/boons/Protection.png);
}

.fury:before {
    background-image: url(/assets/guide/images/boons/Fury.png);
}

.aegis:before {
    background-image: url(/assets/guide/images/boons/Aegis.png);
}

.stability:before {
    background-image: url(/assets/guide/images/boons/Stability.png);
}

.resistance:before {
    background-image: url(/assets/guide/images/boons/Resistance.png);
}

.might:before {
    background-image: url(/assets/guide/images/boons/Might.png);
}

.swiftness:before {
    background-image: url(/assets/guide/images/boons/Swiftness.png);
}

.regeneration:before {
    background-image: url(/assets/guide/images/boons/Regeneration.png);
}

.vigor:before {
    background-image: url(/assets/guide/images/boons/Vigor.png);
}

.quickness:before {
    background-image: url(/assets/guide/images/boons/Quickness.png);
}

.resolution:before {
    background-image: url(/assets/guide/images/boons/Resolution.png);
}

.alacrity:before {
    background-image: url(/assets/guide/images/boons/Alacrity.png);
}

/* Professions */ 

.profession {
    border-bottom: none!important;
    white-space: nowrap;
}

.profession-icon {
    width: 16px;
    height: 16px;
    content: '';
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: inline-block;
    top: 2px;
    margin-right: 2px;
}

.h3 {
    color: #eee;
}

.tag-wrapper {
    justify-content:center;
    display: flex;
    min-width: 0px;
}

.tag {
    display: flex; align-items: center; flex-shrink: 1; min-width: 0px; height: 18px; border-radius: 3px; padding-left: 8px; padding-right: 8px; font-size: 14px; line-height: 120%; color: rgba(255, 255, 255, 0.7); margin: 0px 0px 0px 0px;
}

.tag-inner { 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tag-wrapper > .yellow {
    background: rgba(255, 220, 73, 0.5); 
}

.tag-wrapper > .blue {
    background: rgba(82, 156, 202, 0.5);
}

.tag-wrapper > .green {
    background: rgba(77, 171, 154, 0.5);
}

.tag-wrapper > .pink {
    background: rgba(226, 85, 161, 0.5);
}

.footer-links > a {
    color: #e0a80d;
}

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    padding: 16px 16px 16px 12px;
    display: flex;
    width: 100%;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    color:#eee;
}

.alert-default {
    background: rgba(69, 75, 78, 0.3);
}

.alert-red {
    background: rgba(89, 65, 65, 0.5);
}

.alert-green {
    background: rgba(53, 76, 75, 0.5);
}

.alert-yellow {
    background: rgba(89, 86, 59, 0.5)
}

.alert > .icon {
    padding-right: 8px;
}

code {
    color: #fff;
    border: 1px solid #1e2124;
    padding: 2px 6px;
    box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 1px -1px rgb(0 0 0 / 12%);
    border-radius: 4px;
    background-color: #2a2c31;
}

* {
    scroll-margin-top: 70px;
  }

/* Class Colors */

.elementalist, .elementalist > .gw2a-skills-embed a, .elementalist > .gw2a-traits-embed a {
    color:#f68a87;
}

.engineer, .engineer > .gw2a-skills-embed a, .engineer > .gw2a-traits-embed a {
    color:#d09c59;
}

.guardian, .guardian > .gw2a-skills-embed a, .guardian > .gw2a-traits-embed a {
    color:#72c1d9;
}

.mesmer, .mesmer > .gw2a-skills-embed a, .mesmer > .gw2a-traits-embed a {
    color:#b679d5;
}

.necromancer, .necromancer > .gw2a-skills-embed a, .necromancer > .gw2a-traits-embed a {
    color:#52a76f;
}

.ranger, .ranger > .gw2a-skills-embed a, .ranger > .gw2a-traits-embed a {
    color:#8cdc82;
}

.revenant, .revenant > .gw2a-skills-embed a, .revenant > .gw2a-traits-embed a {
    color:#d16e5a;
}

.thief, .thief > .gw2a-skills-embed a, .thief > .gw2a-traits-embed a {
    color:#c08f95;
}

.warrior, .warrior > .gw2a-skills-embed a, .warrior > .gw2a-traits-embed a {
    color:#ffd166;
}

.global-banner {
    background-color: #f8d7da;
    color: #721c24;
    padding: 8px
}

.gw2a-skills-embed > span > a > span, .gw2a-items-embed > span > a > span, .gw2a-traits-embed > span > a > span {
    vertical-align: baseline!important;
}

.gw2a-skills-embed, .gw2a-items-embed, .gw2a-traits-embed {
    white-space: nowrap;
    display:inline;
}

.gw2a-tooltip-embed > div:nth-child(2) {
    display: none;
}

.tooltip-header {
    font-size:16px;
    color:#ffc90e;
    padding-bottom:5px
}

@media (hover: none) and (pointer: coarse) {
    .gw2a-tooltip-embed {
        display: none;
    }
}

details > summary:first-of-type {
    list-style-type: none;
}
 
::-webkit-details-marker {
    display: none;
}
 
summary {
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
}
 
details > summary .details-marker:before {
    content: "\25BA";
    color:#eee;
}
 
details[open] > summary .details-marker:before {
    content: "\25BC";
    color:#eee;
}
 
details > *:not(summary) {
    padding-left: 1.25em;
}

.currency-icon {
    width: 16px;
    height: 16px;
    content: '';
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: inline-block;
    top: 2px;
    margin-right: 3px;
    margin-left: 3px;
}

.copper {
    color: #a0673a;
}

.silver {
    color: #cbcac8
}

.gold {
    color:#e5be45;
}

.blog .box h2:hover:after, .blog .box h1:hover:after {
    content: "🔗"
}

#guide-content > ol {
    color:white
}

:target {
    animation-name: anchor-animation;
    animation-duration: 5s;
}

@keyframes anchor-animation {
    from { background-color: #ffc1075b;   } 
    to   { background-color: transparent; } 
 }