html {
scroll-behavior:smooth;
}

body {
font-family:Poppins;
text-align:center;
margin: 0px;
padding: 0px;
font-size: 18px;
line-height:1.5em;
color:#fff;
border-top:solid 3px #48bda5;
background:linear-gradient(135deg,#150d5a,#48bda5);
background-attachment:fixed;
}


a,input,textarea,select {
outline:none;
}

a {
color:#fff;
transition:background-color 0.2s,color 0.2s;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

a:hover {
color:#fff;
}

p {
margin:0px;
}

.strong {
font-weight:bold;
}

.red {
color:#CC0000;
}

.blue {
color:#007ac3;
}

.purple {
color:#4868b7;
}

.orange {
color:#D55000;
}

.green {
color:#66bb00;
}

.button {
float:right;
position:relative;
background:rgba(0,0,0,0.25);
border:solid 1px rgba(255,255,255,0.75);
color:#fff;
padding:5px;
padding-left:25px;
padding-right:25px;
text-decoration:none;
font-weight:bold;
text-align:center;
text-transform:uppercase;
clear:both;
}

.button:hover {
background-color:#3ec1c7;
}


textarea {
overflow:auto;
resize:none;
}

textarea,select,input[type=date] {
font-family:Poppins;
font-size:17px;
}

input[type=text],input[type=password],textarea {
width:calc(100% - 12px);
padding:5px;
border:solid 1px #ccc;
font-family:Poppins;
font-size:17px;
}

select {
border:solid 2px #6699ff;
border-radius:5px;
padding:3px;
}

img {
border:none;
vertical-align:middle;
max-width:100%;
}


ul {
margin:0px;
padding:25px;
list-style-type: circle;
}



p[align=right] img,p[style="text-align: right;"] img {
float:right;
position:relative;
margin-left:15px;
margin-bottom:15px;
max-width:calc(50% - 15px);
}

p[align=left] img,p[style="text-align: left;"] img {
float:left;
position:relative;
margin-right:15px;
margin-bottom:15px;
max-width:calc(50% - 15px);
}

table {
width:100%;
border-spacing:1px;
padding:0px;
border:solid 3px rgba(255,255,255,0.25);
}

th,td {
padding:5px;
background:rgba(255,255,255,0.25);
}

th {
font-weight:bold;
text-align:center;
}

td.head {
text-align:right;
font-weight:bold;
}

table#enquire {
margin-top:25px;
}

table#enquire a {
text-decoration:none;
}

.del,.del2 {
color:#CC0000;
font-weight:bold;
text-decoration:none;
}

a.move {
float:left;
position:relative;
clear:both;
height:15px;
line-height:15px;
}

form[name=upload] {
float:left;
position:relative;
width:100%;
margin-bottom:25px;
}

#files {
float:left;
position:relative;
margin-top:5px;
width:100%;
}

#files span {
float:left;
position:relative;
}

.file {
float:left;
position:relative;
border:solid 1px rgba(255,255,255,0.5);
width:calc(96% - 2px);
padding-left:2%;
padding-right:2%;
margin-bottom:1px;
font-size:12px;
white-space:nowrap;
overflow:hidden;
}

.progbar {
float:left;
position:absolute;
left:0px;
bottom:0px;
width:0px;
background:rgba(255,255,255,0.25);
}

.prog {
float:right;
position:absolute;
right:5px;
bottom:0px;
color:#fff;
}


.container {
max-width:1400px;
margin-right: auto;
margin-left: auto;
}


#header {
float:left;
position:relative;
height:250px;
width:100%;
}


#logo {
display:inline-block;
text-decoration:none;
margin-top:20px;
border-radius:300px;
padding:10px;
border:solid 5px rgba(0,0,0,0.1);
transition:all 0.2s;
box-shadow:0px 0px 15px rgba(255,255,255,1);
}

#logo:hover {
box-shadow:0px 0px 15px rgba(255,255,255,1);
transform:scale(1.1,1.1);
}

#logo img {
height:175px;
}


#nav_admin {
float:right;
position:absolute;
width:200px;
text-align:left;
right:1px;
top:52px;
padding:10px;
background-color:#628a9f;
border:solid 3px #89a7b6;
z-index:1001;
}

#adnav {
float:left;
position:relative;
overflow:hidden;
transition:height 0.5s;
}

#nav_admin h2 {
overflow:hidden;
margin-bottom:0px;
}

#nav_admin h2 a {
text-decoration:none;
}

#nav_admin h2 a span {
font-size:18px;
}

#nav_admin a {
padding:5px;
}

#adnav a {
float:left;
position:relative;
width:calc(100% - 12px);
margin-top:1px;
padding:2px;
padding-left:10px;
}

#nav_admin a:hover,#nav_admin a.active {
background-color:#3ec1c7;
}


h1 {
color:#48bda5;
color:#fff;
font-size:26px;
margin: 0px;
margin-bottom:15px;
line-height:1.3em;
}

h2 {
font-size:20px;
padding:5px;
padding-left:10px;
padding-right:10px;
margin: 0px;
margin-bottom:5px;
background:rgba(255,255,255,0.25);
}


h3 {
font-size:19px;
color: #3D5898;
margin: 0px;
margin-bottom:5px;
}


#address {
float:right;
position:absolute;
background:rgba(255,255,255,0.25);
top:1px;
right:0px;
text-align:center;
color:#fff;
padding:5px;
padding-top:10px;
padding-bottom:10px;
border-bottom-left-radius:10px;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
}


#address a {
color:#fff;
text-decoration:none;
margin-left:5px;
margin-right:5px;
}

#address img {
width:30px;
margin-right:5px;
}

#banner {
display:none;
}


#nav {
float:left;
position:relative;
width:calc(101% - 50px);
margin-left:25px;
text-align:left;
}

#nav ul {
list-style:none;
padding:0;
margin:0;
}

#nav li {
display:inline;
}

#nav a {
font-weight:500;
display:inline-block;
text-decoration:none;
height:40px;
line-height:40px;
color:#fff;
background:rgba(255,255,255,0.25);
width:calc(100%/9.01 - 1% - 6px);
margin-right:1%;
border:solid 3px rgba(255,255,255,0.25);
font-size:18px;
text-align:center;
border-radius:10px;
box-shadow:1px 1px 5px rgba(0,0,0,0.25);
}

#nav a:hover,#nav a.active {
background-color:#3ec1c7;
}

#nav a#jff {
/*font-size:15px;*/
}

#nav a i {
margin-left:5px;
font-size:15px;
opacity:0.5;
}


#burger {
float:right;
position:absolute;
bottom:1px;
right:1px;
text-align:center;
width:37px;
height:37px;
line-height:5px;
font-weight:bold;
padding:0px;
background:rgba(255,255,255,0.25);
color:#fff;
display:none;
opacity:0.75;
z-index:999;
text-decoration:none;
}

#burger img {
width:70%;
margin-top:15%;
transition:transform 0.2s;
}


#nav .drop {
float:left;
position:absolute;
top:45px;
width:400px;
z-index:999;
visibility:hidden;
background-color:#150d5a;
background:rgba(255,255,255,0.75);
border:solid 1px #628a9f;
padding:10px;
box-shadow:1px 1px 5px rgba(0,0,0,0.25);
}


#nav .drop a {
float:left;
position:relative;
font-size:17px;
background-color:#628a9f;
width:calc(100% - 46px);
height:auto;
line-height:25px;
padding:5px;
padding-right:10px;
text-align:left;
margin:0px;
margin-bottom:1px;
border-radius:0px;
padding-left: 30px;
text-indent: -20px;
}

#nav .drop a::before {
font-family:"Font Awesome 5 Free";
content: "\f1b0";
font-weight: 900;
margin-right:6px;
opacity:0.5;
transform-origin:bottom center;
font-size:15px;
}

#nav #drop2 a::before {
content: "\f3c5";
margin-right:8px;
}

#nav .drop a::before {
transition:transform 0.2s;
}


#nav .drop a:hover,#nav .drop a.active {
background-color:#3ec1c7;
}

#nav .drop a:hover::before,#nav .drop a.active::before {
transform:rotate(0deg);
}



.rightarrow {
float:left;
position:absolute;
left:10px;
top:12px;
transition:transform 0.2s;
transform-origin:3px -1px;
}

.rightarrow:before, #rightarrow:after {
float:left;
position:absolute;
border: solid transparent;
content:"";
}

.rightarrow:before {
border-width: 5px;
border-left-color:#fff;
margin-top: -5px;
}


.arrow {
display:inline-block;
font-size:12px;
margin-right:5px;
}


.arrow img {
width:20px;
opacity:0.5;
transform:rotate(-35deg);
}

#content {
float:left;
position:relative;
background:rgba(255,255,255,0.25);
border:solid 3px rgba(72,189,165,0.5);
border-color:rgba(255,255,255,0.25);
width:calc(100% - 106px);
padding:25px;
padding-top:35px;
margin-top:1%;
margin-left:25px;
margin-bottom:25px;
text-align:left;
box-shadow:1px 1px 5px rgba(0,0,0,0.25);
min-height:350px;
border-radius:10px;
border-bottom-left-radius:0px;
overflow:hidden;
}

img#dogs {
float:right;
position:absolute;
bottom:-30px;
right:-4px;
width:200px;
}

img#paw {
float:right;
position:absolute;
top:0px;
right:0px;
width:50px;
transform:rotate(45deg);
z-index:-1;
opacity:0.25;
display:none;
}

.text {
float:left;
position:relative;
text-align:left;
}


.half {
float:left;
position:relative;
width:47.5%;
margin-right:5%;
margin-bottom:25px;
}

.third {
float:left;
position:relative;
width:33%;
margin-bottom:25px;
}

.twothirds,.twothirds2 {
float:left;
position:relative;
width:62%;
margin-right:5%;
margin-bottom:25px;
}

.twothirds2 {
margin-right:0%;
margin-left:5%;
}



#categories {
float:right;
position:relative;
margin-bottom:2%;
padding-top:1%;
width:100%;
}


#categories a {
float:left;
position:relative;
color:#999;
transition:all 0.2s;
text-decoration:none;
border-bottom:solid 1px transparent;
margin-bottom:1%;
height:25px;
}

#categories a:hover,#categories a.active {
border-bottom-color:#666;
color:#fff;
}

#arrows {
float:right;
position:absolute;
right:5px;
top:5px;
}

#arrows a {
float:left;
position:relative;
background:rgba(0,0,0,0.75);
border:solid 5px #666;
width:35px;
height:35px;
line-height:35px;
margin-left:5px;
text-decoration:none;
font-size:30px;
color:#999;
border-radius:100px;
text-align:center;
transition:all 0.2s;
}

#arrows a:hover {
color:#6699ff;
border-color:#6699ff;
}



#footer {
float:left;
position:relative;
background:rgba(0,0,0,0.25);
padding-top:10px;
padding-bottom:25px;
width:100%;
min-height:200px;
color: #fff;
text-align: center;
}


#footer a {
color:rgba(255,255,255,0.75);
text-decoration:none;
font-weight:normal;
height: 30px;
}

#footernav {
float:left;
position:relative;
width:calc(100% - 60px);
padding:15px;
padding-left:30px;
padding-right:30px;
}

#footernav a {
display:inline-block;
margin-left:10px;
margin-right:10px;
font-weight:500;
}


#footer a:hover,#footer a.active {
color:#3ec1c7;
}

#fulladdress {
color:rgba(255,255,255,0.75);
margin-top:25px;
margin-bottom:15px;
line-height:30px;
font-size:15px;
}

#footer #fulladdress a {
color:rgba(255,255,255,0.75);
margin:0%;
}

#fulladdress img {
width:25px;
opacity:0.75;
}

a#backtotop {
float:right;
position:absolute;
right:10px;
top:10px;
width:35px;
height:35px;
text-align:center;
animation-name:bounce;
animation-duration:1s;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
z-index:999;
}

@keyframes bounce {
0% {top:10px}
50% {top:15px}
100% {top:10px}
}


a#backtotop i {
color:#ffffffaa;
font-size:24px;
transition:all 0.2s;
}


a#backtotop:hover i {
color:#ffffff;
}

#footer #pt {
background:none;
color:rgba(255,255,255,0.75);
font-size:12px;
width:auto;
clear:both;
opacity:0.25;
}



@media screen and (max-width:1300px) {
#nav a {
font-size:18px;
}
}

@media screen and (max-width:1200px) {
#nav a {
font-size:17px;
}
}

@media screen and (max-width:1100px) {
#logo {
float:left;
position:relative;
margin-left:10px;
}

#nav {
margin-left:25px;
width:calc(101% - 50px);
}

#nav a {
border-radius:0px;
}

#content {
border-radius:0px;
}
}


@media screen and (max-width:950px) {
#nav a {
font-size:17px;
}
}

@media screen and (max-width:900px) {
#nav a {
font-size:16px;
}
}


@media screen and (max-width:850px) {
body {
border:none;
}

#header {
position:fixed;
background-color:#60839c;
background:linear-gradient(135deg,#150d5a,#274a74);
z-index:999;
height:100px;
box-shadow:0px 0px 10px rgba(0,0,0,0.5);
}

#logo {
margin-top:5px;
background-color:#150d5a;
box-shadow:1px 1px 10px rgba(0,0,0,0.5);
padding:0px;
}

#logo img {
height:100px;
}


#nav {
float:right;
position:fixed;
height:auto;
margin:0px;
right:39px;
top:62px;
width:75%;
padding:0%;
visibility:hidden;
opacity:0;
border:none;
transition:opacity 0.2s;
z-index:999;
box-shadow:none;
}


#nav a {
float:left;
position:relative;
background-color:#60839c;
width:calc(100% - 30px);
padding-left:15px;
padding-right:15px;
text-align:left;
height:37px;
line-height:37px;
border:none;
border-radius:0px;
border-bottom:solid 1px #00436A;
}

#nav a i {
font-size:13px;
}

#burger {
display:block;
}

#nav .drop {
position:relative;
border:none;
top:auto;
left:auto;
width:100%;
padding:0px;
transition:height 1s;
box-shadow:none;
overflow:hidden;
background-color:#60839c;
}

#nav .drop a {
width:calc(100% - 40px);
margin-bottom:0px;
line-height:18px;
font-size:13px;
font-weight:normal;
padding-top:10px;
padding-bottom:10px;
}


.arrow {
transform:scale(0.8,0.8);
}


#content {
margin:0px;
padding-top:50px;
margin-top:100px;
border:none;
width:calc(100% - 50px);
box-shadow:none;
}

img#paw {
display:none;
}

img#dogs {
position:relative;
margin-top:25px;
right:0px;
bottom:0px;
width:150px;
}

.half,.third,.twothirds,.twothirds2 {
width:100%;
margin-right:0%;
}

.twothirds2 {
margin-left:0%;
}

#footer #pt {
float:none;
}
}

@media screen and (max-width:650px) {
#address {
padding:5px;
}

#address span {
display:none;
}

p[align=right] img,p[style="text-align: right;"] img {
max-width:none;
}

p[align=left] img,p[style="text-align: left;"] img {
max-width:none;
}
}