@charset "utf-8";
/* Contact Us Types */
#contactTypes {}
ul#contactTypes 		{ list-style:none; padding:0; margin:2em auto 2em 0; max-width:700px; }
ul#contactTypes li		{ padding:0; margin:20px 0; }

a.contact-type			{ display:block; text-decoration:none; color:#FFF;
						  background:#0183BA; height:80px; border-radius:20px; padding:1px; margin:0 50px 0 0;
						  font-size:28px; font-weight:400; text-align:left; line-height:0; }
.contact-type-content 	{ z-index:2; margin:0; padding:28px 30px 0; }
.contact-type-content p { padding:10px 0; margin:0; text-shadow:0 1px 1px #333; }
.contact-type-content p b { font-weight:700; text-shadow:0 1px 2px #000; }

.contact-type:before,
.contact-type:after,
.contact-type-point {
	content:" ";
	position:absolute;
	top:0;
	right:-50px;
	width:50px;
	height:100%;
	background:#0183BA;
    clip-path: polygon(0% 0%,0% 100%,100% 50%);
}
.contact-type:after,
.contact-type-point {
	top:32%;
	right:-50px;
	height:36%;
	width:18px;
	background:#FF4040;
}
.contact-type:before 		{ top:4px; height:calc(100% - 8px); right:-42px; width:50px; }
.contact-type-point 		{ background:#FFF; right:-28px; width:20px; top:32%; height:36%; }
.contact-type:after 		{ right:-22px; width:12px; height:20%; top:40%; }

a.contact-type:hover		{ color:#FFF; text-decoration:underline; }
a.contact-type:hover:after	{ background:#FF4040;; }
a.contact-type:hover,
a.contact-type:hover:before	{ background:#238C00 !important; }

@media all and (max-width: 900px) {
	/* Contact Us Types */
	ul#contactTypes 			{ max-width:600px; }
	ul#contactTypes li			{ margin:17px 0; }
	a.contact-type				{ height:70px; border-radius:20px; padding:1px; margin:0 50px 0 0; font-size:26px; }
	.contact-type-content 		{ padding:24px 27px 0; }
	.contact-type-content p 	{ padding:9px 0; }
}
@media all and (max-width: 650px) {
	/* Contact Us Types */
	ul#contactTypes 			{ margin:2em 0; width:100% }
	ul#contactTypes li			{ margin:15px 0; }
	a.contact-type				{ height:auto; font-size:3.5vw; line-height:100%; }
	.contact-type-content 		{ padding:5% 0 5% 25px; }
	.contact-type-content p 	{ padding:1px 0; }
}
@media all and (max-width: 500px) {
	/* Contact Us Types */
	a.contact-type				{ font-size:3.8vw; }
	.contact-type-content 		{ padding:6% 0 6% 25px; }
}
@media all and (max-width: 450px) {
	/* Contact Us Types */
	ul#contactTypes 			{ margin:2em -20px 2em -10px; width: calc(100% + 30px) }
	a.contact-type				{ font-size:4vw; }
	.contact-type-content 		{ padding:7% 0 7% 25px; }
}