@charset "UTF-8";
/* CSS Document */

/*** General ***/
* { padding: 0px; margin: 0px; box-sizing: border-box; }
p { margin: 10px 0px }
body { font-family: 'Lato', sans-serif; font-size: 1em; color:#000; margin:0; font-weight:400; background: #f3f3f3 }
.inwrap { width: 70%; margin: 0 auto; background: #30342c }
.clear { clear: both; display: block; }
a, a:link, a:active, div a { color: #fff; text-decoration:none }
a img {border:none }

/*** Header ***/
.header { margin: 0 auto 0; width:100%; float:left; position:relative; background: #30342c; }
.header .top { background: #ffd503; height: 6%; width: 75%; position: absolute}
.header .bottom { background: #00c4df; height: 6%;  width: 75%; position: absolute; bottom: 0; right: 0}
.header .logo { position: relative; z-index: 1000; width:40%; margin: 0 auto; }
.header .logo img { display:block; margin: 15% auto; text-align:center; width:100%; height:auto; }

/*** Content ***/
.postContent { width:100%; float: left; background: #30342c; padding: 7.5% 0 }
.postContent h3 { font-size: 1.75em; font-weight: 300; margin: 1% 5%; line-height:110%; color:#fff; text-align: center; float: left; width:90%; }
.postContent h3 strong { font-weight: 400; }
.postContent h4 { font-size: 1.5em; font-weight: 400; margin: 2% 0; }
.postContent h5 { font-size: 1.25em; margin: 2% 0; line-height:135%; flex: 1 0 auto; }
.postContent h6 { font-size: 1.2em; margin: 2% 0; line-height:130%; }
.postContent p { font-size: 1.1em; margin: 2% 0 ; line-height:160%; }

ul, li { margin: 0; padding: 0; list-style: none; }
.list {  margin: 2% 0 0; width:100%; display: flex; justify-content: center }
.list-item { width: 33.33%; text-align: center; float: left}
.list-item img { width: 70%; margin: 10% 15%; text-align: center}
.list-content { width: 100%; position: relative}
.list-content p {  text-align: center; }

/*** Footer ***/
.footer { width: 100%; height:auto; margin: 0; font-size:0.75em; clear:both; line-height:140%; float:left; }
.footer a { color:#000; }
.footer .fleft { width: 50%; float: left; margin: 1% 0 ; }
.footer .fright { width: 50%; float: left; text-align:right; margin: 1% 0; }

/*** Media Queries ***/

@media only screen and (max-width : 1440px) {
body { font-size: 0.9em; }
}

@media only screen and (min-width : 801px) and (max-width : 1100px) {
.header .logo { width:24%; }
}

@media only screen and (max-width : 800px) {
.inwrap { width: 96%; margin: 0 0; }
.header .logo { width:30%; }
}

@media only screen and (max-width : 600px) {
.inwrap { width: 100%; margin: 0 0; }
.header .logo { width:40%; }
}

@media only screen and (max-width : 500px) {
.list-item { width: 100%; }
}

@media only screen and (max-width : 320px) {
.header .logo { width:90%; }
}