body {
height: 100%;
width: 100%;
margin: 0px;
}


img {
border-width: 0px;
}


@font-face {
    font-family: "Barkentina";
    src: url('../font/Barkentina.eot');
    src: url('../font/Barkentina.eot') format('embedded-opentype'),
         url('../font/Barkentina.woff') format('woff'),
         url('../font/Barkentina.ttf') format('truetype'),
         url('../font/Barkentina.svg#Barkentina') format('svg');
}


@font-face {
    font-family: "MADESunflower";
    src: url('../font/MADESunflower.eot');
    src: url('../font/MADESunflower.eot') format('embedded-opentype'),
         url('../font/MADESunflower.woff') format('woff'),
         url('../font/MADESunflower.ttf') format('truetype'),
         url('../font/MADESunflower.svg#MADESunflower') format('svg');
}


#preload {
display: none;
}


#bg {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
}


.container {
position: absolute;
left: 0px;
width: 100%;
padding-top: 6%;
overflow: hidden;
color: #fff;
font-family: "Barkentina", Arial, Helvetica, sans-serif;
font-size: 2.2vh;
z-index: 1;
}
@media screen and (orientation:portrait) {
.container {
padding-top: 18%;
font-size: 4vw;
}
} 


.container_title {
font-family: "MADESunflower", Arial, Helvetica, sans-serif;
font-size: 8vh;
line-height: 7vh;
letter-spacing: -0.2vh;
}
@media screen and (orientation:portrait) {
.container_title {
font-size: 15vw;
line-height: 13vw;
letter-spacing: -0.5vw;
}
} 


#container01 {
top: 0px;
height: 100%;
}
@media screen and (orientation:portrait) {
#container01 {
}
} 


#container02 {
top: 100%;
height: 50%;
background-color: #035956;
padding-left: 20%;
}
@media screen and (orientation:portrait) {
#container02 {
height: 100%;
padding-left: 15%;
}
} 


#container03 {
top: 150%;
height: 50%;
background-color: #00917C;
padding-left: 20%;
}
@media screen and (orientation:portrait) {
#container03 {
top: 200%;
height: 100%;
padding-left: 15%;
}
} 


#container04 {
top: 200%;
height: 50%;
background-color: #A5F0C5;
padding-left: 20%;
color: #035956;
}
@media screen and (orientation:portrait) {
#container04 {
top: 300%;
height: 100%;
padding-left: 15%;
}
} 


.footer {
position: absolute;
left: 0px;
height: 10%;
width: 100%;
padding-left: 5%;
padding-top: 6%;
overflow: hidden;
font-family: "Barkentina", Arial, Helvetica, sans-serif;
font-size: 2.2vh;
z-index: 1;
color: #035956;
}
@media screen and (orientation:portrait) {
.footer {
height: 15%;
padding-left: 10%;
}
} 


#footer_home {
top: 250%;
}
@media screen and (orientation:portrait) {
#footer_home {
top: 400%;
}
} 


#footer_section {
top: 160%;
}
@media screen and (orientation:portrait) {
#footer_section {
top: 200%;
}
} 


.footer #logo {
position: absolute;
top: 18%;
left: 5%;
height: 60%;
width: auto;
}
@media screen and (orientation:portrait) {
.footer #logo {
top: 20%;
left: 7%;
height: 58%;
width: auto;
}
}


.container_section {
position: absolute;
top: 100%;
left: 0px;
height: 60%;
width: 100%;
padding-left: 5%;
padding-top: 6%;
border-style: solid;
border-width: 3px;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-color: #00917C; 
z-index: 1;
}
@media screen and (orientation:portrait) {
.container_section {
height: 100%;
overflow: hidden;
}
} 


.bullets {
position: absolute;
top: 0%;
left: 50%;
font-family: "MADESunflower", Arial, Helvetica, sans-serif;
font-size: 4vh;
line-height: 4.7vh;
letter-spacing: -0.2vh;
color: #00917C;
z-index: 2;
}
@media screen and (orientation:portrait) {
.bullets {
top: 42%;
left: 5%;
width: 90%;
text-align: center;
font-size: 8vw;
line-height: 8.7vw;
letter-spacing: -0.5vw;
}
}



#bullets_gardencenter {
left: 18%;
}
@media screen and (orientation:portrait) {
#bullets_gardencenter {
top: 0px;
left: 5%;
}
}

/*
#bullets_gardencenter {
}
@media screen and (orientation:portrait) {
#bullets_gardencenter {
}
}
*/


#bullets_cafeteria {
left: 50%;
}
@media screen and (orientation:portrait) {
#bullets_cafeteria {
left: 5%;
top: 33%;
}
}


/*
#bullets_cafeteria {
}
@media screen and (orientation:portrait) {
#bullets_cafeteria {
top: 33%;
}
}
*/


#bullets_paisajismo {
left: 35%;
}
@media screen and (orientation:portrait) {
#bullets_paisajismo {
top: 36%;
left: 5%;
}
}


/*
#bullets_paisajismo {
left: 35%;
}
@media screen and (orientation:portrait) {
#bullets_paisajismo {
top: 36%;
left: 5%;
}
}
*/


.bullets span {
font-size: 3.5vh;
line-height: 3.5vh;
}
@media screen and (orientation:portrait) {
.bullets span {
font-size: 7vw;
line-height: 7.7vw;
}
}


.section_button {
position: absolute;
top: -32%;
width: 18%;
height: auto;
cursor: pointer;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
z-index: 2;
}
@media screen and (orientation:portrait) {
.section_button {
top: 0px;
width: 50%;
}
}


.section_button:hover {
-webkit-transform: scale(1.07);
-moz-transform: scale(1.07);
-o-transform: scale(1.07);
transform: scale(1.07);
}


#button_menu {
left: 15%;
}
@media screen and (orientation:portrait) {
#button_menu {
left: 5%;
}
}


/*
#button_menu {
left: 15%;
}
@media screen and (orientation:portrait) {
#button_menu {
left: 5%;
}
}
*/


#button_reservations {
left: 30%;
}
@media screen and (orientation:portrait) {
#button_reservations {
left: 45%;
}
}


#button_budget {
left: 15%;
}
@media screen and (orientation:portrait) {
#button_budget {
left: 25%;
}
}


.brands {
position: absolute;
bottom: 8%;
left: 17%;
height: auto;
width: 32%;
z-index: 2;
}
@media screen and (orientation:portrait) {
.brands {
bottom: 20%;
left: 7%;
height: auto;
width: 86%;
}
}


.plant_section {
position: absolute;
bottom: 0%;
right: 17%;
height: auto;
width: 30%;
z-index: 2;
}
@media screen and (orientation:portrait) {
.plant_section {
bottom: 0%;
right: 10%;
height: auto;
width: 80%;
}
}


#pots {
position: absolute;
top: 0%;
left: 17%;
height: 50%;
width: auto;
cursor: pointer;
z-index: 2;
}
@media screen and (orientation:portrait) {
#pots {
position: absolute;
top: 0%;
left: 7%;
height: auto;
width: 86%;
z-index: 2;
}
}


#workwithus {
position: absolute;
top: 25%;
right: 5%;
height: 50%;
width: auto;
cursor: pointer;
}
@media screen and (orientation:portrait) {
#workwithus {
top: 23%;
right: 7%;
height: 54%;
width: auto;
}
} 


.view_more {
position: absolute;
top: 42%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: auto;
height: 16%;
cursor: pointer;
z-index: 2;
}
@media screen and (orientation:portrait) {
.view_more {
top: 46%;
left: 15%;
right: inherit;
margin-left: inherit;
margin-right: inherit;
width: 45%;
height: auto;
z-index: 2;
}
} 


.cover {
position: absolute;
top: 15%;
left: 50%;
width: 35%;
height: 85%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media screen and (orientation:portrait) {
.cover {
top: 50%;
left: 7%;
width: 86%;
height: 50%;
background-color: aqua;
}
} 


#cover01 {
background: url(../img/cover01.jpg) no-repeat center center; 
}


#cover02 {
background: url(../img/cover02.jpg) no-repeat center center; 
}


#cover03 {
background: url(../img/cover03.jpg) no-repeat center center; 
}



#logo {
position: absolute;
top: 4%;
left: 3%;
width: auto;
height: 15%;
cursor: pointer;
z-index: 1;
}
@media screen and (orientation:portrait) {
#logo {
top: 4%;
left: 6%;
width: 25%;
height: auto;
}
} 


.logo_division {
position: absolute;
top: 9%;
right: 15%;
height: 7%;
width: auto;
display: block;
z-index: 1;
}
@media screen and (orientation:portrait) {
.logo_division {
display: none;
}
}


#menu {
position: absolute;
top: 11%;
left: 15%;
width: auto;
font-family: "Barkentina", Arial, Helvetica, sans-serif;
font-size: 2.6vh;
color: #035956;
display: block;
z-index: 1;
}
@media screen and (orientation:portrait) {
#menu {
display: none;
}
}


#menu span {
cursor: pointer;
}


#menu span:hover {
text-decoration: underline;
}


#selected {
text-decoration: underline;
}


#menu_mobile {
display: none;
}
@media screen and (orientation:portrait) {
#menu_mobile {
position: absolute;
top: 9.5%;
left: 35%;
width: auto;
font-family: "Barkentina", Arial, Helvetica, sans-serif;
font-size: 4.5vw;
letter-spacing: -0.2vw;
color: #035956;
display: block;
z-index: 1;
}
}


.flag {
position: absolute;
top: -5%;
width: 10%;
height: auto;
cursor: pointer;
}
@media screen and (orientation:portrait) {
.flag {
top: -210%;
width: 17%;
}
} 


#flag_en {
right: -20%;
}
@media screen and (orientation:portrait) {
#flag_en {
right: 17%;
}
} 


#flag_es {
right: -30%;
}
@media screen and (orientation:portrait) {
#flag_es {
right: -1%;
}
} 



#leaf01 {
position: absolute;
top: -20%;
right: 20%;
width: auto;
height: 15%;
z-index: 20;
}
@media screen and (orientation:portrait) {
#leaf01 {
top: -20%;
right: 20%;
width: 23%;
height: auto;
}
}


#leaf02 {
position: absolute;
top: -50%;
right: 50%;
width: auto;
height: 15%;
z-index: 20;
}
@media screen and (orientation:portrait) {
#leaf02 {
top: -70%;
right: 50%;
width: 23%;
height: auto;
}
}


#plant01 {
position: fixed;
top: 20%;
left: 0px;
width: auto;
height: 75%;
z-index: 3;
}
@media screen and (orientation:portrait) {
#plant01 {
top: 25%;
width: 25%;
height: auto;
}
}


#plant02 {
position: absolute;
bottom: 0px;
left: 12%;
width: auto;
height: 35%;
z-index: 3;
}
@media screen and (orientation:portrait) {
#plant02 {
bottom: -4%;
left: 0px;
width: 50%;
height: auto;
}
}


#intro {
position: absolute;
top: 25%;
left: -50%;
width: auto;
height: 45%;
display: block;
cursor: pointer;
z-index: 2;
}
@media screen and (orientation:portrait) {
#intro {
display: none;
}
}


#intro_mobile {
display: none;
}
@media screen and (orientation:portrait) {
#intro_mobile {
position: absolute;
bottom: -50%;
left: 6%;
width: 88%;
height: auto;
display: block;
z-index: 2;
}
}


#shortcut {
position: absolute;
top: 25%;
right: -20%;
width: auto;
height: 45%;
z-index: 3;
}
@media screen and (orientation:portrait) {
#shortcut {
top: 23%;
right: -50%;
height: 48%;
}
}


#home_slideshow {
position: absolute;
bottom: -100%;
right: 8%;
width: 55%;
height: 72%;
z-index: 1;
}
@media screen and (orientation:portrait) {
#home_slideshow {
bottom: inherit;
right: inherit;
top: 21%;
left: -100%;
width: 86%;
height: 47%;
}
}


.section_slideshow {
position: absolute;
top: 20%;
left: 15%;
width: 70%;
height: 67%;
z-index: 1;
}
@media screen and (orientation:portrait) {
.section_slideshow {
bottom: inherit;
right: inherit;
top: 21%;
left: 7%;
width: 86%;
height: 65%;
}
}


.title {
position: absolute;
top: 25%;
left: 17%;
width: auto;
height: 22%;
z-index: 2;
}
@media screen and (orientation:portrait) {
.title {
top: 23%;
left: 10%;
width: 90%;
height: auto;
z-index: 2;
}
}


#title_paisajismo {
}
@media screen and (orientation:portrait) {
#title_paisajismo {
left: 5%;
width: 90%;
}
}


#wa {
position: fixed;
bottom: 6%;
right: 3%;
height: 12%;
width: auto;
cursor: pointer;
z-index: 20;
}
@media screen and (orientation:portrait) {
#wa {
bottom: 9%;
bottom: 6%;
right: 3%;
height: auto;
width: 25%;
}
}


#book_container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.9);
z-index: -10;
}
@media screen and (orientation:portrait) {
#book_container {
width: 100%;
padding-right: 6%;
padding-left: 6%;
}
}


#form_container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.9);
z-index: -10;
}
@media screen and (orientation:portrait) {
#form_container {
}
}


form {
position: absolute;
top: 25%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
height: 50%;
width: 50%;
text-align: center;
color: #fff;
font-family: "Barkentina", Arial, Helvetica, sans-serif;
font-size: 1vw;
}
@media screen and (orientation:portrait) {
form {
top: 17%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
height: 80%;
width: 75%;
font-size: 4.5vw;
}
}


input {
height: 12%;
width: 100%;
background-color: #fff; 
text-align: left;
padding-left: 30px;
margin-top: 10px;
border-width: 0px;
font-family: "Barkentina", Arial, Helvetica, sans-serif;
font-size: 1vw;
color: #035956;
border-radius: 15px;
}
@media screen and (orientation:portrait) {
input {
height: 9%;
padding-left: 50px;
margin-top: 15px;
font-size: 5vw;
border-radius: 30px;
}
}


.inputmini {
width: 20%;
}
@media screen and (orientation:portrait) {
.inputmini {
width: 30%;
}
}


.inputupload {
background-color: transparent;
width: 50%;
}
@media screen and (orientation:portrait) {
.inputupload {
width: 100%;
}
}


#send {
height: 14%;
width: 50%;
background-color: #00917C; 
color: #fff;
cursor: pointer;
}
@media screen and (orientation:portrait) {
#send {
height: 12%;
width: 100%;
}
}

._df_book {
margin-top: 4%;
}
@media screen and (orientation:portrait) {
._df_book {
margin-top: 15%;
}
}



.df-ui-share {
display: none !important;
}


.df-ui-more {
display: none !important;
}


.close {
position: absolute;
top: 5%;
right: 5%;
width: auto;
height: 5%;
cursor: pointer;
z-index: 100;
}
@media screen and (orientation:portrait) {
.close {
top: 5%;
right: 8%;
width: 13%;
height: auto;
}
}