@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,600,600italic");

.nav-items{
    display: flex;
}

.nav-items li{
    list-style: none;
    text-align: center;
    /* height: 123px; */
    width: 100%;
}

.nav-items li a{
    font-family: "Roboto";
    font-size: 18px;
    line-height: 33px;
    text-decoration: none;
    color: #000000;
}

.nav-items li a:hover{
    height:40px;
    width:fit-content;
    padding: 10px;
    background-color: #07485c;
    color:#FFFFFF;
    border-radius: 0px 0px 10px 10px;
}

body .quotation{
    display: flex;
    justify-content: space-between;
}

.quotation h1{
    width: 50%;
    margin-left: 45px;
    margin-top: 85px;
    align-content: center;
    font-family: 'Paytone One', sans-serif;
    font-size: 60px;
    line-height: 98px;

    color: #000000;

}
.quotation  h1 p{
    position: absolute;
    width: 40%;
    height: 20%;
    margin-top: 30px;
    font-family: "Poppins";
    font-size: 20px;
    line-height: 30px;
    font-weight: bold;
    color: #000000;
}

.quotation img{
    position: relative;
    width: 50%;
    height: 60%;
    margin-right: 4px;
    transform: rotate(-0.11deg);
}

.button1 button a{
    text-decoration: none;
    color: white;
}
.button1 button{
    text-align: center;
    position: absolute;
    left: 200px;
    top: 560px;
    font-size: 20px;
    line-height: 33px;
    text-decoration: none;
    color: #FFFFFF;
    background: #276678;
    border-radius: 5px;
    width: 176px;
    height: 54px;
}

.button2 button a{
    text-decoration: none;
    color: white;
}

.button2 button{
    text-align: center;
    position: absolute;
    left: 200px;
    top: 642px;
    font-size: 20px;
    line-height: 33px;
    text-decoration: none;
    color: #FFFFFF;
    background: #276678;
    border-radius: 5px;
    width: 176px;
    height: 56px;

}

.button2 :hover{
    background-color: #07485c;
}

.button1 :hover{
    background-color: #07485c;
}


#pet_maps{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 120px;
}

#pet_maps .para_Mypet i {
    font-size: 50px;
    position: absolute;
    left: 358px;
    bottom: -462px;
}
.para_Mypet h1{
    font-family: "Poppins";
    font-size: 30px;
    text-align: center;
    color: #FFFFFF;
    /* line-height: 2; */
}

.para_Mypet p{
    font-family: "Poppins";
    font-size: 17px;
    line-height: 40px;
    width: 350px;
    padding: 10px;
    text-align: center;
    color: #FEFEFE;
}

.para_Mypet{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 350px;
    background: #276678;
    border-radius: 30px;
}
.para_maps h1{
    
    font-family: "Poppins";
    font-size: 30px;
    text-align: center;
    color: #FFFFFF;
    line-height: 4;
}

.para_maps p{
    
    font-family: "Poppins";
    font-size: 19px;
    line-height: 40px;
    width: 500px;
    text-align: center;
    color: #FFFFFF;

    }
.para_maps{
    width: 500px;
    height: 350px;
    background: #276678;
    border-radius: 30px;
}

#pet_maps .para_maps i {
    font-size: 50px;
    position: absolute;
    left: 1124px;
    bottom: -462px;
}


/* ------------------------help.html-------------------- */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

#help_nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 85px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    background-color: #276678;
}
#help_nav_logo{
    display: flex;
    flex-direction: row;
    align-items: center;
}

#help_nav img{
    height: 50px;
    width: 70px;
}

#help_nav h1{
    font-family: Roboto;
    font-weight: normal;
    font-size: 18px;
    color: white;
}

#help_nav p{
    font-family: Roboto;
    font-weight: normal;
    color: white;
    font-size: 15px;
    margin-top: 35px;
}

#help_content{
    display: flex;
    flex-direction: row;
	margin-top: 100px;
}

#help_content h1{
    font-size: 60px;
    font-family: Paytone One;
    font-weight: normal; 
    line-height: 2.8;
    margin-left: 120px;
}

#help_form{
    width: 50%;
    height: 450px;
}

#help_form select{
    font-size: 19px;
    width: 300px;
    margin-left: 180px;
}

#help_form h2{
    font-family: Poppins;
    font-size: 23px;
    font-weight: bolder;
    color: black;
    line-height: 2.5;
    margin-left: 180px;
}

#help_content h3{
    font-family: Poppins;
    font-size: 23px;
    font-weight: bold;
    color: black;
    line-height: 2.5;
    margin-left: 180px;
    margin-top: 50px;
}

#animal{
    border: 1.8px solid black;
    border-radius: 5px;
    font-family: Roboto;
    box-sizing: border-box;
}

#injury{
    border: 1.8px solid black;
    border-radius: 5px;
    font-family: Roboto;
    box-sizing: border-box;
}

#result-btn {
    background-color: #117996;
    color: white;
    font-family: Poppins;
    font-size: 23px;
    height: 2.5pc;
    width: 8pc;
    border-radius: 10px;
    margin-top: 49px;
    margin-left: 270px;
}

#help_result{
	/* margin-top: 80px; */
    font-family: Poppins;
    width: 768px;
	font-size: 15px;
}
#help_result img{
    width: 200px;
    height: 200px;
}

/* ----------------------hospital.html------------------------------------ */
.hospital{
    margin: 10px;
    padding: 10px;
}
.hospital h1 ,h3 , .allow ,input{
    margin:10px;
}

.hospital h1{
    width: 600px;
    height: 100px;
    font-family: Paytone One;
    font-style: normal;
    font-weight: normal;
    font-size: 55px;
    line-height: 91px;
    }

.hospital h3{
    width: 345px;
    height: 62px;
    font-family: Poppins;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;
    line-height: 45px;
}
.hospital button{
    
    width: 174px;
    height: 41px;
    background: #276678;
    border: 1px solid #276678;
    box-sizing: border-box;
    border-radius: 10px;
    font-family: Poppins;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;
    
    color: #ffffff;
}

.hospital p{
    width: 87px;
    height: 62px;
    font-family: Poppins;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;
    line-height: 45px;
    align-items: center;
    text-align: center;
}

.hospital .address{
    margin-top: 0px;
    width: 326px;
    height: 64px;
    border: 2px solid #000000;
    box-sizing: border-box;
    border-radius: 10px;
    font-size: 30px;
}

/*.hospital .hp1 ,.hp2 ,.hp3{
    display: grid;
    width: 414px;
    height: 100px;
    border: 1px solid #000000;
    box-sizing: border-box;
}*/


/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

	@media screen and (max-width: 480px) {

		html, body {
			min-width: 320px;
		}

	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background: white;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

/* Type */

	body, input, select, textarea {
		/* color: #ffffff; */
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-size: 17pt;
		font-weight: 300;
		letter-spacing: 0.025em;
		line-height: 1.65;
	}

		@media screen and (max-width: 1680px) {

			body, input, select, textarea {
				font-size: 14pt;
			}

		}

		@media screen and (max-width: 1280px) {

			body, input, select, textarea {
				font-size: 12pt;
			}

		}

		@media screen and (max-width: 360px) {

			body, input, select, textarea {
				font-size: 11pt;
			}

		}

	a {
		-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		border-bottom: dotted 1px;
		color: inherit;
		text-decoration: none;
	}

		a:hover {
			border-bottom-color: transparent;
			color: #9bf1ff !important;
		}

		a:active {
			color: #53e3fb !important;
		}

	strong, b {
		color: #ffffff;
		font-weight: 600;
	}

	em, i {
		font-style: italic;
	}

	

	

	@media screen and (max-width: 736px) {

		h1 {
			font-size: 2em;
		}

		h2 {
			font-size: 1.5em;
		}

		h3 {
			font-size: 1.25em;
		}

	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	blockquote {
		border-left: solid 4px rgba(212, 212, 255, 0.1);
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 2em;
	}

	code {
		background: rgba(212, 212, 255, 0.035);
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0 2em 0;
	}

		pre code {
			display: block;
			line-height: 1.75;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

	hr {
		border: 0;
		border-bottom: solid 1px rgba(212, 212, 255, 0.1);
		margin: 2em 0;
	}

		hr.major {
			margin: 3em 0;
		}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}


/* Header */

	@-moz-keyframes reveal-header {
		0% {
			top: -4em;
			opacity: 0;
		}

		100% {
			top: 0;
			opacity: 1;
		}
	}

	@-webkit-keyframes reveal-header {
		0% {
			top: -4em;
			opacity: 0;
		}

		100% {
			top: 0;
			opacity: 1;
		}
	}

	@-ms-keyframes reveal-header {
		0% {
			top: -4em;
			opacity: 0;
		}

		100% {
			top: 0;
			opacity: 1;
		}
	}

	@keyframes reveal-header {
		0% {
			top: -4em;
			opacity: 0;
		}

		100% {
			top: 0;
			opacity: 1;
		}
	}

	#header {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		background-color: #2a2f4a;
		box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.15);
		cursor: default;
		font-weight: 600;
		height: 3.25em;
		left: 0;
		letter-spacing: 0.25em;
		line-height: 3.25em;
		margin: 0;
		position: fixed;
		text-transform: uppercase;
		top: 0;
		width: 100%;
		z-index: 10000;
	}

		#header .logo {
			border: 0;
			display: inline-block;
			font-size: 1.1em;
			height: inherit;
			line-height: inherit;
			padding: 0 1.5em;
			background-color: #07485c;
		}

			#header .logo strong {
				-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
				-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
				-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
				transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
				background-color: #ffffff;
				color: #242943;
				display: inline-block;
				line-height: 1.65em;
				margin-right: 0.325em;
				padding: 0 0.125em 0 0.375em;
			}

			

		#header nav {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-justify-content: -moz-flex-end;
			-webkit-justify-content: -webkit-flex-end;
			-ms-justify-content: -ms-flex-end;
			justify-content: flex-end;
			-moz-flex-grow: 1;
			-webkit-flex-grow: 1;
			-ms-flex-grow: 1;
			flex-grow: 1;
			height: inherit;
			line-height: inherit;
			background-color: #07485c;
		}

			#header nav a {
				border: 0;
				display: block;
				font-size: 0.8em;
				height: inherit;
				line-height: inherit;
				padding: 0 0.75em;
				position: relative;
				/* vertical-align: middle; */
			}

				#header nav a:last-child {
					padding-right: 1.5em;
				}

				#header nav a[href="#menu"] {
					padding-right: 3.325em !important;
				}

					#header nav a[href="#menu"]:before, #header nav a[href="#menu"]:after {
						background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 2px%3B stroke: %23ffffff%3B %7D%3C/style%3E%3Cline x1='0' y1='11' x2='24' y2='11' /%3E%3Cline x1='0' y1='21' x2='24' y2='21' /%3E%3Cline x1='0' y1='16' x2='24' y2='16' /%3E%3C/svg%3E");
						background-position: center;
						background-repeat: no-repeat;
						background-size: 24px 32px;
						content: '';
						display: block;
						height: 100%;
						position: absolute;
						right: 1.5em;
						top: 0;
						/* vertical-align: middle; */
						width: 24px;
					}

					#header nav a[href="#menu"]:after {
						-moz-transition: opacity 0.2s ease-in-out;
						-webkit-transition: opacity 0.2s ease-in-out;
						-ms-transition: opacity 0.2s ease-in-out;
						transition: opacity 0.2s ease-in-out;
						background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 2px%3B stroke: %239bf1ff%3B %7D%3C/style%3E%3Cline x1='0' y1='11' x2='24' y2='11' /%3E%3Cline x1='0' y1='21' x2='24' y2='21' /%3E%3Cline x1='0' y1='16' x2='24' y2='16' /%3E%3C/svg%3E");
						opacity: 0;
						z-index: 1;
					}

					#header nav a[href="#menu"]:hover:after, #header nav a[href="#menu"]:active:after {
						opacity: 1;
					}

					#header nav a[href="#menu"]:last-child {
						padding-right: 3.875em !important;
					}

						#header nav a[href="#menu"]:last-child:before, #header nav a[href="#menu"]:last-child:after {
							right: 2em;
						}

		#header.reveal {
			-moz-animation: reveal-header 0.35s ease;
			-webkit-animation: reveal-header 0.35s ease;
			-ms-animation: reveal-header 0.35s ease;
			animation: reveal-header 0.35s ease;
		}

		#header.alt {
			-moz-transition: opacity 2.5s ease;
			-webkit-transition: opacity 2.5s ease;
			-ms-transition: opacity 2.5s ease;
			transition: opacity 2.5s ease;
			-moz-transition-delay: 0.75s;
			-webkit-transition-delay: 0.75s;
			-ms-transition-delay: 0.75s;
			transition-delay: 0.75s;
			-moz-animation: none;
			-webkit-animation: none;
			-ms-animation: none;
			animation: none;
			background-color: transparent;
			box-shadow: none;
			position: absolute;
		}

			#header.alt.style1 .logo strong {
				color: #6fc3df;
			}

			#header.alt.style2 .logo strong {
				color: #8d82c4;
			}

			#header.alt.style3 .logo strong {
				color: #ec8d81;
			}

			#header.alt.style4 .logo strong {
				color: #e7b788;
			}

			#header.alt.style5 .logo strong {
				color: #8ea9e8;
			}

			#header.alt.style6 .logo strong {
				color: #87c5a4;
			}

		body.is-preload #header.alt {
			opacity: 0;
		}

		@media screen and (max-width: 1680px) {

			#header nav a[href="#menu"] {
				padding-right: 3.75em !important;
			}

				#header nav a[href="#menu"]:last-child {
					padding-right: 4.25em !important;
				}

		}

		@media screen and (max-width: 1280px) {

			#header nav a[href="#menu"] {
				padding-right: 4em !important;
			}

				#header nav a[href="#menu"]:last-child {
					padding-right: 4.5em !important;
				}

		}

		@media screen and (max-width: 736px) {

			#header {
				height: 2.75em;
				line-height: 2.75em;
			}

				#header .logo {
					padding: 0 1em;
				}

				#header nav a {
					padding: 0 0.5em;
				}

					#header nav a:last-child {
						padding-right: 1em;
					}

					#header nav a[href="#menu"] {
						padding-right: 3.25em !important;
					}

						#header nav a[href="#menu"]:before, #header nav a[href="#menu"]:after {
							right: 0.75em;
						}

						#header nav a[href="#menu"]:last-child {
							padding-right: 4em !important;
						}

							#header nav a[href="#menu"]:last-child:before, #header nav a[href="#menu"]:last-child:after {
								right: 1.5em;
							}

		}

		@media screen and (max-width: 480px) {

			#header .logo span {
				display: none;
			}

			#header nav a[href="#menu"] {
				overflow: hidden;
				padding-right: 0 !important;
				text-indent: 5em;
				white-space: nowrap;
				width: 5em;
			}

				#header nav a[href="#menu"]:before, #header nav a[href="#menu"]:after {
					right: 0;
					width: inherit;
				}

				#header nav a[href="#menu"]:last-child:before, #header nav a[href="#menu"]:last-child:after {
					width: 4em;
					right: 0;
				}

		}

/* Menu */

	#menu {
		-moz-transition: -moz-transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
		-webkit-transition: -webkit-transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
		-ms-transition: -ms-transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
		transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		pointer-events: none;
		background: rgba(36, 41, 67, 0.9);
		box-shadow: none;
		height: 100%;
		left: 0;
		opacity: 0;
		overflow: hidden;
		padding: 3em 2em;
		position: fixed;
		top: 0;
		visibility: hidden;
		width: 100%;
		z-index: 10002;
	}

		#menu .inner {
			-moz-transition: -moz-transform 0.35s ease-out, opacity 0.35s ease, visibility 0.35s;
			-webkit-transition: -webkit-transform 0.35s ease-out, opacity 0.35s ease, visibility 0.35s;
			-ms-transition: -ms-transform 0.35s ease-out, opacity 0.35s ease, visibility 0.35s;
			transition: transform 0.35s ease-out, opacity 0.35s ease, visibility 0.35s;
			-moz-transform: rotateX(20deg);
			-webkit-transform: rotateX(20deg);
			-ms-transform: rotateX(20deg);
			transform: rotateX(20deg);
			-webkit-overflow-scrolling: touch;
			max-width: 100%;
			max-height: 100vh;
			opacity: 0;
			overflow: auto;
			text-align: center;
			visibility: hidden;
			width: 18em;
		}

			#menu .inner > :first-child {
				margin-top: 2em;
			}

			#menu .inner > :last-child {
				margin-bottom: 3em;
			}

		#menu ul {
			margin: 0 0 1em 0;
		}

			#menu ul.links {
				list-style: none;
				padding: 0;
			}

				#menu ul.links > li {
					padding: 0;
				}

					#menu ul.links > li > a:not(.button) {
						border: 0;
						border-top: solid 1px rgba(212, 212, 255, 0.1);
						display: block;
						font-size: 0.8em;
						font-weight: 600;
						letter-spacing: 0.25em;
						line-height: 4em;
						text-decoration: none;
						text-transform: uppercase;
					}

					#menu ul.links > li > .button {
						display: block;
						margin: 0.5em 0 0 0;
					}

					#menu ul.links > li:first-child > a:not(.button) {
						border-top: 0 !important;
					}

		#menu .close {
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			border: 0;
			cursor: pointer;
			display: block;
			height: 4em;
			line-height: 4em;
			overflow: hidden;
			padding-right: 1.25em;
			position: absolute;
			right: 0;
			text-align: right;
			text-indent: 8em;
			top: 0;
			/* vertical-align: middle; */
			white-space: nowrap;
			width: 8em;
		}

			#menu .close:before, #menu .close:after {
				-moz-transition: opacity 0.2s ease-in-out;
				-webkit-transition: opacity 0.2s ease-in-out;
				-ms-transition: opacity 0.2s ease-in-out;
				transition: opacity 0.2s ease-in-out;
				background-position: center;
				background-repeat: no-repeat;
				content: '';
				display: block;
				height: 4em;
				position: absolute;
				right: 0;
				top: 0;
				width: 4em;
			}

			#menu .close:before {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 2%3B %7D%3C/style%3E%3Cline x1='0' y1='0' x2='20' y2='20' /%3E%3Cline x1='20' y1='0' x2='0' y2='20' /%3E%3C/svg%3E");
			}

			#menu .close:after {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %239bf1ff%3B stroke-width: 2%3B %7D%3C/style%3E%3Cline x1='0' y1='0' x2='20' y2='20' /%3E%3Cline x1='20' y1='0' x2='0' y2='20' /%3E%3C/svg%3E");
				opacity: 0;
			}

			#menu .close:hover:after, #menu .close:active:after {
				opacity: 1;
			}

	body.is-ie #menu {
		background: rgba(42, 47, 74, 0.975);
	}

	body.is-menu-visible #wrapper {
		-moz-filter: blur(0.5em);
		-webkit-filter: blur(0.5em);
		-ms-filter: blur(0.5em);
		filter: blur(0.5em);
	}

	body.is-menu-visible #menu {
		pointer-events: auto;
		opacity: 1;
		visibility: visible;
	}

		body.is-menu-visible #menu .inner {
			-moz-transform: none;
			-webkit-transform: none;
			-ms-transform: none;
			transform: none;
			opacity: 1;
			visibility: visible;
		}