* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html,
body {


overflow-x: hidden;



}

body {
margin-left: 0;
margin-right: 0;
margin-top: 0;
}

.container {
position: relative;
display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;

}

.icon {
font-weight: bold;
font-size: 4vmin;

border: none;
color: black
}

.icon:hover {
color: red;
}

/*span {
position:absolute;
top:0;
left:0;



}*/


.logoContainer {

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 20px;




}

.lettersContainer {

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.photographContainer {

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding-top: 5px;
width: 95%;



}

.photographContainer .imageContainer {
background-color: rgb(225, 225, 225);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;

-ms-flex-wrap: wrap;
flex-wrap: wrap;


}
.photographContainer .imageContainer .imageDiv {
position:relative;
width:30vmax;


}
.photographContainer .imageContainer .imageDiv img {
display: block;
width: 100%;

-o-object-fit: contain;

object-fit: contain;
padding: 1vw;
}
.popup .childContainer .imageDiv{
position:relative;
}
.photographContainer .imageContainer .imageDiv .counter, .popup .childContainer .imageDiv .counter{
position:absolute;
top:-2%;
right:0;
color:rgb(211, 205, 205);
background-color:rgba(68, 68, 68, .6);
font-size:2.5vmax;
border:5px solid rgba(21, 23, 13, .3);
border-radius: 50%;
font-weight:bold;
display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
text-align: center;
font-weight: bold;


padding: 10px;
}
.photographContainer .imageContainer  img {
display: block;
width: 30%;

-o-object-fit: contain;

object-fit: contain;
padding: 1vw;
}

.popup {
width: 100%;
height: 100%;

position: fixed;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;



z-index: 2;
}

.popup img {
-o-object-fit: contain;
object-fit: contain;
width:100%;

}

.vertical {
width: 75vmin;

}

.popup .childContainer .vertical {


}

.vertical2 {
width: 55vmin;
}



.small2 {
width: 95vmin;
}

.hidepopup {
display: none;
}

.hideoverlay {
display: none;
}

.imagesPart {

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

}

.childContainer {
width: 100%;
height:100%;

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;


}

.childContainer img {
-o-object-fit: cover;
object-fit: cover;

height: 100%;


}

.functionbuttons {


display: -webkit-box;


display: -ms-flexbox;


display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around;
}

.close {
position: fixed;
top: 30%;
left: 2%;
border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 3vmax;
height: 3vmax;
color: white;



}

.close p {
position: absolute;
top: 20%;
left: 25%;

margin: 0;
padding: 0;

color: white;
font-size: 2vmax;

}


/*.close:hover {
width: 20vmin;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;

}*/

.close .expandText {
visibility: hidden;
opacity: 0;
white-space: nowrap;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-webkit-transform: translate(-30px);
-ms-transform: translate(-30px);
transform: translate(-30px);
margin-left: 50px;


}

/*.close:hover .expandText {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0.75s;
-o-transition-delay: 0.75s;
transition-delay: 0.75s;
-webkit-transform: translate(10px);
-ms-transform: translate(10px);
transform: translate(10px);

}*/

.story {
position: fixed;
top: 40%;
left: 2%;

border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 3vmax;
height: 3vmax;
color: white;
font-size: 1.5vmax;


}

.story p {
position: absolute;
top: 20%;
left: 25%;

margin: 0;
padding: 0;
color: white;
font-size: 2vmax;

}

/*.story:hover {
width: 20vmin;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;

}*/

.story .expandText {
visibility: hidden;
opacity: 0;
white-space: nowrap;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-webkit-transform: translate(-30px);
-ms-transform: translate(-30px);
transform: translate(-30px);
margin-left: 49px;

}

/*.story:hover .expandText {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0.75s;
-o-transition-delay: 0.75s;
transition-delay: 0.75s;
-webkit-transform: translate(10px);
-ms-transform: translate(10px);
transform: translate(10px);

}*/

.comment {
position: fixed;
top: 50%;
left: 2%;

border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 3vmax;
height: 3vmax;
color: white;
font-size: 1.5vmax;



}

.comment p {
position: absolute;
top: 20%;
left: 25%;

margin: 0;
padding: 0;
color: white;
font-size: 2vmax;


}

/*.comment:hover {
width: 20vmin;
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;



}*/

.comment .expandText {
visibility: hidden;
opacity: 0;
white-space: nowrap;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-webkit-transform: translate(-30px);
-ms-transform: translate(-30px);
transform: translate(-30px);
margin-left: 49px;
}

/*.comment:hover .expandText {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0.75s;
-o-transition-delay: 0.75s;
transition-delay: 0.75s;
-webkit-transform: translate(10px);
-ms-transform: translate(10px);
transform: translate(10px);

}*/

.vote {
position: fixed;
top: 60%;
left: 2%;
border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 3vmax;
height: 3vmax;
color: white;
font-size: 1.5vmax;


}

.vote p {
position: absolute;
top: 20%;
left: 25%;

margin: 0;
padding: 0;
color: white;
font-size: 2vmax;

}

.expandText {
font-size: 3vmin;
}

/*.vote:hover {
width: 20vmin;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;

}*/

.vote .expandText {
visibility: hidden;
opacity: 0;
white-space: nowrap;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-webkit-transform: translate(-30px);
-ms-transform: translate(-30px);
transform: translate(-30px);
margin-left: 49px;
}

/*.vote:hover .expandText {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0.75s;
-o-transition-delay: 0.75s;
transition-delay: 0.75s;
-webkit-transform: translate(10px);
-ms-transform: translate(10px);
transform: translate(10px);

}*/

.overlay {
position: fixed;
top: 0;
left: 0;
/* backdrop-filter: blur(200px) opacity(60%);*/

-webkit-filter: blur(1.5rem);
filter: blur(1.5rem);
width: 100vw;
height: 100vh;


/*  background-color:rgb(87, 87, 82);
opacity:0.8;*/

-webkit-backdrop-filter: blur(5px);

backdrop-filter: blur(5px);
-webkit-backdrop-filter: brightness(80%);
backdrop-filter: brightness(80%);
-webkit-backdrop-filter: contrast(80%);
backdrop-filter: contrast(80%);
-webkit-backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: drop-shadow(4px 4px 10px blue);
-webkit-backdrop-filter: grayscale(70%);
backdrop-filter: grayscale(70%);
-webkit-backdrop-filter: hue-rotate(120deg);
backdrop-filter: hue-rotate(120deg);
-webkit-backdrop-filter: invert(70%);
backdrop-filter: invert(70%);
-webkit-backdrop-filter: opacity(90%);
backdrop-filter: opacity(90%);
-webkit-backdrop-filter: sepia(90%);
backdrop-filter: sepia(90%);
-webkit-backdrop-filter: saturate(10%);
backdrop-filter: saturate(10%);
/* opacity:0.8;*/
z-index: 1;

}

#hc_extension_svg_filters {
display: none;
}

.exp {

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;


background-color: rgb(85, 81, 81);
opacity: 0.8;

height: 95%;
width: 50%;
padding: 10px;



}

.exp p {
text-align: center;
word-wrap: break-word;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

word-wrap: break-word;
text-align: center;
font-size: 2vmax;
color: white;
font-weight: bold;

overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
-webkit-line-clamp: 3;
-moz-line-clamp: 3;
-ms-line-clamp: 3;
line-clamp: 3;

padding:10px;


}
.hastag p {
    background-color: black;
}

.buttonSection {

width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.buttonSection .section {
width: 10vmax;
height:2vmax;
font-weight: bold;
font-size: 1.5vmax;
color: white;
background-color: black;
border: none;
outline: none;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
-ms-line-clamp: 2;
line-clamp: 2;

}

.hastag {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
height:15%;
overflow-y:auto;
gap: 5px;

overflow:auto;
}

.hastag div {
background-color: black;
color: white;
font-size:1.3vmax;
font-weight: bold;
width: 9vmax;
height: 3vmax;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding:5px;


}

.tag {
width: 100%;
height: 5vmax;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;

}

.tag .tagInput {
width: 20vmax;
height: 3vmax;

}

.tag .tagInput::-webkit-input-placeholder {
font-size: 2vh;
font-weight: bold;
;
padding-left: 10px;
}

.tag .tagInput::-moz-placeholder {
font-size: 2vh;
font-weight: bold;
;
padding-left: 10px;
}

.tag .tagInput:-ms-input-placeholder {
font-size: 2vh;
font-weight: bold;
;
padding-left: 10px;
}

.tag .tagInput::-ms-input-placeholder {
font-size: 2vh;
font-weight: bold;
;
padding-left: 10px;
}

.tag .tagInput::placeholder {
font-size: 2vh;
font-weight: bold;
;
padding-left: 10px;
}

.none {
display: none;


}

.fullstorysegment {
position: fixed;

height: 100%;
width: 100%;
z-index: 2;

background-color: white;
opacity: 0.8;
}

.fullstorysegment div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-top:-5%;
}

.fullstorysegment div p {
font-size: 3vmax;
color: black;
width: 80%;
padding: 20px;
word-wrap: break-word;
font-weight: bold;
text-align: center;
}

.closestorysegment {
position: absolute;
top: 5%;
left: 95%;
width: 50px;
height: 50px;
border: none;
outline: none;
background-color: black;
color: white;
font-size: 2vw;
}


.popupImage {

max-width: 60vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.popupImage .imageDiv {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 100vw;

}
.popupImage .imageDiv img {
   
    width:34vmax;
}


@media (max-width: 1900px) {
.childContainer img {
-o-object-fit: contain;
object-fit: contain;
width: 20vmax;


}
}

@media (min-width: 300px) and (max-width:600px) {
.counter,
    .popup .childContainer .imageDiv .counter {
        position: absolute;
        top: -2%;
        left: 110%;
        color: rgb(211, 205, 205);
        background-color: rgba(68, 68, 68, .6);
        font-size: 2.5vmax;
        border: 5px solid rgba(21, 23, 13, .3);
        border-radius: 50%;
        font-weight: bold;
        display: flex;
        justify-content:center;
        align-items:center;
        text-align: center;
        font-weight: bold;
        padding: 10px;
        
    }
    
.commentary {
        height: 90vw;
        width: 90%;
        overflow: auto;
       
        word-wrap: break-word;
        

}
.commentary p{
    font-size:0.5vw;
  
}
.exp p {
        text-align: center;
        word-wrap: break-word;
        display: -ms-flexbox;
        display: flex;
        justify-content:center;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        word-wrap: break-word;
        text-align: center;
        font-size: 4vw;
        color: white;
        font-weight: bold;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -ms-box-orient: vertical;
        box-orient: vertical;
        -webkit-line-clamp: 6;
        -moz-line-clamp: 6;
        -ms-line-clamp: 6;
        line-clamp: 6;
       
        padding: 10px;
        overflow-y:auto;
        height:30%;
        overflow:hidden;
    }
.popup .childContainer .vertical {


}
.logoContainer{
   
 
    display:flex;

}
.BEN{

    width:85%;
    object-fit:contain;
}
.photographContainer .imageContainer .imageDiv{
    
    width:60%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.photographContainer .imageContainer .imageDiv img {
    
    width: 80vw;
    -o-object-fit: contain;
    object-fit: contain;
    padding:10px;
    
}

.childContainer {
width: 100%;
height:100vmax;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
align-items:center;
justify-content:center;;
gap: 5px;
margin-top:-5%;


}
.exp{

height:80vmax;


}    

.hastag div {
background-color: black;
color: white;
word-wrap:break-word;
font-size: 2.5vmax;
font-weight: bold;
width: 15vmax;
height: 4vmax;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;


}
.buttonSection {


height: 3vmax;

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.buttonSection .section {
width: 20vmax;
height: 3vmax;
font-weight: bold;
font-size: 2.5vmax;
color: white;
background-color: black;
border: none;
outline: none;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
-ms-line-clamp: 2;
line-clamp: 2;

}
.storyText{
overflow:auto;
height:90vmax;

}
.storyText p {
font-size: 20vmax;


}
.popup .childContainer{
  
}
.popup .childContainer .vertical{
object-fit: contain;
width:30vmax;
}
/*.close {
position: fixed;
top: 30%;
left: 2%;
border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 20vmax;
height: 20vmax;
color: red;
font-size: 2.5vmax;


}
.close p{
margin-left:10%;
margin-top:10%;
}
.story {
position: fixed;
top: 40%;
left: 2%;

border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 5vmax;
height: 5vmax;
color: white;
font-size: 1.5vmax;
text-align:center;


}
.story p {
margin-left: 10%;
margin-top: 10%;
}
.vote {
position: fixed;
top: 60%;
left: 2%;
border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 5vmax;
height: 5vmax;
color: white;
font-size: 1.5vmax;


}
.story p {
margin-left: 10%;
margin-top: 10%;
}
.comment {
position: fixed;
top: 50%;
left: 2%;

border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 5vmax;
height: 5vmax;
color: white;
font-size: 1.5vmax;



}
.comment p {
margin-left: 10%;
margin-top: 10%;
}*/
.imageDiv img{
gap:20px;
}
.fullstorysegment div p {
font-size: 3vmax;
}
.popupImage .imageDiv{

}
.popupImage .imageDiv img{

width: 100%;;

}
.hastag div{
font-size:2vmax;
}
.close {
position: fixed;
top: 90%;
left: 15%;

border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 5vmax;
height: 5vmax;
color: white;
font-size: 1.5vmax;
display:flex;
justify-content: center;
align-items:center;


}
.story {
position: fixed;
top: 90%;
left: 35%;

border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 5vmax;
height: 5vmax;
color: white;
font-size: 1.5vmax;
display: flex;
    justify-content: center;
    align-items: center;


}
.vote {
position: fixed;
top: 90%;
left: 55%;

border: none;
outline: none;
background-color: rgb(0, 0, 0);
    width: 5vmax;
        height: 5vmax;
color: white;
font-size: 1.5vmax;
display: flex;
justify-content: center;
align-items: center;


}
.comment {
position: fixed;
top: 90%;
left: 75%;

border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 5vmax;
    height: 5vmax;
color: white;
font-size: 1.5vmax;
display: flex;
justify-content: center;
align-items: center;


}
}
@media (min-width: 300px) and (max-width:1300px) {

.photographContainer .imageContainer .imageDiv {

    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.photographContainer .imageContainer .imageDiv img {
    
    width: 80vw;
    -o-object-fit: contain;
    object-fit: contain;
    padding: 10px;

}
.close {
position: fixed;
top: 90%;
left: 15%;

border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 5vmax;
height: 5vmax;
color: white;
font-size: 1.5vmax;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
text-align:center;
}
.close p{
padding-left:5px;
padding-top:2px;


}
.fullstorysegment div p {
    font-size: 4.5vmax;
}

.story {
position: fixed;
top: 90%;
left: 35%;

border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 5vmax;
height: 5vmax;
color: white;
font-size: 1.5vmax;
display: flex;
justify-content: center;
align-items: center;
display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
}

.story p {
    padding-left: 5px;
    padding-top: 2px;


}

.vote {
position: fixed;
top: 90%;
left: 55%;

border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 5vmax;
height: 5vmax;
color: white;
font-size: 1.5vmax;
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
text-align: center;
}

.vote p {
    padding-left: 5px;
    padding-top: 2px;


}

.comment {
position: fixed;
top: 90%;
left: 75%;

border: none;
outline: none;
background-color: rgb(0, 0, 0);
width: 5vmax;
height: 5vmax;
color: white;
font-size: 1.5vmax;
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
text-align: center;
}

.comment p {
    padding-left: 5px;
    padding-top: 2px;


}
}
/*   .fullstorysegment div p {
font-size: 5vmin;
color: black;
width: 80%;
padding: 20px;
word-wrap: break-word;
font-weight: bold;
text-align: center;
}*/


.buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}

.button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
color: white;
cursor: pointer;
}

.letter {
margin-left: 0.25rem;
background-color: black;
width: 1.5rem;
text-align: center;
border: 1px solid grey;
}

.expand {
background-color: transparent;
margin-left: 0.1rem;
-webkit-transition: opacity 500ms linear;
-o-transition: opacity 500ms linear;
transition: opacity 500ms linear;
opacity: 0;
padding-left: 0.5rem;
padding-right: 0.5rem;
}

.button:hover .expand {
background-color: black;
opacity: 1;
}
.none {
display: none;
}

.imgContainer {
position: relative;
}

.imgContainer .magnifier {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100px;

}

.magnifiedImage {
position: absolute;
aspect-ratio: 1 / 1;
top: 0;
left: 0;
z-index: 1;
border: 7px solid rgba(128, 115, 140, .3);
height:30%;

}
.magnifiedImage img{
width:100%;
height:100%;
object-fit:contain;
}

.none{
display:none;
}

.dynamicCounter{


position: absolute;
top: -2%;
right: 0;
color: rgb(211, 205, 205);
background-color: rgba(68, 68, 68, .6);
font-size: 2.5vmax;
border: 5px solid rgba(21, 23, 13, .3);
border-radius: 50%;
font-weight: bold;
display: block;
text-align: center;
font-weight: bold;


padding: 10px;
}
.headerText{
font-size:3vmax;
text-align:center;
}
.commentInput {
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items:center;
    height:10vmax;
    width:90%;
 
}
label{
    color:white;
    font-size:2vmax;
    padding:10px;
    font-weight:bold;
}
.input {
    width: 100%;
    height: 60%;
}

.commentary {
 
    width:90%;
    overflow: auto;
   padding:20px;
    word-wrap: break-word;
 
}
.commentary div{
    
    color:white;
    font-size: 2vmax;
    font-weight: bold;
    text-align:center;
    border:2px solid black;
}

.commentary p{
    /*position:absolute;
    //left:0;*/
    border:2px solid black;
    overflow:auto;
    width:100%;
}
.input{
    font-size:1.5vmax;
   
}
.tagInput {
    font-size: 2vmax;

}
.langButton{
    text-decoration:underline;
}
.langButton:before {
    content: attr(data-lang);
}
.commentary div{
    border:2px solid black;
}
.fullstorysegment{
 
}
.closseStorySegment{
 
    width:4vmax;
    height:4vmax;
    border:none;
    outline:none;
    font-weight: bold;
    font-size:2vmax;;
    margin-left:80%;
    margin-top:2%;
    background-color:black;
    color:white;
    z-index:3;

}