@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

a:focus,
a:hover {
    color: #fff;
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
    color: #fff;
    text-shadow: none; /* Prevent inheritance from `body` */
    background-color: #000000;
    border: .05rem solid #000000;
}

html,
body {
    height: 100%;
    background-color: #ffffff;
}

body {
    display: -ms-flexbox;
    display: flex;
    color: #000000;
}


.masthead {
    margin-bottom: 2rem;
}

.masthead-brand {
    margin-bottom: 0;
}

.nav-masthead .nav-link {
    padding: .25rem 0;
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
    background-color: transparent;
    border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
    border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
    margin-left: 1rem;
}

.nav-masthead .active {
    color: #fff;
    border-bottom-color: #fff;
}

@media (min-width: 48em) {
    .masthead-brand {
        float: left;
    }
    .nav-masthead {
        float: right;
    }
}

.cover {
    padding: 0 1.5rem;
}
.cover .btn-lg {
    padding: .75rem 1.25rem;
    font-weight: 700;
}

.mastfoot {
    color: rgba(255, 255, 255, .5);
}



 /*Emociju aplis*/
 .circle-container {
     position: relative;
     width: 23em;
     height: 23em;
     padding: 2.8em;
     /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
     border: dashed 1px;
     border-radius: 50%;
     margin: 1.75em auto 0;
 }
.circle-container li {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 3.4em; height: 3.4em;
    border-radius: 50%;
    margin: -2em;
    color:#000000;
    text-align: center;
    vertical-align: middle;
    line-height: 2.5em;
    font-weight: bold;
    background-color: #dddedb !important;
}

.circle-container label {
    font-size: 0.9em;
}

.circle-container input[type="radio"]:checked+label,
.Checked+label {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 3.4em; height: 3.4em;
    border-radius: 50%;
    margin: -1.7em;
    color:#000000;
    text-align: center;
    vertical-align: middle;
    line-height: 3.3em;
    font-weight: bold;
    background: #4fcbff;
}

.circle-container input[type="radio"] {
    opacity: 0.01;
    z-index: 100;
}

.circle-container li:hover {
    background: #DDD;
}
/*Emociju apļa indivitualie elementi
Sākotnēji elementi bija krāsaini
*/

.center-left{
    transform: rotate(0deg) translate(-3em) rotate(-0deg);
    background-color: #a7a7a7;
}
.center-left .emo{
    position: absolute;
    right: 1px;
}
.center-right{
    transform: rotate(0deg) translate(3em) rotate(-0deg);
    background-color: #a7a7a7;
}
.center-right .emo{
    position: absolute;
    right: 10px;
}

.deg1 {
    transform: rotate(9deg) translate(11.6em) rotate(-9deg);
    background-color: #cee945;
}
@media (min-width: 456px) {
    .deg1 .emo{
        position: absolute;
        left: 0px;
    }
}

@media (max-width: 456px) {
    .deg1 .emo{
        position: absolute;
        right: 0px;
    }
    .circle-container{
        transform: scale(0.75);
    }

}
.deg2 {
    transform: rotate(26deg) translate(11.6em) rotate(-26deg);
    background-color: #9de94e;
}
.deg2 .emo{
    position: absolute;
    left: 0px;
}

.deg3 {
    transform: rotate(44deg) translate(11.6em) rotate(-44deg);
    background-color: #53b738;
}
.deg3 .emo{
    position: absolute;
    left: 0px;
}

.deg4 {
    transform: rotate(62deg) translate(11.6em) rotate(-62deg);
    background-color: #19aa61;
}
.deg4 .emo{
    position: absolute;
    left: 0px;
}

.deg5 {
    transform: rotate(80deg) translate(11.6em) rotate(-80deg);
    background-color: #30b099;
}
.deg5 .emo{
    position: absolute;
    left: 0px;
}

.deg6 {
    transform: rotate(98deg) translate(11.6em) rotate(-98deg);
    background-color: #1d9cb0;
}
.deg6 .emo{
    position: absolute;
    left: 0px;
}

.deg7 {
    transform: rotate(116deg) translate(11.6em) rotate(-116deg);
    background-color: #3e7ec4;
}
.deg7 .emo{
    position: absolute;
    left: 0px;
}

.deg8 {
    transform: rotate(134deg) translate(11.6em) rotate(-134deg);
    background-color: #3b64c4;
}
.deg8 .emo{
    position: absolute;
    left: 0px;
}

.deg9 {
    transform: rotate(152deg) translate(11.6em) rotate(-152deg);
    background-color: #5c49ec;
}
.deg9 .emo{
    position: absolute;
    left: 0px;
}

.deg10 {
    transform: rotate(170deg) translate(11.6em) rotate(-170deg);
    background-color: #9c56cc;
}
.deg10 .emo{
    position: absolute;
    left: 0px;
}

.deg11 {
    transform: rotate(188deg) translate(11.6em) rotate(-188deg);
    background-color: #e32120;
}
.deg11 .emo{
    position: absolute;
    left: 0px;
}

.deg12 {
    transform: rotate(206deg) translate(11.6em) rotate(-206deg);
    background-color: #d45851;
}
.deg12 .emo{
    position: absolute;
    left: 0px;
}

.deg13 {
    transform: rotate(224deg) translate(11.6em) rotate(-224deg);
    background-color: #de6038;
}
.deg13 .emo{
    position: absolute;
    left: 0px;
}

.deg14 {
    transform: rotate(242deg) translate(11.6em) rotate(-242deg);
    background-color: #b9671e;
}
.deg14 .emo{
    position: absolute;
    left: 0px;
}

.deg15 {
    transform: rotate(260deg) translate(11.6em) rotate(-260deg);
    background-color: #ddb44f;
}
.deg15 .emo{
    position: absolute;
    left: 0px;
}

.deg16 {
    transform: rotate(278deg) translate(11.6em) rotate(-278deg);
    background-color: #f3eb2f;
}
.deg16 .emo{
    position: absolute;
    left: 0px;
}
.deg17 {
    transform: rotate(296deg) translate(11.6em) rotate(-296deg);
    background-color: #f3eb2f;
}
.deg17 .emo{
    position: absolute;
    left: 0px;
}
.deg18 {
    transform: rotate(314deg) translate(11.6em) rotate(-314deg);
    background-color: #f3eb2f;
}
.deg18 .emo{
    position: absolute;
    left: 0px;
}
.deg19 {
    transform: rotate(332deg) translate(11.6em) rotate(-332deg);
    background-color: #f3eb2f;
}
.deg19 .emo{
    position: absolute;
    left: 0px;
}
.deg20 {
    transform: rotate(350deg) translate(11.6em) rotate(-350deg);
    background-color: #f3eb2f;
}
.deg20 .emo{
    position: absolute;
    left: 0px;
}



.emotion label{
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 3.4em; height: 3.4em;
    /*border-radius: 50%;*/
    margin: -1.7em;
    color:#000000;
    text-align: center;
    vertical-align: middle;
    line-height: 3.3em;
    font-weight: bold;
    background: #DDDEDB;

}
.emotion input[type="radio"]:checked+label,
.Checked+label {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 3.4em; height: 3.4em;
    /*border-radius: 50%;*/
    margin: -1.7em;
    color:#000000;
    text-align: center;
    vertical-align: middle;
    line-height: 3.3em;
    font-weight: bold;
    background: #4fcbff;
}

.emotion input[type="radio"] {
    opacity: 0.01;
    z-index: 100;
}

.emotion label:hover {
    background: #DDD;
}