body, html { width:100%; height:100%; margin:0; padding:0; }
a { text-decoration: underline; color:#757575 }
a:hover { text-decoration:underline; color: black; }

.animate, .animate * { -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; }
.animate-slow, .animate-slow * { -moz-transition: all 0.6s linear; -webkit-transition: all 0.6s linear; -o-transition: all 0.6s linear; transition: all 0.6s linear; }

.esg-nav-button { position:absolute; top:10px; left:5px; visibility:hidden; }
.esg-logo { width:46px; height:46px; }
.esg-name-image { width:161px; height:21px; }

.esg-container { width:100%; height:calc(100% - 4px);  margin:0; padding:0; left:0; top:0; }
.esg-navigation { height:100%; }
.esg-nav-languages-separator { top: calc(100% - 300px); }
.esg-nav-languages { position:absolute; bottom:0; left:0; width:240px; height:65px; display:flex; align-content: center; justify-content: center; border-top: 1px solid #E4E4E4; }
.esg-nav-languages > * { margin-left:5px; margin-right:5px; margin-top:23px; width:30px; height:20px; box-shadow: 1px 1px 2px #888888; }
.esg-content { position:absolute; top:0; left:240px; bottom:0; right:0; opacity: 0; height:100%; overflow:auto; }
.esg-content.active { opacity:1;  z-index: 100; }
.esg-content > * { margin:15px 20px 20px 15px; text-align:justify; }

.esg-logo-container{ display:none; width:100%; height:50px; margin:0 auto; }
.esg-logo-container > * { height:40px; margin-right:10px; margin-top:15px; }
.esg-navigation-items { overflow-y:auto; overflow-x:hidden; position:absolute; top:65px; bottom:65px; left:0; right:calc(100% - 240px); cursor:pointer !important; }
.esg-subnavigation.esg-navigation-items { right:0; }
.esg-team, .esg-projects, .esg-profile-container, .esg-donations { display:flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.esg-team > * { max-width:400px; height:700px; margin:5px; }
.esg-team-member.large { height:840px; }
.esg-projects > *  { max-width:400px;  height:650px; margin:5px; }
.esg-donations > *  { max-width:500px;  height:700px; margin:5px; }

.esg-profile-container > * { max-width:350px;  height:900px; margin:5px; }
.esg-profile-container.large > * { max-width:550px; height:900px;   }
.esg-experience > * { max-width:650px !important; height:800px; }

.esg-team img, #\/ru\/about\/ img,  #\/en\/about\/ img,  #\/rs\/about\/ img, .esg-project-image { width:200px; height:200px; border-radius: 50%; margin-left:calc(50% - 100px); }

.esg-team-member-separator, .esg-projects-separator, .esg-donations-separator { flex:1; }

.esg-resume-download, .esg-project-details { width:130px; }
.esg-resume-download > i, .esg-project-details > i { position:absolute; left:10px; top:7px; }
.esg-resume-download > p, .esg-project-details > p { position:absolute; right:10px; top:1px; padding:0; margin:0; }

#esg-dialog { z-index: 1004; }
.mdc-dialog__body { display: none; }
.mdc-dialog__body.active { display: inline-block; }
.mdc-dialog__body--scrollable { min-height:500px; max-height: 700px; }

.mdc-card__title--large.smaller { font-size: 1.2rem !important; }

.esg-language-button { min-width:30px; min-height:20px; height:20px; padding:0; }
.esg-slideshow-container { display:flex; align-content: center; justify-content: center; }
.esg-slideshow-item { opacity: 0; display:none; }
.esg-slideshow-item.render { display:inline-block; }
.esg-slideshow-item.active { opacity:1; }

@media screen and (max-width:780px) {
    .esg-nav-button { visibility:unset; z-index: 1002; }
    .esg-nav-button.active { left:100%; transform: translateX(calc(-100% - 10%)); }
    .esg-navigation { position:absolute; left:-100%; right:0; width:100%; z-index: 1001; }
    .esg-navigation.active { left:0; }
    .esg-content { left:0; }
    .esg-logo-container { display:flex; justify-content:center; align-content:center; }
    .esg-navigation-items { width:100%; }
    .mdc-typography--title { text-align: right; padding-right:10px; }
    .esg-nav-languages { width:100%; }

    .esg-profile-container > *, .esg-profile-container.large > *, .esg-team > *, .esg-experience > *, #\/ru\/about\/ .mdc-card, .esg-projects > *, .esg-team > *, .esg-team-member.large  { height: unset !important; }

}