* { margin: 0; padding: 0; font-family: 'Barlow', sans-serif; font-size: 15px; }
html { overflow-y: scroll; }
header, nav, main, section, footer { display: block; }
a { text-decoration: none; }
textarea { resize: none; }
.error { width: 200px; margin: 60px auto 0; text-align: center; }
.error h1 { font-size: 25px; }
.error p { font-size: 18px; text-align: center; font-weight: 500; }
.error a { padding: 10px 15px; background-color: #EF2E24; color: #FFFFFF; }
.error a:hover { background-color: #4D4D4D; }
.wrapper { width: 100%; max-width: 900px; margin: auto; }
hr { width: calc(100%-14px); margin: auto; background-color: #666666; border: 1px solid #666666 }
b { font-weight: 600; }

header { width: 100%; }

.topcontact { height: auto; width: 100%; padding: 7px 0; background-color: #EF2E24; color: #FFFFFF; font-weight: 600; letter-spacing: 0.5px; }
.topnav { height: auto; width: 100%; color: #000000; }
.topnav nav { padding: 15px 0; text-align: right; }
.topnav nav a { display: inline-block; position: relative; margin: 0 10px; color: #5D5D5D; font-size: 16px; font-weight: 700; letter-spacing: 0.3px; }
.topnav nav a:last-child { margin-right: 0; }
.topnav nav a:hover { color: #EF2E24; }
nav span { margin: 0 7px; color: #000000; font-size: 17px; font-weight: 800; }
#current { color: #EF2E24; }

main { width: 100%; }

.banner { width: 100%; margin: 0 0 20px; overflow: hidden; }
.slider { height: 250px; width: 900px; overflow: hidden; }
.slider .slide-prev, .slider .slide-next { height: 50px; width: 20px; position: absolute; top: 50%; margin-top: -24px; background-color: #E9E9E9; cursor: pointer; }
.slider .slide-prev { left: 0; }
.slider .slide-next { right: 0; }
.slider .slide-prev:before, .slider .slide-next:before { height: 50px; width: 20px; display: block; position: absolute; line-height: 50px; font-size: 16px; text-align: center; }
.slider .slide-prev:before { content: "<"; }
.slider .slide-next:before { left: 3px; content: ">"; }
.slider .slide-next:hover, .slider .slide-prev:hover { background-color: #888888; }
ul.es-pager { position: relative; top: -25px; text-align: center; }
ul.es-pager li { height: 3px; width: 22px; display: inline-block; margin: 0 7px; border: 2px solid #E9E9E9; cursor: pointer; }
ul.es-pager li:hover, ul.es-pager li.act { background-color: #E9E9E9; }

.introduction { height: auto; width: 100%; margin: -8px auto 10px; padding: 20px 0; line-height: 2; }
.introduction h1 { color: #EF2E24; font-size: 24px; }
.introduction p { text-align: justify; font-weight: 400; }
.introduction span { height: 15px; display: block; }
.introduction a { width: 100px; display: block; margin: auto; padding: 2px; background-color: #EF2E24; color: #FFFFFF; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-align: center; }
.introduction a:hover { background-color: #4D4D4D; }

.services { height: auto; width: 100%; margin: -6px auto 0; padding: 25px 0 20px; line-height: 2; text-align: center; }
.services p { text-align: justify; font-weight: 400; }
.services span { height: 2px; display: block; }
.services a { width: 240px; display: inline-block; margin: 10px 20px; padding: 6px 0; background-color: #EF2E24; color: #FFFFFF; font-weight: 500; text-align: center; }
.services a:hover { background-color: #4D4D4D; }

footer { width: 100%; background-color: #252525; }

.connect { height: auto; padding: 20px 0; line-height: 2; color: #C0C0C0; text-align: center; }
.connect h1 { margin: -7px auto 0; color: #EF2E24; font-size: 24px; letter-spacing: 1px; }
.connect p { text-align: center; font-weight: 500; letter-spacing: 0.3px; }
.connect span { height: 15px; display: block; }
.connect a { width: 100px; display: block; margin: 0 auto 10px; padding: 2px; background-color: #EF2E24; color: #FFFFFF; font-size: 13px; text-align: center; font-weight: 600; letter-spacing: 0.5px; }
.connect a:hover { background-color: #4D4D4D; }

.copyright { width: 100%; padding: 20px 0; line-height: 2; color: #FFFFFF; font-weight: 500; letter-spacing: 0.5px; }
.copyright a { color: #EF2E24; font-size: 14px; text-decoration: underline; }
.copyright a:hover { color: #FFFFFF; }
.left { float: left; display: block; }
.right { float: right; display: block; font-size: 14px; }
.clear { clear: both; }

.content { height: auto; width: 100%; margin: auto; padding: 20px 0; line-height: 2; }
.content h1 { margin: -8px auto 0; color: #EF2E24; font-size: 24px; }
.content p { text-align: justify; font-weight: 400; }
.content span { height: 15px; display: block; }
.content section { width: 650px; margin: 0 auto 9px; padding: 2px 10px; border: 1px dashed #4D4D4D; }
.content h2 { color: #EF2E24; font-size: 17px; font-weight: 600; }
.content .center, .content .center p { text-align: center; }

@media screen and (max-width: 925px) {
	body { margin: 5px; }
	.topcontact { width: auto; padding-left: 7px; }
	.slider { height: auto; width: auto; overflow: hidden; }
	.content section { max-width: 90%; }
	.left { margin-left: 5px; }
	.right { margin-right: 5px; }
}

@media screen and (max-width: 640px) {
	body { margin: 5px; }
	header, div, nav, main, section, footer, .slider { clear: left; height: auto; width: 100%; margin: 0; padding: 0; }
	.topcontact, nav span { display: none; }
	.topnav { margin-top: -20px; }
	.topnav nav a { width: calc(100%-14px); display: block; margin: 3px 0; padding: 7px 0; background-color: #EF2E24; color: #FFFFFF; text-align: center; }
	.topnav nav a:hover, #current { background-color: #4D4D4D; color: #FFFFFF; }
	.banner { margin: 0; }
	.introduction h1 { padding: 0 5px; }
	.introduction p { padding: 0 7px; }
	.services p { padding: 0 7px; }
	.services a { margin: 10px 20px; }
	.connect p { padding: 0 7px; text-align: justify; }
	.copyright { height: auto; margin: 0; padding: 10px 0; }
	.left, .right { float: left; clear: left; width: 100%; margin: 5px 0; text-align: center; }
	.content h1 { padding: 0 5px; }
	.content p { padding: 0 7px; }
	.content section { width: 90%; }
	.content h2 { padding: 0 7px; }
}