body {
height: 100%;
width: 100%;
margin: 0px;
background-color: #6DBEDE;
}


img {
border-width: 0px;
}


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

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


#preload {
display: none;
}


.mobile {
display: none;
}
@media screen and (orientation:portrait) {
.mobile {
display: block;
}
}


.content {
position: absolute;
top: 0px;
left: 5%;
width: 90%;
height: 90%;
background-color: #fff;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
box-shadow: 10px 15px 10px rgb(0 0 0 / 0.2);
z-index: 2;
}
@media screen and (orientation:portrait) {
.content {
}
}


#content_quienessomos {
height: 120%;
}
@media screen and (orientation:portrait) {
#content_quienessomos {
height: 350%;
}
}

@media screen and (orientation:portrait) {
#content_servicios {
height: 220%;
}
}


@media screen and (orientation:portrait) {
#content_contacto {
height: 130%;
}
}


.logo {
position: absolute;
top: 3%;
left: 23%;
width: 15%;
height: auto;
cursor: pointer;
}
@media screen and (orientation:portrait) {
.logo {
top: 15%;
left: 5%;
width: 42%;
height: auto;
}
}


#logo_quienessomos {
top: 2.3%;
}
@media screen and (orientation:portrait) {
#logo_quienessomos {
top: 3.8%;
}
}

@media screen and (orientation:portrait) {
#logo_servicios {
top: 6.1%;
}
}


@media screen and (orientation:portrait) {
#logo_contacto {
top: 10.5%;
}
}


#vegetables {
position: absolute;
top: 0px;
left: 0px;
width: 20%;
height: 100%;
background-color: #000;
overflow: hidden;
border-bottom-left-radius: 50px;
display: block;
}
@media screen and (orientation:portrait) {
#vegetables {
display: none;
}
}


#vegetables_bg {
position: absolute;
top: 0px;
left: 0px;
width: 200%;
height: 100%;
}


#vegetables_mobile {
display: none;
}
@media screen and (orientation:portrait) {
#vegetables_mobile {
position: absolute;
top: 0px;
left: 5%;
width: 90%;
height: 12%;
background-color: #000;
overflow: hidden;
display: block;
z-index: 3;
}
}


#vegetables_mobile_bg {
position: absolute;
bottom: 0%;
left: 0px;
width: 100%;
height: 600%;
}


#mariafernanda {
position: absolute;
top: 20%;
left: 10%;
max-width: 30%;
max-height: 75%;
z-index: 2;
}
@media screen and (orientation:portrait) {
#mariafernanda {
top: 88%;
left: 15%;
max-width: 70%;
max-height: inherit;
z-index: 5;
}
}


#cal {
position: absolute;
top: -30%;
right: 3%;
width: 9%;
height: auto;
cursor: pointer;
z-index: 2;
display: block;
}
@media screen and (orientation:portrait) {
#cal {
display: none;
}
}


#cal_mobile {
display: none;
}
@media screen and (orientation:portrait) {
#cal_mobile {
position: fixed;
top: 30%;
right: -20%;
width: 18%;
height: auto;
z-index: 6;
display: block;
}
}


#menu {
position: absolute;
top: 8%;
right: 12%;
display: block;
}
@media screen and (orientation:portrait) {
#menu {
display: none;
}
}


.menu_quienessomos {
top: 6% !important;
}


#menu span {
font-family: "Poppins-Bold", Arial, Helvetica, sans-serif;
font-size: 2vh;
color: #6DBEDE;
cursor: pointer;
margin-right: 30px;
}
@media screen and (orientation:portrait) {
#menu span {
}
}


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


.open_menu {
display: none;
}
@media screen and (orientation:portrait) {
.open_menu {
position: absolute;
top: 17%;
right: 6%;
width: 17%;
height: auto;
z-index: 5;
display: block;
}
}


@media screen and (orientation:portrait) {
#open_menu_quienessomos {
top: 4.2%;
}
}

@media screen and (orientation:portrait) {
#open_menu_servicios {
top: 6.7%;
}
}


@media screen and (orientation:portrait) {
#open_menu_contacto {
top: 11.5%;
}
}


.close_menu {
display: none;
}
@media screen and (orientation:portrait) {
.close_menu {
position: absolute;
top: 17%;
right: 6%;
width: 17%;
height: auto;
z-index: 5;
display: none;
}
}


@media screen and (orientation:portrait) {
#close_menu_quienessomos {
top: 4.2%;
}
}


@media screen and (orientation:portrait) {
#close_menu_servicios {
top: 6.7%;
}
}


@media screen and (orientation:portrait) {
#close_menu_contacto {
top: 11.5%;
}
}


#mobile_menu {
display: none;
}
@media screen and (orientation:portrait) {
#mobile_menu {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(109, 190, 222, 0.85);
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
z-index: 4;
display: none;
}
}


.links {
position: absolute;
top: 17%;
right: 29%;
text-align: right;
}


.links span {
font-family: "Poppins-Bold", Arial, Helvetica, sans-serif;
font-size: 6.5vw;
color: #fff;
}


@media screen and (orientation:portrait) {
#links_quienessomos {
top: 4.2%;
}
}


@media screen and (orientation:portrait) {
#links_servicios {
top: 6.8%;
}
}


@media screen and (orientation:portrait) {
#links_contacto {
top: 11.5%;
}
}


#selected {
text-decoration: underline;
}


.info {
position: absolute;
top: 24%;
left: 24%;
width: 60%;
font-family: "Poppins-Regular", Arial, Helvetica, sans-serif;
font-size: 0.8vw;
line-height: 1vw;
color: #6DBEDE;
}
@media screen and (orientation:portrait) {
.info {
top: 35%;
left: 9%;
width: 73%;
font-size: 4.3vw;
line-height: 5.4vw;
}
}


.info img {
width: 4%;
height: auto;
opacity: 0.6;
cursor: pointer;
margin-right: 10px;
}
@media screen and (orientation:portrait) {
.info img {
width: 20%;
height: auto;
}
}


.info img:hover {
opacity: 1;
}


.banner {
width: 46% !important;
opacity: 1 !important;
cursor: default !important;
}
@media screen and (orientation:portrait) {
.banner {
width: 95% !important;
margin-bottom: 10px;
}
}


#info_quienessomos {
top: 18%;
}
@media screen and (orientation:portrait) {
#info_quienessomos {
top: 9%;
font-size: 4.2vw;
line-height: 5.2vw;
}
}


#info_servicios {
font-size: 0.8vw;
line-height: 1.2vw;
}
@media screen and (orientation:portrait) {
#info_servicios {
top: 15%;
font-size: 4.3vw;
line-height: 5.3vw;
}
}


@media screen and (orientation:portrait) {
#info_contacto {
top: 25.5%;
}
}


.subtitle {
font-family: "Poppins-Bold", Arial, Helvetica, sans-serif;
}


.title {
font-family: "Poppins-Bold", Arial, Helvetica, sans-serif;
font-size: 1.5vw;
line-height: 1.8vw;
}
@media screen and (orientation:portrait) {
.title {
font-size: 7vw;
line-height: 7.7vw;
}
}


.viewmore {
border-width: 3px;
border-style: solid;
border-color: #6DBEDE;
border-radius: 50px;
background-color: #fff;
color: #6DBEDE;
cursor: pointer;
font-size: 0.5vw;
padding: 10px; 
}
@media screen and (orientation:portrait) {
.viewmore {
font-size: 3vw;
}
}


.viewmore:hover {
background-color: #6DBEDE;
color: #fff;
}
@media screen and (orientation:portrait) {
.viewmore:hover {
}
}



#headline {
position: absolute;
top: 18%;
left: 45%;
font-family: "Poppins-Regular", Arial, Helvetica, sans-serif;
font-size: 2.5vw;
line-height: 2vw;
letter-spacing: -0.2vw;
color: #6DBEDE;
}
@media screen and (orientation:portrait) {
#headline {
top: 30%;
left: 9%;
font-size: 6.5vw;
line-height: 6vw;
letter-spacing: -0.2vw;
}
}


#headline span {
font-family: "Poppins-Bold", Arial, Helvetica, sans-serif;
font-size: 5.5vw;
line-height: 5vw;
}
@media screen and (orientation:portrait) {
#headline span {
font-size: 14vw;
line-height: 13.5vw;
}
}


.slogan {
font-size: 1vw !important;
line-height: 1.2vw !important;
letter-spacing: 0vw;
}
@media screen and (orientation:portrait) {
.slogan {
font-size: 3vw !important;
line-height: 4vw !important;
}
}

#slogan02 {
display: none;
}

#slogan03 {
display: none;
}



#bullets {
font-size: 1vw !important;
line-height: 1.7vw !important;
letter-spacing: 0vw;
color: #A4CF76; 
}
@media screen and (orientation:portrait) {
#bullets {
font-size: 3vw !important;
line-height: 4vw !important;
}
}


#bullets img {
width: 5%;
height: auto;
margin-right: 1%;
margin-bottom: -0.8%;
}
@media screen and (orientation:portrait) {
#bullets img {
}
}


#agende {
width: 40%;
height: auto;
cursor: pointer;
}
@media screen and (orientation:portrait) {
#agende {
width: 65%;
}
}


#decoration01 {
position: absolute;
bottom: 0px;
left: 20%;
width: auto;
height: 20%;
}
@media screen and (orientation:portrait) {
#decoration01 {
}
}


#decoration02 {
position: absolute;
top: 20%;
right: 0px;
width: auto;
height: 40%;
}
@media screen and (orientation:portrait) {
#decoration02 {
display: none;
}
}


#decoration03 {
position: absolute;
top: 50%;
right: 0px;
width: auto;
height: 40%;
}
@media screen and (orientation:portrait) {
#decoration03 {
}
}


#footer {
position: absolute;
top: 80%;
left: 5%;
width: 90%;
height: 25%;
background-color: #fff;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
box-shadow: 10px 15px 10px rgb(0 0 0 / 0.2);
background-color: #B6DFEF;
z-index: 1;
}
@media screen and (orientation:portrait) {
#footer {
top: 105%;
height: 40%;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
z-index: 3;
}
}


#logos {
position: absolute;
top: 42%;
left: 5%;
width: 90%;
height: 60%;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (orientation:portrait) {
#logos {
top: 5%;
left: 8%;
display: inherit;
}
}


#logos img {
max-width: 7%;
margin-left: 1%;
max-height: 100%;
opacity: 0.6;
}
@media screen and (orientation:portrait) {
#logos img {
max-width: 23%;
margin-left: 0%;
}
}


.social {
position: absolute;
top: 107%;
left: 10%;
width: 80%;
height: 10%;
padding-top: 1%;
text-align: right;
font-family: "Poppins-Bold", Arial, Helvetica, sans-serif;
font-size: 0.8vw;
color: #fff;
}
@media screen and (orientation:portrait) {
.social {
padding-top: 3%;
font-size: 3vw;
}
}


#social_home {
top: 107%;
}
@media screen and (orientation:portrait) {
#social_home {
top: 148%;
}
}


#social_quienessomos {
top: 122%;
}
@media screen and (orientation:portrait) {
#social_quienessomos {
top: 355%;
}
}


#social_servicios {
top: 92%;
}
@media screen and (orientation:portrait) {
#social_servicios {
top: 223%;
}
}


#social_contacto {
top: 92%;
}
@media screen and (orientation:portrait) {
#social_contacto {
top: 134%;
}
}


#ig {
position: absolute;
top: 0px;
left: 0px;
width: 4%;
height: auto;
cursor: pointer;
opacity: 0.6;
}
@media screen and (orientation:portrait) {
#ig {
width: 14%;
opacity: 1;
}
}


#fb {
position: absolute;
top: 0px;
left: 4.5%;
width: 4%;
height: auto;
cursor: pointer;
opacity: 0.6;
}
@media screen and (orientation:portrait) {
#fb {
left: 15%;
width: 14%;
opacity: 1;
}
}


#fb:hover {
opacity: 1;
}


#ig:hover {
opacity: 1;
}


#map {
width: 70%;
}
@media screen and (orientation:portrait) {
#map {
width: 100%;
height: 300px;
}
}