html {
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
overflow-x: hidden;
}
@font-face {
font-family: "Futura";
src: url('../Font/Futura/Futura Book Regular.otf') format("opentype");
}
@font-face {
font-family: "HelveticaNeue";
src: url('../Font/HelveticaNeue/HelveticaNeue_0.ttf');
}
@font-face {
font-family: "HomizioNova";
src: url('../Font/HomizioNova/regular.ttf');
}
@font-face {
font-family: "Adlanta";
src: url('../Font/Adlanta/Adlanta.otf') format("opentype");
}
@font-face {
font-family: "Goldoni";
src: url('../Font/goldoni/Goldoni_DEMO.otf') format("opentype");
}
@font-face {
font-family: "Cerbetica";
src: url('../Font/cerbetica/cerbetica_regular.ttf');
}
@font-face {
font-family: "Freehand";
src: url('../Font/Freehand/freehand.ttf');
}
@font-face {
font-family: "AlexBrush";
src: url('../Font/alexbrush/AlexBrush-Regular.ttf');
}
@font-face {
font-family: "Kaushan";
src: url('../Font/kaushan/KaushanScript-Regular.otf');
}
@font-face {
font-family: "BritannicBoldRegular";
src: url('../Font/BritannicBoldRegular/Britannic Bold Regular.ttf');
}
@font-face {
font-family: "Bernard";
src: url('../Font/Bernard/Bernard.TTF');
}
@font-face {
font-family: "CooperBlack";
src: url('../Font/CooperBlack/CooperBlack.TTF');
}
@font-face {
font-family: "Corbel";
src: url('../Font/Corbel/Corbel.ttf');
}
@font-face {
font-family: "BerlinSansFB";
src: url('../Font/BerlinSansFB/BerlinSansFB.ttf');
}
.logo-icon
{
margin-top: 25px;
}
.spacer {
padding:0 5px;
}
.red-priority
{
color:red;
}
@media (max-width: 468px) and (min-width: 0px)
{
body{
width: 100%;
height: 100%;
}
.logo-icon
{
margin-top: 0px ;
}
.card-header
{
background: #E3F2FD;
background-size: 100% 100%;
background-repeat: no-repeat;
color: white;
width: 100%;
height: 120px;
}
.table-bawah-map-header
{
color: black;
width: 100%;
text-align: center;
background: #009999;
margin-top: 60px;
border-radius: 20px;
padding: 10px;
}
.card-callus
{
font-size: 20px;
padding: 20px;
}
.card-sosmed
{
height: 100%;
}
.img-icon-21
{
width: 40px;
padding: 10px;
}
.test
{
margin: 0px;
}
}
@media (max-width: 780px) and (min-width: 468px)
{
.logo-icon
{
margin-top: 0px;
}
}
@media (max-width: 1190px) and (min-width: 780px)
{
.logo-icon
{
margin-top: 0px;
}
}
@media (min-width: 1190px)
{
.table-bawah-map-header
{
margin-top: 120px;
margin-left: 170px;
color: black;
width: 50%;
text-align: center;
background: #009999;
border-radius: 20px;
}
.card-callus
{
font-size: 20px;
padding: 20px;
}
.img-icon-21
{
width: 50px;
padding: 10px;
}
}
.judul
{
color:#009999;
}
#kontenHeader{
background: #ffffff;
height: 200px;
color: white;
font-family: "Futura";
}
.img-icon-header
{
width: 220px;
margin-top:20px;
padding-top: 20px;
display: block;
margin:auto;
}
#konten1{
border:2px solid;
background-image: url(../img/1header.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 800px;
text-align: right;
color: white;
width: 100%;
font-family: "HomizioNova";
}
#konten1 h1{
margin-right: 120px;
margin-top: 60px;
font-size: 70px;
color: #ffffff;
}
#konten1 h2{
margin-right: 120px;
font-size: 40px;
}
#konten1 button{
background-color: #009999;
color: white;
height: 45px;
margin-right: 120px;
font-size: 25px;
font-family: "HomizioNova";
outline: none;
width: 180px;
}
@media (max-width: 468px) and (min-width: 0px)
{
#kontenHeader h1{
margin: 0px;
}
.img-icon-header
{
width: 100px;
margin-top:5px;
padding-top: 5px;
padding-bottom: 5px;
display: block;
margin:auto;
}
.underline12 {
display: inline-block;
color: #009999;
font-size: 16px;
margin: 0px;
}
.underline121 {
display: inline-block;
color: #009999;
font-size: 15px;
margin: 0px;
}
.underline1212 {
display: inline-block;
color: #009999;
font-size: 12px;
margin-top: -10px;
}
#kontenHeader .card-callus
{
padding-top: 5px;
}
.test
{
margin-top: 0px;
height: 30px;
}
.test1
{
margin-top: 0px;
}
#konten1{
border:2px solid;
background-image: url(../img/1header.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 300px;
text-align: right;
color: white;
width: 100%;
font-family: "HomizioNova";
}
#konten1 h1{
margin-right: 30px;
margin-top: 20px;
font-size: 30px;
color: #ffffff;
}
#konten1 h2{
margin-right: 30px;
font-size: 20px;
}
#konten1 button{
background-color: #009999;
color: white;
height: 25px;
margin-right: 30px;
font-size: 12px;
font-family: "HomizioNova";
outline: none;
width: 80px;
}
}
@media (max-width: 780px) and (min-width: 468px)
{
#konten1{
border:2px solid;
background-image: url(../img/1header.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 350px;
text-align: right;
color: white;
width: 100%;
font-family: "HomizioNova";
}
#konten1 h1{
margin-right: 30px;
margin-top: 20px;
font-size: 30px;
color: #ffffff;
}
#konten1 h2{
margin-right: 30px;
font-size: 20px;
}
#konten1 button{
background-color: #009999;
color: white;
height: 25px;
margin-right: 30px;
font-size: 12px;
font-family: "HomizioNova";
outline: none;
width: 80px;
}
}
@media (max-width: 1190px) and (min-width: 780px)
{
#konten1{
border:2px solid;
background-image: url(../img/1header.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 450px;
text-align: right;
color: white;
width: 100%;
font-family: "HomizioNova";
}
#konten1 h1{
margin-right: 30px;
margin-top: 20px;
font-size: 50px;
color: #ffffff;
}
#konten1 h2{
margin-right: 30px;
font-size: 30px;
}
#konten1 button{
background-color: #009999;
color: white;
height: 40px;
margin-right: 30px;
font-size: 18px;
font-family: "HomizioNova";
outline: none;
width: 100px;
}
}
@media (min-width: 1190px)
{
.underline121 {
display: inline-block;
color: #009999;
font-size: 55px;
margin: 0px;
}
.underline1212 {
display: inline-block;
color: #009999;
font-size: 22px;
margin-bottom: 10px;
}
.test
{
margin-top: 5px;
}
.test1
{
margin-top: 0px;
}
.card-header
{
background: #E3F2FD;
background-size: 100% 100%;
background-repeat: no-repeat;
color: white;
width: 100%;
height: 200px;
}
}
@media (max-width: 468px) and (min-width: 0px)
{
#konten2{
background-image: url(../img/2clinic.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 250px;
text-align: right;
color: white;
width: 100%;
background-size: cover;
font-family: "HomizioNova";
font-size: 15px;
}
#konten2 h1 {
margin-right: 20px;
font-family: "HomizioNova";
margin-top: 10px;
font-size: 20px;
padding-top: 10px;
}
#konten2 table {
float: right;
margin-right: 20px;
width: 40%;
font-size: 8px;
}
#konten2 .judul-doctor {
padding-bottom: 20px;
color: black;
padding-right: 20px;
}
#konten2 .nama-doctor {
padding-bottom: 10px;
color: black;
padding-left: 180px;
text-align: justify;
}
#konten2 .hari-doctor {
text-align: center;
padding-bottom: 10px;
color: #009999;
}
#konten2 .jam-doctor {
text-align: left;
padding-bottom: 10px;
color:orange;
}
#konten2 button {
background-color: #009999;
color: white;
height: 25px;
margin-right: 20px;
margin-top: -20px;
font-size: 12px;
font-family: "HomizioNova";
outline: none;
width: 80px;
}
.table-konten2
{
display: none;
}
.judul
{
display: none;
}
#konten21{
background-color: #ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: right;
color: white;
width: 100%;
height:420px;
font-size: 15px;
}
#konten21 h1 {
margin-right: 20px;
font-family: "Freehand";
margin-top: 10px;
font-size: 20px;
padding-top: 10px;
color: #009999;
}
#konten21 .underline21
{
border-bottom:3px solid #009999;
}
#konten21 table {
width: 100%;
font-family: "Futura";
display: block;
}
#konten21 .judul-doctor {
color: black;
padding-left: 15px;
padding-bottom: 10px;
font-family:"Futura";
font-size: 20px;
font-weight: bolder;
}
#konten21 .nama-doctor {
padding-bottom: 10px;
color: black;
padding-left: 20px;
text-align: justify;
font-family:"Futura";
font-size: 10px;
}
#konten21 .hari-doctor {
text-align: center;
padding-bottom: 10px;
padding-left:10px;
color: #009999;
font-family:"Futura";
font-size: 10px;
}
#konten21 .jam-doctor {
text-align: left;
padding-bottom: 10px;
padding-left: 20px;
color:orange;
font-family:"Futura";
font-size: 10px;
}
#konten21 button {
background-color: #009999;
color: white;
height: 25px;
margin-right: 20px;
margin-top: -20px;
font-size: 12px;
font-family: "HomizioNova";
outline: none;
width: 80px;
}
}
@media (max-width: 780px) and (min-width: 468px)
{
.underline121 {
display: inline-block;
color: #009999;
font-size: 50px;
}
#konten2{
background-image: url(../img/2clinic.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 350px;
text-align: right;
color: white;
width: 100%;
background-size: cover;
font-family: "HomizioNova";
font-size: 25px;
}
#konten2 h1 {
margin-right: 20px;
font-family: "HomizioNova";
margin-top: 10px;
font-size: 25px;
padding-top: 10px;
}
#konten2 table {
float: right;
margin-right: 20px;
width: 60%;
font-size: 12px;
}
#konten2 .judul-doctor {
padding-bottom: 20px;
color: black;
padding-right: 20px;
}
#konten2 .nama-doctor {
padding-bottom: 10px;
color: black;
padding-left: 180px;
text-align: justify;
}
#konten2 .hari-doctor {
text-align: center;
padding-bottom: 10px;
color: #009999;
}
#konten2 .jam-doctor {
text-align: right;
padding-bottom: 10px;
color:orange;
}
#konten2 button {
background-color: #009999;
color: white;
height: 25px;
margin-right: 20px;
margin-top: -20px;
font-size: 12px;
font-family: "HomizioNova";
outline: none;
width: 80px;
}
}
@media (max-width: 1190px) and (min-width: 780px)
{
#konten21{
display: none;
}
.underline121 {
display: inline-block;
color: #009999;
font-size: 50px;
}
#konten2{
background-image: url(../img/2clinic.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 450px;
text-align: right;
color: white;
width: 100%;
background-size: cover;
font-family: "HomizioNova";
font-size: 25px;
}
#konten2 h1 {
margin-right: 20px;
font-family: "HomizioNova";
margin-top: 10px;
font-size: 35px;
padding-top: 10px;
}
#konten2 table {
float: right;
margin-right: 20px;
width: 60%;
font-size: 20px;
}
#konten2 .judul-doctor {
padding-bottom: 20px;
color: black;
padding-right: 20px;
}
#konten2 .nama-doctor {
padding-bottom: 10px;
color: black;
padding-left: 180px;
text-align: justify;
}
#konten2 .hari-doctor {
text-align: center;
padding-bottom: 10px;
color: #009999;
}
#konten2 .jam-doctor {
text-align: right;
padding-bottom: 10px;
color:orange;
}
#konten2 button {
background-color: #009999;
color: white;
height: 35px;
margin-right: 20px;
margin-top: -20px;
font-size: 16px;
font-family: "HomizioNova";
outline: none;
width: 100px;
}
}
@media (min-width: 1190px)
{
#konten21{
display: none;
}
#konten2{
background-image: url(../img/2clinic.png);
/*background: #FFE0B2;*/
background-size: 100% 100%;
background-repeat: no-repeat;
height: 650px;
text-align: right;
color: white;
width: 100%;
background-size: cover;
font-family: "Futura";
font-size: 15px;
}
#konten2 h1 {
margin-right: 60px;
font-family: "HomizioNova";
font-size: 40px;
}
#konten2 .image-clinic
{
width: 100%;
height: 485px;
}
#konten2 table {
float: right;
margin-right: 0px;
width: 100%;
font-size: 18px;
padding-left: 2px;
}
#konten2 .judul-doctor {
padding-bottom: 15px;
padding-left: 330px;
text-align: left;
font-weight: bold;
color: #009999;
font-size: 20px;
}
#konten2 .nama-doctor {
padding-bottom: 3px;
color: black;
padding-left: 330px;
text-align: left;
color: #009999;
}
#konten2 .hari-doctor {
text-align: right;
padding-bottom: 3px;
color: #009999;
}
#konten2 .jam-doctor {
text-align: left;
padding-bottom: 3px;
padding-left: 40px;
/*color:orange;*/
color: #009999;
}
#konten2 button{
background-color: #009999; color: white; height: 45px;
font-size: 20px; border-color: #009999;
width: 150px;
font-family: "HomizioNova";
}
.hrkuning
{
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 1em;
position: relative;
width: 25%;
padding-bottom: 10px;
overflow: hidden;
background: red;
}
.hrputih
{
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 1em;
position: relative;
width: 25%;
padding-bottom: 10px;
overflow: hidden;
background: white;
}
.underline1 {
font-family: "Freehand";
border-bottom: 6px solid #f89d4c;
display: inline-block;
color: #009999;
}
.underline12 {
display: inline-block;
color: #009999;
font-size: 22px;
}
.underline2 {
border-bottom: 3px solid #f89d4c;
display: inline-block;
margin-left: 8px;
color: #009999;
}
}
@media (max-width: 468px) and (min-width: 0px)
{
.hrkuning
{
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 1em;
position: relative;
width: 25%;
padding-bottom: 10px;
overflow: hidden;
background: red;
}
.hrputih
{
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 1em;
position: relative;
width: 25%;
padding-bottom: 10px;
overflow: hidden;
background: white;
}
.underline1 {
border-bottom: 6px solid #f89d4c;
display: inline-block;
margin-left:-10px;
color: black
}
.underline212 {
display: inline-block;
color: #009999;
}
.underline2 {
border-bottom: 3px solid #f89d4c;
display: inline-block;
margin-left: 8px;
color: #009999;
}
#konten3{
background-image: url(../img/3g.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 200px;
text-align: left;
color: white;
width: 100%;
margin-top: -5px;
}
#konten3 h2{
margin: 0px;
padding: 0px;
}
#konten3 h3{
margin: 0px;
padding: 0px;
}
#konten3 p{
float: left;
margin-left: 20px;
font-size: 12px;
font-family: "HomizioNova";
color: #009999;
}
.image-appointment
{
margin-top: 50px;
}
.quotes-image
{
height: 70px;
width:70px;
margin-top: 40px;
margin-left: -40px;
z-index: 99;
}
.dog-image
{
margin-left: -10px;
margin-top: -200px;
height:100px;
width:100px;
}
.konten3-judul
{
font-family: "Freehand";
margin-top: -10px;
border-bottom: solid 4px #ffffff;
float: right;
}
.konten3-free
{
font-family: "BritannicBoldRegular";
color: black;
font-weight: bolder;
font-size: 20px;
margin-left: 10px;
margin-top: 10px;
color:#009999;
}
.konten3-image
{
margin-top: 20px;
height: 80px;
}
.konten3-grooming
{
font-family: "Futura";
color: black;
font-weight: bolder;
font-size: 20px;
margin-left: 10px;
color:#009999;
}
.konten3-forgrooming
{
font-family: "Freehand";
color: black;
font-size: 14px;
padding: 2px;
color:#009999;
}
.konten3-forstay
{
font-family: "Freehand";
color: black;
font-size: 14px;
padding: 2px;
color:#009999;
}
#konten3 h1{
margin-top: 10px;
font-family: "Freehand";
margin-left: 20px;
font-size: 18px;
padding-top: 10px;
}
#konten3 button{
margin-top: 10px;
margin-left: 30px;
background-color: #FF9800;; color: white; height: 30px;
font-size: 12px;
width: 150px;
font-family: "HomizioNova";
border-radius: 10px;
border:none;
}
.appointment
{
margin-top: 100px;
}
}
@media (max-width: 780px) and (min-width: 468px)
{
#konten3{
background-image: url(../img/3g.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 350px;
text-align: left;
color: white;
width: 100%;
margin-top: -5px;
}
#konten3 h1{
margin-left: 20px;
margin-top: -10px;
font-family: "HomizioNova";
font-size: 25px;
padding-top: 60px;
}
#konten3 p{
float: left;
font-size: 16px;
font-family: "HomizioNova";
}
#konten3 button{
margin-top: 50px;
margin-left: 50px;
background-color: #009999;; color: white; height: 30px;
font-size: 16px; border-color: #009999;;
width: 160px;
font-family: "HomizioNova";
}
.image-appointment
{
margin-top: 50px;
}
.quotes-image
{
height: 90px;
width:90px;
margin-top: 140px;
margin-left: 70px;
z-index: 99px;
}
.dog-image
{
margin-left: 50px;
margin-top: -40px;
height:180px;
width:180px;
}
}
@media (max-width: 1190px) and (min-width: 780px)
{
#konten3{
background-image: url(../img/3g.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 450px;
text-align: left;
color: white;
width: 100%;
margin-top: -5px;
}
#konten3 h1{
margin-left: 20px;
margin-top: -10px;
font-family: "HomizioNova";
font-size: 35px;
padding-top: 60px;
}
#konten3 p{
float: left;
font-size: 26px;
font-family: "HomizioNova";
}
#konten3 button{
margin-top: 50px;
margin-left: 50px;
background-color: #009999;; color: white; height: 40px;
font-size: 20px; border-color: #009999;;
width: 240px;
font-family: "HomizioNova";
}
.image-appointment
{
margin-top: 50px;
}
.quotes-image
{
height: 120px;
width:120px;
margin-top: 180px;
margin-left: 90px;
z-index: 99px;
}
.dog-image
{
margin-left: 50px;
margin-top: 0px;
height:260px;
width:260px;
}
}
@media (min-width: 1190px)
{
#konten3{
background-image: url(../img/3g.png);
background-size: 100%;
height: 600px;
text-align: left;
color: white;
width: 100%;
margin-top: 0px;
}
.konten3-judul
{
font-family: "Freehand";
margin-top: 0px;
}
.konten3-free
{
font-family: "BritannicBoldRegular";
color: black;
font-weight: bolder;
font-size: 80px;
margin-left: 100px;
padding: 10px;
color:#009999;
}
.konten3-image
{
margin-top: 20px;
}
.konten3-grooming
{
font-family: "Futura";
color: black;
font-weight: bolder;
font-size: 50px;
margin-left: 100px;
padding: 10px;
color:#009999;
}
.konten3-forgrooming
{
font-family: "Freehand";
color: black;
font-size: 30px;
padding: 10px;
color:#009999;
}
.konten3-forstay
{
font-family: "Freehand";
color: black;
font-size: 30px;
padding: 10px;
color:#009999;
}
#konten3 h1{
margin-left: 80px;
margin-top: 10px;
font-family: "Freehand";
font-size: 40px;
padding-top: 60px;
}
#konten3 p{
margin-left: 80px;
color:#009999;
font-size: 28px;
font-family: "HomizioNova";
float: left;
color: black;
}
#konten3 button{
margin-top: 20px;
margin-left: 100px;
background-color: #FF9800;; color: white; height: 50px;
font-size: 20px;
width: 250px;
font-family: "HomizioNova";
border-radius: 10px;
border:none;
}
.appointment
{
margin-top: 100px;
}
.image-appointment
{
margin-top: 50px;
}
.quotes-image
{
margin-top: 300px;
margin-left: 100px;
z-index: 99px;
height: 200px;
width:200px;
margin-right:-120px;
}
.dog-image
{
height:400px;
width:400px;
}
}
@media (max-width: 468px) and (min-width: 0px)
{
#kontenshop{
background-image: url(../img/4shop.png);
background-color:#ffffff;
background-size: 117% 100%;
background-repeat: no-repeat;
height: 400px;
text-align: center;
color: white;
width: 100%;
font-family: "HomizioNova";
}
#kontenshop .inside-shop{
/*background-image: url(../img/lala/shop2.png);*/
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
color: white;
width: 85%;
padding: 10px;
margin-left: 40px;
margin-bottom: 40px;
font-family: "HomizioNova";
}
#kontenshop h1{
font-family: "Futura";
font-size: 18px;
color: black;
text-align: center;
margin-bottom: -10px;
color: #009999;
}
#kontenshop .underline-shop
{
margin-top: 20px;
border-bottom: 3px solid #f89d4c;
}
#kontenshop table{
font-family: "HomizioNova";
font-size: 12px;
margin-top: 10px;
padding: 10px;
}
#kontenshop button{
background-color: #009999;
color: white;
height:20px;
font-size: 8px;
border-color: #009999;
width: 60px;
margin-top: -5px;
font-family: "HomizioNova";
}
#kontenshop .shop-button
{
cursor: pointer; font-size: 12px; width: 80px; height: 30px; margin-top:10px;
}
#kontenshop .table-shop-button
{
color: black;
}
#kontenshop .table-shop-label
{
color: black; width: 100%; text-align: center;
}
#kontenshop .table-shop-more
{
width: 100%;
text-align: center;
padding-top: 30px;
}
#kontenshop .image-shop
{
width:60px;
height:50px;
}
.td-col-1
{
width:40%;
}
.td-col-2
{
width: 22%;
}
/* Style the Image Used to Trigger the Modal */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
}
@media (max-width: 780px) and (min-width: 468px)
{
#kontenshop{
border:2px solid;
background-image: url(../img/4shop.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 500px;
text-align: center;
color: white;
width: 100%;
font-family: "HomizioNova";
}
#kontenshop h1{
font-family: "HomizioNova";
font-size: 35px;
}
#kontenshop table{
font-family: "HomizioNova";
font-size: 12px;
}
#kontenshop button{
background-color: #009999;
color: white;
height:40px;
font-size: 12px;
width: 90px;
margin-top: -5px;
font-family: "HomizioNova";
}
#kontenshop .shop-button
{
cursor: pointer; font-size: 12px; width: 80px; height: 30px; margin-top:10px;
}
#kontenshop .table-shop-button
{
color: black;
}
#kontenshop .table-shop-label
{
color: black; width: 100%; text-align: center;
}
#kontenshop .table-shop-more
{
width: 100%;
text-align: center;
padding-top: 30px;
}
#kontenshop .image-shop
{
width:100px;
height:100px;
}
}
@media (max-width: 1190px) and (min-width: 780px)
{
/*
.logo-icon
{
margin-top: 0px;
}
*/
}
@media (min-width: 1190px)
{
#kontenshop{
background-image: url(../img/4shop.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 700px;
text-align: center;
color: white;
width: 100%;
font-family: "HomizioNova";
padding: 20px;
}
#kontenshop .inside-shop{
/*background-image: url(../img/lala/shop2.png);*/
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
color: white;
width: 85%;
padding: 10px;
margin-left: 100px;
font-family: "HomizioNova";
}
#kontenshop h1{
font-family: "Futura";
font-size: 40px;
color: black;
text-align: center;
margin-bottom: -10px;
color: #009999;
}
#kontenshop .underline-shop
{
margin-top: 20px;
border-bottom: 6px solid #f89d4c;
}
#kontenshop table{
font-family: "HomizioNova";
font-size: 22px;
}
#kontenshop button{
background-color:transparent; color: white; height: 30px; font-size: 12px; border:none;
width: 100px; font-family: "HomizioNova"; margin-top: 50px;
}
#kontenshop .shop-button
{
cursor: pointer; border:none; font-size: 20px; width: 170px; height: 40px; margin-top:50px; background: #009999; font-family:"Futura"; color: white; font-weight: bolder;
}
#kontenshop .table-shop-button
{
color: black;
}
#kontenshop .table-shop-label
{
color: black; width: 100%; text-align: center; margin-top: 20px; font-family: "Futura";
}
#kontenshop .table-shop-more
{
width: 100%;
text-align: center;
padding-top: 30px;
}
#kontenshop .image-shop
{
margin-left: -30px;
width:110px;
height:90px;
}
.td-col-1
{
width:34%;
font-family: "Futura";
}
.td-col-2
{
width: 32%;
font-family: "Futura";
}
/* Style the Image Used to Trigger the Modal */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
}
/*////Navbar*/
.first-li-nav
{
margin-left: 0px;
}
.first-ul-nav
{
background: #009999;
height: 70px;
border-top:5px solid #f89d4c;
}
.first-ul-nav li
{
margin-top: -10px;
}
.first-ul-nav li a
{
margin-top: -10px;
color: white;
}
@media (max-width: 468px) and (min-width: 0px) {
.first-ul-nav
{
background: #009999;
height: 140px;
border-top:5px solid #f89d4c;
}
.first-li-nav
{
margin-left: -40px;
}
.first-ul-nav li
{
margin-top: 0px;
}
.first-ul-nav li a
{
margin-top: 0px;
color: white;
}
}
@media (max-width: 780px) and (min-width: 468px) {
.first-ul-nav
{
background: #009999;
height: 140px;
border-top:5px solid #f89d4c;
}
.first-li-nav
{
text-align: center;
margin-left: -40px;
}
.first-ul-nav li
{
margin-top: 0px;
}
.first-ul-nav li a
{
margin-top: 0px;
color: white;
}
}
@media (max-width: 468px) and (min-width: 0px)
{
#aboutus{
background-image: url(../img/5about.png);
background-size: 120% 100%;
background-repeat: no-repeat;
height: 350px;
text-align: center;
color: white;
width: 100%;
margin-top: -2px;
}
#aboutus h1{
font-family: "Freehand";
font-size: 18px;
float: right;
margin-right: 10px;
margin-bottom: 30px;
}
#aboutus p{
text-align: justify;
color: white ;
font-size: 10px;
margin-right: 10px;
float: right;
font-family: "Futura";
}
#aboutus .inside-about{
padding: 10px;
background:rgba(0,2,255,0.4) ; /* 40% opaque red */
float: right;
border-radius: 10px;
}
#aboutus .shop-button
{
cursor: pointer;
border:none;
font-size: 12px;
width: 100px;
height: 30px;
margin-top:20px;
background: #009999;
font-family:"Futura";
color: white;
font-weight: bolder;
float: right;
margin-right: 10px;
}
#aboutus .shop-button:hover
{
cursor: pointer;
border:none;
font-size: 20px;
width: 170px;
height: 40px;
margin-top:20px;
background: white;
font-family:"Futura";
color: #009999;
font-weight: bolder;
float: right;
margin-right: 40px;
}
}
@media (max-width: 780px) and (min-width: 468px)
{
#aboutus{
background-image: url(../img/5about.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 350px;
text-align: center;
color: white;
width: 100%;
font-family: "HomizioNova";
}
#aboutus h1{
font-family: "HomizioNova";
font-size: 25px;
float: right;
}
#aboutus p{
]
text-align: justify;
color: black;
font-size: 14px;
margin-left: 280px;
margin-right: 30px;
margin-top: 0px;
padding: 0px;
width:300px;
float: right;
font-family: "HomizioNova";
}
#aboutus button{
margin-top: 10px;
margin-right: 80px;
background-color: #009999;; color: white; height: 40px;
font-size: 14px; border-color: #009999;;
width: 120px;
float: right;
font-family: "HomizioNova";
}
}
@media (max-width: 1190px) and (min-width: 780px)
{
#aboutus{
background-image: url(../img/5about.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 450px;
text-align: center;
color: white;
width: 100%;
font-family: "HomizioNova";
}
#aboutus h1{
font-family: "HomizioNova";
font-size: 35px;
float: right;
}
#aboutus p{
]
text-align: justify;
color: black;
font-size: 18px;
margin-left: 380px;
margin-right: 30px;
margin-top: 0px;
float: right;
font-family: "HomizioNova";
}
#aboutus button{
margin-top: 10px;
margin-right: 80px;
background-color: #009999;; color: white; height: 40px;
font-size: 18px; border-color: #009999;;
width: 120px;
float: right;
font-family: "HomizioNova";
}
}
@media (min-width: 1190px)
{
#aboutus{
background-image: url(../img/5about.png);
background-size: 102% 100%;
background-repeat: no-repeat;
height: 600px;
text-align: center;
color: white;
width: 100%;
font-family: "HomizioNova";
margin-top: -3px;
}
#aboutus h1{
font-family: "Futura";
font-size: 40px;
float: right;
margin-right: 40px;
margin-bottom: 30px;
}
#aboutus p{
width: 750px;
text-align: justify;
color: black;
margin-top: 10px;
font-size: 20px;
margin-right: 40px;
float: right;
font-family: "Futura";
}
#aboutus .shop-button
{
cursor: pointer;
border:none;
font-size: 20px;
width: 170px;
height: 40px;
margin-top:20px;
background: #009999;
font-family:"Futura";
color: white;
font-weight: bolder;
float: right;
margin-right: 40px;
}
#aboutus .shop-button:hover
{
cursor: pointer;
border:none;
font-size: 20px;
width: 170px;
height: 40px;
margin-top:20px;
background: white;
font-family:"Futura";
color: #009999;
font-weight: bolder;
float: right;
margin-right: 40px;
}
}
@media (max-width: 468px) and (min-width: 0px)
{
#ourteam{
background-image: url(../img/6ourteam.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 200px;
text-align: left;
color: white;
width: 100%;
font-family: "HomizioNova";
margin-top: -5px;
}
#ourteam h1{
margin-left: 20px;
margin-top: 20px;
font-family: "Freehand";
font-size: 18px;
color: black;
}
#ourteam p{
margin-left: 20px;
width: 750px;
font-size: 22px;
float: left;
text-align: justify;
color: black;
}
#ourteam button{
margin-top: 20px;
margin-left: 60px;
background-color: #009999;; color: white; height: 50px;
font-size: 20px; border-color: #009999;;
width: 250px;
float: left;
font-family: "HomizioNova";
}
#ourteam .list-footer-21{
color: black;
font-family: "Futura";
font-size: 10px;
margin-left: -30px;
padding-top:0px;
padding-bottom: 0px;
}
#ourteam .list-footer-21:hover{
color: #009999;
font-family: "Futura";
font-size: 10px;
margin-left: -30px;
padding-top:0px;
padding-bottom: 0px;
}
#ourteam .shop-button
{
cursor: pointer;
border:none;
font-size: 10px;
width: 80px;
height: 25px;
margin-top:1px;
background: #009999;
font-family:"Futura";
color: white;
font-weight: bolder;
margin-left: 10px;
}
#ourteam .shop-button:hover
{
cursor: pointer;
border:none;
font-size: 12px;
width: 80px;
height: 30px;
margin-top:10px; ;
background: white;
font-family:"Futura";
color: #009999;
font-weight: bolder;
margin-left: 10px;
}
.list-footer-2
{
color: #009999;
font-family: "HomizioNova";
font-size: 22px;
margin-left: 60px;
padding-top:0px;
padding-bottom: 0px;
}
.list-footer-3
{
color: #009999;
font-family: "HomizioNova";
font-size: 22px;
margin-left: 60px;
padding-top:0px;
padding-bottom: 0px;
}
}
@media (max-width: 780px) and (min-width: 468px)
{
#ourteam{
background-image: url(../img/6ourteam.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 250px;
text-align: left;
color: white;
width: 100%;
font-family: "HomizioNova";
}
#ourteam h1{
margin-left: 20px;
font-family: "HomizioNova";
font-size: 25px;
padding-top: 20px;
}
#ourteam p{
margin-left: 20px;
width: 260px;
margin-top: -20px;
font-size: 12px;
float: left;
text-align: justify;
color: black;
}
#ourteam button{
margin-top: 10px;
margin-left: 40px;
background-color: #009999;; color: white; height: 30px;
font-size: 12px; border-color: #009999;;
width: 150px;
float: left;
font-family: "HomizioNova";
}
}
@media (max-width: 1190px) and (min-width: 780px)
{
#ourteam{
background-image: url(../img/6ourteam.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 350px;
text-align: left;
color: white;
width: 100%;
font-family: "HomizioNova";
}
#ourteam h1{
margin-left: 20px;
font-family: "HomizioNova";
font-size: 35px;
padding-top: 20px;
}
#ourteam p{
margin-left: 20px;
width: 320px;
margin-top: -20px;
font-size: 16px;
float: left;
text-align: justify;
color: black;
}
#ourteam button{
margin-top: 10px;
margin-left: 180px;
background-color: #009999;; color: white; height: 40px;
font-size: 16px; border-color: #009999;;
width: 150px;
float: left;
font-family: "HomizioNova";
}
}
@media (min-width: 1190px)
{
#ourteam{
background-image: url(../img/6ourteam.png);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-top: 40px;
height: 600px;
text-align: left;
color: white;
width: 100%;
font-family: "HomizioNova";
margin-top: -20px;
}
#ourteam h1{
margin-left: 60px;
margin-top: 20px;
font-family: "HomizioNova";
font-size: 40px;
padding-top: 80px;
color: black;
}
#ourteam p{
margin-top: 20px;
margin-left: 60px;
width: 750px;
font-size: 22px;
float: left;
text-align: justify;
color: black;
}
#ourteam button{
margin-top: 20px;
margin-left: 60px;
background-color: #009999;; color: white; height: 50px;
font-size: 20px; border-color: #009999;;
width: 250px;
float: left;
font-family: "HomizioNova";
}
#ourteam .list-footer-21{
color: black;
font-family: "Futura";
font-size: 22px;
margin-left: 40px;
padding-top:0px;
padding-bottom: 0px;
}
#ourteam .list-footer-21:hover{
color: #009999;
font-family: "Futura";
font-size: 22px;
margin-left: 40px;
padding-top:0px;
padding-bottom: 0px;
}
#ourteam .shop-button
{
cursor: pointer;
border:none;
font-size: 20px;
width: 170px;
height: 40px;
margin-top:60px;
background: #009999;
font-family:"Futura";
color: white;
font-weight: bolder;
margin-left: 70px;
}
#ourteam .shop-button:hover
{
cursor: pointer;
border:none;
font-size: 20px;
width: 170px;
height: 40px;
margin-top:60px;
background: white;
font-family:"Futura";
color: #009999;
font-weight: bolder;
margin-left: 70px;
}
.list-footer-2
{
color: #009999;
font-family: "HomizioNova";
font-size: 22px;
margin-left: 60px;
padding-top:0px;
padding-bottom: 0px;
}
.list-footer-3
{
color: #009999;
font-family: "HomizioNova";
font-size: 22px;
margin-left: 60px;
padding-top:0px;
padding-bottom: 0px;
}
#news{
background-image: url(../img/7news.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 420px;
text-align: left;
color: white;
width: 100%;
font-family: "HomizioNova";
margin-top: 160px;
}
.image-news
{
position: relative;
width: 100%; /* for IE 6 */
}
#news h1
{
position: absolute;
left: 60px;
width: 100%;
}
#news h1 span {
color: white;
letter-spacing: 2px;
text-align: left;
padding: 10px;
margin-top: -20px;
}
#news .im-news
{
height:250px;
width: 250px;
display: block;
margin-top: -90px;
}
.news-label-atas
{
margin-left: 150px;
margin-top: 10px;
top: 70px;
font-family: "Futura";
font-size: 40px;
}
.news-label-bawah .span-label
{
top: 80px;
font-size: 50px;
font-family: "Freehand";
}
.news-label-bawah
{
margin-left: 200px;
top: 140px;
font-size: 60px;
}
.label-bawah
{
font-size: 33px;
}
#news img
{
width:1200px;
margin-top: 60px;
padding-left: 190px;
}
/*///SLIDESHOW//*/
.diy-slideshow
{
position: relative;
display: block;
overflow: hidden;
margin-top:-160px;
z-index: 90;
}
figure
{
position: absolute;
opacity: 0;
transition: 1s opacity;
}
figcaption
{
position: absolute;
font-family: sans-serif;
font-size: .8em;
bottom: .75em;
right: .35em;
padding: .25em;
color: #fff;
background: rgba(0,0,0, .25);
border-radius: 2px;
}
figcaption a
{
color: #fff;
}
figure.show
{
opacity: 1;
position: static;
transition: 1s opacity;
}
.next, .prev
{
color: #fff;
position: absolute;
background: rgba(0,0,0, .6);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: .3;
user-select: none;
}
.next:hover, .prev:hover
{
cursor: pointer;
opacity: 1;
}
.next
{
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev
{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
figure
{
position: absolute;
opacity: 0;
transition: 1s opacity;
}
figure.show
{
opacity: 1;
position: static;
transition: 1s opacity;
}
.no-scrolling
{
height: 300px; /*or any other size*/
overflow: scroll ;
}
.intrinsic-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.intrinsic-container {
position: relative;
overflow: hidden;
}
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
padding-bottom: 75%;
}
}
@media (max-width: 468px) and (min-width: 0px)
{
#news{
background-image: url(../img/7news.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 150px;
text-align: left;
color: white;
width: 100%;
font-family: "HomizioNova";
}
#news .im-news
{
height:80px;
width: 80px;
display: block;
margin-top: 0px;
}
/*///SLIDESHOW//*/
.diy-slideshow
{
position: relative;
display: block;
overflow: hidden;
margin-left: 20px;
z-index: 0;
}
.image-news
{
position: relative;
width: 100%; /* for IE 6 */
}
#news h1
{
position: absolute;
left: 60px;
width: 100%;
}
#news h1 span {
color: white;
font-family: "HomizioNova";
font-size: 10px;
text-align: left;
margin-top: -20px;
}
.news-label-atas
{
margin-left: 0px;
top:13px;
font-size: 11px !important;
}
#news .span-label
{
font-family: "Freehand";
font-size: 16px;
margin-left: 8px;
}
.news-label-bawah
{
margin-left: 2px;
top: 35px;
border:none;
font-size: 22px;
}
.label-bawah
{
font-size: 8px;
}
#news img
{
width:320px;
padding-left: 50px;
padding-top:30px;
}
figure
{
position: absolute;
opacity: 0;
transition: 1s opacity;
}
figcaption
{
position: absolute;
font-family: sans-serif;
font-size: .8em;
bottom: .75em;
right: .35em;
padding: .25em;
color: #fff;
background: rgba(0,0,0, .25);
border-radius: 2px;
}
figcaption a
{
color: #fff;
}
figure.show
{
opacity: 1;
position: static;
transition: 1s opacity;
}
.next, .prev
{
color: #fff;
position: absolute;
background: rgba(0,0,0, .6);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: .3;
user-select: none;
}
.next:hover, .prev:hover
{
cursor: pointer;
opacity: 1;
}
.next
{
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev
{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
figure
{
position: absolute;
opacity: 0;
transition: 1s opacity;
}
figure.show
{
opacity: 1;
position: static;
transition: 1s opacity;
}
.no-scrolling
{
height: 300px; /*or any other size*/
overflow: scroll ;
}
.intrinsic-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.intrinsic-container {
position: relative;
overflow: hidden;
}
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
padding-bottom: 75%;
}
.news-label-bawah .span-label-atas {
font-size: 10px !important;
margin-bottom: 0px;
}
.news-label-bawah .span-label-bawah {
font-size: 5px !important;
margin-bottom: 0px;
}
.news-label-bawah .span-label-bawah1 {
font-size: 6px !important;
margin-left: 200px !important;
margin-top: -5px;
margin-bottom: 5px;
}
/*.news-label-bawah .span-label-bawah1 p{
margin: 0 0 0;
margin-bottom: 0;
}*/
#ourteam #list-dokter{
margin-top: -12px;
font-size: 5px;
}
}
@media (max-width: 780px) and (min-width: 468px)
{
#news{
background-image: url(../img/7news.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 200px;
text-align: left;
color: white;
width: 100%;
font-family: "HomizioNova";
}
}
@media (max-width: 1190px) and (min-width: 780px)
{
#news{
background-image: url(../img/7news.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height:280px;
text-align: left;
color: white;
width: 100%;
font-family: "HomizioNova";
}
}
@media (max-width:997px) and (min-width:420px)
{
.modial {
position: relative;
width: @modal-md;
height: ;
}
}
@media (max-width:420px)
{
.modial {
position: relative;
width: @modal-sm;
height: ;
}
}
@media (min-width:998px)
{
.modial {
position: relative;
width: 70%;
height: ;
}
}
.mobo {
position: relative;
height: 600px ;
}
/*Map Section
------------------------------------*/
/*Map*/
@media (max-width: 420px) and (min-width: 0px)
{
.input-search
{
width: 40%;
}
#maps
{
background-image: url(../img/background8.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 325px;
text-align: left;
color: #009999;
width: 100%;
border: none;
font-family: "HomizioNova";
z-index:100px;
margin-top: 0px;
}
.map-section
{
}
.map-lokasi
{
background-image: url(../img/map2.PNG);
background-repeat: no-repeat;
height: 325px;
margin-right:0px;
left:-30px;
font-family: "HomizioNova";
}
.underline-maps {
border-bottom: 2px solid #FFFFFF;
display: inline-block;
color: #ffffff;
margin-top: -10px;
font-size: 20px;
/*line-height: 0.85;*/
/*text-shadow:
2px 2px white,
2px -2px white,
-2px 2px white,
-2px -2px white;*/
}
.map-info
{
margin-left: 70px;
}
.first-ul-nav
{
width: 200px;
}
.input-search
{
width: 100%;
}
.img-icon
{
width: 40px;
padding: 10px;
}
.img-icon-2
{
width: 30px;
padding: 0px;
margin-top: 30px;
}
.table-map-info
{
color: black; width: 100%; text-align: center; font-size: 10px;
margin-left:-15px;
}
.table-bawah-map
{
margin-top: 30px;
color: black; width: 100%; text-align: center;
}
#maps p
{
width: 110px;
text-align: justify;
color: white;
margin-top: 5px;
font-size: 12px;
font-family: "HomizioNova";
}
}
@media (max-width: 468px) and (min-width: 421px)
{
.input-search
{
width: 40%;
}
#maps
{
background-image: url(../img/background8.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 325px;
text-align: left;
color: #009999;
width: 100%;
border: none;
font-family: "HomizioNova";
z-index:100px;
margin-top: 0px;
}
.map-section
{
}
.map-lokasi
{
background-image: url(../img/map2.PNG);
background-repeat: no-repeat;
height: 325px;
margin-right:0px;
left:-30px;
font-family: "HomizioNova";
}
.underline-maps {
border-bottom: 2px solid #FFFFFF;
display: inline-block;
color: #ffffff;
margin-top: -10px;
font-size: 20px;
/*line-height: 0.85;*/
/*text-shadow:
2px 2px white,
2px -2px white,
-2px 2px white,
-2px -2px white;*/
}
.map-info
{
margin-left: 70px;
}
.first-ul-nav
{
width: 200px;
}
.input-search
{
width: 100%;
}
.img-icon
{
width: 40px;
padding: 10px;
}
.img-icon-2
{
width: 30px;
padding: 0px;
margin-top: 30px;
}
.table-map-info
{
color: black; width: 100%; text-align: center; font-size: 10px;
margin-left:-10px;
}
.table-bawah-map
{
margin-top: 30px;
color: black; width: 100%; text-align: center;
}
#maps p
{
width: 110px;
text-align: justify;
color: white;
margin-top: 5px;
font-size: 12px;
font-family: "HomizioNova";
}
}
@media (max-width: 780px) and (min-width: 468px)
{
#maps
{
background-image: url(../img/background8.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 300px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
z-index:100px;
}
.map-section
{
}
.map-lokasi
{
background-image: url(../img/map.png);
background-repeat: no-repeat;
height: 300px;
text-align: left;
font-family: "HomizioNova";
}
.underline-maps {
border-bottom: 2px solid #FFFFFF;
display: inline-block;
color: #ffffff;
margin-left: 20px;
margin-top: -10px;
font-size: 25px;
/*line-height: 0.85;*/
/*text-shadow:
2px 2px white,
2px -2px white,
-2px 2px white,
-2px -2px white;*/
}
.map-info
{
margin-left: 70px;
}
.first-ul-nav
{
width: 200px;
}
.input-search
{
width: 100%;
}
.img-icon
{
width: 40px;
padding: 10px;
}
.img-icon-2
{
width: 30px;
padding: 0px;
margin-top: 50px;
}
.table-map-info
{
color: black; width: 100%; text-align: center; font-size: 10px;
}
.table-bawah-map
{
margin-top: 10px;
color: black; width: 100%; text-align: center;
}
#maps p
{
text-align: justify;
color: white;
margin-top: 5px;
font-size: 14px;
font-family: "HomizioNova";
}
}
@media (max-width: 1190px) and (min-width: 780px)
{
/*
.logo-icon
{
margin-top: 0px;
}
*/
}
@media (min-width: 1190px)
{
#maps
{
background-image: url(../img/background8.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 400px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
z-index:100px;
}
.map-section
{
}
.map-lokasi
{
background-image: url(../img/map.PNG);
background-repeat: no-repeat;
height: 400px;
text-align: left;
font-family: "HomizioNova";
}
.underline-maps {
border-bottom: 6px solid #FFFFFF;
display: inline-block;
color: #ffffff;
margin-left: 50px;
font-size: 60px;
/*line-height: 0.85;*/
/*text-shadow:
2px 2px white,
2px -2px white,
-2px 2px white,
-2px -2px white;*/
}
.map-info
{
margin-left: 70px;
}
.first-ul-nav
{
width: 200px;
}
.input-search
{
width: 100%;
}
.img-icon
{
width: 50px;
padding: 10px;
}
.table-map-info
{
color: black; width: 100%; text-align: center;
}
.table-bawah-map
{
margin-top: 80px;
color: black; width: 100%; text-align: center;
}
#maps p
{
text-align: justify;
color: white;
margin-top: 10px;
font-size: 20px;
font-family: "HomizioNova";
}
}
/*Footer Section
------------------------------------*/
/*Map*/
#footer
{
background:#ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
height: 160px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
z-index:100px;
}
.img-icon-footer
{
width: 160px;
margin: 20px;
}
.list-footer
{
color: #009999;
font-family: "HomizioNova";
font-size: 18px;
font-weight: bolder;
margin: 0px;
padding-top:0px;
padding-bottom: 0px;
}
#footer ul:first-child > li {
display: block;
float: left;
padding: 0px 20px 0px 20px;
margin-top: 0px;
}
#footer ul
{
margin-top: 35px;
}
@media (max-width: 320px) and (min-width: 0px)
{
#footer
{
background:#ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
height: 100px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
z-index:100px;
}
.img-icon-footer
{
width: 100px;
margin: 20px;
}
.list-footer
{
color: #009999;
font-family: "HomizioNova";
font-size: 10px;
margin: 2px;
padding-top:0px;
padding-bottom: 0px;
}
#footer ul:first-child > li {
display: block;
float: left;
padding: 0px 0px 0px 0px;
margin-top: 0px;
}
#footer ul
{
margin-top: 15px;
}
}
@media (max-width: 468px) and (min-width: 321px)
{
#footer
{
background:#ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
height: 100px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
z-index:100px;
}
.img-icon-footer
{
width: 100px;
margin: 20px;
}
.list-footer
{
color: #009999;
font-family: "HomizioNova";
font-size: 10px;
margin: 5px;
padding-top:0px;
padding-bottom: 0px;
}
#footer ul:first-child > li {
display: block;
float: left;
padding: 0px 0px 0px 0px;
margin-top: 0px;
}
#footer ul
{
margin-top: 15px;
}
}
@media (max-width: 780px) and (min-width: 468px)
{
#footer
{
background:#ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
height: 100px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
z-index:100px;
}
.img-icon-footer
{
width: 120px;
margin: 20px;
}
.list-footer
{
color: #009999;
font-family: "HomizioNova";
font-size: 10px;
margin: 0px;
padding-top:0px;
padding-bottom: 0px;
font-size: 16px;
}
#footer ul:first-child > li {
display: block;
float: left;
padding: 0px 20px 0px 20px;
margin-top: 0px;
}
#footer ul
{
margin-top: 15px;
}
}
@media (max-width: 1190px) and (min-width: 780px)
{
/*
.logo-icon
{
margin-top: 0px;
}
*/
}
@media (min-width: 1190px)
{
.img-icon-2
{
width: 50px;
padding: 0px;
margin-top: 0px;
}
}
@media (max-width: 468px) and (min-width: 0px)
{
#aboutus-content
{
background:#ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
height: 900px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
z-index:100px;
padding-bottom: 20px;
}
.aboutus-judul
{
background-image: url(../img/aboutus.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 80px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
z-index:100px;
opacity: 0.5;
}
.aboutus-judul2
{
background-image: url(../img/aboutus.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 80px;
text-align: left;
color: black;
width: 100%;
margin-top: -50px;
font-family: "HomizioNova";
z-index:100px;
opacity: 0.5;
}
.aboutus-judul-label
{
margin-top: -60px;
text-align: right;
margin-right:20px;
}
.underlineabout {
border-bottom: 6px solid #f89d4c;
display: inline-block;
font-family: "Freehand";
color: #E65100;
font-size: 30px;
z-index:101px;
opacity: 1.0;
margin-top: -50px;
}
.pethuis-image
{
height:100%;
width:100%;
padding: 20px;
display: block;
margin: auto;
}
#aboutus-content h1
{
font-size:18px;
font-family: "Futura";
color: blue;
padding-left:20px;
padding-right:20px;
}
#aboutus-content p
{
font-size:16px;
font-family: "Futura";
color: #0288D1;
padding-left:20px;
padding-right:20px;
text-align: justify;
}
#ourteam-content
{
background-image: url(../img/lala/gorup3.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 300px;
text-align: left;
color: #009999;
width: 100%;
z-index:100px;
padding-bottom: 0px;
}
.ourteam-judul
{
/*background-image: url(../img/ourteam.png);*/
background-size: 100% 100%;
background-repeat: no-repeat;
height: 80px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
z-index:100px;
opacity: 0.5;
}
.ourteam-judul2
{
background-image: url(../img/ourteam.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 80px;
text-align: left;
color: black;
width: 100%;
margin-top: -50px;
font-family: "HomizioNova";
z-index:100px;
opacity: 0.5;
}
.ourteam-judul-label
{
margin-top: -20px;
text-align: left;
margin-left:30px;
font-family: "Freehand";
}
.meetourteam
{
margin-top: 20px;
}
.underlineourteam {
display: inline-block;
font-family: "Freehand";
border-bottom: 3px solid #ffffff;
color: #ffffff;
font-size: 30px;
z-index:101px;
opacity: 1.0;
margin-top: 0px;
}
#ourteam-content h1
{
font-size:25px;
font-family: "Futura";
color: #0288D1;
padding-left:20px;
padding-right:20px;
}
#ourteam-content p
{
}
.list-footer-21
{
color: #009999;
font-family: "Corbel";
font-size: 16px;
padding: 10px;
}
#service-content
{
background:#ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
margin-bottom:0px;
display: inline-block;
}
.service-judul
{
background-image: url(../img/lala/services.png);
backface-visibility: visible;
background-repeat: no-repeat;
height: 50px;
color: #009999;
font-family: "HomizioNova";
z-index:100px;
background-repeat: repeat-x;
opacity: 1;
left: -15px;
margin-left: :15px;
}
.service-judul2
{
background-image: url(../img/lala/services.png);
width: 100%;
}
#service-content
{
background:#ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
display: inline-block;
}
#service-content .service-content1
{
background-size: 100% 100%;
color: #7F5E00;
width: 100%;
padding-bottom: 20px;
}
#service-content .service-content1 h1
{
font-size:20px;
font-family: "Futura";
color: #7F5E00;
margin-left:10px;
font-weight: bolder;
border-bottom: 5px solid #7F5E00;
}
#service-content .service-content1 p
{
font-size:15px;
font-family: "Futura";
color: #7F5E00;
padding-left: 10px;
padding-right: 10px;
}
#service-content .service-content2
{
background-size: 100% 100%;
color: #7F5E00;
width: 100%;
padding-bottom: 20px;
}
#service-content .service-content2 h1
{
font-size:20px;
font-family: "Futura";
color: #7F5E00;
margin-left:10px;
font-weight: bolder;
border-bottom: 5px solid #7F5E00;
}
#service-content .service-content2 p
{
font-size:15px;
font-family: "Futura";
color:#7F5E00;
padding-left: 10px;
padding-right: 10px;
}
#service-content .service-content3
{
background-size: 100% 100%;
color: #7F5E00;
width: 100%;
padding-bottom: 20px;
}
#service-content .service-content3 h1
{
font-size:20px;
font-family: "Futura";
color:#7F5E00;
margin-left:10px;
font-weight: bolder;
border-bottom: 5px solid #7F5E00;
}
#service-content .service-content3 p
{
font-size:15px;
font-family: "Futura";
color:#7F5E00;
padding-left: 10px;
padding-right: 10px;
}
#service-content .service-content4
{
background-size: 100% 100%;
color: #7F5E00;
width: 100%;
padding-bottom: 20px;
}
#service-content .service-content4 h1
{
font-size:20px;
font-family: "Futura";
color:#7F5E00;
margin-left:10px;
font-weight: bolder;
border-bottom: 5px solid #7F5E00;
}
#service-content .service-content4 p
{
font-size:15px;
font-family: "Futura";
color:#7F5E00;
padding-left: 10px;
padding-right: 10px;
}
#service-content .service-content5
{
background-size: 100% 100%;
color: #7F5E00;
width: 100%;
padding-bottom: 20px;
}
#service-content .service-content5 h1
{
font-size:20px;
font-family: "Futura";
color:#7F5E00;
margin-left:10px;
font-weight: bolder;
border-bottom: 5px solid #7F5E00;
}
#service-content .service-content5 p
{
font-size:15px;
font-family: "Futura";
color:#7F5E00;
padding-left: 10px;
padding-right: 10px;
}
#service-content .service-content6
{
background-size: 100% 100%;
color: #7F5E00;
width: 100%;
}
#service-content .service-content6 h1
{
font-size:20px;
font-family: "Futura";
color:#7F5E00;
margin-left:10px;
font-weight: bolder;
border-bottom: 5px solid #7F5E00;
}
#service-content .service-content6 p
{
font-size:15px;
font-family: "Futura";
color:#7F5E00;
padding-left: 10px;
padding-right: 10px;
}
#service-content .service-content6 .back-link
{
font-size:15px;
font-family: "Futura";
color:#7F5E00;
padding-left: 10px;
padding-right: 10px;
float: right;
margin-top: 100px;
}
#service-content .service-content7
{
background-size: 100% 100%;
color: #7F5E00;
width: 100%;
padding-bottom: 20px;
}
#service-content .service-content7 h1
{
font-size:20px;
font-family: "Futura";
color:#7F5E00;
margin-left:10px;
font-weight: bolder;
border-bottom: 5px solid #7F5E00;
}
#service-content .service-content7 p
{
font-size:15px;
font-family: "Futura";
color:#7F5E00;
padding-left: 10px;
padding-right: 10px;
}
#service-content .service-content8
{
background-size: 100% 100%;
color: #7F5E00;
width: 100%;
padding-bottom: 20px;
}
#service-content .service-content8 h1
{
font-size:20px;
font-family: "Futura";
color:#7F5E00;
margin-left:10px;
font-weight: bolder;
border-bottom: 5px solid #7F5E00;
}
#service-content .service-content8 p
{
font-size:15px;
font-family: "Futura";
color:#7F5E00;
padding-left: 10px;
padding-right: 10px;
}
.service-judul2
{
background-image: url(../img/lala/services.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 120px;
text-align: left;
color: black;
width: 100%;
margin-top: -90px;
font-family: "HomizioNova";
z-index:100px;
opacity: 0.5;
}
.service-judul-label
{
margin-top: -45px;
margin-left: -20px;
}
.underlineservice {
border-bottom: 3px solid black;
display: inline-block;
color: black;
font-size:30px;
z-index:101px;
opacity: 1.0;
margin-left: 120px;
font-family: "Freehand";
}
#service-content h1
{
font-size:15px;
font-family: "HomizioNova";
color: #0288D1;
padding-left:20px;
padding-right:20px;
}
#service-content p
{
font-size:16px;
font-family: "HomizioNova";
color: black;
padding-left:20px;
padding-right:20px;
text-align: justify;
}
#gallery-content
{
background-image: url(../img/lala/group2.png);
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
margin-bottom:0px;
display: inline-block;
}
.gallery-judul
{
/*background-image: url(../img/servicejudul.png);*/
background-size: 130% 100%;
background-repeat: no-repeat;
height: 80px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
z-index:100px;
background-repeat: repeat-x;
opacity: 1;
left:-30px;
}
.gallery-judul2
{
/*background-image: url(../img/servicejudul.png);*/
background-size: 100% 100%;
background-repeat: no-repeat;
height: 120px;
text-align: left;
color: black;
width: 100%;
margin-top: -90px;
font-family: "HomizioNova";
z-index:100px;
opacity: 0.5;
}
.gallery-judul-label
{
margin-top: -50px;
text-align: left;
margin-left:-60px;
}
.underlinegallery{
border-bottom: 3px solid #ffffff;
display: inline-block;
font-family: "Freehand";
color: white;
font-size:30px;
z-index:101px;
opacity: 1.0;
float: right;
margin-right: 10px;
margin-top: 30px;
margin-bottom: 30px;
}
#gallery-content ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
#gallery-content ul li {
list-style:none;
margin-bottom:25px;
}
#gallery-content ul li img {
cursor: pointer;
}
#gallery-content .first {
padding-top: 20px;
}
.vertical-image
{
max-height: 100px;
}
.horizontal-image
{
max-height: 40px;
}
}
@media (max-width: 780px) and (min-width: 468px)
{
}
@media (max-width: 1190px) and (min-width: 780px)
{
}
@media (min-width: 1190px)
{
#aboutus-content
{
background:#ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
height: 600px;
text-align: left;
color: #009999;
width: 100%;
z-index:100px;
padding-bottom: 20px;
display: inline-block;
}
.aboutus-judul
{
background-image: url(../img/lala/about-us.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 120px;
text-align: left;
color: #009999;
width: 100%;
z-index:100px;
}
.aboutus-judul2
{
background-image: url(../img/lala/about us.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 120px;
text-align: left;
color: black;
width: 100%;
margin-top: -90px;
z-index:100px;
opacity: 0.5;
}
.aboutus-judul-label
{
margin-top: -100px;
text-align: right;
margin-right:70px;
}
.underlineabout {
border-bottom: 6px solid #E65100;
display: inline-block;
color: #E65100;
font-family: "Freehand";
z-index:101px;
opacity: 1.0;
margin-top: -90px;
}
.pethuis-image
{
height:500px;
width:400px;
padding-bottom: 60px;
padding-left: 60px;
}
#aboutus-content h1
{
font-size:40px;
font-family: "Futura";
color: blue;
}
#aboutus-content p
{
font-size:25px;
font-family: "Futura";
color: #0288D1;
text-align: justify;
padding-right:150px;
margin-top: 30px;
}
#ourteam-content
{
background:#ffffff;
background-size: 100% 90%;
background-repeat: no-repeat;
height: 600px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
background-image: url(../img/lala/gorup3.png);
display: inline-block;
}
.ourteam-judul
{
background-size: 100% 100%;
background-repeat: no-repeat;
height: 120px;
margin-top: 50px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
z-index:100;
}
.ourteam-judul2
{
background-image: url(../img/ourteam.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 120px;
text-align: left;
color: black;
width: 100%;
margin-top: -90px;
font-family: "HomizioNova";
z-index:100px;
opacity: 0.5;
}
.ourteam-judul-label
{
margin-top: -70px;
text-align: left;
}
.underlineourteam {
display: inline-block;
color: #ffffff;
border-bottom:3px solid #ffffff;
font-size:50px;
z-index:101px;
opacity: 1.0;
margin-left: 60px;
font-family: "Freehand";
}
#ourteam-content .meetourteam
{
font-size:50px;
font-family: "Futura";
color: #0288D1;
margin-left: 50px;
margin-top: 60px;
}
#ourteam-content p
{
font-size:22px;
font-family: "HomizioNova";
color: black;
}
#service-content
{
background:#ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: left;
color: #404040:;
width: 100%;
font-family: "HomizioNova";
display: inline-block;
}
#service-content .service-content1
{
/*background:#00E5FF;*/
background-size: 100% 100%;
color: #7F5E00;
width: 100%;
padding-bottom: 20px;
}
#service-content .service-content1 h1
{
font-size:30px;
font-family: "Futura";
color: #7F5E00;
margin-left:80px;
font-weight: bolder;
border-bottom: 5px solid #7F5E00;
}
#service-content .service-content1 p
{
font-size:20px;
font-family: "Futura";
color: #7F5E00;
padding-left: 80px;
padding-right: 120px;
}
#service-content .service-content2
{
/*background:#CDDC39;*/
background-size: 100% 100%;
color: #7F5E00;
width: 100%;
padding-bottom: 20px;
}
#service-content .service-content2 h1
{
font-size:30px;
font-family: "Futura";
color: #7F5E00;
margin-left:80px;
font-weight: bolder;
border-bottom: 5px solid #7F5E00;
}
#service-content .service-content2 p
{
font-size:20px;
font-family: "Futura";
color:#7F5E00;
padding-left: 80px;
padding-right: 120px;
}
#service-content .service-content3
{
/*background:#EC407A;*/
background-size: 100% 100%;
color: #7F5E00;
width: 100%;
padding-bottom: 20px;
}
#service-content .service-content3 h1
{
font-size:30px;
font-family: "Futura";
color:#7F5E00;
margin-left:80px;
font-weight: bolder;
border-bottom: 5px solid #7F5E00;
}
#service-content .service-content3 p
{
font-size:20px;
font-family: "Futura";
color:#7F5E00;
padding-left: 80px;
padding-right: 120px;
}
#service-content .service-content4
{
/*background:#2196F3;*/
background-size: 100% 100%;
color: #7F5E00;
width: 100%;
padding-bottom: 20px;
}
#service-content .service-content4 h1
{
font-size:30px;
font-family: "Futura";
color:#7F5E00;
margin-left:80px;
font-weight: bolder;
border-bottom: 5px solid #7F5E00;
}
#service-content .service-content4 p
{
font-size:20px;
font-family: "Futura";
color:#7F5E00;
padding-left: 80px;
padding-right: 120px;
}
#service-content .service-content5
{
/*background:#FFA726;*/
background-size: 100% 100%;
color: #7F5E00;
width: 100%;
padding-bottom: 20px;
}
#service-content .service-content5 h1
{
font-size:30px;
font-family: "Futura";
color:#7F5E00;
margin-left:80px;
font-weight: bolder;
border-bottom: 5px solid #7F5E00;
}
#service-content .service-content5 p
{
font-size:20px;
font-family: "Futura";
color:#7F5E00;
padding-left: 80px;
padding-right: 120px;
}
#service-content .service-content6
{
/*background:#EF9A9A;*/
background-size: 100% 100%;
color: #7F5E00;
width: 100%;
}
#service-content .service-content6 h1
{
font-size:30px;
font-family: "Futura";
color:#7F5E00;
margin-left:80px;
font-weight: bolder;
border-bottom: 5px solid #7F5E00;
}
#service-content .service-content6 p
{
font-size:20px;
font-family: "Futura";
color:#7F5E00;
padding-left: 80px;
padding-right: 120px;
}
#service-content .service-content6 .back-link
{
font-size:20px;
font-family: "Futura";
color:#7F5E00;
padding-left: 120px;
padding-right: 120px;
float: right;
margin-bottom: 20px;
margin-top: 100px;
}
.service-judul
{
background-image: url(../img/lala/services.png);
background-size: 130% 100%;
margin-left: 150px;
background-repeat: no-repeat;
height: 80px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
z-index:100px;
background-repeat: repeat-x;
opacity: 1;
left:10px;
}
.service-judul2
{
background-image: url(../img/servicejudul.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 120px;
text-align: left;
color: black;
width: 100%;
margin-top: -90px;
font-family: "HomizioNova";
z-index:100px;
opacity: 0.5;
}
.service-judul-label
{
margin-top: -70px;
text-align: left;
margin-left:-20px;
}
.underlineservice {
border-bottom: 6px solid #404040;
display: inline-block;
color: #404040;
font-size:40px;
z-index:101px;
opacity: 1.0;
margin-left:240px;
font-family: "Freehand";
}
.list-footer-21
{
color: white;
font-family: "Corbel";
font-size: 25px;
margin-left: 30px;
font-weight: bolder;
}
#gallery-content
{
background:#ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(../img/lala/group2.png);
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
padding-bottom:100px;
display: inline-block;
}
.gallery-judul
{
background-size: 130% 100%;
background-repeat: no-repeat;
height: 80px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
z-index:100px;
background-repeat: repeat-x;
opacity: 1;
left:-30px;
}
.gallery-judul2
{
background-size: 100% 100%;
background-repeat: no-repeat;
height: 120px;
text-align: left;
color: black;
width: 100%;
margin-top: -90px;
font-family: "HomizioNova";
z-index:100px;
opacity: 0.5;
}
.gallery-judul-label
{
margin-top: -10px;
text-align: right;
margin-right:60px;
font-family:"Freehand";
}
.underlinegallery{
border-bottom: 3px solid #ffffff;
display: inline-block;
color: #ffffff;
font-size:50px;
z-index:101px;
opacity: 1.0;
margin-left:300px;
}
#gallery-content ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
#gallery-content ul li {
list-style:none;
margin-bottom:25px;
}
#gallery-content ul li img {
cursor: pointer;
}
#gallery-content .first {
padding-top: 50px;
}
.vertical-image
{
max-height: 200px;
}
.horizontal-image
{
max-height: 100px;
}
}
@media (max-width: 468px) and (min-width: 0px)
{
#shopdetail
{
background:#ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
padding-bottom:30px;
display: inline-block;
}
#shopdetail h1{
font-family: "HomizioNova";
font-size: 10px;
margin-top: 10px;
}
#shopdetail table{
font-family: "HomizioNova";
font-size: 12px;
margin-top: 10px;
padding: 10px;
}
#shopdetail button{
background-color: #009999;
color: white;
height:20px;
font-size: 8px;
border-color: #009999;
width: 60px;
margin-top: -5px;
font-family: "HomizioNova";
}
#shopdetail .shop-button
{
cursor: pointer; font-size: 12px; width: 80px; height: 30px; margin-top:10px;
}
#shopdetail .table-shop-button
{
color: black;
}
#shopdetail .table-shop-label
{
color: black; width: 100%; text-align: center;
padding-right:35px;
}
#shopdetail .table-shop-more
{
width: 100%;
text-align: center;
padding-top: 30px;
}
#shopdetail .image-shop-h
{
display: block;
margin: auto;
height:30px;
border-radius: 10px;
}
.td-col-1
{
width:40%;
font-size: 14px;
}
.td-col-2
{
width: 22%;
font-size: 12px;
}
.list-shop-kategori
{
color: black;
font-family: "HomizioNova";
font-size: 8px;
padding-right: 10px;
}
#shopdetail .table-bawah-sidepanel
{
margin-top: 10px;
color: black;
width: 100%;
margin-right: 20px;
}
.img-icon-tokopedia
{
width: 50px;
padding-bottom: 20px;
margin-left: -20px;
}
.img-icon-bukalapak
{
width: 50px;
padding: 10px;
margin-left: -20px;
}
.label-shop
{
margin-left: 0px;
font-size: 6px;
}
#shopdetail li:hover{
color: #009999;
cursor: pointer; cursor: hand;
}
#shopdetail li:selected{
color: #009999;
}
}
@media (max-width: 780px) and (min-width: 468px)
{
}
@media (max-width: 1190px) and (min-width: 780px)
{
}
@media (min-width: 1190px)
{
#shopdetail
{
background:#ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
padding-bottom:100px;
display: inline-block;
}
#shopdetail .side-panel
{
padding-top: 20px;
padding-left: 50px;
}
#shopdetail .store-shop-detail
{
margin-top: 40px;
font-size: 20px;
}
.list-shop-kategori
{
color: black;
font-family: "CooperBlack";
font-size: 18px;
}
.list-shop-kategori:hover
{
color: #009999;
font-family: "CooperBlack";
font-size: 18px;
}
.list-shop-kategori:hover
{
color: #0099;
font-family: "CooperBlack";
font-size: 18px;
}
#shopdetail h1{
font-family: "HomizioNova";
font-size: 26px;
color: black;
}
#shopdetail li:hover{
color: #009999;
cursor: pointer; cursor: hand;
}
#shopdetail li:selected{
color: #009999;
}
#shopdetail table{
font-family: "HomizioNova";
font-size: 22px;
}
#shopdetail button{
background-color:#009999; color: white; height: 30px; font-size: 12px; border-color: #009999;
width: 100px; font-family: "HomizioNova"; margin-top: 30px; margin-left: 20px;
}
#shopdetail .shop-button
{
cursor: pointer; font-size: 20px; width: 170px; height: 50px; margin-top:40px; background: #009999;
}
#shopdetail .table-shop-button
{
color: black;
}
#shopdetail .table-shop-label
{
color: black; width: 100%; text-align: center; margin-top: 20px;
}
#shopdetail .table-shop-more
{
width: 100%;
text-align: center;
padding-top: 30px;
}
#shopdetail .image-shop-h
{
display: block;
margin: auto;
height:140px;
border-radius: 10px;
}
.td-col-1
{
width:34%;
}
.td-col-2
{
width: 32%;
}
#shopdetail .table-bawah-sidepanel
{
margin-top: 10px;
color: black;
width: 100%;
margin-right: 20px;
}
.img-icon-tokopedia
{
width: 100px;
padding-bottom: 20px;
margin-left: -30px;
}
.img-icon-bukalapak
{
width: 70px;
padding: 10px;
}
.label-shop
{
text-align: center;
font-size: 16px;
margin-top: 20px;
}
}
@media (max-width: 468px) and (min-width: 0px)
{
#career-section
{
background:#ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
height:550px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
padding-bottom:100px;
display: inline-block;
}
.form-contact
{
padding:20px;
border: 2px solid #009999;
border-radius:25px;
color: #000000;
margin-top: 10px;
}
#career-section label
{
color:#000000;
font-size: 12px;
}
#career-section input
{
width: 100%;
padding: 5px;
border: 1px solid #000000;
}
#career-section textarea
{
width: 100%;
padding: 5px;
border: 1px solid #000000;
}
.label-awal
{
font-size: 14px;
padding-top: 5px;
}
.footer-detail
{
width:100%;
}
.contact-button
{
background: #009999;
color: #ffffff;
font-size: 22px;
height: 40px;
width:140px;
display: block;
margin:auto;
margin-left: 60px;
margin-top:10px;
}
#career-section .contactus-judul-label
{
margin-top: -40px;
font-family: "Freehand";
float:right;
font-size:20px;
margin-right: 20px;
}
#career-section .underlinecontactus
{
border-bottom: solid 3px #009999;
}
.label-ttk
{
display: none;
}
#career-section .service-judul
{
background-image: url(../img/lala/services.png);
height: 50px;
color: #009999;
font-family: "HomizioNova";
z-index:100px;
background-repeat: repeat-x;
opacity: 1;
}
}
@media (max-width: 780px) and (min-width: 468px)
{
}
@media (max-width: 1190px) and (min-width: 780px)
{
}
@media (min-width: 1190px)
{
/*Career Section
------------------------------------*/
/*Career Section*/
#career-section
{
background:#ffffff;
background-size: 100% 100%;
background-repeat: no-repeat;
height:550px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
padding-bottom:100px;
display: inline-block;
}
.form-contact
{
padding:20px;
border: 2px solid #009999;
border-radius:25px;
color: #000000;
margin-top: 40px;
}
#career-section label
{
color:#000000;
}
#career-section input
{
width: 100%;
padding: 10px;
}
#career-section textarea
{
width: 100%;
padding: 10px;
}
.label-awal
{
font-size: 18px;
}
.footer-detail
{
width:100%;
display: block;
margin: auto;
}
.contact-button
{
background: #009999;
color: #ffffff;
font-size: 22px;
height: 40px;
width:140px;
margin-left: 350px;
}
#career-section .contactus-judul-label
{
margin-top: -70px;
font-family: "Freehand";
float:right;
font-size:40px;
margin-right: 60px;
}
#career-section .underlinecontactus
{
border-bottom: solid 3px #009999;
}
}
@media (max-width: 468px) and (min-width: 0px)
{
#pethotel
{
background-image: url(../img/lala/group1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
padding-bottom:30px;
display: inline-block;
}
.gallery-judul
{
/*background-image: url(../img/servicejudul.png);*/
background-size: 130% 100%;
background-repeat: no-repeat;
height: 80px;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
z-index:100px;
background-repeat: repeat-x;
opacity: 1;
left:-30px;
}
.gallery-judul2
{
background-image: url(../img/servicejudul.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 120px;
text-align: left;
color: black;
width: 100%;
margin-top: -90px;
font-family: "HomizioNova";
z-index:100px;
opacity: 0.5;
}
.gallery-judul-label
{
margin-top: -50px;
text-align: left;
margin-left:-60px;
}
#pethotel h1{
font-family: "Freehand";
font-size: 10px;
}
.underlinepethotel
{
color: black;
border-bottom:3px solid black;
text-align: center;
}
#pethotel table{
font-family: "HomizioNova";
font-size: 12px;
margin-top: 10px;
padding: 10px;
}
#pethotel li:hover{
color: #009999;
cursor: pointer; cursor: hand;
}
#pethotel li:selected{
color: #009999;
}
#pethotel button{
background-color: #009999;
color: white;
height:20px;
font-size: 8px;
border-color: #009999;
width: 60px;
margin-top: -5px;
font-family: "HomizioNova";
}
#pethotel .shop-button
{
cursor: pointer; font-size: 12px; width: 80px; height: 30px; margin-top:10px;
}
#pethotel .table-shop-button
{
color: black;
}
#pethotel li {
clear:left;
}
#pethotel .table-shop-label
{
color: black; width: 100%; text-align: center;
padding-right:35px;
}
#pethotel .table-shop-more
{
width: 100%;
text-align: center;
padding-top: 30px;
}
#pethotel .image-shop-h
{
display: block;
margin: auto;
height:30px;
border-radius: 10px;
}
.td-col-1
{
width:40%;
font-size: 14px;
}
.td-col-2
{
width: 22%;
font-size: 12px;
}
.list-shop-kategori
{
color: black;
font-family: "CooperBlack";
color: #827717;
font-size: 8px;
padding-right: 10px;
}
#pethotel .side-panel2
{
border-left: 2px double #827717;
}
#pethotel .pethotel-judul-label
{
text-align: center;
}
#pethotel .table-bawah-sidepanel
{
margin-top: 10px;
color: black;
width: 100%;
margin-right: 20px;
}
.img-icon-tokopedia
{
width: 50px;
padding-bottom: 20px;
margin-left: -20px;
}
.img-icon-bukalapak
{
width: 50px;
padding: 10px;
margin-left: -20px;
}
.label-shop
{
margin-left: 0px;
font-size: 6px;
}
#pethotel .judul-shop-detail{
font-family: "Bernard";
color: black;
}
#pethotel .judul-shop-detail1{
font-family: "Freehand";
color: #827717;
text-align: right;
margin-top: 0px;
}
#pethotel .perincian-label
{
font-size: 12px;
color: black;
margin-top: 4px;
color: #827717;
font-family: "BerlinSansFB";
font-weight: bolder;
}
#pethotel .list-include
{
font-size: 10px;
color: black;
margin-top: 15px;
color: #827717;
font-family: "Corbel";
}
#pethotel .promo-label
{
font-size: 12px;
color: black;
margin-top: 1px;
color: #827717;
font-family: "BerlinSansFB";
font-weight: bolder;
}
#pethotel .list-promo
{
font-size: 10px;
color: black;
margin-top: 1px;
color: #827717;
font-family: "Corbel";
}
#pethotel .keterangan-label
{
font-size: 8px;
color: black;
margin-top: 1px;
color: #827717;
font-family: "Corbel";
}
#regular
{
padding-left:5px;
padding-right:5px;
}
#regular li:hover
{
color:black;
cursor: auto;
}
#grooming
{
padding-left:5px;
padding-right:5px;
}
#grooming li:hover
{
color:black;
cursor: auto;
}
#vaccination
{
padding-left:5px;
padding-right:5px;
}
#vaccination li:hover
{
color:black;
cursor: auto;
}
#grooming-vaccination
{
padding-left:5px;
padding-right:5px;
}
#grooming-vaccination li:hover
{
color:black;
cursor: auto;
}
#ectoparasite
{
padding-left:5px;
padding-right:5px;
}
#ectoparasite li:hover
{
color:black;
cursor: auto;
}
#ectoparasite-vaccination
{
padding-left:5px;
padding-right:5px;
}
#ectoparasite-vaccination li:hover
{
color:black;
cursor: auto;
}
}
@media (max-width: 780px) and (min-width: 468px)
{
}
@media (max-width: 1190px) and (min-width: 780px)
{
}
@media (min-width: 1190px)
{
#pethotel
{
background-image: url(../img/lala/group1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: left;
color: #009999;
width: 100%;
font-family: "HomizioNova";
padding-bottom:60px;
display: inline-block;
}
#pethotel li {
clear:left;
}
#pethotel .pethotel-judul-label
{
margin-top:50px;
color: black;
text-align: center;
font-family: "Freehand";
font-size:50px;
}
#pethotel .underlinepethotel
{
border-bottom:3px solid black;
}
#pethotel .side-panel
{
padding-top: 20px;
padding-left: 50px;
}
#pethotel .side-panel2
{
border-left: 5px double #827717;
}
#pethotel .store-shop-detail
{
margin-top: 40px;
font-size: 20px;
}
.list-shop-kategori
{
color: black;
font-family: "CooperBlack";
font-size: 18px;
color: #827717;
}
.list-shop-kategori:hover
{
color: #009999;
font-family: "CooperBlack";
font-size: 18px;
}
.list-shop-kategori:hover
{
color: #009999;
font-family: "CooperBlack";
font-size: 18px;
}
#pethotel h1{
font-family: "Bernard";
font-size: 26px;
color: black;
}
#pethotel .judul-shop-detail{
font-family: "Bernard";
font-size: 26px;
color: black;
}
#pethotel .judul-shop-detail1{
font-family: "Freehand";
font-size: 26px;
color: #827717;
text-align: right;
}
#pethotel li:hover{
color: #009999;
cursor: pointer; cursor: hand;
}
#pethotel li:selected{
color: #009999;
}
#pethotel table{
font-family: "HomizioNova";
font-size: 22px;
}
#pethotel button{
background-color:#009999; color: white; height: 30px; font-size: 12px; border-color: #009999;
width: 100px; font-family: "HomizioNova"; margin-top: 30px; margin-left: 20px;
}
#pethotel .shop-button
{
cursor: pointer; font-size: 20px; width: 170px; height: 50px; margin-top:40px; background: #009999;
}
#pethotel .table-shop-button
{
color: black;
}
#pethotel .table-shop-label
{
color: black; width: 100%; text-align: center; margin-top: 20px;
}
#pethotel .table-shop-more
{
width: 100%;
text-align: center;
padding-top: 30px;
}
#pethotel .image-shop-h
{
display: block;
margin: auto;
height:140px;
border-radius: 10px;
}
.panel-isi
{
/*background: #ffffff;
padding:12px;
border: 1px solid #a4a4a4;
margin-top: 20px;
margin-right: 60px;
margin-left: -60px;
border-radius: 10px; */ }
#pethotel .table-bawah-sidepanel
{
margin-top: 10px;
color: black;
width: 100%;
margin-right: 20px;
}
.img-icon-tokopedia
{
width: 100px;
padding-bottom: 20px;
margin-left: -30px;
}
.img-icon-bukalapak
{
width: 70px;
padding: 10px;
}
/*
.label-shop
{
margin-left: 70px;
font-size: 16px;
}*/
#pethotel .perincian-label
{
margin-top: 20px;
font-size: 30px;
color: #827717;
margin-left: 100px;
font-family:"BerlinSansFB";
font-weight: bolder;
}
#pethotel .list-include
{
font-size: 20px;
color: #827717;
margin-top: 10px;
margin-left: 100px;
padding-right: 50px;
text-align: justify;
font-family:"Corbel";
font-weight: bolder;
}
#pethotel .promo-label
{
font-size: 20px;
color: #827717;
margin-top: 30px;
margin-left: 100px;
font-family:"Corbel";
font-weight: bolder;
}
#pethotel .list-promo
{
font-size: 20px;
color: #827717;
margin-top: 10px;
margin-left: 100px;
font-family:"Corbel";
font-weight: bolder;
}
#pethotel .keterangan-label
{
font-size: 12px;
color: #827717;
margin-top: 10px;
margin-left: 100px;
font-family:"Corbel";
font-weight: bolder;
}
#regular
{
padding-left:20px;
padding-right:20px;
}
#regular li:hover
{
color:black;
cursor: auto;
}
#grooming
{
padding-left:20px;
padding-right:20px;
}
#grooming li:hover
{
color:black;
cursor: auto;
}
#vaccination
{
padding-left:20px;
padding-right:20px;
}
#vaccination li:hover
{
color:black;
cursor: auto;
}
#grooming-vaccination
{
padding-left:20px;
padding-right:20px;
}
#grooming-vaccination li:hover
{
color:black;
cursor: auto;
}
#ectoparasite
{
padding-left:20px;
padding-right:20px;
}
#ectoparasite li:hover
{
color:black;
cursor: auto;
}
#ectoparasite-vaccination
{
padding-left:20px;
padding-right:20px;
}
#ectoparasite-vaccination li:hover
{
color:black;
cursor: auto;
}
}