@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');


* { margin: 0; padding: 0; box-sizing: border-box }
html { font-size: 25px }
body { font-family: 'Roboto', sans-serif; background-color: #F0FFF0 }
img { max-width: 100% }
a { text-decoration: none; color: gray; display: inline-block; transition: .1s all }
a:hover { color: #48D1CC; transform: scale(1.05) }
ul { padding-left: 2rem }
li { line-height: 1.7; margin: 0 0 .5rem 0 }
p { margin: 1.2rem 0; line-height: 1.7 }
h1 { color: #48D1CC; text-align: center; font-size: 1.9rem; margin: 3rem 0 }
h1.black { color: #000 }
h2 { color: #48D1CC; text-align: center; font-size: 1.5rem; margin: 3rem 0 }
h3 { color: #52a332; text-align: center; font-size: 1.2rem; margin: 0 0 1.5rem 0 }
.btn { text-align: center; padding: 1rem; border: 3px solid black; margin: 5rem auto 5rem auto; border-radius: 2rem; width: 60%; font-size: 32px}
.center { text-align: center }
.red { color: #ff0000 }

.quotation { text-align: center; color: #52a332; max-width: 700px; margin: 0 auto; font-weight: bold; font-size: 1.2rem }

.wrapper { max-width: 980px; margin: 0 auto; width: 90% }

header { text-align: center; color: #48D1CC; font-weight: bold; text-transform: uppercase; font-size: 5rem; font-weight: 900; padding: 1rem }
@media(max-width:480px) {
	header { font-size: 1.2rem }
}

nav { font-size: 1.3rem; font-weight: bold; text-align: center; border-top: 1px solid #eee; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; box-shadow: 3px 3px 4px -4px rgba(0,0,0,.2) }
nav a { padding: 1rem; display: inline-block; }
nav a.active { color: #52a332; }
nav button { display: none; padding: .6rem .5rem; color: #fff; background: #00a4eb; border: 0; border-radius: .2rem; font-size: 2rem; cursor: pointer }
.icon-bar { background:#fff; display:block; width:26px; height:3px }
.icon-bar + .icon-bar { margin-top: 6px }
@media(max-width:800px) {
	nav { text-align: right; padding: 10px }
	nav a { display: none }
	nav button { display: inline-block }
}
.mobile-menu { height: 100%; width: 250px; position: fixed; z-index: 100; top: 0; left: -250px; background-color: #262626; overflow-x: hidden; transition: .5s }
.mobile-menu ul { padding: 0 }
.mobile-menu li { list-style: none; border-top: 1px solid rgba(255,255,255,.2); margin: 0 }
.mobile-menu a { color: #fff; text-decoration:none; display:block; padding: .6rem 1rem }
.mobile-menu a.active { background: #00a4eb }


figure { margin: 1.5rem auto }
figure img { width: 100% }
figcaption, .figcaption { text-align: center; margin: 1rem 0 }

img.rounded { border-radius: 4px }

.sep { margin: 2rem 0 }
.sep img { width: 100% }


.row { margin: 0 -15px; display: flex; flex-flow: row wrap}
.col { padding: 0 15px; flex-basis: 50% }

.price-row { display: flex; flex-flow: row wrap; margin: 0 0 1rem 0; border-bottom: 1px solid #ddd; padding: 0 0 1rem 0 }
.price-row .service { flex-basis: 70% }
.price-row .title { font-weight: bold; font-size: 1.5rem; margin: 0 }
.price-row .description { margin: 0 }
.price-row .price { flex-basis: 30%; font-weight: bold; font-size: 1.5rem; text-align: right }
@media(max-width:600px) {
	.price-row .service,
	.price-row .price { flex-basis: 100%; text-align: left }
	.price-row .price { margin: .5rem 0 1rem 0 }
}

.video-wrapper { margin: 1.5rem auto; z-index: -1 }
.video { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden }
.video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0 }

.name-card { text-align: center; list-style: none; color: #00a4eb; padding: 0 }
.name-card li:nth-child(1) { font-weight: bold; font-size: 3rem }
.name-card li:nth-child(2) { font-size: 2rem; margin: 1.5rem 0 2rem 0 }
.name-card li:nth-child(3) { font-weight: bold; font-size: 3rem }
@media(max-width:600px) {
	.name-card li:nth-child(1) { font-size: 2rem }
	.name-card li:nth-child(2) { font-size: 1.5rem }
	.name-card li:nth-child(3) { font-size: 2rem }
	.btn { text-align: center; padding: 1rem; border: 3px solid black; margin: 5rem auto 5rem auto; border-radius: 2rem; width: 90%; font-size: 28px}
}


.rc { display: flex; flex-flow: row wrap; align-items: center }
.rc .left { flex-basis: 70% }
.rc img { max-height: 600px }
.rc .right { flex-basis: 30%; text-align: center }
.rc ol { margin: 0 0 0 2rem }
.rc ol li { list-style: none; counter-increment: li  }
.rc ol li::before { content: counter(li)'.'; color: red; display: inline-block; width: 30px; margin: 0 10px 0 -39px; text-align: right; font-weight: bold }
@media(max-width:800px) {
	.rc .left,
	.rc .right { flex-basis: 100% }
	.rc .left { order: 2 }
	.rc .right { order: 1; margin-bottom: 3rem }
}


.fb-like { width: 260px; margin: 0 auto 20px auto; display: block !important }


footer { background: #48D1CC; color: #fff; text-align: center; color: #fff; padding: 3rem 0; margin-top: 3rem }