/* CSS Document */

body { width: 100%; margin: 0; padding: 0; background: #2b456c url('/images/background.jpg') top center repeat-x; color: #fff; }
#top { width: 100%; float: left; margin: 10px 0; position: relative;  }
#social { text-align: center; margin: 0 auto; width: 338px; padding: 10px 10px; overflow: hidden; }
.sociallink a { margin: 0 10px; -webkit-transition: background-image 0.2s ease-in-out; transition: background-image 0.2s ease-in-out; cursor:pointer; }
.sociallink a:hover { -webkit-transition: background-image 0.2s ease-in-out; transition: background-image 0.2s ease-in-out; }
.twitter { float: left; display: block; width: 86px; height: 50px; background: transparent url('/images/social_twitter.png') top center no-repeat; background-size: contain; }
.mail { float: left; display: block; width: 86px; height: 50px; background: url('/images/social_mail.png') top center no-repeat; background-size: contain; }
.linkedin { float: left; display: block; width: 86px; height: 50px; background: url('/images/social_linkedin.png') top center no-repeat; background-size: contain; }
.twitter:hover { background-image: url('/images/social_twitter_hover.png');}
.mail:hover { background-image: url('/images/social_mail_hover.png'); }
.linkedin:hover { background-image: url('/images/social_linkedin_hover.png'); }
.slick-slide { text-align: center; vertical-align: middle; color: #2b456c;  }
.slick-main { margin-top: 20px; clear: left; }
.slick-main img { width: 100%; }
.slick-main h1 { height: 100px; }
.slick-nav { margin: 0; }
.slick-main, .slick-nav { margin-right: 25px; margin-left: 25px; }
.slick-nav .slick-slide { background: #fff; margin: 0; padding: 0; }

/* Grid */
section { width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; }
.clear { clear: both; }
.gridcontainer { width: 1000px; padding: 0px 0px; margin: 0 auto; overflow: hidden; }
.full-only {  }
.responsive-only { display: none; }
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { margin: 0; float: left; }
.span1  { width: 4.33%;  	padding: 10px 2%; }
.span2  { width: 12.66%; 	padding: 10px 2%; }
.span3  { width: 21%; 	 	padding: 10px 2%; }
.span4  { width: 29.33%; 	padding: 10px 2%; }
.span5  { width: 37.66%; 	padding: 10px 2%; }
.span6  { width: 46%; 	 	padding: 10px 2%; }
.span7  { width: 54.33%; 	padding: 10px 2%; }
.span8  { width: 62.66%; 	padding: 10px 2%; }
.span9  { width: 71%; 	 	padding: 10px 2%; }
.span10 { width: 79.33%; 	padding: 10px 2%; }
.span11 { width: 87.66%; 	padding: 10px 2%; }
.span12 { width: 96%; 	 	padding: 10px 2%; }
.span100 { width: 100%;	padding: 0; } /* 100% width, no padding. For holding other spans */

.span1 img, .span2 img, .span3 img, .span4 img, .span5 img, .span6 img { width: 100%; max-width: 100%; }

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

	
} /* END > 1000 */

@media screen and (max-width: 1000px) {
	.gridcontainer { width: 100%; padding: 0px 0px; }
	.full-only { display: none; }
	.responsive-only { display: block; }
	
	.span1  { width: 21%; }
	.span2  { width: 21%; }
	.span3  { width: 46%; }
	.span4  { width: 46%; }
	.span5  { width: 46%; }
	.span6  { width: 46%; }			
	.span7  { width: 96%; }
	.span8  { width: 96%; }
	.span9  { width: 96%; }
	.span10 { width: 96%; }
	.span11 { width: 96%; }
	.span12 { width: 96%; }	
	
	.slick-main, .slick-nav { margin-right: 0px; margin-left: 0px; }
	
 	
} /* END 1000 */

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

@media screen and (max-width: 751px) {
	.span6  { width: 96%; }

	.hide750 { display: none; }
	
	#social { margin: 0; width: 100%; padding: 10px 0;  }
	.sociallink a, .twitter, .mail, .linkedin { width: 33.3%; padding: 0; margin: 0; height: 150px }
}


@media screen and (max-width: 650px) {
	.span1  { width: 46%; }
	.span2  { width: 46%; }
	.span3  {  }
	.span4  { width: 96%; }
	.span5  { width: 96%; }
	.span6  { width: 96%; }
	.span7  {  }
	.span8  {  }
	.span9  {  }
	.span10 {  }
	.span11 {  }
	.span12 {  }

	
} /* END 650 */

@media screen and (max-width: 480px) {
	.span1  { width: 96%; padding: 10px 2%; margin: 0; }
	.span2  { width: 96%; padding: 10px 2%; margin: 0; }
	.span3  { width: 96%; padding: 10px 2%; margin: 0; }
	.span4  {  }
	.span5  {  }
	.span6  {  }
	.span7  {  }
	.span8  {  }
	.span9  {  }
	.span10 {  }
	.span11 {  }
	.span12 {  }

	
} /* END 480 */

@media screen and (max-width: 320px) {
	
} /* END 320 */