/*
Theme Name: 	Communicart
Theme URI: 		http://www.communicart.be
Description: 	The official Communicart Theme
Version: 		1.0
Author: 		Castel
Author URI: 	http://www.castel.be
Tags: 			communicart
*/

/* ----------------------------------------------------------------------------------------------------------
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

.header-safetyweb{background: #fff; border-bottom: 1px solid #ff0000}
.header-logo-safetyweb a { width: 100px; height: 100px; margin: 20px 0 20px 20px; float: left; text-indent: -9999px; background: url(images/logo-header-small.jpg);background-repeat: no-repeat; background-position: center; background-size: contain; background-color: #fff!important; }

.main-safetyweb{
    background-color: #fefefe;
}
.wrapper-safetyweb{
    background-color: #fff;
    width: 80%;
    align-self: auto;
}

.page-id-324 h2 {
    font-size: 31px;
font-weight: normal;
color: black;
margin-top: 50px;
margin-bottom: 20px;}
.page-id-324 p {
    font-size: 15px;
margin-bottom: 50px;}



.page-id-324 .main-content {
    background-color: #fff!important;
    height: 65vh;
}
.page-id-324 .main{
    background-color: white!important; 
}
.page-id-324 .wrapper a{
    background-color: #FF0000;
    padding: 15px 25px; 
    color: white; 
    text-decoration: none;
}

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection	{ background:#ff0; color:#333; }
::selection			{ background:#ff0; color:#333; }

.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

html, body { margin: 0; padding: 0; height: 100%; }

/* ----------------------------------------------------------------------------------------------------------
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@font-face {
    font-family: 'cent-reg';
    src: url('fonts/got.eot');
    src: url('fonts/got.eot') format('embedded-opentype'),
         url('fonts/got.woff2') format('woff2'),
         url('fonts/got.woff') format('woff'),
         url('fonts/got.ttf') format('truetype'),
         url('fonts/got.svg#got') format('svg');
}

@font-face {
    font-family: 'cent-bold-it';
    src: url('fonts/gotbi.eot');
    src: url('fonts/gotbi.eot') format('embedded-opentype'),
         url('fonts/gotbi.woff2') format('woff2'),
         url('fonts/gotbi.woff') format('woff'),
         url('fonts/gotbi.ttf') format('truetype'),
         url('fonts/gotbi.svg#gotbi') format('svg');
}

@font-face {
    font-family: 'cent-it';
    src: url('fonts/goti.eot');
    src: url('fonts/goti.eot') format('embedded-opentype'),
         url('fonts/goti.woff2') format('woff2'),
         url('fonts/goti.woff') format('woff'),
         url('fonts/goti.ttf') format('truetype'),
         url('fonts/goti.svg#goti') format('svg');
}

@font-face {
    font-family: 'cent-bold';
    src: url('fonts/gotb.eot');
    src: url('fonts/gotb.eot') format('embedded-opentype'),
         url('fonts/gotb.woff2') format('woff2'),
         url('fonts/gotb.woff') format('woff'),
         url('fonts/gotb.ttf') format('truetype'),
         url('fonts/gotb.svg#gotb') format('svg');
}

body,
input,
textarea			{ font-family: cent-reg, Helvetica, Arial, sans-serif; font-size: 0.8em; color: #333; line-height: 150%; }

h1,
h2,
h3,
h4,
h5,
h6 					{ font-weight:bold; }

h1					{ font-size: 22px; font-family: cent-bold, Helvetica, Arial, sans-serif; padding-bottom: 20px; color: #ff0000; }

p					{ padding-bottom: 10px;}

a					{ color: #ff0000; }

.main li			{ list-style: square; }
.main ul			{ margin-left: 14px; }

/* ----------------------------------------------------------------------------------------------------------
03 Max 900px (Mobile) ---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@media screen and (max-width:750px) {

html, body { background: #ededee; }
h2 { font-size: 16px; font-family: cent-bold, Helvetica, Arial, sans-serif; margin-top: 10px; padding-bottom: 20px; color: #ff0000; }

.wrapper { width: 100%; }

.header { background: #fff; margin-bottom: 20px; }

.header-logo a { width: 145px; height: 130px; margin: 20px 0 20px 20px; float: left; text-indent: -9999px; background: url(images/logo-header-small.jpg); }

.header-menu { float: right; margin: 20px 20px 0 0; }
.header-menu li { text-align: right; }
.header-menu ul { line-height: 175%; }
.header-menu a { text-decoration: none; color: #777; font-size: 1.25em; }
.header-menu a:hover { color: #000; }

.header-login { background: #ff0000; width: 100%; padding: 20px 0; text-transform: uppercase; }
.header-login a { color: #fff; margin: 20px; }

.main { padding: 0 20px; }

.featured-image { margin-top: 0px; }
.wp-post-image { width: 100%; height: inherit; }

.main-content { background: #fff; padding: 20px; }

.page-left { visibility: hidden; height: 0;  }
.page-left img { visibility: hidden; }
.page-right { float: left; width: 100%; }

.page-right table { font-size: 0.95em; width: 100%; margin-bottom: 20px; }
.page-right table tr {  border-bottom: solid 1px #ff0000; }

.page-left-referenties { }


.footer { padding: 10px 20px; font-size: 0.75em; color: #aaa; }
.footer-left { float: left; }

table {  width: 100%;}

th{border-bottom:2px solid #000000;text-align: left;font-weight:bold;}

td{border-bottom:1px solid #FF0000;text-align: left;}


}

/* ----------------------------------------------------------------------------------------------------------
04 750px & up -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:750px) {

html, body { background: #ededee url(images/background.gif) repeat-x top; }
h2 { font-size: 22px; font-family: cent-bold, Helvetica, Arial, sans-serif; margin-top: 10px; padding-bottom: 20px; color: #ff0000; }

.wrapper { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; margin-left: auto; margin-right: auto; }

.header-logo a { width: 145px; height: 130px; margin: 23px 0 28px 0; float: left; text-indent: -9999px; background: url(images/logo-header-small.jpg); }

.header-menu li { float: left; margin-right: 20px;  margin-top: 135px;  }
.header-menu ul { float: right; }
.header-menu a { text-decoration: none; color: #777; font-size: 16px; }
.header-menu a:hover { color: #000; }

.header-login { float: right; }
.header-login a { width: 126px; height: 150px; float: left; text-indent: -9999px; background: url(images/login-safetyweb-small.jpg); }

.main { background: ; width: 100%; }

.featured-image { margin-top: 0px; }
.wp-post-image { width: 100%; height: inherit; }

.main-content { background: #fff; padding: 20px; }

.page-left { float: left; width: 30%; }
.page-left img { width: 100%; height: inherit; }
.page-right { float: right; width: 70%; }

.page-right table { font-size: 0.75em; }
.page-right table tr {  border-bottom: solid 1px #ff0000; }

.page-left-referenties { float: left; width: 25%; }

.footer { font-size: 0.75em; color: #aaa; margin: 20px 0; }
.footer-left { float: left; }

table {  width: 100%;}

th{border-bottom:2px solid #000000;text-align: left;font-weight:bold;}

td{border-bottom:1px solid #FF0000;text-align: left;}



}

/* ----------------------------------------------------------------------------------------------------------
05 1000px & up ----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:1000px) {

html, body { background: #ededee url(images/background.gif) repeat-x top; }

.wrapper { width: 1000px; margin-left: auto; margin-right: auto; padding: 0 40px; }

.header-logo a { width: 225px; height: 202px; margin: 30px 0 28px 0; float: left; text-indent: -9999px; background: url(images/logo-header.jpg); }

.header-menu { margin-top: 233px; }
.header-menu li { float: left; margin-left: 60px; margin-right: 0; margin-top: 0; }
.header-menu ul { float: right; }
.header-menu a { text-decoration: none; color: #777; font-size: 16px; }
.header-menu a:hover { color: #000; background: url(images/menu-triangle.png) no-repeat; background-position: center 26px; height: 45px; display: block; }

.header-login { float: right; }
.header-login a { width: 160px; height: 190px; float: left; text-indent: -9999px; background: url(images/login-safetyweb.jpg); }

.current-menu-item { background: url(images/menu-triangle.png) no-repeat; background-position: center 26px; height: 45px; }

.main { background: ; width: 100%; }

.featured-image { margin-top: 0px; }

.main-content { background: #fff; padding: 20px; }

.page-left { float: left; width: 270px; }
.page-right { float: right; width: 600px; }

.page-right table { font-size: 0.75em; }
.page-right table tr {  border-bottom: solid 1px #ff0000; }

.page-left-referenties { float: left; width: 270px; }

.footer { font-size: 0.75em; color: #aaa; margin: 20px 0; }
.footer-left { float: left; }

table {  width: 100%;}

th{border-bottom:2px solid #000000;text-align: left;font-weight:bold;}

td{border-bottom:1px solid #FF0000;text-align: left;}

}