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

/* RESET
--------------------------------------------------------------------------- */
/*body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote, ol, ul, li{margin:0; padding:0;}*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}
article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}
::-moz-selection { background: #0062c5; color:#fff; text-shadow: none; }
::selection { background:#0062c5; color:#fff; text-shadow: none; }
.first_table{	border-collapse:collapse;	border-spacing:0;}
fieldset,img{	border:0; }
ol, ul{list-style: none;}
address,caption,cite,code,dfn,var{	font-style:normal;	font-weight:normal;}
caption{	text-align:left;}
h1,h2,h3,h4,h5,h6{	font-size:100%;	font-weight:normal;}
q:before,q:after{	content:'';}
abbr,acronym{border:0;}
em, i{font-style: italic;}
strong{font-weight: bold;}
:focus{outline: 0;}
/* fallback placeholder */
.placeholder {
	color: #bbb;
}
/* webkit placeholder */
::-webkit-input-placeholder {
	color: #bbb;
}
/* moz placeholder */
:-moz-placeholder {
	color: #bbb;
}


/* GLOBALS
--------------------------------------------------------------------------- */
body {text-align:center; font-family: 'Open Sans', sans-serif; color:#4d4d4d;}
.wrapper{width:980px; margin:auto; text-align:left;}

#header{height:140px}
#logo{width:243px; height:94px; background-image:url(../images/logo.png); float:left; margin-top:17px; cursor:pointer;}
#content{}

/*nav
nav{float:right; margin-top:86px;}
nav li{float:left; padding:0 23px 0 23px; font-weight:600; font-size:17px;}
nav li:last-child {padding-right:0;}
nav li a {color:#808080;}
nav li a:hover{color:#f1a21e}
*/

/*footer*/
#footer{/*height:330px;*/ margin-top:100px; border-top:1px solid #455830; padding-top:30px; background:url(../images/logo_grey.png) 15px 30px no-repeat; color:#999;}
#footer .column{width:300px; border-left:1px solid #455830; padding-left:20px; font-size:12px; min-height:340px;}
#footer a{ color:#999}
#footer a:hover{ color:#777}
#footer .column li { background:url(../images/arrow_footer.gif) left 4px no-repeat; padding-left:20px;}
#footer .columnContainer{padding-left:329px; }
#footer .copyright {margin-top:30px; border-top:1px solid #455830; padding:20px 0 20px 0; text-align:center; font-size:12px;}


/*	NAV */
#nav{
	list-style:none;
	margin-top:84px;
	float:right;
	position:relative;
	z-index:1000;
	
}
#nav li{
	float:left;
	position:relative;
	font-weight:600;
}

#nav .highlight:hover{
	background:#fff; 
	box-shadow: 0 10px 10px rgba(66,99,115,0.2);
	-moz-box-shadow: 0 10px 10px rgba(66,99,115,0.2);
	-webkit-box-shadow: 0 10px 10px rgba(66,99,115,0.2);
}
#nav li:last-child{padding-right:0;}
#nav a{
	display:block;
	padding:4px 38px 4px 8px;
	color:#808080;
	text-decoration:none;
	
}
#nav a:hover{
	/*color:#fff;*/
	background:#fff;
	text-decoration:none;
}

/*--- DROPDOWN ---*/
#nav ul{
	background:#fff; 
	list-style:none;
	position:absolute;
	left:-9999px; 
	font-size:12px;
	box-shadow: 0 10px 10px rgba(66,99,115,0.2);
	-moz-box-shadow: 0 10px 10px rgba(66,99,115,0.2);
	-webkit-box-shadow: 0 10px 10px rgba(66,99,115,0.2);
}
#nav ul li{
	padding-top:1px; 
	float:none;
}
#nav ul a{
	white-space:nowrap; 
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
	background:#fff;
	padding:10px 0 10px 0;
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	text-decoration:none;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
	font-weight:normal;
}
/*#nav li:hover ul li:hover {background:#333;}*/
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background-color:#d0d0d0;
	background-image: linear-gradient(bottom, rgb(224,224,224) 0%, rgb(255,255,255) 15%, rgb(255,255,255) 85%, rgb(235,235,235) 100%);
	background-image: -o-linear-gradient(bottom, rgb(224,224,224) 0%, rgb(255,255,255) 15%, rgb(255,255,255) 85%, rgb(235,235,235) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(224,224,224) 0%, rgb(255,255,255) 15%, rgb(255,255,255) 85%, rgb(235,235,235) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(224,224,224) 0%, rgb(255,255,255) 15%, rgb(255,255,255) 85%, rgb(235,235,235) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(224,224,224) 0%, rgb(255,255,255) 15%, rgb(255,255,255) 85%, rgb(235,235,235) 100%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(224,224,224)),
		color-stop(0.15, rgb(255,255,255)),
		color-stop(0.85, rgb(255,255,255)),
		color-stop(1, rgb(235,235,235))
	);}



a { text-decoration:none;}


/* HOMEPAGE
--------------------------------------------------------------------------- */

/*Carousel*/
#carousel {}
#carouselItem0{width:890px; height:442px; background-image:url(../assets/Cerealcom-Home.png); padding:18px 45px 0 45px; position:relative}
#carouselItem1{width:890px; height:442px; background-image:url(../assets/Cerealcom-Performance.png); padding:18px 45px 0 45px; position:relative}
#carouselItem2{width:890px; height:442px; background-image:url(../assets/Cerealcom-Partnership.png); padding:18px 45px 0 45px; position:relative}
#carouselItem3{width:890px; height:442px; background-image:url(../assets/Cerealcom-Respect.png); padding:18px 45px 0 45px; position:relative}
.logosPartners{position:absolute; bottom:12px;}
.carouselItemTitle{ font-family: archer-medium-pro; font-size:71px; color:#fff; position:relative; left:-2px; line-height:75px; padding-top:6px; padding-bottom:10px;}
.carouselItemLead{color:#fff; font-size:12px; width:330px; margin-top:5px; font-weight:600; padding-bottom:10px; }
.titleCarouselSmall {font-family: archer-book-pro; font-size:26px; color:#455830}
.carouselNavi{ padding-top:10px;}
.carouselNaviItem1{padding:10px 0 10px 10px; border:1px solid #455830; border-top:none; width:318px; background:url(../images/arrow_green.png) right bottom no-repeat; line-height:25px;}
.carouselNaviItem2{padding:10px 0 10px 10px; border-bottom:1px solid #455830; width:310px; background:url(../images/arrow_green.png) right bottom no-repeat; line-height:25px;}
.carouselNaviItem3{padding:10px 0 10px 10px; border:1px solid #455830; border-top:none; width:318px; background:url(../images/arrow_green.png) right bottom no-repeat; line-height:25px;}
.carouselNavi .active{ background-image:url(../images/arrow_orange.png)!important}
.btnMore{ display:inline-block; padding:1px 10px 3px 10px; background-color:#f3a31f; color:#fff; margin-top:10px; font-family: archer-book-pro; font-size:20px; }

/*Main story*/
.mainStory {margin-top:30px;}
.mainStoryTitle {font-family: archer-medium-pro; font-size:38px; line-height:40px; width:650px;}
.mainStoryLead { font-size:14px; margin-top:10px; width:650px;}


/* INTERNAL PAGES
--------------------------------------------------------------------------- */

/*grid*/
.column225 {width:225px;}
.column490 {width:490px;}
.column235 {width:235px;}
.column735 {width:735px;}

.titleSmall {font-family: archer-book-pro; font-size:26px; color:#11532d}
.titleXSmall {font-family: archer-medium-pro; font-size:17px; color:#455830}

.sectionTitle{height:126px; border-bottom:3px solid #455830; display:table-cell; vertical-align:bottom; width:225px; padding-bottom:21px; font-family: archer-medium-pro; font-size:35px; color:#11532d; line-height:40px;}
.articleTitle{font-family: archer-medium-pro; font-size:30px; line-height:35px;}
.sideMenu {border-bottom:3px solid #455830; padding-bottom:21px;}
.sideMenu li {padding:5px 0 5px 0;}
.sideMenu a {color:#666666;}
.print {background:url(../images/ico_print.gif) 150px center no-repeat; display:block; border-bottom:1px solid #455830; padding: 10px 30px 10px 0; color:#455830;}
.pullLeftPicture{position:absolute; left:-245px; top:0;}
.pullRightPicture{position:absolute; right:-245px; top:0;}



/*news*/
.newsHeader {padding-bottom:40px; border-bottom:3px solid #11532d}
.articleListItem{ padding-bottom:35px; border-bottom:1px solid #455830; padding-top:10px;}
.articleListItem .thumb{float:left; margin-right:20px;}
.articleListItem .copy{ float:left; width:735px;}
.articleTitle2{font-family: archer-book-pro; font-size:40px; line-height:46px; color:#11532d}
.sectionTitle2{width:225px; font-family: archer-medium-pro; font-size:35px; color:#11532d; line-height:40px;}

/* TYPOGRAPHY & SPACING
--------------------------------------------------------------------------- */

/*custom fonts*/
@font-face {
    font-family: 'archer-medium-pro';
    src: url('../fonts/archer-medium-pro.eot'),
		 url('../fonts/archer-medium-pro.eot?#iefix') format('embedded-opentype'),
         url('../fonts/archer-medium-pro.woff') format('woff'),
         url('../fonts/archer-medium-pro.ttf') format('truetype'),
         url('../fonts/archer-medium-pro.svg') format('svg');
}
@font-face {
    font-family: 'archer-book-pro';
    src: url('../fonts/archer-book-pro.eot'),
		 url('../fonts/archer-book-pro.eot?#iefix') format('embedded-opentype'),
         url('../fonts/archer-book-pro.woff') format('woff'),
         url('../fonts/archer-book-pro.ttf') format('truetype'),
         url('../fonts/archer-book-pro.svg') format('svg');
}



.fontArcherMedium{ font-family:archer-medium-pro}
.fontArcherBook{ font-family:archer-book-pro}

.alternateColor1{color:#f1a21e!important}
.alternateColor2{color:#11532d}
.alternatColor3{color:#11532d}

.marginR10{margin-right:10px;}
.marginR20{margin-right:20px;}
.marginR30{margin-right:30px;}
.marginT05{margin-top:5px;}
.marginT10{margin-top:10px;}
.marginT20{margin-top:20px;}
.marginT25{margin-top:25px;}
.marginT30{margin-top:30px;}
.marginT40{margin-top:30px;}

.textNormal {font-size:12px;}

/*Lists*/
.listType1 { list-style:disc; padding-left:40px;}
.listType1 li{margin-top:10px;}

.listType2 { list-style:none; padding-left:40px;}
.listType2 li{margin-top:10px;}

/*miscellaneous
--------------------------------------------------------------------------- */
.clearfix:after{content: "."; display: block; height: 0;  clear: both; visibility: hidden;}
* html .clearfix{height: 1%;} /* Hides from IE-mac */
.clearfix{zoom:1;}  /*end tweak for ie7 */

.left{float:left}
.right{float:right}