body{

	color:#666;

	font-family: Open Sans, Arial, sans-serif;

	font-size:1em;

	font-weight:300;

	margin:0px;

}

h1{

	line-height:1em;

	margin:.45em 0;

	padding:0;


}

h2, h3, h4{

	line-height:1em;

	margin:.45em 0;

	padding:0;

}

hr {

  border: 0;

  color: #666;

  background-color: #666;

  height: 1px;

  width: 100%;

  text-align: left;

  clear: both;

  margin-bottom: 15px;

} 

h1 {

	font-size: 1.8em;

	font-weight:300;

	margin-top: 0.5em;

	margin-right: 0;

	margin-bottom: 1em;

	margin-left: 0;

}



h2 {

    font-size: 1.6em;

    margin-top: 0em;

	margin-right: 0;

	margin-bottom: 0.67em;

	margin-left: 0;

	font-weight:300;

}



h3 {

    font-size: 1.4em;

    margin-top: 0em;

	margin-right: 0;

	margin-bottom: 0.67em;

	margin-left: 0;

	font-weight:400;

}



h4 {

    font-size: 1.2em;

    margin-top: 0.5em;

	margin-right: 0;

	margin-bottom: 0.67em;

	margin-left: 0;

	font-weight:400;

}

a,

a:visited,

a:active,

a:hover{color:#e3001b;}

a:hover{ text-decoration:none;}



a.mapprint{

	display:none;

}



*{	box-sizing:border-box;

	-moz-box-sizing:border-box;}



.wrapper{

	width: 100%; 

	margin: 0 auto;

}

.wrapper-c{

	width: 0%; 

	margin: 0 auto;

}





#header{

	width: 100%;

	padding-top:0px;

	padding-bottom:0px;

	padding-left:0em;

	padding-right:0em;

	margin: 0em;
	background-color: #fff;

}

#header img, #logo img, #logomq img, #imeche img{

	vertical-align:top;

}

#logo, #logomq{

	float:none;

	text-align:center;

	width:100%;

	padding: 1em;

	margin: 0em;

}



#phone{

	width: 100%;

	margin-top: 0em;

	margin-right: auto;

	margin-bottom: 0em;

	margin-left: auto;

	text-align:center;

	font-weight:bold;

	padding-top: 1em;

	padding-right: 0em;

	padding-bottom: 1em;

	padding-left: 0em;
	
	color:#d71921;

}

div.phonebox{

	float:left;

	width:33%;

	text-align:center;

}

#phone a{
    text-decoration: none;
    color: #e3001b;
}

#phone a:hover{

	color:#d71921;

}





#menu{

	width: 100%;

	margin-top: 0px;

	margin-right: auto;

	margin-bottom: 0em;

	margin-left: auto;

	background-color: #d71921;


}

#menu a{

	color:#fff;

	font-weight:bold;

}





#content {

	width: 100%;

	margin-right: auto;

	margin-left: auto;

	margin-bottom: 0em;

	margin-top: 0em;

	text-align: center;

	padding-top: 2em;

	padding-right: 1em;

	padding-bottom: 2em;

	padding-left: 1em;

}

#content ul {

	text-align: left;

}

#content ul li {

	line-height:140%;

}

#div_sflcontent {
	margin-bottom: 2em;
}

div.combox {
	width: 90%;
	text-align: center;
	margin-bottom: 2em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0em;
	padding-bottom: 1em;
	padding-top: 1em;
	padding-left:1em;
	padding-right:1em;
	background-color: #ccc;
}

div.document {

	padding: 1.5em;

	width: 80%;

	margin-bottom: 2em;

	margin-left: auto;

	margin-right: auto;

	margin-top: 0em;

	background-color: #d71921;

	color:#fff;

}

div.item-content a{

	color:#e3001b;
	text-decoration: none;
border-bottom:none;
}

div.wall-item {
	border-bottom:none;

}

h3.catItemTitle{
	border-bottom:none;
	
}

#swap {
	background-color: orange;
	margin: 50px auto;
	box-sizing: border-box;
}

/* Make the container relative */
.swap-on-hover {
  position: relative;	
	margin:  0 auto;
	max-width: 400px;
}

/* Select the image and make it absolute to the container */
.swap-on-hover img {
  position: absolute;
  top:0;
  left:0;
	overflow: hidden;
	/* Sets the width and height for the images*/
	width: 400px;
	height: auto;
}

/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover .swap-on-hover__front-image {
  z-index: 9999;
  transition: opacity .5s linear;
  cursor: pointer;
}

/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover:hover > .swap-on-hover__front-image{
  opacity: 0;
}


#full-shell{

	width: 100%;

	margin-top: 0px;

	margin-right: auto;

	margin-bottom: 0em;

	margin-left: auto;
	
	background-color: #d71921;

}





#mbanner{

	width: 100%;

	text-align: center;

	margin: 0px;

	padding-bottom: 0em;

	padding-top: 0em;

	padding-left:0em;

	padding-right:0em;

}
#mbanner p{
	line-height: 100%;
	margin: 0px;
padding:0px;
}
#mbanner img{
	vertical-align: top;
	width:100%;
	height: auto;
}


#ctas{
    width: 100%;
    text-align: center;
    margin: 0px;
    padding-bottom: 1.5em;
    padding-top: 1.5em;
    padding-left: 1em;
    padding-right: 1em;
    background-color: #d71921;
	color:#fff;
}

#ctas h2{

	color:#fff;

}


#vacancies{

	width: 100%;

	text-align: center;

	margin: 0px;

	padding-bottom: 1.5em;

	padding-top: 1.5em;

	padding-left:1em;

	padding-right:1em;

	background-color: #fff;
	

}

#accred{
	width: 100%;

	text-align: center;

	margin: 0px;

	padding-bottom: 0em;

	padding-top: 0em;

	padding-left:0em;

	padding-right:0em;

	background-color: #99a4ab;

}

#left-shell{

	width: 100%;

	padding-bottom: 1.5em;

	padding-top: 1.5em;

	padding-left:1em;

	padding-right:1em;
	
	color:#fff;
	margin-top: 0px;

	margin-right: auto;

	margin-bottom: 0em;

	margin-left: auto;

}

#left-shell h2{

	color:#fff;

}

#right-shell{

	width: 100%;

	padding-bottom: 1.5em;

	padding-top: 1.5em;

	padding-left:1em;

	padding-right:1em;

	background-color:#fff;
	margin-top: 0px;

	margin-right: auto;

	margin-bottom: 0em;

	margin-left: auto;

}

#right-shell-txt h2{
	color:#d71921;

}

#left-shell-txt h2{
	color:#fff;

}

p.testi{

	font-size:1.2em;

}

.iconn{
	margin-bottom:2em;
	margin-left: 0%;
	margin-right: 0%;
	width:100%;
	color:#fff;
	padding-top: 0em;
	padding-bottom: 0em;
	padding-left:0em;
	padding-right:0em;
	float: left;
}
.iconn p{
	color:#fff;
	margin: 0px;
	padding: 0px;
	font-size:1.4em;
}

.iconn-text{
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
	padding-left: 1em;
}

.iconn-text p{
	color:#e0e0e0;
	margin: 0px;
	padding: 0px;
	font-size:1em;
}

#footer{

	width: 100%;

	text-align: center;

	background-color: #d71921;

	color: #fff;

	margin: 0px;

	padding-top: 1.5em;

	padding-right: 1em;

	padding-bottom: 1.5em;

	padding-left: 1em;

	font-weight:400;

	font-size:0.9em;

}

#footer a{

	text-decoration:underline;

	color:#fff;

}

#footer p.clause{

	font-size:0.8em;

}

#footer span.clause{

	font-size:0.8em;

	font-weight:normal;

}

.footer-element{

	text-align:center;

	font-weight:bold;

}	



p{ margin:0 0 1.0em;

	line-height:1.4em; 

}



p.credit{

	font-size:0.8em;

}



ul.cols {

	list-style-type:none;

    -moz-column-count: 2;

    -moz-column-gap: 20px;

    -webkit-column-count: 2;

    -webkit-column-gap: 20px;

    column-count: 2;

    column-gap: 20px;

}

ul.cols li{

	margin-bottom:20px;

	padding-bottom:1em;

	line-height:1.4em;

	font-weight:bold;

	border-bottom-width: 1px;

	border-bottom-style: solid;

	border-bottom-color: #eeeeee;

}



/* RESPONSIVE IMAGES */

img{

	max-width:100%;

	height:auto;

	border: none;

}



.right-img {

	display:block;

	width:100%;

}



/*colors and backgrounds*/

body{

	background:#fff;

}

h1, h3, h5{

	color:#d71921; 

}

h2, h4, h6{

	color:#e3001b;

}



a.buttonlink{

	background:#d71921;

	border-radius:7px;

	color:#fff;

	padding:10px;

	text-decoration:none;

	margin-top: 10px;

	margin-right: 15px;

	margin-bottom: 10px;

	margin-left: 0;

}

a.buttonlink:hover{

	background:#009EE3;

}





/* Contain floats*/ 

.clearfix:before,

.clearfix:after,

.row:before,

.row:after {

  content: " ";

  display: table;

}

.clearfix:after,

.container:after,

.row:after{

  clear: both;

}



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



span.menu-link-txt{

	display:none;

}
#sancri{
	display: none;
	}

}



/*

LARGER MOBILE DEVICES

This is for mobile devices with a bit larger screens.

*/

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

.iconn{
	margin-bottom:2em;
	margin-left: 1%;
	margin-right: 1%;
	width:48%;
}
.iconn p{
	font-size:1.6em;
}

.iconn-text{
}

.iconn-text p{
	font-size:1.1em;
}
}



/*

TABLET START

The average viewing window and preferred media query for those is 768px.

But I think that some more breathing space is good:)

*/

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





}



/*

TABLET & SMALLER LAPTOPS

The average viewing window and preferred media query for those is 768px.

But I think that some more breathing space is good:)

*/

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

	#mobcri{
	display: none;
	}
	
#sancri{
	width:30%;
	float:right;
	margin-top:0em;
}

#sancri a{
	color:#fff;
	text-decoration: none;
}
#sancri a:hover{
	color:#e3001B;
}
#sancri ul li {
	display: block;
	background-color: #d71921;
	color:#fff;
	text-align: center;
	margin-bottom: 20px;
	padding: 10px;
	border-radius: 10px;
}
#sancri ul {
	margin-bottom: 2em;
}

h1 {

	font-size: 2.2em;

}



h2 {

    font-size: 2em;

}



h3 {

    font-size: 1.5em;

}



.wrapper, .wrapper-c{

	max-width: 1200px; 

	margin: 0px auto;

}



#header{

	padding:0em;

}



.iconn{
	margin-bottom:0em;
	margin-left: 1%;
	margin-right: 1%;
	width:23%;
}
.iconn p{
	font-size:2em;
}

.iconn-text{
}

.iconn-text p{
	font-size:1.4em;
}



ul.cols {

    -moz-column-count: 3;

    -moz-column-gap: 20px;

    -webkit-column-count: 3;

    -webkit-column-gap: 20px;

    column-count: 3;

    column-gap: 20px;

} 

#logo {

	width: 50%;
	padding-bottom: 2em;
	padding-top: 2em;
	padding-left: 0em;
	padding-right: 0em;
	float: left;
	text-align: left;

}

#phone {

	width: 50%;
padding-top: 1em;

	padding-right: 1em;

	padding-bottom: 0em;

	padding-left: 0em;
	float:right;
	text-align: right;
	font-size: 1.8em;

}
	

#content{

	padding-bottom: 3em;

	padding-top: 3em;

	padding-left:2em;

	padding-right:2em;

}
	
	div.combox {
	width: 44%;
	text-align: center;
	margin-bottom: 2em;
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 0em;
	padding-bottom: 1em;
	padding-top: 1em;
	padding-left:1em;
	padding-right:1em;
	background-color: #fff;
		float: left;
}
	
#ctas, #vacancies{

	padding-bottom: 3em;

	padding-top: 3em;

}
	
	#ctas{
		background-image:url("/images/figure.png");
	background-repeat: no-repeat;
	background-position: top left;
	}

div.document {

	padding: 2em;

	width: 80%;

	margin-bottom: 2em;

	margin-left: auto;

	margin-right: auto;

	margin-top: 0em;

}

#left-shell{

	width: 50%;

	float:left;

	padding-bottom: 2em;

	padding-top: 2em;

	padding-left:2em;

	padding-right:2em;

}

#right-shell{

	width: 50%;

	float:right;

	padding-bottom: 2em;

	padding-top: 2em;

	padding-left:2em;

	padding-right:2em;

}

#footer{

	padding-left:2em;

	padding-right:2em;

}



}



/*

DESKTOP

This is the average viewing window. So Desktops, Laptops, and

in general anyone not viewing on a mobile device. Here's where

you can add resource intensive styles.

*/

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

	ul.cols {

    -moz-column-count: 4;

    -moz-column-gap: 20px;

    -webkit-column-count: 4;

    -webkit-column-gap: 20px;

    column-count: 4;

    column-gap: 20px;

} 

p.testi{

	font-size:1.5em;

}

h1 {

	font-size: 3em;

}



} 



/*

LARGE VIEWING SIZE

This is for the larger monitors and possibly full screen viewers.

*/

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

#header{

	padding-left:0em;

	padding-right:0em;

}
#sancri{
	width:25%
}	


#footer-text{

	width:100%;

	text-align:center;

}

.footer-element{

	text-align:center;

	padding-right:1em;

	padding-left:1em;

	display:inline;

}

} 



/*

RETINA (2x RESOLUTION DEVICES)

This applies to the retina iPhone (4s) and iPad (2,3) along with

other displays with a 2x resolution.

*/

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),

       only screen and (min--moz-device-pixel-ratio: 1.5),

       only screen and (min-device-pixel-ratio: 1.5) {





} 



/*

iPHONE 5 MEDIA QUERY

iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)

*/

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 



  

}



/*

PRINT STYLESHEET

*/

@media print {

  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */

  a, a:visited { text-decoration: underline; }

  a[href]:after { content: " (" attr(href) ")"; }

  abbr[title]:after { content: " (" attr(title) ")"; }

  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */

  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }

  thead { display: table-header-group; } /* h5bp.com/t */

  tr, img { page-break-inside: avoid; }

  img { max-width: 100% !important; }

  @page { margin: 0.5cm; }

  p, h2, h3 { orphans: 3; widows: 3; }

  h2, h3 { page-break-after: avoid; }

}