/* CSS for profile detail landing page */

/* Fonts */

@font-face {
    font-family: "Georgia";
    src: url("../fonts/Georgia.ttf") format("truetype");
}

@font-face {
    font-family: "Georgia Italic";
    src: url("../fonts/Georgia-Italic.ttf") format("truetype");
}

@font-face {
    font-family: "League Gothic";
    src: url("../fonts/LeagueGothic-Regular.otf") format("truetype");
}

@font-face {
    font-family: "Century Gothic Bold";
    src: url("../fonts/CenturyGothicBold.ttf") format("truetype");
}

/* BASE STYLES SECTION */

/* fonts */
.georgia_it {
    font-family: "Georgia Italic";
}

.georgia {
    font-family: "Georgia";
}

.league_gothic {
    font-family: "League Gothic";
}

/* text-alignment */

.center_text {
    text-align: center;
}

.right_text {
    text-align: right;
}

.left_text {
    text-align: left;
}

.justify_text {
    text-align: justify;
}

/* content-alignment */

.float_right {
    float:right;
}

.clear_right {
    clear:right;
}

/* color */

.white_font {
    color: #FFFFFF;
}

.black_font {
    color: #000000;
}

.grey_font {
    color: #DDDDDD;
}

.dark_grey_font {
    color: #AAAAAA;
}

.salmon_color {
    color: #FF8080;
}

/* font-size */

.small_font {
    font-size: 1rem;
    line-height: 1.5rem;
}

.medium_font {
    font-size: 1.3rem;
    line-height: 1.6;
}

.title_font {
    font-size: 3rem;
    font-weight: bold;
}

.title_font_detail {
    font-size: 4rem;
    font-weight: lighter;
    font-family: "League Gothic";
}

.subtitle_font {
    font-size: 1.2rem;
}

.post_preview_title_font {
    font-size: 1.5rem;
}

/* tag styles */

a {
  color: inherit;
  text-decoration: inherit;
}

h1 {
    margin: 1.5rem auto;
}

/* display */

.display_none {
    display: none;
}

.display_block {
    display: block;
}

/* STYLES SECTION */

/* menu and headers */

.header {
    margin-top: 3rem;
}


/* -- profile img */
.img-wrapper {
    position: relative;
    display: inline-block;
    height: 6rem;
    width: 6rem;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    /* box-shadow: 0 0 0 1px #BBBBBB, 0 0 0 3px white, 0 0 0 4px #BBBBBB; */
	box-shadow: 0 0 0 3px white, 0 0 0 4px #BBBBBB;
}

/* -- profile img */
.img-wrapper > img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
    max-width:none;
}


/* -- profile */
.about_me {
    width: 40%;
    margin: auto auto 1.2rem auto;
}

/* -- profile */
.about_expand a {
    color: #AAAAAA;
    text-decoration: underline;
}

.text-links-style a {
    color: #AAAAAA;
}

a.clickable:hover {
     cursor:pointer;
}


/* -- profile */
#gardener_stats span {
    display: block;
    margin: 0.5rem;
}

/* -- main menu */
.menu_block {
    margin-bottom: 1.5rem;
}

.main_menu_row {
    display: table;
    margin: 0rem auto;
    padding: 0;
}

.main_menu_row > ul {
    list-style-type: none;
    list-style-position: outside;
    margin: 0;
    padding: 0;
}

.main_menu_row > ul > li {
    display: table-cell;
    vertical-align: middle;
}

.main_menu_row > ul > li > a {
    margin: 0rem 1rem;
}

/* -- plus dropdown menu */
.plus {
    margin: 0rem;
    font-size: 2.5rem;
    color: #FF8080;
}

/* overwritting icons menu style */
/*
.nav-profile {
    margin: auto 0 0.6rem auto !important;
}
*/

.menu-level-2 {
    margin: 0.4rem 0 0.2rem auto;
}

/* style specific to include menu.html (which normally uses foundation and other stuff) */
/* TODO test whether this can be deleted */

.nav-profile-menu {
     margin: 0 0 1rem 0;
     text-align: center;
}

.nav-profile-menu a {
    font-family: "League Gothic";
    font-size: 1.4rem;
    color: #AAAAAA;
}

.nav-profile-menu div {
    font-family: "League Gothic";
    font-size: 1rem;
    color: #AAAAAA;
    font-weight: bold;
    padding: 0 0 0.1rem 0;
}

.nav-profile-menu ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.nav-profile-menu ul li {
    display: inline-block;
    padding: 0;
    vertical-align: middle;
}

.nav-profile-menu ul li a {
    padding: 0 0.8rem;
}

.nav-profile-menu ul li .menu_header_selected {
    color: #000000;
}

/* Dropdown menu */

.dropdown {
    position: relative;
    display: inline-block;
    z-index: 3;
}

/* options */

.dropdown_options_content {
    right: 0;
    margin-top: 0.5rem;
    display: block;
    position: absolute;
    background-color: black;
    min-width: 6rem;
    z-index: 1;
    padding: 0.7rem;
    transition-delay: 50ms;
    visibility: hidden;
}

/* sharing */

.dropdown_sharing_content {
    right: 0;
    margin-top: 0.5rem;
    display: block;
    position: absolute;
    background-color: black;
    min-width: 4rem;
    z-index: 1;
    padding: 0.7rem;
    transition-delay: 50ms;
    visibility: hidden;
}

.dropdown_options_content a, .dropdown_sharing_content a {
    font-size: 1.4rem;
    color: white;
    text-decoration: none;
    display: block;
}

.dropdown_sharing:hover .dropdown_sharing_content {
    transition-delay: 0s;
    visibility: visible;
}

.dropdown_sharing:hover .dropdown_options_content {
    transition-delay: 0s;
    visibility: hidden;
}

.dropdown_options:hover .dropdown_options_content {
    transition-delay: 0s;
    visibility: visible;
}

.dropdown_options:hover .dropdown_sharing_content {
    transition-delay: 0s;
    visibility: hidden;
}

/* creation */

.dropdown_creation_content {
    left: 0;
    margin-left: 2rem;
    margin-top: 0rem;
    display: block;
    position: absolute;
    background-color: #FF8080;
    min-width: 3.5rem;
    z-index: 1;
    padding: 0.2rem 1.2rem;
    transition-delay: 500ms;
    visibility: hidden;
}

.dropdown_options_content a {
    font-size: 1.8rem;
    color: white;
    text-decoration: none;
    display: block;
}

.dropdown:hover .dropdown_options_content {
    transition-delay: 0s;
    visibility: visible;
}

/* main section - gardens */

.main_sect_content {
    text-align: center;
}

.grid {
    width: 90%;
    margin: auto;
    display: block;
    text-align: center;
}

.bg_image, .bg_black_square {
    position: relative;
    width: 100%;
    padding-bottom:100%;
    overflow: hidden;
}

.grid_img_title_wrapper {
    text-align:center;
    width: 80%;
    display: block;
    margin: auto;
}

.bg_image:hover h2 {
    display: none;
}

.bg_image span.overlay {
    background: black;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.bg_image:hover span.overlay {
    opacity: 1;
}

div.grid_img_stats {
    position: absolute;
    text-align:center;
    top: calc(50% - 6rem);
    width: 100%;
    z-index: 2;
}

.bg_image:hover div.grid_img_stats {
    display: inherit;
}

.bg_black_square {
    background: black;
    opacity: 1;
    height: 0;
}

/* Base Style */

.width60{
    width: 90%;
    margin: auto;
}

/* Gardens gallery */

#grid-item {
    padding: 1.2rem 1.2rem 0rem 1.2rem;
    width: 100%;
    display: inline-block;
}

#grid-item  h2 {
    font-size: 4.5vw;
    line-height: 5vw;
    font-weight: normal;
}

#grid-item  h4 {
    font-size: 0.5rem;
    line-height: 0.5rem;
    margin: 0.7rem 0;
    color: #777777;
    font-style: italic;
    font-weight: normal;
}

.bg_image h2, .bg_black_square h2 {
   position: absolute;
   text-align:center;
   top: calc(50% - 3.2vw);
   width: 80%;
   z-index: 2;
}

@media only screen and (min-width: 800px) {
    #grid-item {
        width: 42%;
    }

    #grid-item  h2 {
        font-size: 3vw;
        line-height: 3.2vw;
        font-weight: normal;
    }

    .grid {
        width: 90%;
    }
}

@media only screen and (min-width: 800px) and (orientation : landscape) {

    .width60{
        width: 90%;
        margin: auto;
    }


    #grid-item {
        width: 42%;
    }

    #grid-item  h2 {
        font-size: 3vw;
        line-height: 3.2vw;
        font-weight: normal;
    }

     .grid {
        width: 90%;
    }
}

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

    .width60{
        width: 60%;
        margin: auto;
    }

    #grid-item {
        width: 26%;
    }

    #grid-item  h2 {
        font-size: 2vw;
        line-height: 2.2vw;
        font-weight: normal;
    }

    .bg_image h2, .bg_black_square h2  {
       top: calc(50% - 3vw);
    }

    .grid {
        width: 70%;
    }
}

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

    #grid-item  h4 {
        font-size: 0.7rem;
        line-height: 0.7rem;
    }

}

#grid-item img {
    position: absolute;
    left: calc(50%);
    top: calc(50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    min-width:100%;
    min-height:100%;
    z-index: 0;
}

/* Image footer for permissions and visibility */

.permissions-footer {
    width: 100%;
    font-size: 0.7rem;
    margin: 0.7rem 0;
    font-family: 'Georgia Italic';
    color: #AAAAAA;
}

.perm-left {
    float: left;
    width: auto;
    margin-left: 0.5rem;
}

.perm-right {
    float: right;
    width: auto;
    margin-right: 0.5rem;
}

.perm-right a{
    cursor: pointer;
}

.perm-right .selected {
    color: #000000;
}

/* Gallery for: blog, spaces, species */

.grid-wrapper {
    width: 90%;
    margin: auto;
    display: block;
    text-align: center;
}

.grid-blog{
    width: 100%;
}

#grid-item-blog {
    padding: 5%;
    width: 100%;
    margin: 0;
}

#grid-item-blog  h4 {
    font-size: 0.5rem;
    line-height: 0.5rem;
    margin: 0.2rem auto;
    color: #777777;
    font-style: italic;
    font-weight: normal;
}

#grid-item-blog p {
    margin: 0.5rem auto;
}

.post-text {
    font-family: "Georgia";
    font-size: 1rem;
    line-height: 1.5rem;
}

#grid-item-blog h3 {
    margin: 0.5rem auto 0.1rem auto;
    font-family: "League Gothic";
    font-weight: normal;
}

@media only screen and (min-width: 800px) {
    #grid-item-blog {
        width: 46%;
        padding: 2%;
    }

    .grid-wrapper {
        width: 90%;
    }
}

@media only screen and (min-width: 800px) and (orientation : landscape) {
    #grid-item-blog {
        width: 46%;
        padding: 2%;
    }

     .grid-wrapper {
        width: 90%;
    }
}

@media only screen and (min-width: 1050px) {
    #grid-item-blog {
        width: 29.93%;
        padding: 1.7%;
    }

    .grid-wrapper {
        max-width: 61.5%;
    }
}

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

    #grid-item-blog  h4 {
        font-size: 0.7rem;
        line-height: 0.7rem;
    }

}

#grid-item-blog img {
    width: 100%;
    height: auto;
}

/* DETAILS */
.main_sect_detail{
    max-width: 80em;
    margin: auto;
}

.detailed_view img {
    max-width: 100%;
    max-height: 70rem;
    margin: auto;
    display: block;
}

.detailed_view .icons  {
    text-align:center;
    color: #AAAAAA;
    font-size: 1.4rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.detailed_view .icons > a {
    margin-left: 1rem;
    pointer-events: auto;
}

.img_credits {
    margin-bottom: 2rem;
}

.img_credits h4 {
    font-size: 1rem;
    line-height: 1rem;
    margin: 0.7rem 0;
    color: #777777;
    font-family: "Georgia Italic";
    font-weight: normal;
}

/* Blog post only */

.detailed_view figcaption{
    text-align: center;
    color: #666666;
    font-size: 1rem;
    font-family: "Georgia Italic";
}

.detailed_view .comments {
    width: 60%;
    margin: auto;
    color: #AAAAAA;
    font-size: 1.2rem;
    text-align: left;
    line-height: 1.5;
    font-family: "Georgia Italic";
}

#id_comment {
    display:block;
    box-sizing:border-box;
    width:100%;
    height:2.4375rem;
    padding:.5rem;
    border:1px solid #cacaca;
    margin:0 0 1rem;
    font-family:inherit;
    font-size:1rem;
    color:#0a0a0a;
    background-color:#fefefe;
    box-shadow:inset 0 1px 2px rgba(10,10,10,.1);
    border-radius:0;
    transition:box-shadow .5s,border-color .25s ease-in-out;
    -webkit-appearance:none;
    -moz-appearance:none
}

#id_comment:focus {
    border:1px solid #8a8a8a;
    background-color:#fefefe;
    outline:0;
    box-shadow:0 0 5px #cacaca;
    transition:box-shadow .5s,border-color .25s ease-in-out
}

.comments form input[type="button"]{

    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    font-size: 1.2rem;
    font-family: "Georgia";
}

/* Species detail only */
.detailed_view h2 {
    font-size: 2.5rem;
    font-weight: lighter;
    font-family: "Georgia Italic";
    margin: 0;
}

.species-detail h3 {
    font-style: italic;
    font-weight: lighter;
    padding-top: 1.2rem;
    margin: 1.8rem auto 0.5rem auto;
    font-family: "Georgia Italic";
    text-align: center;
    font-size: 2rem;
}

.species-detail .morfo {
    overflow: hidden;
    padding-top: 5%;
}

.species-morfo span {
    color: white;
    font-style: italic;
}

.species-morfo .size {
    font-size: 8pt;
    font-style: italic;
    float: right;
    color: white;
    text-align: right;
}

.species-morfo .title {
    position: absolute;
    left: 0;
    top: 0;
    margin-left:10px;
    margin-top: 5px;
    font-family: "Georgia";
}

.species-morfo .name {
    color: white;
    text-align: right;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right:10px;
    margin-bottom: 5px;
    font-family: "Georgia";
}

.species-morfo img {
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.species-morfo .bounding {
    background-color: #AAAAAA;
    margin-bottom: 10px;
    position: relative;
    padding: 10px;
    float: left;
    width:110px;
    height:160px;
    margin-right: 1%;

}

.species-detail .sliders .months {
    overflow: hidden;
    margin-bottom: 2%;
    font-family: "Georgia";
    line-height: 1.5;
}

.species-detail .sliders .name {
    font-size: 1rem;
    color:white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Georgia";
    line-height: 1.5;
}

.species-detail .sliders .month_number {
    float:left;
    width:8.3333%;
    height: 10%;
    text-align: center;
}

.species-detail .sliders .month {
    background:#cccccc;
    float:left;
    width:8.3333%;
    height: 10%;
}

.species-detail .sliders .active {
    background: grey;
}

.species-detail > img {
    width:100%;
}

.nespec {
    text-align:center;
}

.nespec h3 {
    margin-top: 0px;
    padding-top:0px;
    font-family: "Georgia Italic"
}

/* Details (post, space, species): sharing and editing popup menus */
.dropdown_menu_container{
   width: 100%;
   position: relative;
}

.popup_menu_hide {
    display:None;
}

.popup_menu {
   float: left;
   position: absolute;
   width: 30%;
   left: 35%;
   bottom: 0px;
   text-align: center;
   z-index: 1000;
   background-color: #000000;
   padding: 5px;
   color: #FFFFFF;
   font-family: "Georgia";
   font-weight: bold;
}

.popup_menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   line-height: 1.6;
}

.popup_menu ul li:last-child { border-bottom: none; }

.popup_menu li {
   border-bottom: 1px solid #FFFFFF;
}

.popup_menu li a {
   color: #FFFFFF;
   font-family: "Georgia";
   font-weight: bold;
}

/* Details Horizontal Navigation*/

.tablec-item-nav {
    display:table;
    margin-left: auto;
    margin-right: auto;
}
.rowc-item-nav {
    display:table-row;
}

.item-nav-button{
    display:table-cell;
    width:4%;
}

.item-middle{
    display:table-cell;
    width:82%;
}
.item-right {
    float: right;
}

.item-nav-button i {
    font-size: 2rem;
    color: #222222;
}

/* Footer */

#footer {
    font-family: "Georgia", Verdana, Tahoma;
    color: #AAAAAA;
    font-style: Italic;
    font-size: 1rem;
    text-align: center;
    margin-top: 5rem;
    margin-bottom: 3rem;
}

#footer a {
    text-decoration: underline;
    font-weight: bold;
    color: #AAAAAA;
}

#footer img {
    max-width: 25%;
    display: block;
    margin: auto;
    margin-bottom: 1rem;
}

/* Garden blog old style */
/* TODO test whether this can be deleted */

.title_garden_blog {
    font-size: 3.5rem;
    font-weight: normal;
    margin: 0;
    /*margin-bottom: 0.3rem;*/
    margin-top: -0.5rem;
    line-height: 3.7rem;
}


button {

    background: black;
    padding: 0.85em 1em;
    border: none;
    text-decoration: none;
    cursor: pointer;
    color: white;
    font-size: 1.2rem;
    font-family: "Georgia";
}

.buttons-wrapper-outer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttons-wrapper {
    width:10rem;
    background-color:white;
}

.brow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;

}

.bcolumn {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  margin-bottom:2rem;
}

.kleos_logo {
    width:100%;
    text-align:center;
    margin-bottom: -1rem;
    margin-top: 2rem;
}

.kleos_logo img {
    width:7rem;
    height:auto;
}

.sound_item {
    font-family: "Georgia";
    color:black !important;
}

.sound_item h4 {
    color:black !important;
}

.sound_item h2 {
    font-family: "Georgia";
}