/* CSS for garden detail landing page with static full background image*/

/* 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");
}

/* Background */

#backstretch-container {
    position: fixed;
    z-index: -2;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
#backstretch-overlay {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%,rgba(0, 0, 0, 0.7) 100%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1) 0%,rgba(0, 0, 0, 0.7) 100%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1) 0%,rgba(0, 0, 0, 0.7) 100%);
    background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.1) 0%,rgba(0, 0, 0, 0.7) 100%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%,rgba(0, 0, 0, 0.7) 100%);
}


/* 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;
}

.grey_font {
    color: #DDDDDD;
}

.dark_grey_font {
    color: #AAAAAA;
}

/* font-size */

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

.title_font {
    line-height: 7.2rem;
    font-size: 7rem;
    font-weight: 400;
}

.subtitle_font {
    font-size: 2rem;
}

.subtitle-font-level-2 {
    font-size: 1.5rem;
    line-height: 1.0;
}

/* tag styles */

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

h1 {
    margin: 0rem auto;
}

body {
    width: 100%;
}

/* STYLES SECTION */

/* menu */

/* NOTA: el margin negativo hay que cuadarlo con el margin que hay en .main_menu > ul > li > a */

.main_menu_left {
    display: table;
    margin: 1rem 0 1rem -1.5rem;
    padding: 0;
}

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

.main_menu_right {
    display: table;
    margin: 0.5rem -1.5rem 0.5rem 0;
    padding: 0;
}

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

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

.main_menu > ul > li > a {
    margin: 1.5rem;
}

.plus {
    font-size: 3rem;
    color: #FF8080;
}

/* header */

.header_content_left {
    text-align: left;
    bottom: 0;
    position: absolute;
    margin: 0 auto 1rem 3rem;
    width: 100%;
}

.header_content_center {
    text-align: center;
    bottom: 0;
    position: absolute;
    margin: 0rem auto 1rem auto;
    width: 100%;
}

.header_content_right {
    /* NOTA: aquí y en el html, la alineación a la derecha se ha tenido que hacer especial ya que daba problemas */
    right: 0.5rem;
    text-align: right;
    bottom: 0;
    position: absolute;
    margin: 0 3rem 1rem auto;
    width: 100%;
}

.header {
    height:100vh;
}

/* main section */

.main_sect_content_left {
    text-align: left;
    width: 70%;
    margin: -1rem auto 0 3rem;
}

.main_sect_content_center {
    text-align: center;
    width: 90%;
    margin: -1rem auto 0rem auto;
}

@media only screen and (min-width: 1000px) {
    .main_sect_content_center {
        width: 70%;
    }
}

.main_sect_content_right {
    text-align: right;
    width: 70%;
    margin: -1rem 3rem 0 auto;
}

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

.credits_font {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: normal;
    margin-bottom: 3rem;
}

.action_count {
    font-size: 1rem;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* Next arrow */

.next_arrow {
    display:block;
    margin: 1rem auto 0rem auto;
    font-size: 1rem;
    color: #FFFFFF;
}

/* Dropdown menu */

.dropicon {
    padding: 0.5rem;
    cursor: pointer;
}

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

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

.dropdown_creation_content {
    right: 0;
    margin-top: 0rem;
    display: block;
    position: absolute;
    background-color: #FF8080;
    min-width: 4.5rem;
    z-index: 1;
    padding: 0.7rem;
    transition-delay: 500ms;
    visibility: hidden;
}

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

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


/* 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;
}