@font-face {
   font-family: avenir;
   src: url("../fonts/AvenirLTStd-Roman.otf");
}
@font-face {
   font-family: moonlight;
   src: url("../fonts/MoonLight.otf");
}
@font-face {
   font-family: moonbold;
   src: url("../fonts/MoonBold.otf");
}

* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
  margin: 0;
  font-family: moonbold;  
}

a {
	text-decoration:none;
	margin-left:7%;
}
a:active {
	color: black;
}
a:hover {
	color: black;
	text-shadow:3px 3px 3px silver;
}
a:link {
	color: black;
}
a:visited {
	color: black;
}
.button01 {
	font-family:moonbold; 
	font-size:2em; 
	border-radius:2em;
	padding-top:10px;
	padding: 15px 70px 15px 70px;
	color:white;
	background-color:#7a97ab;border:none;
	cursor:pointer;margin-bottom:2em;
}
.clear {
	display: block;
	clear: both;
}
.nav01 {
	padding-top: 3%;
	margin-bottom: 10%;
	margin-right: 12%;
	overflow: hidden;
}
.nav02 {
	display: none;
	margin-right: 12%;
	overflow: hidden;
}
.nav03 {
	display: none;
	margin-right: 12%;
	overflow: hidden;
}

.nav01 a {
  float: right;
  color: black;
  text-align: center;
  text-decoration: none;
  margin-top: 0;
  font-size: 16px;
}

.a01 {
}
.a02 {
}
.drpdwn {
  float: right;
  overflow: hidden;
}
.drpdwn .drpbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: black;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.drpdwn .drpbtnActiveMenu{
  font-size: 16px;  
  outline: none;
  color: black;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  border-top: none;
  border-right: none;
  border-bottom: 3px solid #7a97ab;
  border-left: none;
}
.drpdwncnt {
  display: none;
  position: absolute;
  margin-left: -10px;
  min-width: 80px;
  text-align: center;
  z-index: 1;
}

.drpdwncnt a {
	float: none;
	color: black;
	padding-bottom: 3px;
	text-decoration: none;
	display: block;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 3px;
}

.drpdwncnt a:hover {
	text-shadow:3px 3px 3px silver;  
	border-bottom: #7a97ab 3px solid;
	color: #7a97ab;
	margin-bottom: 0;
}

.drpdwn:hover .drpdwncnt {
  display: block;
}

.aPutih {
	margin-left: 0;
}
.aPutih:active {
	color: white;
}
.aPutih:hover {
	color: white;
	text-shadow:3px 3px 3px black;
}
.aPutih:link {
	color: white;
}
.aPutih:visited {
	color: white;
}
.activeMenu {
/*	padding: 3px; */
	border-bottom: 3px solid #7a97ab;
}

.container01 {
  background-image: url("../images/OrganiqueBackGround.jpg");
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width:100%;
  text-align:center;
}
.container02 {
  background-color: #f2f2f2;
  height: 100%; 
  width:100%;
  text-align:center;
}
.div1 {
	color: #5c5e5e;
	font-family: avenir;
	font-size: 1em;
	margin-bottom: 2em;
	padding-right: 3em;
	padding-top: 15px;
	text-align: right;
}
.div2 {
	color: #5c5e5e;
	font-family: avenir;
	font-size: 1em;
	height: 4em;
	margin-bottom: 2em;
	text-align: left;
}
.div3 {
	background-image: url('../images/organiquewebs.svg');
	background-repeat: no-repeat;
	background-position: 60% 300px;
}
.div4 {
	background-image: url('../images/organiquewebs.svg');
	background-repeat: no-repeat;
	background-position: 60% 400px;
}
.div4 {
	font-size:1.6em;
	line-height:1.8em;
}
.flex-container {
  display: flex;
  justify-content: space-between;
}
.flex-container1 {
  display: flex;
  justify-content: space-between;
 
}
.flex-container2 {
  display: flex;
  justify-content: center;
  align-items: flex-end; 
}
.flex-container3 {
  display: flex;
  justify-content: space-between;
  background-color: #f2f2f2;
 
}
.flexItem1 {
	flex: 1;
}
.flexItem2 {
	flex: 2;
}
.flexItem3 {
	flex: 3;
}
.flexItem4 {
	flex: 4;
}
.flexItem5 {
	flex: 5;
}
.flexItem7 {
	flex: 7;
}
.flexItem8 {
	flex: 8;
}
.flexItem9 {
	flex: 9;
}
.flexItem11 {
	flex: 11;
}
.flexItem13 {
	flex: 13;
}
.flexItemHidden {
	display: block;
}
.fontHead1 {
	font-size: 4em;
}
.fontHead1a {
	font-size: 1.1em;
	font-family: avenir;
}
.fontHead2 {
	font-size: 3em;
	color: white;
	font-family: moonbold;
	text-align: left;
	padding-right: 5%;
	padding-left: 25%;
}
.input01 {
	width: 70%;
}
.input01::placeholder {
  color: silver;
  font-style: italic;
}
.input02 {
	border: none;
	border-radius: 25px;
	color: #5c5e5e;
	font-family: avenir;
	padding: 15px;
	width: 80%;
}
.input03 {
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
	border-radius: 25px;
	border: none;
	color: #5c5e5e;
	font-family: avenir;
	height: 10em;
	padding: 15px;
	width: 80%;
}
.img01 {
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);	
}
.img02 {
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);	
  width: 10%;
  margin-bottom: 60px;
}
.img02a {
  width: 20%;
  margin-bottom: 60px;
}
.img02b {
  width: 16%;
  margin-bottom: 60px;
  margin-left: 30px;
  margin-right: 30px;
}
.img02c {
  width: 6%;
  margin-bottom: 60px;
  margin-left: 30px;
  margin-right: 30px;
  position:relative;
  left:-33px;
}

.img03 {
	width: 50%;
	margin-top: 35%;
}
.img04 {
	width: 50%;
	margin-top: 100px;
}
.img05 {
	width: 70%;
	position:relative;
	top:-100px;
	left:100px;
}
.img06 {
	width: 170%;
	position:relative;
	top: 150px;
	left: 100px;
}
.img07 {
	position:relative;
	top:20px;
	width:52%	
}
.img08 {
	width:50%	
}
.liPutih {
	color: white;
	font-size: 0.8em;
	margin-bottom: 0.5em;
}
.logo01 {
	margin: auto;
	width:25%;
}
.logo02 {
	margin: auto;
	width:100%;
}
.logo03 {
	width:14%;
	margin-left:3%;
}
.p01 {
	font-family: avenir;
	text-align: left;
	color: #5c5e5e;
}
.p02 {
	font-family: moonbold;
	text-align: left;
	color: #5f8db5;
	font-size: 2em;
	margin-left: 18%;
	margin-bottom: 0;
}
.p03 {
	font-family: moonbold;
	text-align: left;
	color: #5f8db5;
	font-size: 4em;
}
.p04 {
	font-family: avenir;
	text-align: left;
	color: #5c5e5e;
	font-size: 1.2em;
	padding-right: 40%;
	margin-bottom: 25px;
}
.p05 {
	font-family: avenir;
	text-align: right;
	color: #5c5e5e;
	font-size: 1.2em;
	padding-left: 35%;
	padding-right: 5%;
	margin-bottom: 25px;
}
.p06 {
	font-family: avenir;
	text-align: left;
	color: #5c5e5e;
	font-size: 1.2em;
	padding-right: 25%;
	padding-left: 5%;
	margin-bottom: 25px;
}
.p07 {
	font-family: avenir;
	text-align: left;
	color: #5c5e5e;
	font-size: 1.2em;
	padding-right: 5%;
	padding-left: 25%;
	margin-bottom: 25px;
}
.p08 {
	font-family: 'Libre Baskerville';
	font-style: italic;
	text-align: left;
	color: #6f7271;
	font-size: 1.2em;
	padding-right: 5%;
	padding-left: 25%;
	margin-bottom: 25px;
}
.p09 {
	font-family: 'Libre Baskerville';
	font-style: italic;
	text-align: left;
	color: #6f7271;
	font-size: 1.2em;
	padding-right: 25%;
	padding-left: 5%;
	margin-bottom: 25px;
}
.whatcontainer01 {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.whatcontainer02 {
	display: flex;
	justify-content: space-between;
	position: relative;
	top:-22%;
}
.whatcontainer03 {
	display: flex;
	justify-content: space-between;
}
.whatdiv01 {
	font-family: avenir;
	color: #424548;
	font-size:1.5em;
	text-align: left;
	padding-left: 26%;
	padding-bottom: 1%;
}
.whatdiv02 {
	width: 55%;
	margin-right:0;
	margin-left:45%;
	min-width: 200px;
	z-index:1;
	position: relative;
}
.whatdiv03 {
	width:35%;
	margin: 2% auto;
}
.whatdiv04 {
	width:100%
}
.whatflex1 {
	flex: 2;
	text-align:right;
}
.whatflex2 {
	flex: 3;
	font-family: avenir;
	color: #424548;
	font-size:1.5em;
	text-align: left;	
}
.whatflex3 {
	padding: 2% 15% 2% 42%;
	flex: 1;
	text-align:left;
	font-family:avenir;
	color:white;
	font-size:1em;
}
.whatflex4 {
	flex: 1;
	text-align:center;
	margin:auto;
}
.whatflex5 {
	flex: 1;
	text-align:left;
	padding-left: 18%;
	background-image: url('../images/organiquewebs.svg');
	background-repeat: no-repeat;
	background-size: 50%;
}
.whatflex6 {
	flex: 1;
}
.whatflex7 {
	flex: 1;
	background-color:#53575a;
	text-align: left;
	font-family: avenir;
	font-size: 1em;
	line-height: 1.5em;
	color: white;
	padding: 3% 12% 3% 12%;
}
.whatimg01 {
	height: 1em;
	position: relative;
	top: 4px;
}
.whatimg02 {
	height: 3em;
	position: relative;
	left: 2em;
	
}
.whatimg03 {
	width:100%;
}
.whatimg04 {
	width:100%;
}
.whatp01 {
	font-family: moonbold;
	color: #5f8db5;
	font-size: 2.2em;
}
.whatp02 {
	font-family: avenir;
	font-style: bold;
	font-size: 1.2em;
	color: #424548;
	line-height: 1em;
	margin-bottom: 0;
}
.whatp03 {
	font-family: avenir;
	font-size: 1em;
	color: #626568;
	margin-left: 18px;
	margin-top: 3px;
	
}
.whatspan01 {
	position: relative;
	top: -2em;
	left: 1.5em;
}
.whydiv01 {
	position: absolute;
	background-color: #7a97ab;
	padding: 4% 4% 5% 4%;
}
.whydiv02 {
	background-color: #7a97ab;
	padding: 5% 10% 5% 10%;
	margin-left: 24%;
	margin-top: 35%;
}
.whydiv03 {
	width:40%;
	margin-left: 25%;
	margin-top: 25%;
}
.whyflex-container {
  background-image: url("../images/OrganiqueBackGround.jpg");
  display: flex;
  justify-content: space-between;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;	
}
.whyflex-container1 {
  display: flex;
  justify-content: space-between;
}

.whyflexItem1 {
	background-image: url('../images/organiquewebs.svg');
	background-repeat: no-repeat;
	background-position: -20% 0%;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: flex-end; 	
}
.whyflexItem2 {
	flex: 1;
	padding-top:5%;
}
.whyflex01 {
	display: flex;
	align-items: flex-start; 	
}
.whyflex02 {
	flex: 1;
	text-align: right;
}
.whyflex03 {
	flex: 1;
	text-align: left;
}
.whyfontHead2 {
	font-size: 3em;
	color: white;
	font-family: moonbold;
	text-align: left;
	padding-right: 5%;
	padding-left: 25%;
}

.whyimg01 {
	width:100%;
}
.whyimg02 {
	width:35%;
}
.whyimg07 {
	position:relative;
	width:52%	
}
.whyimg08 {
	width:65%	;
}
.whyp01 {
	font-family: avenir;
	font-style: italic;
	text-align: left;
	color: white;
	font-size: 1.2em;
	margin-bottom: 50px;
}
.whyp02 {
	font-family: moonbold;
	text-align: left;
	color: white;
	font-size: 1.5em;
	margin-bottom: 0.3em;
}
.whyp03 {
	font-family: avenir;
	text-align: left;
	color: white;
	font-size: 1.2em;
	margin-top: 0;
	margin-bottom: 30px;
}
.whyp04 {
	font-family: avenir;
	text-align: left;
	color: white;
	font-size: 1em;
	margin-top: 0.2em;
}
.whyp05 {
	font-family: moonbold;
	text-align: left;
	color: #5f8db5;
	font-size: 1.5em;
	padding-right: 25%;
	margin-bottom: 25px;
}
.whyp06 {
	font-family: avenir;
	text-align: left;
	color: #5c5e5e;
	font-size: 1.2em;
	padding-right: 25%;
	margin-bottom: 25px;
}
.whyp07 {
	font-family: avenir;
	font-style: italic;
	text-align: left;
	color: #5c5e5e;
	font-size: 1.2em;
	padding-right: 20%;
	padding-left: 12%;
	margin-bottom: 50px;
}
.whyp07a {
	font-family: avenir;
	font-style: italic;
	text-align: left;
	color: #5c5e5e;
	font-size: 1.2em;
	padding-right: 20%;
	padding-left: 12%;
	margin-bottom: 10em;
}
.whyp08 {
	font-family: avenir;
	text-align: left;
	color: #5c5e5e;
	font-size: 1.2em;
	padding-right: 25%;
	margin-bottom: 25px;
}
.whyp09 {
	font-family: 'Libre Baskerville';
	font-style: italic;
	text-align: left;
	color: #6f7271;
	font-size: 1em;
}
.whyp16 {
	font-family: avenir;
	text-align: left;
	color: #5c5e5e;
	font-size: 1.2em;
	padding-right: 25%;
	padding-left: 5%;
	margin-bottom: 25px;
}
.whyp17 {
	font-family: avenir;
	text-align: left;
	color: #5c5e5e;
	font-size: 1.2em;
	padding-right: 5%;
	padding-left: 25%;
	margin-bottom: 25px;
}
.pos01 {
/*	position:relative;
	top: 4px; */
	display: block;
}
.span01 {
	color:white;
	font-size:1.2em;
	position:relative;
	bottom:1%;
}
.span02 {
	color:#53575a;
	font-size:1.2em;
	position:relative;
	bottom:6px;
}
.span03 {
	font-family:avenir;
	color:#7a97ab;
	font-size:1.2em;
}
.span04 {
	font-family:moonbold; 
	font-size:2em;
}
.span05 {
	font-family:moonbold; 
	font-size:2em;
	height:1em;
	padding-left:4em;
}
.td1 {
	text-align: right;
	font-family: avenir;
	font-size: 1em;
	color: #5c5e5e;
	padding-right: 1em;
}
.td2 {
	text-align: left;
	font-family: avenir;
	font-size: 1em;
	color: #5c5e5e;
	background-color: white;
	border-radius: 25px;
	padding-left: 0.8em;
	padding-right: 0.8em;
	width: 85%;
}
.tr1 {
	line-height:3em;
}

/* Media dibawah 699 *************************************************************** */

@media (max-width: 699px) {
a {
	font-size:11px;
	margin-left:2%;
	margin-bottom:5px;
}
.aPutih {
	margin-left:0;
}
.button01 {
	font-family:moonbold; 
	font-size:1em; 
	border-radius:1em;
	padding-top:10px;
	padding: 5px 30px 5px 30px;
	color:white;
	background-color:#7a97ab;border:none;
	cursor:pointer;margin-bottom:2em;
}
.div1 {
	color: #5c5e5e;
	font-family: avenir;
	font-size: 0.8em;
	margin-bottom: 1em;
	padding-right: 1em;
	padding-top: 10px;
	text-align: right;
}
.div2 {
	color: #5c5e5e;
	font-family: avenir;
	font-size: 0.8em;
	height: 4em;
	margin-bottom: 1em;
	text-align: left;
}
.div4 {
	font-size: 0.8em;
	line-height: 0.9em;
}
.nav01 a {
  font-size: 11px;
}
.nav02 {
	display: block;
	margin-right: 5px;
}
.nav03 {
	display: block;
	text-align:right;
	margin-right:13%;
	margin-top:-10%;
	margin-bottom:8%;
	
}
.drpdwn {
	font-size: 11px;
	margin-top:-1px;
}
.drpdwn .drpbtn {
  font-size: 11px;  
}
.drpdwncnt {
  margin-left: 3px;
  min-width: 40px;
}
.drpdwncnt a {
	padding-bottom: 3px;
	margin-top: 10px;
	margin-bottom: 3px;
}
.flex-container1 {
	flex-direction: column;
}
.flexItemHidden {
	display: none;
}

.fontHead1 {
	font-size: 2em;
}
.flexItem3.f3aq{
	flex: 1;
}
.flexItem5.f5aq{
	flex: 4;
}
.flexItem4.f3te{
	flex: 1;
}
.flexItem9.f5te{
	flex: 5;
}
.flexItem11.f11te{
	flex: 7;
}
.fHidden {
	display: none;
}
.img02 {
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(3px 3px 3px #222);	
  width: 25%;
  margin-bottom: 30px;
}
.img02b {
  width: 16%;
  margin-bottom: 10px;
  margin-left: 30px;
  margin-right: 30px;
}
.img02c {
  width: 13%;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  position:relative;
  left:-4px;
}
.img05 {
	width: 70%;
	position:relative;
	top:-20px;
	left:30px;
}
.img06 {
	width: 200%;
	position:relative;
	top: -10px;
	left: 20px;
}
.input01 {
	width: 55%;
}
.logo01 {
	margin: auto;
	width:70%;
}
.logo03 {
	width:35%;
	margin-left:3%;
}
.p01 {
	font-size:0.8em;
	padding-right:15%;
}
.p02 {
	font-family: moonbold;
	text-align: left;
	color: #5f8db5;
	font-size: 1.3em;
	margin-left: 12%;
	margin-bottom: 0;
}
.p03 {
	font-family: moonbold;
	text-align: left;
	color: #5f8db5;
	font-size: 2em;
}
.p04 {
	font-family: avenir;
	text-align: left;
	color: #5c5e5e;
	font-size: 1.2em;
	padding-right: 5%;
	margin-bottom: 25px;
}
.p05 {
	font-family: avenir;
	text-align: right;
	color: #5c5e5e;
	font-size: 1.2em;
	padding-left: 0%;
	padding-right: 5%;
	margin-bottom: 25px;
}
.pos01 {
/*	position:relative;
	top: 10px; */
	display: none; 
}
.span01 {
	color: white;
	font-size: 0.7em;
	position:relative;
	bottom:3px;
}
.span02 {
	font-size: 0.7em;
	position:relative;
	bottom:3px;
}
.span03 {
	font-family:avenir;
	color:#7a97ab;
	font-size:0.8em;
}
.span04 {
	font-family:moonbold; 
	font-size:1em;
}
.span05 {
	font-family:moonbold; 
	font-size:1em;
	height:1em;
	padding-left:0;
}

.ul01{
	padding: 0;
}
.drpdwn .drpbtnActiveMenu{
  font-size: 11px;  
  outline: none;
  color: black;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  border-top: none;
  border-right: none;
  border-bottom: 3px solid #7a97ab;
  border-left: none;
}
.whatcontainer01 {
	display: flex;
	margin-top:1.5em;
	flex-direction: column;
	position: static;
}
.whatcontainer02 {
	display: flex;
	justify-content: space-between;
	position: static;
}
.whatdiv01 {
	font-family: avenir;
	color: #424548;
	font-size:1.5em;
	text-align: left;
	padding-left: 15%;
	padding-bottom: 1%;
}
.whatdiv02 {
	width: 50%;
	margin-right:25%;
	margin-left:25%;
/*	z-index:1;
	position: relative; */
}
.whatflex1 {
	flex: 2;
	text-align:right;
}
.whatflex2 {
	flex: 3;
	font-family: avenir;
	color: #424548;
	font-size:1.5em;
	text-align: left;	
}
.whatflex3 {
	padding: 2% 15% 2% 20%;
	flex: 1;
	text-align:left;
	font-family:avenir;
	color:white;
	font-size:.8em;
}
.whatflex6 {
	flex: 2;
}
.whatflex7 {
	flex: 5;
	background-color:#53575a;
	text-align: left;
	font-family: avenir;
	font-size: .8em;
	line-height: 1em;
	color: white;
	padding: 3% 6% 3% 6%;
}
.whatimg01 {
	height: .8em;
	position: relative;
	top: 2px;
}
.whatimg02 {
	height: 1.5em;
	position: static;
	left: 2em;

}
.whatspan01 {
/*	position: relative; */

/*	left: 1.5em; */
}
.whydiv01 {
	position: static;
	background-color: #7a97ab;
	padding: 4% 4% 5% 4%;
}
.whydiv03 {
	width:60%;
	margin-left: 20%;
	margin-top: 25%;
	margin-bottom: 5%;
}
.whyflex-container {
	flex-direction: column;
}
.whyflex-container1 {
	flex-direction: column;
}
.whyflexItem2 {
	padding-top:0;
}
.whyfontHead2 {
	font-size: 1.5em;
	color: white;
	font-family: moonbold;
	text-align: left;
	padding-right: 5%;
	padding-left: 15%;
}
.whyp01 {
	font-family: avenir;
	font-style: italic;
	text-align: left;
	color: white;
	font-size: 0.9em;
	margin-bottom: 50px;
}
.whyp02 {
	font-family: moonbold;
	text-align: left;
	color: white;
	font-size: 1em;
	margin-bottom: 0.3em;
}
.whyp03 {
	font-family: avenir;
	text-align: left;
	color: white;
	font-size: .8em;
	margin-top: 0;
	margin-bottom: 30px;
}
.whyp05 {
	font-family: moonbold;
	text-align: left;
	color: #5f8db5;
	font-size: 1em;
	padding-right: 5%;
	margin-bottom: 15px;
}
.whyp06 {
	font-family: avenir;
	text-align: left;
	color: #5c5e5e;
	font-size: .8em;
	padding-right: 5%;
	margin-bottom: 15px;
}
.whyp07 {
	font-family: avenir;
	font-style: italic;
	text-align: left;
	color: #5c5e5e;
	font-size: 0.8em;
	padding-right: 20%;
	padding-left: 12%;
	margin-bottom: 20px;
}
.whyp07a {
	font-family: avenir;
	font-style: italic;
	text-align: left;
	color: #5c5e5e;
	font-size: 0.8em;
	padding-right: 20%;
	padding-left: 12%;
	margin-bottom: 1em;
}
.whyp08 {
	font-family: avenir;
	text-align: left;
	color: #5c5e5e;
	font-size: .8em;
	padding-right: 5%;
	margin-bottom: 15px;
}
.whyp16 {
	font-family: avenir;
	text-align: left;
	color: #5c5e5e;
	font-size: .8em;
	padding-right: 5%;
	padding-left: 5%;
	margin-bottom: 15px;
}
.whyp17 {
	font-family: avenir;
	text-align: left;
	color: #5c5e5e;
	font-size: .8em;
	padding-right: 5%;
	padding-left: 5%;
	margin-bottom: 15px;
}
}