@charset "UTF-8";
/* CMS.CSS v0.1a | 06.10.2018 | cms.peetrino.com/pqn */



::selection {
	
}

::-moz-selection {
	background:rgb(20,30,40);
	background:#667780;
	color:#fff;
}


* {
	margin:0;
	padding:0;
	border:0;
	outline:none;
	box-sizing:border-box;
	-webkit-appaerance:none;
	-webkit-text-adjust:none;
}

html {
	font-family:"Arial", sans-serif;
	font-size:10px;
	line-height:2rem;
	color:#fff;
	background:#141e28;
}

body {
	font-size:1.5rem;
	line-height:2rem;
	background:#f2f3f4;
	font-family:"Barlow";
	font-family:"Roboto", arial, sans-serif;
	color:#718085;
}

a {
	color:#667780;
}

a:hover {
	color:#667780;
}

h1, h2, h3, h4, h5, h6, p, table {
	margin:0 0 2rem;
}

h1 {
	font-size:4rem;
	line-height:5rem;
	font-family:Barlow;
	color:rgb(20,30,40);
	font-weight:300;
}

h2 {
	font-size:3rem;
	line-height:4rem;
	font-family:Barlow;
	font-weight:400;
}

h3 {
	font-size:2rem;
	line-height:3rem;
	font-family:Barlow;
	color:rgb(20,30,40);
	font-weight:500;
	text-transform:uppercase;
}

h4, h5, h6 {
	font-size:1.5rem;
	line-height:2rem;
	font-weight:600;
}

hr {
	margin:2rem 0;
	border-top:1px solid rgba(0,0,0,0.1);
}

ul, ol, dl {
	margin:0 0 2rem 2rem;
}

ul ul,
ol ol {
	margin:0 0 0 2rem;
}

ul {
	margin:0;
	list-style:none;
}


/* CUSTOM CLASSES START */

.o0 { opacity:0; }
.o1 { opacity:0.1; }
.o2 { opacity:0.2; }
.o25 { opacity:0.25; }
.o3 { opacity:0.3; }
.o4 { opacity:0.4; }
.o5 { opacity:0.5; }
.o6 { opacity:0.6; }
.o7 { opacity:0.7; }
.o75 { opacity:0.75; }
.o8 { opacity:0.8; }
.o9 { opacity:0.9; }
.o10 { opacity:1; }

.fw100 { font-weight:100; }
.fw200 { font-weight:200; }
.fw300 { font-weight:300; }
.fw400 { font-weight:400; }
.fw500 { font-weight:500; }
.fw600 { font-weight:600; }
.fw700 { font-weight:700; }
.fw800 { font-weight:800; }
.fw900 { font-weight:900; }

.w5 { width:5%; }
.w10 { width:10%; }
.w15 { width:15%; }
.w20 { width:20%; }
.w25 { width:25%; }
.w30 { width:30%; }
.w35 { width:35%; }
.w40 { width:40%; }
.w45 { width:45%; }
.w50 { width:50%; }
.w55 { width:55%; }
.w60 { width:60%; }
.w65 { width:65%; }
.w70 { width:70%; }
.w75 { width:75%; }
.w80 { width:80%; }
.w85 { width:85%; }
.w90 { width:90%; }
.w95 { width:95%; }
.w100 { width:100%; }

.mw500 { max-width:500px; }
.mw600 { max-width:600px; }
.mw700 { max-width:700px; }
.mw800 { max-width:800px; }
.mw900 { max-width:900px; }
.mw1000 { max-width:1000px; }
.mw1200 { max-width:1200px; }

.p10 { padding:10px; }
.p20 { padding:20px; }
.p30 { padding:30px; }
.p40 { padding:40px; }
.p50 { padding:50px; }
.p80 { padding:80px; }
.p100 { padding:100px; }
.p200 { padding:200px; }

.pt10 { padding-top:10px; }
.pt20 { padding-top:20px; }
.pt30 { padding-top:30px; }
.pt40 { padding-top:40px; }
.pt50 { padding-top:50px; }
.pt100 { padding-top:100px; }

.ptb10 { padding-top:10px; padding-bottom:10px; }
.ptb20 { padding-top:20px; padding-bottom:20px; }
.ptb30 { padding-top:30px; padding-bottom:30px; }
.ptb40 { padding-top:40px; padding-bottom:40px; }
.ptb50 { padding-top:50px; padding-bottom:50px; }
.ptb100 { padding-top:100px; padding-bottom:100px; }

.mb10 { margin-bottom:10px; }
.mb20 { margin-bottom:20px; }
.mb30 { margin-bottom:30px; }
.mb40 { margin-bottom:40px; }
.mb50 { margin-bottom:50px; }
.mb80 { margin-bottom:80px; }
.mb100 { margin-bottom:100px; }
.mb200 { margin-bottom:200px; }

.tal { text-align:left; }
.tar { text-align:right; }
.tac { text-align:center; }
.taj { text-align:justify; }

.ttu { text-transform:uppercase; }

.mauto { margin-left:auto; margin-right:auto; }
.m0 { margin:0; }

.fs0 { font-size:0; line-height:0; }

.flx {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

.flx-nw {
	flex-wrap:nowrap;
}

.flx-cnt {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}

.flx-cnt2 {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
}

/* CUSTOM CLASSES END */







#top {
	background:#fff;
	padding:20px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	background:#00a064;
	background:#007457;
	color:#fff;
}

#top em {
	display:inline-block;
	padding:7px;
	background:#00a064;
	background:linear-gradient(0deg, #093, #0c4, #3f7);
	border-radius:5px;
	margin:0 10px 0 0;
}

#logo {
}

#logo a {
	display:block;
	width:225px;
	height:50px;
	background:url(logo.png) center center no-repeat;
	background-size:contain;
	text-decoration:none;
}

#navi {
	display:flex;
	font-weight:500;
	background:#fff;
	border:2px solid #fff;
	border-radius:10px;
}

#navi li {
}

#navi li a {
	display:block;
	text-decoration:none;
	color:rgb(20,30,40);
	padding:10px 20px;
	margin:0 0 0 10px;
}

#navi li a:hover {
	color:#667780;
}

#navi li.selected a {
	color:rgb(20,30,40);
	color:#667780;
	color:rgb(0,116,87);
}

#navi li a em {
	margin:0 10px 0 0;
	color:rgb(20,30,40);
	color:#667780;
}



#middle ul {
	margin:0 0 20px 20px;
	list-style:disc;
}

.button a {
	display:inline-block;
	padding:10px 20px;
	background:#00a064;
	border-radius:5px;
	margin:0 10px 0 0;
	color:#fff;
	font-weight:600;
	text-decoration:none;
}

.button a:hover {
	background:#007457;
}

.massagen {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	font-size:1.7rem;
}

.massagen p {
	width:45%;
	margin:0 0 50px;
}

.massagen p > strong {
	display:block;
	font-size:1.7rem;
	color:rgb(20,30,40);
	margin:0 0 10px;
}

.massagen p > strong > em a {
	color:#fff;
	font-style:normal;
	font-size:0;
	line-height:0;
}

.massagen p > strong > em a:after {
	margin:0 0 0 10px;
	font-size:1.5rem;
	line-height:2rem;
	content:'?';
	text-align:center;
	width:20px;
	height:20px;
	border-radius:20px;
	font-weight:700;
	display:inline-block;
	padding:0px;
	background:#667780;
}

.massagen p > strong > em a:hover:after {
	background:rgb(0,116,87);
}

.massagen p:last-of-type {
	width:100%;
}

.massagen p > span {
	position:relative;
	display:flex;
	justify-content:space-between;
	margin:0 0 10px;
}

.massagen p > span:after {
	position:absolute;
	display:block;
	width:100%;
	height:0;
	bottom:4px;
	left:0;
	content:'';
	border-bottom:2px dotted #ccc;
	z-index:0;
}

.massagen p > span > em {
	font-style:normal;
	display:inline-block;
	position:relative;
	z-index:1;
}

.massagen p > span > em:before {
	display:inline-block;
	position:absolute;
	content:'';
	width:100%;
	padding:0 5px 0 0;
	height:4px;
	bottom:4px;
	left:0;
	background:#f2f3f4;
	z-index:-1;
}

.massagen p > span > strong {
	font-weight:700;
	color:rgb(0,116,87);
	display:inline-block;
	padding:0 0 0 10px;
	text-align:right;
	position:relative;
	z-index:1;
}

.massagen p > span > strong:before {
	display:inline-block;
	position:absolute;
	content:'';
	width:100%;
	height:4px;
	bottom:4px;
	left:0;
	background:#f2f3f4;
	z-index:-1;
}

#bottom {
	background:rgb(102,119,128);
	background:#00a064;
	color:rgb(20,30,40);
	padding:50px 0 0 0;
	text-align:center;
}

#bottom > p:first-of-type a {
	text-decoration:none;
	color:#141e28;
}

#bottom p a:hover {
	color:#fff;
}

#bottom ul {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	margin:0 auto 20px;
}

#bottom ul:last-of-type {
	margin-bottom:50px;
}

#bottom ul li a {
	display:block;
	padding:5px 10px;
	text-decoration:none;
	color:#141e28;
}

#bottom ul li.selected a,
#bottom ul li a:hover {
	display:block;
	padding:5px 10px;
	text-decoration:none;
	color:#fff;
}

.footer {
	background:rgb(20,30,40);
	color:#667780;
	padding:40px 0;
	margin:0;
	font-weight:500;
}

@media (max-width:900px) {
	
	#top {
		display:block;
		text-align:center;
	}
	
	#logo a {
		margin:auto;
		margin:0 auto 20px;
	}
	
	#top .fw600 {
		display:none;
	}
	
	#navi {
		justify-content:space-around;
	}
	
	#navi li a {
		padding:10px 10px;
		margin:0;
	}

	h1 {
		font-size:3rem;
		line-height:4rem;
		margin:0 0 1rem;
	}

	h2 {
		font-size:2rem;
		line-height:3rem;
		margin:0 0 1rem;
	}

	h3 {
		font-size:1.5rem;
		line-height:2rem;
		margin:0 0 1rem;
	}
	
}

@media (max-width:500px) {

	h1 {
		font-size:2.5rem;
		line-height:3rem;
	}

	h2 {
		font-size:1.8rem;
		line-height:2rem;
	}
	
	.massagen {
		font-size:1.5rem;
	}
	
	.massagen p {
		width:100%;
	}
	
	.w30 {
		width:100%;
	}
	
}


COLORS 

LIGHT GREEN = #00a064

DARK GREEN = #007457