body
{
    background-image: url(images/bg-default.jpg);
    background-repeat: repeat;
    margin:0;
    padding:0;
    font-family:Inter;
    font-size:13.5px;
    line-height:25px;
}

@media only screen and (max-width:700px) {
    .navi {
        display:none;
    }
    .navi2 {
        display:none;
    }
    .smallnavi {
        display:none;
    }
    .smallnavi2 {
        display:none;
    }
    .mininavi {
        display:block;
    }
    .mininavi2 {
        display:block;
    }
}

@media only screen and (min-width:701px) and (max-width:1000px) {
    .navi {
        display:none;
    }
    .navi2 {
        display:none;
    }
    .smallnavi {
        display:block;
    }
    .smallnavi2 {
        display:block;
    }
    .mininavi {
        display:none;
    }
    .mininavi2 {
        display:none;
    }
}

@media only screen and (min-width:1001px) {
    .navi {
        display:block;
    }
    .navi2 {
        display:block;
    }
    .smallnavi {
        display:none;
    }
    .smallnavi2 {
        display:none;
    }
    .mininavi {
        display:none;
    }
    .mininavi2 {
        display:none;
    }
}

.navi, .smallnavi, .mininavi {
    margin:0 auto;
    width:100%;
    position:relative;
    text-align:center;
    height:70px;
}

.mininavi {
    margin-bottom:-20px;
}

.navicontent {
    width:1000px;
    margin:0 auto;
}

.navitext {
    font-family:BBH Sans Hegarty;
    font-size:25px;
    text-align:left;
    position:absolute;
    margin:0px 0px 0px 10px;
    top:29%;
}

.navilinks {
    text-align:right;
    position:absolute;
    margin:0px;
    display:flex;
    top:10%;
}

.navilinks ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    width:770px;
    margin-left:230px;
}

.navilinks ul li a {
    display: block;
    padding: 14px 35px;
    text-decoration: none;
    font-family:BBH Sans Hegarty;
    font-size:20px;
    opacity:0.8;
}

.navilinks ul li a:hover {
    opacity:1.0;
}

.smalluser {
    text-align:right;
    position:absolute;
    margin:0px;
    display:flex;
    top:10%;
    height:55px;
    width:calc(100% - 235px);
    margin:0px 15px 0px 220px;
}

.navi2, .smallnavi2 {
    margin:0 auto;
    width:100%;
    position:relative;
    text-align:left;
    height:50px;
}

.mininavi2 {
    margin:0 auto;
    width:100%;
    text-align:center;
    position:static;
    display:none;
    margin:20px 0px -20px 0px;
}

.minilinks {
    list-style-type:none;
    margin:0;
    padding:0;
    width:100%;
    font-family:BBH Sans Hegarty;
    font-size:18px;
}

.minilinks li a {
    display:block;
    padding:10px 16px;
    text-decoration:none;
}

.navi2 a {
    opacity:0.8;
}

.navi2 a:hover {
    opacity:1.0;
}

.naviuser {
    width:1000px;
    height:50px;
    padding:10px 0px;
    margin:0 auto;
}

.smalllinks {
    text-align:center;
    position:absolute;
    margin:0px;
    display:flex;
    top:0;
    width:100%;
    z-index:1;
}

.smalllinks ul {
    list-style-type:none;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;
    width:100%;
}

.smalllinks ul li a {
    display:block;
    padding:14px 35px;
    text-decoration:none;
    font-family:BBH Sans Hegarty;
    font-size:20px;
    opacity:0.8;
}

.smalllinks ul li a:hover {
    opacity:1.0;
}

.profile {
    background-color:transparent;
    font-family:BBH Sans Hegarty;
    font-size:17px;
    border:none;
}

.profile::after {
    content:" ⏷";
    margin-left:8px;
}

.profile:hover {
    cursor:pointer;
}

.miniprofile {
    list-style-type:none;
    margin:0 auto;
    padding:0px 0px 25px 0px;
    width:100%;
}

.dropdown {
    width:160px;
    display:none;
    margin:2px 0px 0px 20px;
    list-style-type:none;
    padding:0px;
    position:relative;
    z-index:10000;
}

.dropdown li, .dropdownsmall li {
    margin:0px;
    width:calc(100% - 30px);
    padding:7px 15px;
}

.dropdown li:hover, .dropdownsmall li:hover {
    cursor:pointer;
}

.dropdownsmall {
    width:160px;
    display:none;
    margin:-25px 0px 0px 235px;
    list-style-type:none;
    padding:0px;
    position:relative;
    z-index:10000;
}

.useturn {
    padding:8px 12px;
    text-align:center;
    font-family:BBH Sans Hegarty;
    font-size:14.5px;
    border-radius:7px;
    margin-left:8px;
    transition: .2s;
    border:none;
}

.useturn:hover {
    cursor:pointer;
}

h1
{
    margin:18px 0px 18px 0px;
    font-family:BBH Sans Hegarty;
}

h2
{
    margin:20px 0px 12px 0px;
    font-family:BBH Sans Hegarty;
}

.h2small {
    margin:0px 0px 0px 20px;
    font-size:15px;
    font-family:Inter;
    line-height:0px;
}

.h2small s {
    opacity:0.8;
}

h3
{
    margin:-10px 0px 10px 15px;
    font-family:Cherry Bomb One;
    font-size:20px;
}

a
{
    text-decoration:none;
}

hr
{
    border:1px dashed;
}

.text {
    margin:0 auto;
    margin-top:20px;
    width:950px;
    padding:15px 25px;
}

.message {
    width:calc(100% + 10px);
    margin:-15px 0px 12px -25px;
    padding:15px 20px;
    text-align:center;
}

.footer {
    margin:0 auto;
    padding:20px 0px 30px 0px;
    text-align:center;
}

.indexlist
{
    line-height:30px;
}

.champion
{
    font-family:Cherry Bomb One;
}

.dogcontainer
{
    display:grid;
}

.dogimage
{
    grid-column:1;
    grid-row:1;
}

.dogimage img
{
    width:400px;
    height:300px;
}

.dogimg
{
    margin:-155px 0px 0px 0px;
    position:relative;
}

.dogimg img
{
    position:absolute;
    top:0;
    left:0;
    width:400px;
    height:300px;
    border:none;
}

.tabcontainer {
    overflow: hidden;
    width:calc(100% + 50px);
    margin:0px -25px;
}

.tabcontainer button {
    background-color:inherit;
    float:left;
    border:none;
    cursor:pointer;
    transition:0.2s;
    padding:13px 35px;
    font-size:18px;
    font-family:Cherry Bomb One;
    font-weight:bold;
}

.tabcontainer button:hover {
    opacity:0.8;
}

.tabcontent {
    width:calc(100%);
    margin:0px -25px -15px -25px;
    padding:5px 25px;
}

.training {
    margin:-2px 0px 10px 0px;
    width:calc(100% - 20px);
    padding:5px 10px;
    border-radius:5px;
}

.traitpos, .traitneg {
    border-radius:10px;
    padding:8px;
    text-align:center;
    margin:0px 15px;
}

.skilltree {
    width:calc(100% - 10px);
    height:35px;
    border-radius:5px;
    margin:0px 10px 10px 0px;
    border:0px;
    font-family:Inter;
}

.skilltree:disabled:hover {
    cursor:default;
}

.skilltree:hover {
    cursor:pointer;
}

.optionlist {
    width:calc(100% - 10px);
    height:35px;
    border-radius:5px;
    margin:0px 10px 10px 0px;
    border:0px;
    font-family:Inter;
    text-align:left;
    padding-left:15px;
}

.optionlist:disabled:hover {
    cursor:default;
}

.optionlist:hover {
    cursor:pointer;
}

.notification {
    width:calc(100% - 30px);
    border-radius:5px;
    margin:0px 0px 10px 0px;
    padding:5px 12px;
    border:0px;
    font-family:Inter;
    opacity:0.7;
    z-index:0;
}

.unread {
    font-weight:bold;
    padding:6px 12px;
    opacity:1.0;
    z-index:0;
}

.listing {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	margin-top:20px;
	width:102.5%;
}

.listtab {
    display: flex;
    flex-wrap: wrap;
    width: calc(25% - 20px);
    margin-right: 20px;
    align-items: center;
    margin-bottom: 10px;
    border-radius:5px 0px 0px 5px;
}

.listcontainer {
    position:relative;
    width:calc(100%);
    margin-right:15px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    margin-right: 10px;
    align-items: center;
}

.listimg {
    width:100%;
    height:auto;
    display:block;
    opacity:1.0;
    transition:0.5s;
    border-radius:5px 5px 0px 0px;
}

.listcontainer:hover .listimg {
    opacity:0.75;
}

.listtitle {
    width:100%;
    margin:0px;
    padding:10px 0;
    text-align:center;
    opacity:1.0;
    transition:0.5s;
    font-family:BBH Sans Hegarty;
    font-size:20px;
    border-radius:0px 0px 5px 5px;
}

.skillist {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	margin-top:20px;
    margin-bottom:-10px;
	width:calc(100% + 35px);
}

.skilltab {
    display: flex;
    flex-wrap: wrap;
    width: calc(25% - 35px);
    margin-right: 35px;
    align-items: center;
    margin-bottom: 25px;
    font-size:18px;
    font-family:Cherry Bomb One;
}

.skilltab p {
    margin:0px 0px 5px 0px;
    text-align:center;
}

.skillcontainer {
    border-radius:5px;
    width:100%;
    height:30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.skillbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width:calc(10% - 3px);
    height:25px;
    border-radius:5px;
    margin-right:3px;
}