/*** box sizing border-box for all elements ***/
*,
*::before,
*::after{-webkit-box-sizing:border-box;box-sizing:border-box;transition: .0s;}a{text-decoration:none; cursor:pointer;}
button{color:inherit; border-width:0; padding:0; cursor:pointer;}
figure{margin:0;}
input::-moz-focus-inner {border:0; padding:0; margin:0;}
ul, ol, dd{margin:0; padding:0; list-style:none;}
h1, h2, h3, h4, h5, h6{margin:0; font-size:inherit; font-weight:inherit;}
p{margin:0;}
cite {font-style:normal;}
fieldset{border-width:0; padding:0; margin:0;}

body {
    margin    : 0;
    line-height: 1;
    font-size: 14px !important;
    font-stretch: extra-expanded !important;
    font-family: 'Poppins', sans-serif !important;
    text-rendering: optimizeLegibility;
    color: #444;
    overflow-x: hidden;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}


@import "../../css/base/variables.css";


body::-webkit-scrollbar {
    width: 13px;
    padding: 0;
    margin: 0;
}
body {
    scrollbar-width: thin;
    scrollbar-color: #31708E #f7f7f7;
}
body::-webkit-scrollbar-track {
    background: #f7f7f7;
}
body::-webkit-scrollbar-thumb {
    background-color: #31708E ;
    border-radius: 6px;
    border: 3px solid #f7f7f7;
}

.main-wrapper {

}

.menu{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 3;

}

.menu a{
    display: block;
    padding: .5rem;
    border-bottom: 3px solid transparent;
}

.menu button{
    display: block;
    padding: .5rem;
    border-bottom: 3px solid transparent;
}

.menu a:hover{
    color : #2a3341;
    border-bottom: 3px solid #31708e;
}

.menu-icon{
    display: none;
    padding: 21px 10px;
    position: fixed;
    top: 6px;
    right: 8px;
    cursor: pointer;
    background: #31708E;
}

.nav-icon{
    display: block;
    height: 3px;
    width: 25px;
    background: #FFFFFF;
    position: relative;
    -webkit-transition: background .2s ease-out;
    -o-transition: background .2s ease-out;
    transition: background .2s ease-out;
}

.nav-icon:before{
    content: '';
    display: block;
    background: #FFFFFF;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 7px;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.nav-icon:after{
    content: '';
    display: block;
    background: #FFFFFF;
    height: 100%;
    width: 100%;
    position: absolute;
    top: -7px;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.menu-icon.opened>.nav-icon{
    background: transparent;
}

.menu-icon.opened>.nav-icon:before{
    top: 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.menu-icon.opened>.nav-icon:after{
    top: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.menu-btn{
    display: none;
}





h1{
    font-size: 2rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.text-center{
    text-align: center;
}

h3{
    display: block;
    font-size: 2rem;
    line-height: 2rem;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}



h3::after{
    content: '';
    display: inline-block;
    border-top: 2px solid #31708E;
    position: absolute;
    width: 100%;
    bottom: .8rem;
    margin-left: .5rem;
}

.section-navigation{
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: top-section-navigation;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.section-navigation__item{
    text-align: center;
}

.section-navigation__item__link{
    display: block;
    font-size: .9rem;
    line-height: 40px;
    padding: 0 2rem 0 0;
    margin-left: 1rem;
    color: #FFFFFF;
}


#birds{
    position: relative;
}

#birds:after{
    content: '';
    display: block;
    height: 1.5rem;
    width: 1.5rem;
    top: 5px;
    right: 5px;
    position: absolute;
    background: url("../img/eagle.svg") no-repeat;
    -webkit-filter: invert(95%) sepia(0%) saturate(7480%) hue-rotate(74deg) brightness(106%) contrast(106%);
    filter: invert(95%) sepia(0%) saturate(7480%) hue-rotate(74deg) brightness(106%) contrast(106%);
}


#mammals{
    position: relative;
}

#mammals:after{
    content: '';
    display: block;
    height: 1.5rem;
    width: 2rem;
    top: 2px;
    right: 0px;
    position: absolute;
    background: url("../img/bear-side-view.svg") no-repeat;
    background-size: 1.9rem;
    -webkit-filter: invert(95%) sepia(0%) saturate(7480%) hue-rotate(74deg) brightness(106%) contrast(106%);
    filter: invert(95%) sepia(0%) saturate(7480%) hue-rotate(74deg) brightness(106%) contrast(106%);
}

#tracks{
    position: relative;
}

#tracks:after{
    content: '';
    display: block;
    height: 1.5rem;
    width: 1.5rem;
    top: 8px;
    right: 5px;
    position: absolute;
    background: url("../img/tracks.svg") no-repeat;
    background-size: 1.1rem;
    -webkit-filter: invert(95%) sepia(0%) saturate(7480%) hue-rotate(74deg) brightness(106%) contrast(106%);
    filter: invert(95%) sepia(0%) saturate(7480%) hue-rotate(74deg) brightness(106%) contrast(106%);
}


.top-header{
    background: #31708E;
}

.top-header-content{
    display: -ms-grid;
    display: grid;
    margin: auto;
    max-width: 1170px;
    -ms-grid-columns: 1fr 1fr auto auto;
    grid-template-columns: 1fr 1fr auto auto;
    grid-template-areas: 'top-contacts top-section-navigation select-language top-login';
    position: relative;
}

.select-language{
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: select-language;
    position: relative;
    padding: 0.5rem;
    /*font-size: 12px;*/
}

.select-language:hover .lang-item-list{
    display: block;
    position: absolute;
    padding: 12px 16px;
    background: #FFFFFF;
    z-index: 999;
}

.lang-item {
    padding:.5rem .3rem;
    margin-top: 0;
    text-align: left;
    color: #0C5983;
    white-space: nowrap;
}

footer .lang-item {
    padding: 0;
}
@media screen and (max-width: 991px) {
    .lang-item {
        padding: .2rem;
    }
}

.lang-item img{
    max-height: .8rem;
}

.lang-item:hover{
    cursor: pointer;
    color: #0C5983;
}

.lang-item-active img{
    max-height: .8rem;
}
.lang-item-active{
    color: #FFFFFF;
    padding: 0;
    margin-top: 0;
    /*text-align: left;*/
    white-space: nowrap;
}

.lang-item-list{
    display: none;
    padding: .5rem;
    overflow-y: auto;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.top-header-contact{
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: top-contacts;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #FFFFFF;
    font-size: .9rem;
}

.contact-mail{
    padding-left: 1.5rem;
    display: block;
    position: relative;
    margin-left: .5rem;
}
.contact-mail:before{
    content: '\2709';
    display: block;
    height: 1rem;
    width: 1rem;
    font-size: 1.4rem;
    position: absolute;
    top: -7px;
    left: 0px;
}

.contact-phone{
    padding-left: 1.3rem;
    display: block;
    position: relative;
    margin-left: .5rem;
}
.contact-phone:before{
    content: '\2706';
    display: block;
    height: 1rem;
    width: 1rem;
    font-size: 1.3rem;
    position: absolute;
    top: -5px;
    left: 0px;
}

header{
    /*background: #F7F7F7;*/
    height: 130px;
}

@media screen and (max-width: 991px) {
    header{
        position: fixed;
        width: 100%;
        z-index: 3;
        height: auto;
    }
    .main , .mainAeriaContainer {
        padding-top: 60px !important;
    }
}

@media screen and (max-width: 755px) {
    .main , .mainAeriaContainer {
        /*padding-top: 100px !important;*/
    }
}


.header-content{
    max-width: 1170px;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    background: #F7F7F7;
}

.logo-title{
    padding-left: 20px;
}


.logo{
    display: block;
    margin: 1rem 0;
    max-height: 65px;
}

.logo-container{
    /*display: -webkit-box;*/
    /*display: -ms-flexbox;*/
    /*display: flex;*/
    display: inline-block;
    vertical-align: middle;
    margin-top: 20px;
}

.logo-container h1{
    color: #337ab7;
    font-size: 45px;
    font-weight: normal;
    margin-bottom: 0px;
    letter-spacing: 2px;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.main{
    margin: auto;
}

.banner-image{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-image: url("../img/background-img-1.jpg");
    min-height: 100px;
    background-position: center;
    background-size: cover;
    position: relative;
    height: 190px;
}


.banner-image:before{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8)));
    background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.8));
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));
    min-height: inherit;
}

.banner-content{
    max-width: 1170px;
    width: 100%;
    padding: .5rem;
    margin: auto;
    margin-bottom: 0px;
}

.banner-content h1{
    position: relative;
    margin-bottom: 1rem;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
}


.page-content{
    max-width : 1170px;
    margin: auto;
    padding: 1rem;
}

.page-content a{
    text-decoration: none;
    color: #31708e;
}
.page-content p{
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.5rem;
}

.page-content.user-page{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 30% 70%;
    grid-template-columns: 30% 70%;
    -ms-grid-rows : minmax(1rem, -webkit-max-content) auto;
    -ms-grid-rows : minmax(1rem, max-content) auto;
    grid-template-rows : minmax(1rem, -webkit-max-content) auto;
    grid-template-rows : minmax(1rem, max-content) auto;
    grid-template-areas: 'profile-short-info profile-short-info'
    'tab tabcontent'
    'tab tabcontent'
    'clear-training-block clear-training-block';
}


.page-content.e-book-page{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 60% .5rem 40%;
    grid-template-columns: 60% 40%; /*columns / rows*/
    -ms-grid-rows:auto .5rem auto;
    grid-template-areas: 'e-book-text species-search'
    'species-image species-image';
    grid-gap: .5rem;
}

.e-book-text{
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: e-book-text;
}

.species-search{
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: species-search;
    background: #31708E;
    padding: .5rem 1.5rem 0rem;
    -ms-grid-row-align: start;
    align-self: start;
    border-radius: 3px;
    color: #ffffff;
}

.species-search form{
    margin-bottom: 1rem;
}

.species-search input{
    line-height: 1.5rem;
    margin: .3rem 0;
    border-radius: 5px;
}

.species-search div{
    margin: .3rem 0;
    width: 100% !important;
}

.species-search-form-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin : .3rem 0 .5rem;
}

.species-search-form-item .select2-container{
    margin : .3rem 0 .5rem;
}

.search-form-title{
    font-size: 1.5rem;
    margin: .5rem 0;
    font-weight: bold;
}


.species-image{
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: species-image;
}


.species-image h3::after{
    display: none;
}


.e-book-list-container{
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(229px, 1fr));
    grid-gap: .5rem;
}

.e-book-list-img{
    display: block;
    width: 100%;
    min-height: 176px;
}

.e-book-list-container h3{
    font-size: .9rem;
    line-height: 1.5rem;
    text-align: center;
    font-weight: bold;
    padding-bottom: 3px;
}

.e-book-list-container a{
    text-decoration: none;
    background: #000000;
    color: #FFFFFF;
    border: 2px solid #000000;
    opacity: 1;
    -webkit-transition:  300ms;
    -o-transition:  300ms;
    transition:  300ms;
}

.e-book-list-container a:hover {
    opacity : .8;
    -webkit-transition:  300ms;
    -o-transition:  300ms;
    transition:  300ms;
}


.page-content.specieById-page {
    display: grid;
    grid-template-columns: 48% 48%;
    grid-template-areas: 'specie-title specie-title'
                         'specie-gallery specie-info-table'
                         'specie-text specie-info-table'
                         'specie-text compare-block'
                         'specie-text specie-more-img'
                         'specie-text specie-sounds';
    grid-column-gap: 4%;
    grid-row-gap: .5rem;
}

.specieById-page .specie-title{
    grid-area: specie-title;
}

.specie-gallery{
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: specie-gallery;
}

.specie-gallery iframe{
    /*width: 552px;*/
    width: 100%;
    height: 505px;
    border: none;
    background: #EEEEEE;
}

.specie-text{
    -ms-grid-row: 3;
    -ms-grid-row-span: 7;
    -ms-grid-column: 1;
    grid-area: specie-text;
    overflow: hidden;
    word-wrap: break-word;
    padding-top: 1rem;
}
.specie-info-table{
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 3;
    grid-area: specie-info-table;
    border: 1px solid #c5c5c5;
    padding: 1rem;
}


.compare-block{
    -ms-grid-row: 5;
    -ms-grid-column: 3;
    grid-area: compare-block;
}

/*.compare-block form{*/
    /*display: -webkit-box;*/
    /*display: -ms-flexbox;*/
    /*display: flex;*/
    /*-webkit-box-orient: vertical;*/
    /*-webkit-box-direction: normal;*/
    /*-ms-flex-direction: column;*/
    /*flex-direction: column;*/
    /*margin: 0 auto ;*/
    /*background: #c7edff;*/
/*}*/

/*.compare-block form>div{*/
    /*display: -webkit-box;*/
    /*display: -ms-flexbox;*/
    /*display: flex;*/
    /*-webkit-box-pack: justify;*/
    /*-ms-flex-pack: justify;*/
    /*justify-content: space-between;*/
    /*-webkit-box-align: center;*/
    /*-ms-flex-align: center;*/
    /*align-items: center;*/
    /*margin: 10px 10px;*/
/*}*/

.specie-info-table .title{
    font-size: 1.3rem;
    font-weight: bold;
    /*line-height: 3rem;*/
    margin-bottom: 1.2rem;
}

.specie-info-table>div{
    padding: .7rem .7rem;
}

.specie-info-table>div:nth-child(2n){
    background: #F7F7F7;
}


.specie-more-img{
    -ms-grid-row: 7;
    -ms-grid-column: 3;
    grid-area: specie-more-img;
}
.specie-sounds{
    -ms-grid-row: 9;
    -ms-grid-column: 3;
    grid-area: specie-sounds;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.specie-sounds audio{
    margin-top: 1rem;
}

.specie-info-item{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #EEEEEE;
}

.specie-info-item div:first-child{
    font-weight: bold;
    color: #555555;
}

.specie-info-item img{
    max-width  : 140px;
    max-height : 140px;
}

.specieById-page .title,
.compare-species .title{
    display: block;
    margin-bottom: .3rem;
    font-size: 1.3rem;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}

.specie-select{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #EEEEEE;
}

.specie-select .cell-2,
.specie-select .cell-3{
    padding: 0;
}

.specie-title h2{
    font-size: 1.3rem;
    font-weight: bold;
}

.specie-title .compare-line-title{
    border-right: 0px;
}

.specie-title .cell-1,
.specie-title .cell-2,
.specie-title .cell-3 {
    border-right: none;
    border-left: none;
}

.compare-species{
    /*overflow-x: auto;*/
}

.specieById-page .title::after {
    content: '';
    display: inline-block;
    border-top: 2px solid #EEEEEE;
    position: absolute;
    width: 100%;
    bottom: .7rem;
    margin-left: .5rem;
}

.more-img-list{
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    grid-gap: .5rem;
    margin-top: 1rem;
}

.compare-line .more-img-list{
    margin-top: 0px;
    padding: .5rem .5rem;
}

.compare-line .more-img-list:nth-child(2){
    border-right: 1px solid lightgray;
}

.more-img-list a{
    color: #FFFFFF;
    background: #000000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.more-img-list img{
    width: 100%;
    /*min-height: 125px;*/
    display: block;
}

.info-text{
    background: #31708e14;
    padding: .7rem;
    margin-top: 1rem;
    color: #2458a4;
}

.warning-text{
    background: #31708e14;
    padding: .7rem;
    margin-top: 1rem;
    color: #ea4e1b;
}

.restriction-mark{
    color: #ea4e1b;
    font-size: 1.3rem;
}

.button{
    padding: .5rem 1.5rem;
    border-radius: 5px;
    color: #FFF;
    /*font-size: .9rem;*/
    border: 0px;
    margin: .5rem 0rem;
    cursor: pointer;
}

.button:hover{
    opacity: 0.8;
}
.button:active{
    opacity: 0.9;
}

.button.green{
    background: #3aaa35;
}

a.button.green{
    background: #3aaa35;
    color: #FFFFFF;
    text-decoration: none;
}

.button.blue {
    background: #5bc0de;
}

.button.theme {
    background: #31708E;
    color: #FFF;
}

.button.backwards{
    padding: .1rem .5rem .1rem 2rem;
    color: #000000;
    text-decoration: none;
    background: buttonface;
    position: relative;
    margin-top: 0px;
    margin-bottom: 1rem;
}
.button.backwards:before{
    content: '\2190';
    /*display: block;*/
    position: absolute;
    left: .5rem;
}

.flex-table .button{
    font-size: .9rem;
    padding: 5px 10px;
}

.form-submit-wrapper{
    text-align: center;
    margin-top:  1rem;
}

.center{
    width: 50%;
    margin: auto;
}


/*OLD FOOTER*/
/*
footer{
    !*display: flex;*!
    !*justify-content: center;*!
    padding: 1rem;
    background: #181818;
    color: #FFFFFF;
}
.footer-content{
    max-width: 1170px;
    margin: auto;
}
.footer-logo{
    max-height: 35px;
}
.footer-copyright{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 1rem;
    color: #959595;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.social-networks{
    width: 100px;
}

.footer-fb, .footer-instagram{
    max-height: 1.5rem;
    -webkit-filter: invert(61%) sepia(0%) saturate(3291%) hue-rotate(224deg) brightness(100%) contrast(73%);
    filter: invert(61%) sepia(0%) saturate(3291%) hue-rotate(224deg) brightness(100%) contrast(73%);
}
*/
footer {
    position: relative;
    bottom: 0px;
    width: 100%;
}
footer * {
    color: #959595;
}
footer a {
    color: #31708E;
}
footer a span {
    color: #31708E;
}
footer a:hover {
    color: #54a83b;
}
.footer-wrapper h3 {
    color: #fff;
}
footer[role="contentinfo"] {
    clear: both;
    line-height: 2;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    background: none repeat scroll 0 0 #181818;
}
/* Up arrow */
footer[role="contentinfo"] a.arrow-up {
    background: none repeat scroll 0 0 rgb(255, 255, 255);
    bottom: 45px;
    color: #000 !important;
    display: none;
    font-size: 14px;
    line-height: 21px;
    opacity: 0.5;
    padding: 5px 8px;
    position: fixed;
    right: 10px;
    text-align: center;
    z-index: 9;
}
.footer-bottom {
    background: #202020;
    color: #959595;
}
footer[role="contentinfo"] a {
    color: #31708E;
}
footer[role="contentinfo"] a:hover {
    color: #54a83b;
}

.site-title {
    font-weight: 400;
}

.site-info {
    font-size: 14px;
    margin: 10px 0;
}

a.arrow-up {
    color: #ffffff !important;
}

a.arrow-up:hover{
    color: #54a83b !important;
}

.footer-bottom .footer-logo-image{
    padding: 10px 0;
}

.footer-bottom .footer-rights {
    padding: 14px 0;
}

.footer-bottom .footer-language {
    padding: 2px 0;
}

.social-media {
    padding: 8px 0;
}
.social-media a {
    font-size: 20px;
    margin-right: 6px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 5px;
    text-align: center;
}
.social-media a i:hover,
.social-media a i:focus {
    color: #31708E;
}
.footer-language-menu {
    display: inline-block;
}
.footer-language-menu .sub-menu {
    display: inline-block;
}
.footer-language-menu img {
    margin-right: 3px !important;
}
.site-info img {
    margin-right: 20px;
}
.footer-social .circle a {
    border-radius: 50px;
}


/*********DROPDOWN MENU***********/

/*.main-navigation {*/
    /*overflow: hidden;*/
    /*text-align: center;*/
/*}*/

/*.main-navigation a {*/
    /*float: left;*/
    /*display: block;*/
    /*color: #000;*/
    /*text-align: center;*/
    /*padding: 14px 16px;*/
    /*text-decoration: none;*/
    /*font-size: .9rem;*/
    /*-webkit-box-flex: 1;*/
    /*-ms-flex-positive: 1;*/
    /*flex-grow: 1;*/
    /*border-bottom: 3px solid transparent;*/
/*}*/

.top-navigation .active {
    color: #54a83b;
    border-bottom: 3px solid #54a83b;
}

.main-navigation .icon {
    display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: .9rem;
    border: none;
    outline: none;
    color: #000000;
    /*padding: 14px 16px;*/
    padding: .5rem;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    position: relative;
}



.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 99;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: .9rem;
}

/*.main-navigation a:hover, .dropdown:hover .dropbtn {*/
    /*color: #2a3341;*/
    /*border-bottom: 3px solid #31708e;*/
    /*font-size: .9rem;*/
/*}*/

.dropdown:hover a{
    border-bottom: none;
}


.dropdown-content a:hover {
    color: #288cbc;
    border-bottom: none;
    font-size: .9rem;
}

.dropdown:hover .dropdown-content {
    display: block;
    border: 1px solid #CCC;
}

.profile-short-info{
    -ms-grid-row:  1;
    -ms-grid-column:  1;
    -ms-grid-column-span:  2;
    grid-area:  profile-short-info;
    /*padding: 1rem 1rem;*/
    /*padding-bottom: 1rem;*/
    background: #FFFFFF;
    -ms-grid-row-align: start;
    align-self: start;
}

.profile-short-info_first-block{
    display: flex;
    justify-content: space-between;
    background: #f7f7f7;
    margin-bottom: .3rem;
}
.profile-short-info_first-block > div{
    flex-grow: 1;
    padding: .5rem;
    text-align: center;
}
.profile-short-info_second-block{
    /*width: 43%;*/
    width: 60%;
    margin-bottom: .5rem;
    display: flex;
    flex-direction: column;
}
.profile-short-info_second-block > div{
    /*display: flex;*/
    /*justify-content: space-between;*/
    display: inline-block;
    margin-bottom: .3rem;
    /*border-bottom: 1px solid #d6d6d6;*/
}
.profile-short-info_second-block > div > span{
    font-weight: bold;
}

.mainAeriaRight {
    max-width: 1170px;
    margin: auto;
    font-size: 16px;
}

.mainAeriaRight h3{
    line-height: 3rem;
}

/*TABS START*/
/* Style the tab */
.tab {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
    grid-area: tab;
    /*background-color: #f1f1f1;*/
    -ms-grid-row-align: start;
    align-self: start;
    margin-bottom: 1rem;
}

.clear-training-block{
    -ms-grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: clear-training-block;
    width: auto;
}

.clear-training-block input{
    display: block;
    margin: auto;
}


/* Style the buttons inside the tab */
.tab button {
    display: block;
    background-color: #31708E;
    text-align: center;
    color: white;
    padding: .7rem 1rem;
    width: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: .9rem;
    margin: .6rem auto;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #999999;
}

/* Create an active/current "tab button" class */
.tab button.active {
    background-color: #999999;
    cursor: default;
}

/* Style the tab content */
.tabcontent {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    -ms-grid-column: 2;
    grid-area: tabcontent;
    padding: 0 1.5rem 1.5rem;
    border-left: none;
}

/*TABS END*/


/*************************TABLE RESPONSIVE START*********************************/
.table-container {
    margin: 1em 0;
    display: grid;
    padding: 0 1rem;
}

.flag-icon {
    margin-right: 0.1em;
}

.flex-table {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    border-left: solid 1px #d9d9d9;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.flex-table.cols-6 .flex-row {
    width: calc(100% / 6);
}

.flex-table.cols-5 .flex-row {
    width: calc(100% / 5);
}

.flex-table.cols-4 .flex-row {
    width: calc(100% / 4);
}

.flex-table:first-of-type {
    /*border-top: solid 3px #1565C0;*/
}
.flex-table:first-of-type .flex-row {
    background: #31708E;
    color: white;
    /*padding: 15px;*/
}
.flex-table.row:nth-child(odd) .flex-row {
    /*background: #f4f2f1;*/
}
.flex-table:hover {
    background: #F5F5F5;
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
}

.flex-row {
    width: calc(100% / 6);
    text-align: center;
    padding: 0.5em 0.5em;
    border-right: solid 1px #d9d9d9;
    border-bottom: solid 1px #d9d9d9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;
}

.flex-row button{
    margin-bottom: 0px;
}

.rowspan {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    width: 75%;
    padding: 0;
}
.column .flex-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    width: 100%;
    padding: 0;
    border: 0;
    border-bottom: solid 1px #d9d9d9;
}
.column .flex-row:hover {
    background: #F5F5F5;
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
}

.flex-cell {
    width: calc(100% / 5);
    text-align: center;
    padding: 0.5em 0.5em;
    border-right: solid 1px #d9d9d9;
}

/***************************END TABLE RESPONSIVE*****************************/


.form-user-update{
    width: 50%;
    margin: auto;
    margin-bottom: 1rem;
}
.form-element-wrapper{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 1rem;
}

.form-element-wrapper>span{
    line-height: 1.6rem;
}

.select2-container .select2-selection--single {
    font-size: 14px;
}

.select2-results__option{
    font-size: 14px;
}

input{
    font-size: 12px;
    border: 1px solid #b3b1b2;
    padding-left: .5rem;
    line-height: 1.5rem;
    color: #0f0f0f;
    border-radius: 5px;
}

input::-webkit-input-placeholder{
    color: #888888;
}

input::-moz-placeholder{
    color: #888888;
}

input:-ms-input-placeholder{
    color: #888888;
}

input::-ms-input-placeholder{
    color: #888888;
}

input::placeholder{
    color: #888888;
}

.form-element-wrapper label{
    font-style: normal;
    padding-right: 1rem;
}

.form-element-wrapper select{
    width: 100%;
}

.form-element-wrapper input{
    align-self: baseline;
}

#regForm{
    width: 50%;
    margin: 30px auto 100px;
    text-align: center;
}

/*#regForm p{*/
/*display : flex;*/
/*justify-content: space-between;*/
/*}*/

#regForm span{
    font-weight: bold;
    font-size: 1.2rem;
}

#regForm input{
    margin-top: .5rem;
}

.compare-species{

}

.compare-line {
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*border-bottom: 1px solid #000000;*/
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 150px 1fr 1fr;
    grid-template-columns: 150px 1fr 1fr;
    grid-template-areas: 'cell-1 cell-2 cell-3';
    border-bottom: 1px solid lightgray;
}

.cell-1{
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: cell-1;
    padding: .3rem;
    border-left: 1px solid #e5e5e5;
}
.cell-2{
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: cell-2;
    padding: .3rem;
    border-right: 1px solid #e5e5e5;
}
.cell-3{
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: cell-3;
    padding: .3rem;
    border-right: 1px solid #e5e5e5;
}

.compare-line:hover{
    background: #fffbe3;
}

.compare-line > div {
    width: 100%;
}

.compare-line form{
    background: none;
}

.compare-block.cell-2{
    border-right: none;
    padding: .5rem;
}
.compare-block.cell-3{
    padding: .5rem;
}

.compare-line-title{
    max-width: 200px;
    border-right: 1px solid lightgrey;
    padding-bottom: 0.3rem;
}

.compare-line .silhouette{
    max-width: 140px;
    max-height: 140px;
}

.sm-small-title{
    display: none;
}

.addEditCompetitionGroup-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
}
.addEditCompetitionGroup-wrapper span{
    font-size: 1.5rem;
    font-weight: bold;
}

.e-book-list-container.silhouette-list-style a{
    background: none;
    border: none;
}
.e-book-list-container.silhouette-list-style .eBookSpeceSilhuBox {
    width: 100%;
}

.eBookSpeceSilhuBox {
    width: 220px;
    height: 220px;
    margin: 0px;
}

.eBookSpeceSilhuBox h3{
    font-size: 1.3rem;
    width: auto;
    height: auto;
}
img.eBookListImage {
    height: auto;
    width: auto;
    max-height: 160px;
}

.change-specie {
    display: block;
    margin: 1.5rem 0 .3rem;
    font-weight: bold;

}

/*from subSiteMainCss*/
.mainAeriaContainer{
    padding: 1rem;
    max-width: 1170px;
    margin: auto;
    font-size: .9rem;
}

.europaImageBig{
    float: right;
}
div.newsBoxContainer::after{
    content: '';
    display: block;
    clear: both;
}

/*========= LOGIN MODAL FORM ==========*/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal h3{
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.modal h3::after{
    display: none;
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    position: relative;
    /*padding: 5px 20px 0px 20px;*/
    /*border: 1px solid #888;*/
    text-align: center;
    width: 80%;
    max-width: 500px;
    color: #292C38;

}

.modal-content input{
    line-height: 2rem;
    width: 100%;
    max-width: 330px;
}

.modal-content .button.green{
    width: 50%;
}

/* The Close Button */

.close {
    color: #FFFFFF;
    /*float: right;*/
    font-size: 2.5rem;
    font-weight: bold;
    position: absolute;
    top: -45px;
    right: 0px;
}

.close:hover,
.close:focus {
    color: #31708e;
    text-decoration: none;
    cursor: pointer;
}

/* Style the tab */
.login-tab {
    overflow: hidden;
    /*border: 1px solid #ccc;*/
    /*background-color: #f1f1f1;*/
    /*display: flex;*/
    /*justify-content: center;*/
}

/* Style the buttons inside the tab */
.login-tab button {
    background-color: inherit;
    /*float: left;*/
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: .9rem;
}

/* Change background color of buttons on hover */
.login-tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.login-tab button.active {
    background-color:#31708e;
    color: #FFF;
}

/* Style the tab content */
.login-tabcontent {
    display: none;
    padding: .5rem 1.5rem 1.5rem;
    /*border: 1px solid #ccc;*/
    border-top: none;
}

.login-tabcontent p{
   margin-bottom: 1rem;
}


/*========= END LOGIN MODAL FORM ==========*/

.start-competing-cell {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;

}

.pagination{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 1rem;
    width: 100%;
}

.pagination button{
    background: #31708E;
    color: #e7e7e7;
    padding: 10px;
    border-radius: 5px;
    margin: 0px 5px;
    font-size: .9rem;
}

.pagination button.active{
    background: #888888;
    color: #0f0f0f;
    padding: 10px;
    border-radius: 5px;
    margin: 0px 5px;
    font-size: .9rem;
}

.pagination button:hover {
    background-color: #888888;
    color: #0f0f0f;
}

.sort-wrapper input {
    font-size : 1rem;
    margin: 1rem 0 0;
}

/*************************MEDIA QUERIES****************************/


@media screen and (max-width: 767px){
    #body_iframe {
        padding-top: 60px;
    }
}
@media screen and (min-width: 767px) and (max-width: 1400px){
    .menu{
        margin-right: 2rem;
    }
    .menu .dropdown:last-of-type > .dropdown-content{
        right: 0;
    }
}



@media screen and (max-width: 991.98px) {

    .logo{
        margin: .5rem 0 .5rem 1rem;
        max-height: 40px;
    }

    .logo-container h1{
        font-size: 2rem;
        line-height: 1.5rem;
        margin-top: .5rem;
    }

    .logo-container p{
        font-size: .9rem;
    }

    .section-navigation__item__link{
        line-height: 2rem;
    }

    /********************/


    .menu{
        max-height: 0;
        position: absolute;
        display: block;
        left: 0;
        width: 100%;
        background: #FFFFFF;
        overflow: hidden;
        -webkit-transition: max-height .2s ease-out;
        -o-transition: max-height .2s ease-out;
        transition: max-height .2s ease-out;
    }

    .menu a{
        border-bottom: 1px solid #d6d6d6;
        text-transform: uppercase;
        font-size: .9rem;
        color: #337ab7;
        padding: 1rem 1.5rem;
    }
    .menu a:hover{
        border-bottom: none;
    }

    /*.main-navigation a:hover, .dropdown:hover .dropbtn {*/
        /*color: #54a83b;*/
        /*border-bottom: none;*/
        /*font-size: .9rem;*/
    /*}*/

    .dropdown-content a{
        padding-left: 3rem !important;
    }

    .menu button.dropbtn{
        border-bottom: 1px solid #d6d6d6;
        text-transform: uppercase;
        font-size: .9rem;
        color: #337ab7;
        padding: 1rem 1.5rem;
    }

    .menu button.dropbtn:hover{
        border-bottom: none;
    }


    .menu-btn:checked ~ .menu{
        max-height: 500px;
        overflow-y: scroll;
    }

    .menu-btn:checked ~ .menu-icon .nav-icon{
        background: transparent;
    }

    .menu-btn:checked ~ .menu-icon .nav-icon:before {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 0px;

    }

    .menu-btn:checked ~ .menu-icon .nav-icon:after {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 0px;
    }

    .dropdown .dropbtn:after {
        content: '+';
        display: block;
        height: 10px;
        width: 10px;
        bottom: 60%;
        font-size: 1.2rem;
        font-weight: bold;
        position: absolute;
        right: 2rem;
    }



    /********************/

    /*.main-navigation a:not(:first-child), .dropdown .dropbtn {*/
        /*display : none;*/
    /*}*/

    /*.main-navigation a.icon {*/
        /*float   : right;*/
        /*display : block;*/
    /*}*/

    /*.main-navigation.responsive {position: relative;}*/
    /*.main-navigation.responsive .icon {*/
        /*position: absolute;*/
        /*right: 0;*/
        /*top: 0;*/
    /*}*/
    /*.main-navigation.responsive a {*/
        /*float: none;*/
        /*display: block;*/
        /*text-align: left;*/
    /*}*/
    /*.main-navigation.responsive .dropdown {float: none;}*/
    /*.main-navigation.responsive .dropdown-content {position: relative;}*/
    /*.main-navigation.responsive .dropdown .dropbtn {*/
    /*display: block;*/
    /*width: 100%;*/
    /*text-align: left;*/
    /*}*/

    .menu-btn:checked ~ .menu .dropdown {float: none;}
    .menu-btn:checked ~ .menu .dropdown-content {position: relative;}
    .menu-btn:checked ~ .menu .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }


    .center {
        width  : 100%;
        margin : auto;
    }

    .form-user-update {
        width  : 100%;
        margin : auto;
    }

    .profile-short-info_second-block{
        /*width: 55%;*/
        width: 100%;
    }

    .main-navigation {
        /*text-align: center;*/
        /*display: none;*/
        position: fixed;
        top: 60px;
        right: 0;
        background: #31708E;
        width: 100%;
        padding-bottom: 10px;
        padding-left: 20px;
    }

    .row-menu-back, .menu-row-div  {
        background: #F7F7F7 !important;
        top: 0;
        left: 0;
        bottom: 0;
    }

    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        display: grid !important;

        /*text-align: left;*/
    }

    .menu-icon{
        display: block;
    }

    .main-navigation li a {
        font-size: 18px;
    }


}

@media all and (max-width: 767px) {

    .flex-table.cols-6 .flex-row {
        width: calc(100% / 5);
    }

    .flex-table.cols-5 .flex-row {
        width: calc(100% / 4);
    }

    .flex-table.cols-4 .flex-row {
        width: calc(100% / 3);
    }

    .flex-row.first {
        width: 100% !important;
    }

    .column {
        width: 100%;
    }

    .top-header-content{
        display: -ms-grid;
        display: grid;
        margin: auto;
        max-width: 1170px;
        /*justify-content: space-between;*/
        -ms-grid-columns: 1fr auto auto;
        grid-template-columns: 1fr auto auto;
        grid-template-areas: 'top-contacts select-language top-login'
        'top-section-navigation top-section-navigation top-section-navigation';
    }
    .section-navigation{
        -ms-flex-pack: distribute;
        justify-content: space-around;
        border-top: 1px solid #1e4152;
        height: 3rem;
        align-items: center;
    }
    .page-content.specieById-page {
        display: grid;
        grid-template-columns: 48% 48%;
        grid-template-areas:
                'specie-title specie-title'
                'specie-gallery specie-gallery'
                'specie-text specie-info-table'
                'specie-text specie-info-table'
                'specie-text compare-block'
                'specie-text specie-sounds'
                'specie-text specie-sounds'
                'specie-text specie-sounds'
                'specie-more-img specie-more-img';
        grid-column-gap: 4%;
    }

    .compare-line {
        /*display: flex;*/
        /*justify-content: space-between;*/
        /*border-bottom: 1px solid #000000;*/
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-areas: 'cell-1 cell-1'
                             'cell-2 cell-3';
        border-bottom: 1px solid #EEEEEE;
    }
    .specie-title .cell-2,
    .specie-title .cell-3 {
        text-align: left;
        border-right: none;
        border-left: none;
    }

    .cell-1{
        border-left: none;
    }
    .cell-2{
        border-left: 1px solid #e5e5e5;
    }
    .cell-3{
        -ms-grid-row: 1;
        -ms-grid-column: 3;
        grid-area: cell-3;
        padding: .3rem;
        border-right: 1px solid #e5e5e5;
    }


    .compare-line.sm-column{
        -ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
        grid-template-areas: 'cell-1 cell-1'
        'cell-2 cell-2'
        'cell-3 cell-2';
    }
    .compare-line.sm-column > *{
        border: none;
        text-align: center;
        padding: 1rem 0px 0px;
    }
    .compare-line.sm-column p{
        margin: 0px;
    }



    .compare-line-title{
        max-width: 100%;
        text-align: center;
        font-weight: bold;
        padding-top: 1rem;
        border-bottom: 1px solid #EEEEEE;
        border-right: 0px;
        padding-bottom: .3rem;
    }
    .cell-2{
        border-right: 1px solid #EEEEEE;
        text-align: right;
        padding-right: 1rem;
    }
    .specie-text.cell-2{
        text-align: left;
    }
    .cell-3{
        text-align: left;
        padding-left: 1rem;
    }
    .specie-text.cell-3{
        text-align: left;
    }

    .compare-block form{
        padding: .5rem;
    }

    .compare-block form > div{
        margin: auto;
        text-align: left;
    }

    .compare-block form > div > span{
        margin-right: 1rem;
    }

    audio{
        display: block;
        width: 100%;
        margin: auto;
    }

    .more-img-list.cell-2,
    .more-img-list.cell-3{
        padding: .5rem;
    }

    .section-navigation{-ms-grid-row: 2;-ms-grid-column: 1;-ms-grid-column-span: 3;
    }

    .select-language{-ms-grid-row: 1;-ms-grid-column: 2;
    }

    .top-header-contact{-ms-grid-row: 1;-ms-grid-column: 1;
    }
    .specie-gallery {-ms-grid-row: 1;-ms-grid-column: 1;-ms-grid-column-span: 3;
    }
    .specie-text {-ms-grid-row: 3;-ms-grid-row-span: 11;-ms-grid-column: 1;
    }
    .specie-info-table {-ms-grid-row: 3;-ms-grid-row-span: 3;-ms-grid-column: 3;
    }
    .compare-block {-ms-grid-row: 7;-ms-grid-column: 3;
    }
    .specie-more-img {-ms-grid-row: 15;-ms-grid-column: 1;-ms-grid-column-span: 3;
    }
    .specie-sounds {-ms-grid-row: 9;-ms-grid-row-span: 5;-ms-grid-column: 3;
    }

    .cell-1 {-ms-grid-row: 1;-ms-grid-column: 1;-ms-grid-column-span: 2;
    }

    .compare-line.sm-column > .cell-1{-ms-grid-row: 1;-ms-grid-column: 1;-ms-grid-column-span: 1;
    }

    .cell-2 {-ms-grid-row: 2;-ms-grid-column: 1;
    }

    .compare-line.sm-column > .cell-2{-ms-grid-row: 2;-ms-grid-column: 1;
    }

    .cell-3 {-ms-grid-row: 2;-ms-grid-column: 2;
    }

    .compare-line.sm-column > .cell-3{-ms-grid-row: 3;-ms-grid-column: 1;
    }

    .button{
        padding: .5rem;
    }
    .top-login{-ms-grid-row: 1;-ms-grid-column: 3;
    }
    .profile-short-info_second-block {
        /*width: 80%;*/
        width: 100%;
    }



}

@media all and (max-width: 575.98px) {
    .top-header-contact{
        /*display: block;*/
        display: none;
    }
    .top-header-content{
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .contact-mail{
        margin-top: 3px;
    }

    .contact-phone{
        margin-top: 3px;
        margin-bottom: 5px;
    }

    .header-content{
        /*flex-direction: column-reverse;*/
        margin-bottom: .5rem;
    }

    .logo{
        max-width: 200px;
    }

    .page-content.user-page {
        display: -ms-grid;
        display: grid;
        /*-ms-grid-columns: 100% 100%;*/
        /*grid-template-columns: 100% 100%;*/
        -ms-grid-columns: 100%;
        grid-template-columns: 100%;
        -ms-grid-rows : auto  auto;
        grid-template-rows : auto  auto;
        grid-template-areas:  'profile-short-info' 'tab' 'tabcontent' 'clear-training-block';
    }

    .tab{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        border: 2px solid #ccc;
        border-right: 0px;
        border-left: 0px;
        -ms-flex-item-align: start;
        align-self: start;
    }

    .tab button.tablinks{
        width: auto;
    }

    .page-content.e-book-page{
        display: -ms-grid;
        display: grid;
        /*grid-template: 1fr 1fr / auto; !*columns / rows*!*/
        -ms-grid-columns: 100%;
        grid-template-columns: 100%; /*columns / rows*/
        -ms-grid-rows:auto .5rem auto .5rem auto;
        grid-template-areas: 'e-book-text' 'species-search' 'species-image';
        grid-gap: .5rem;
    }

    .page-content.specieById-page {
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas:
                'specie-title'
                'specie-gallery'
                'specie-info-table'
                'compare-block'
                'specie-text'
                'specie-more-img'
                'specie-sounds';
    }


    .specie-title h2{
        font-size: .9rem;
    }

    .modal-content{
        width: 90%;
    }

    .pagination{
        align-items: center;
        margin: 1rem 0;
    }

    .pagination button{
        padding: 3px;
    }

    /*********TABLE***********/

    .flex-table .flex-row {
        border-bottom: 0;
    }
    .flex-table .flex-row:last-of-type {
        border-bottom: solid 1px #d9d9d9;
    }

    .header .flex-row {
        border-bottom: solid 1px;
    }

    .flex-row {
        width: 100% !important;
    }
    .flex-row.first {
        width: 100% !important;
        border-bottom: solid 1px #d9d9d9;
    }

    .column {
        width: 100% !important;
    }
    .column .flex-row {
        border-bottom: solid 1px #d9d9d9;
    }

    .flex-cell {
        width: 100%;
    }

    .compare-galleries{
        display: block;
    }

    .sm-small-title{
        display: block;
        margin-bottom: .3rem;
        font-size: .9rem;
    }

    .compare-line:hover{
        background: none;
    }

    .addEditCompetitionGroup-wrapper{
        flex-direction: column;
    }
    /*TABLE RESPONSIBLE END*/

    .e-book-text{-ms-grid-row: 1;-ms-grid-column: 1;
    }

    .species-search{-ms-grid-row: 3;-ms-grid-column: 1;
    }

    .species-image{-ms-grid-row: 5;-ms-grid-column: 1;-ms-grid-column-span: 1;
    }

    .specie-gallery {-ms-grid-row: 1;-ms-grid-column: 1;-ms-grid-column-span: 1;
    }

    .specie-text {-ms-grid-row: 7;-ms-grid-row-span: 1;-ms-grid-column: 1;
    }

    .specie-info-table {-ms-grid-row: 3;-ms-grid-row-span: 1;-ms-grid-column: 1;
    }

    .compare-block {-ms-grid-row: 5;-ms-grid-column: 1;
    }

    .specie-more-img {-ms-grid-row: 9;-ms-grid-column: 1;-ms-grid-column-span: 1;
    }

    .specie-sounds {-ms-grid-row: 11;-ms-grid-row-span: 1;-ms-grid-column: 1;
    }

    .profile-short-info {-ms-grid-row:  1;-ms-grid-column:  1;-ms-grid-column-span:  1;
    }

    .tab {-ms-grid-row: 2;-ms-grid-row-span: 1;-ms-grid-column: 1;
    }

    .clear-training-block {-ms-grid-row: 4;-ms-grid-column: 1;-ms-grid-column-span: 1;
    }

    .tabcontent {-ms-grid-row: 3;-ms-grid-row-span: 1;-ms-grid-column: 1;
    }

    .profile-short-info_second-block {
        width: 100%;
    }

    .profile-short-info_second-block > div{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .select-language:hover .lang-item-list{
        right: 0px;
    }
}




.eBookCompImageViewerIframe{
    width: 100%;
    height: 440px;
    overflow:hidden;
}

.eBookSingleMetadataSilImg{
    max-width:140px;
    max-height:140px;
}






/*========= START LOGIN FORM ==========*/

.loginRegDivContainer{
    font-size: .9rem;
}

.loginBoxButtonContainer{

    position: relative;
    right:0px;
    top:1px;
    /*width:220px;*/
    /*height:48px;*/
    /*background-color:#F60;*/
    background-color: transparent;
}

#loginActionButton{
    margin: .5rem;
    font-size: .9rem;
    padding: .5rem 1rem;
    background: #3aaa35;
    color: #FFFFFF;
    border-radius: 5px;
}

.loginBoxButtonContainerLoggedInn{
    /*background-color:#090;*/
    background-color: transparent;
}

.top-login{
    -ms-grid-row: 1;
    -ms-grid-column: 4;
    grid-area: top-login;
}

/*@media all and (max-width: 767px){*/

    /*.top-login{-ms-grid-row: 1;-ms-grid-column: 3;*/
    /*}*/
/*}*/

.buttonDefault.loginBoxButton{
    color: #FFFFFF;
    position: relative;
    top: 1px;
    background: transparent;
    /*font-size: .9rem;*/
    padding: .5rem;
    border-radius: 5px;
    padding-right: 2rem;
    -ms-grid-column-align: end;
    justify-self: end;
}

/*.buttonDefault.loginBoxButton:after{*/
    /*content: '';*/
    /*display: block;*/
    /*position: absolute;*/
    /*height : 2rem;*/
    /*width: 1.5rem;*/
    /*top: calc(50% - 11px);*/
    /*right: 5px;*/
    /*background: url("../img/login.svg") no-repeat;*/
    /*background-size: 1.5rem;*/
    /*-webkit-filter: invert(95%) sepia(0%) saturate(7480%) hue-rotate(74deg) brightness(106%) contrast(106%);*/
    /*filter: invert(95%) sepia(0%) saturate(7480%) hue-rotate(74deg) brightness(106%) contrast(106%);*/
/*}*/

#preloginDivContainer {
    /*content: ' ';*/
    position: fixed;
    z-index: 19;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #0000007a;
}
.loginDivContainer {
    position: fixed;
    left: 35%;
    top: 25%;
    background-color: #FFF;
    overflow: hidden;
    display: none;
    z-index: 20;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(5, 5, 5, 0.50);
    box-shadow: 0px 0px 10px 0px rgba(5, 5, 5, 0.50);
}

.loginDivTopContainer{
    height:40px;
    overflow:hidden;
    color: #000000;
}


.loginDivTopBoxSeparator{
    width: 1px;
    height:40px;
    float:left;
    background-color:#FFFFFF;
}

.loginDivTopBox{
    /*width: 180px;*/
    height:40px;
    float:left;
    background-color:#B5B5B5;
    text-align:center;
    color: #000000;
    cursor:pointer;
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    overflow:hidden;
    line-height: 38px;
    padding: 0 .5rem;
}

#responceDiv{
    /*width: auto;*/
    min-height: 30px;
    margin-bottom: .5rem;
    /*max-width: 260px;*/
    margin-top: .5rem;
    padding: .5rem;
}

.loginDivMainContainer i{
    color: #0f0f0f;
}
.loginDivMainContainer{
    padding: 1rem;
    margin-bottom:1px;
    margin-left:1px;
    margin-right:1px;
    text-align:center;
}

.loginDivMainInputContainer{
    font-size: .9rem;
    font-weight: normal;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.loginDivMainInputContainer input{
    line-height: 1.5rem;
    font-size: .9rem;
    width: 100%;
    padding: .3rem .7rem;
    margin: .3rem;
    border: 1px solid #c2c2c2;
}

.loginDivMainInputContainer input::-webkit-input-placeholder{
    color: #888888;
}

.loginDivMainInputContainer input::-moz-placeholder{
    color: #888888;
}

.loginDivMainInputContainer input:-ms-input-placeholder{
    color: #888888;
}

.loginDivMainInputContainer input::-ms-input-placeholder{
    color: #888888;
}

.loginDivMainInputContainer input::placeholder{
    color: #888888;
}

#emailDivInputContainer{

}
#passwordDivInputContainer{

}

#emailDivInputContainer, #passwordDivInputContainer{ /* TODO delete "display: block" in php code passwordDivInputContainer, delete all <br> tags*/
    text-align: left;
    padding-bottom: .5rem;
}

/*========= END LOGIN FORM ==========*/

.row-menu-back {
    min-height: 60px;
    background: linear-gradient(to right, #f7f7f7 0%, #f7f7f7 60%,#31708E 60%, #31708E);
}

.menu-row-div {
    background-color: #31708E;
    height: 130px;
}


.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
}



.cbp-af-header {
    left: 0;
    width: 100%;
    z-index: 3;

}
.cbp-af-header  {
    float: right;
}
/* Transitions and class for reduced height */
.cbp-af-header .cbp-af-inner {
    width: 100%;
    max-width: 1173px;
    margin: 0 auto;
    padding-left: 0px;
    padding-right: 0px;
    box-shadow: 0 0 5px 0 #cccccc;
}

.cbp-af-header.cbp-af-header-shrink {
    height: 70px;
    top: 0;
    position: fixed;
    box-shadow: 0 0 5px 0 #cccccc;
    background: linear-gradient(to right, var(--menuBg) 0%, var(--menuBg) 60%,#31708E 60%, #31708E);
}
.cbp-af-header.cbp-af-header-shrink .cbp-af-inner div nav > div > ul > li > ul {
    position: absolute;
    top: 35px;
    z-index: 90;
    left: 0;
}
.cbp-af-header .cbp-af-inner div nav > div > ul > li > ul {
    position: absolute;
    top: 63px;
    z-index: 90;
    left: 0 !important;
}
.cbp-af-header.cbp-af-header-shrink > .cbp-af-inner > div > h1 {
    line-height: 25px;
    font-size: 25px;
}
.cbp-af-header.cbp-af-header-shrink > .cbp-af-inner > div > h2 {
    font-size: 10px;
    line-height: 10px;
}
.cbp-af-header.cbp-af-header-shrink .cbp-af-inner > div a {
    line-height: 65px;
}

.cbp-af-header h1, .cbp-af-header a {
    display: inline-block;
    position: relative;
}

.cbp-af-header .title-container h1 {
    line-height: 25px;
    font-size: 45px;
    letter-spacing: 2px;
    transition: all 0.3s;
}

.site-header h1, .site-header h2 {
    margin-bottom: 14px;
    float: left;
    width: 100%;
    text-transform: capitalize;
    margin-top: 20px;
}

.cbp-af-header .custom-logo {
    height: 65px;
    width: 65px;
    transition: all 0.3s;
}
.cbp-af-header-shrink .custom-logo {
    height: 40px;
    width: 40px;
}

.cbp-af-header .title-container p {
    font-size: 18px;
}
.cbp-af-header-shrink .title-container h1 {
    font-size: 25px !important;
    line-height: 10px;
}
.cbp-af-header-shrink .title-container p {
    font-size: 13px !important;
    line-height: 2px;
}

@media screen and (min-width: 991px) {

    .scroll-menu .diagonal, .scroll-menu .menu-row-div {
        padding-top: 0 !important;
        height: 70px !important;
    }

    .scroll-menu nav > div > ul > li > a {
        line-height: 65px !important;
    }

    .scroll-menu .cbp-af-header {
        position: fixed;
        background: linear-gradient(to right, #f7f7f7 0%, #f7f7f7 60%,#31708E 60%, #31708E);
    }

    .scroll-menu .cbp-af-header .logo-container {
        margin: 15px auto;
    }

    .scroll-menu .cbp-af-header .title-container h1 {
        font-size: 1.5rem;
        line-height: .5rem;
        margin-top: .5rem;
    }
    .scroll-menu .cbp-af-header .title-container p {
    font-size: .9rem;
    }
    .scroll-menu .cbp-af-header .custom-logo {
        /*margin: .5rem 0 .5rem 1rem;*/
        max-height: 40px;
        max-width: 40px;
    }

    .scroll-menu .search-contact-row {
        display: none;
    }
}

/* Removes menu when small media screen size */
@media screen and (max-width: 991px) {
    .cbp-af-header {
        /*display: none;*/
    }
    .main-header .container {
        width: 100%;
    }
    .cbp-af-header .logo-container {
        margin: 0;
    }

    .diagonal {
        background: #f7f7f7 !important;
    }
    .diagonal, .menu-row-div {
        padding-top: 5px !important;
        height: 60px !important;
    }

    nav > div > ul > li > a {
        line-height: 45px !important;
        font-size: 0.8rem;
    }

    .cbp-af-header .custom-logo {
        /*margin: .5rem 0 .5rem 1rem;*/
        max-height: 40px;
        max-width: 40px;
    }

    .cbp-af-header .title-container h1 {
        font-size: 1.5rem;
        line-height: .5rem;
        margin-top: .5rem;
    }
    .cbp-af-header .title-container p {
        font-size: .9rem;
    }
    /*.row-menu-back {*/
        /*min-height: 60px;*/
        /*background: #f7f7f7;*/
    /*}*/
    /*.menu-row-div {*/
        /*background-color: #f7f7f7;*/
        /*height: 60px;*/
    /*}*/
    /*.diagonal {*/
        /*background: transparent !important;*/
    /*}*/
    .search-contact-row {
        display: none;
    }

    #body_iframe {
      /*padding-top: 60px;*/
    }
}

.main-navigation {
    text-align: center;
}
.main-navigation li {
    font-size: 16px;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}
.main-navigation ul.nav-menu.toggled-on {
    display: inline-block;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    white-space: nowrap;
    display: inline-block;
    text-align: left;
}
.main-navigation ul {
    margin: 0;
    text-indent: 0;
}
.main-navigation li a,
.main-navigation li {
    display: inline-block;
    text-decoration: none;
}
.main-navigation li a {
    border-bottom: 0;
    color: #F7F9FB;
    white-space: nowrap;
    font-weight: 500;
    padding: 0 0 0 0;
    margin-right: 25px;
}
.main-navigation li {
    position: relative;
}
.main-navigation li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    z-index: 999;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
.main-navigation li > ul > ul {
    top: 0;
    left: 100%;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li:focus > ul,
.main-navigation .focus > ul {
    border: 0;
    clip: inherit;
    overflow: inherit;
    width: inherit;
    border: 1px solid #cccccc;
}
.main-navigation li li {
    display: block;
}
.main-navigation li a:hover,
.main-navigation li a:focus,
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .menu-item > a.active {
    color: #292C38;
    border-bottom-color: #292C38;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    transition: all 0.3s;
}

.menu-item {
    line-height: 1.65;
}
/* DROP DOWN MENY */
.main-navigation li ul {
    position: relative;
    top: 65px;
    z-index: 90;
    min-width: 100px;
    margin-top: 35px;
}
.main-navigation li ul li a {
    background-color: #f7f7f7;
    display: block;
    font-size: 14px;
    padding: 8px 20px;
    white-space: nowrap;
    color: #292C38;
    line-height: 12px;
    font-weight: 400;
    z-index: 90;
    margin-right: 0;
}
.main-navigation li ul li a:hover,
.main-navigation li ul li a:focus {
    border-bottom-width: 0px;
}



/* Diagonal */
.diagonal {
    background: linear-gradient(60deg, transparent 80%, #31708E 0);
    height: 130px;
    padding-top: 15px;
}
.diagonal-shrink {
    height: 70px;
    padding-top: 0px;

}

.title-container {
    display: inline-block;
    vertical-align: middle;
    padding-left: 20px;
}

.search-contact-row {
    white-space: nowrap;
    color: #F7F9FB;
    width: 100%;
    font-size: 12px;
    text-align: right;
}

/* Top Menu Search Form */
.head-search {
    display: inline-block;
    margin-left: 30px;
}
.head-search .searchform {
    max-width: 200px;
    width: 100%;
}
.head-search #searchform,
#searchform {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.15);
    padding: 5px 5px 5px 35px;
    color: #F7F9FB;
    position: relative;
    border: transparent;
}
.head-search #searchform i,
#searchform i {
    position: absolute;
    left: 0;
    padding: 0 12px;
    line-height: 20px;
    top: 5px;
}
.head-search #searchsubmit,
#searchsubmit {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    cursor: pointer;
    display: block;
    font-family: FontAwesome;
    font-variant: normal;
    font-weight: 400;
    height: 31px;
    left: 0;
    line-height: 1;
    margin: 0;
    padding: 5px 0 5px 10px;
    position: absolute;
    text-transform: none;
    content: "\f002";
    text-indent: 9999px;
    width: 30px;
}
.head-search input::-webkit-input-placeholder,
.head-search input::-moz-placeholder {
    color: #ffffff !important;
}
.head-search #searchform #s,
#searchform #s {
    background: none;
    width: 100%;
    border: 0;
    height: 20px;
}

.assistive-text,
.site .screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
}

label.screen-reader-text {
    display: none;
}

.top-header-language {
    display: inline-block;
    margin-left: 30px;
    margin-right: 30px;
}

.top-header-login {
    display: inline-block;
    /*margin-left: 30px;*/
    /*margin-right: 30px;*/
}
#body_iframe {
    width: 75%;
	max-width: 1300px;
	margin:0 auto;
}
@media screen and (max-width: 1322px) {
	#body_iframe {
    	width: 100%;
	}
}
/*#body_iframe.moveDown {*/
    /*padding-top: 70px;*/
/*}*/
@media screen and (max-width: 1170px) {

    .top-header-language {
        margin-left: 0;
        margin-right: 0;
    }
    .head-search {
        margin-left: 0;
    }

    .main-navigation li a {
        margin-right: 15px;
    }
	
}


/* Unngå understrek på undermeny */
.main-navigation .sub-menu a {
    border-bottom-width: 0px !important;
}

nav > div > ul > li > a {
    line-height: 93px;
}

.main-navigation ul > li > ul > li > a {
    line-height: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-right: 0;
    background: #f7f7f7;
}
.main-navigation ul > li > ul > li > a:hover {
    border-bottom: 2px solid #292C38 !important;
}

.bottom-links {
    margin-top: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    background-color: rgb(77, 91, 100);
}

.bottom-links h2 {
    color: #F7F9FB;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-header-language {
    padding: 0 !important;
}


.navbarBirdidBird {
    background: #31708E !important;
}