/*
Dark Blue #004a87 rgba(0,74,135,1)
Pink #e4457d rgba(228,69,125,1)

*/

@charset "utf-8";

@import url('reset.css');
@import url('clearfix.css');

/* Layout */

body {
	/* margin: 0 auto;
	max-width: 960px;  uncomment for boxed layout */
	
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	
	background:url(../images/patterns/squared_metal.png) #FFF;
	/* font-size:.8em;*/
	font-size:14px;
	line-height:20px;
}

header, #mainContent, #sliderContent, #topMenuContent, #bottomMenuContent, #footerContent, #mapContent{
	margin: 0 auto;
	max-width:960px; /* uncomment for extended layout */
}

#wrapper {
	/*background-image: url(../images/Pixel-Rulers.png);*/ /* Uncomment to show rulers works only with boxed layout*/
}

#headerWrapper {
	background: url(../images/headers/home_bg0.jpg) #FFF no-repeat center;
	position:relative;
}

#language{
	position:absolute;
	right: 0;
	background-color:rgba(153,153,153,.3);
	padding:10px 20px;
}

#whiteH{
	background-color:rgba(255,255,255,.25);
	width: 100%;
	height:220px;
	position:absolute;
	bottom:0;
	
}

header {
	height: 150px;
	position:relative;
	/*background: url(../images/overlays/hexagon.png)no-repeat center;*/
}

#whiteV{
	background-color:rgba(255,255,255,.8);
	width: 410px;
	height:100%;
	position:relative;
}


#logo {
	background:url(../images/creato-logo.png) no-repeat center center;
	height: 128px;
	width:100%;
	text-indent:-10000em;
	position:absolute;
	/* bottom:65px;*/
	bottom:10px
}



/*#logo {
	background:url(../images/creato-logo-3d-1.png) no-repeat center center;
	width:100%;
	height: 207px;
	text-indent:-10000em;
	position:absolute;
	bottom:40px;
}*/

/*
#cubes{
	background:url(../images/cubes.png) no-repeat center center;
	width:477px;
	height:265px;
	position:absolute;
	right:-20px;
	top:-25px;
	z-index:0;
}
*/

.slider-wrapper, #mapContent{
	background: url(../images/overlays/diagonal_interlace.png) no-repeat center center;
}

#sliderWrapper, #mapWrapper{
	background: url(../images/shadows/verticalShadow2.png) rgba(0,0,0,.1);
	padding-top:30px;
}

#mapWrapper iframe{
	padding-bottom:30px;
}

#mainContentWrapper {
	background:url(../images/shadows/verticalShadow1_min.png) repeat-x center -100px;
}

#mainContent {
	min-height: 420px;
	background: url(../images/shadows/shadow3_min.png) no-repeat center top;
}

#sidebar{
	background:url(../images/shadows/ShadowV2R_min.png) no-repeat top right;
	background-size:6px 420px;
	float: left;
	width:22%;
}


#sideMenuContent{
	/* background:rgba(256,256,256,.5) url(../images/overlays/interlace_splatter_min.png) no-repeat center top; */
	width:78%;
	float:right;
	min-height: 420px; /* Automatically the side bar grows to the same height */
}

#sideMenuContent article{
	padding:40px 2.0833%;
}

.mobileAppear{ /* clears div for desktop */
	display:none;
}


/* Equal-height Colums trick  */

#sidebar, #sideMenuContent{ /* colums */
	padding-bottom:1000em;
	margin-bottom:-1000em;
}

#sideMenuLayout{ /* column continer*/
	overflow:hidden;
}

/* End Equal-height Colums trick  */

#breadCrumb{
	background-color:rgba(0,0,0,.5);
	font-size: 10px;
	padding:5px 2.0833%;
	color:#FFF;
}

footer {
	min-height: 210px;
	/*background-color:#c50548;*/
	background-color:#777;
	background-image:url(../images/footer_bkgrnd.png);
}

#footerWrapper {
	background:url(../images/shadows/shadow3_min.png) no-repeat top center;
	
}


#bottomMenuWrapper, #topMenuWrapper{
	background:rgba(0,0,0,1);
}

#bottomMenuContent, #topMenuContent{
	color:#FFF;
	font-size:.8em;
}

#topMenuNav{
	float:left;
	position:relative;
	z-index:2;
}

#topMenuSocial{
	float:right;
	/* To place above the cubes */
	position:relative;
	z-index:2;
}

#bottomMenuNav{
	float:right;
}

#copyright{
	float:left;
}


/* Paragraph and Columns*/


.paragraphWrapper{
	/*background-color:rgba(0,0,0,.3);*/
	padding:40px 2.0833%;
}

.paragraphBottomMenuWrapper, .paragraphTopMenuWrapper{
	padding:7px 2.0833%;
}

.halfWidth, .thirdWidth, .twoThirdsWidth, .fourthWidth{
	/*background-color:rgba(0,0,0,.3);*/
	margin:0 2.0833% 20px 0;
	float:left;
	
	width:100%; /* Extends the full column width*/
}

.fullWidth{
	/*background-color:rgba(0,0,0,.3);*/
	margin:0 auto 20px 0;
}

/*.halfWidth{
	max-width:450px;
}*/

/*.thirdWidth{
	max-width:293px;
}*/

/*.twoThirdsWidth{
	max-width:606px;
}*/

/*.fourthWidth{
	max-width:215px;
}*/

.halfWidth:last-child, .thirdWidth:last-child, .fourthWidth:last-child, .twoThirdsWidth:last-child{
	margin:0 0 20px 0;
}

/*@media all and (max-width: 980px) and (min-width: 661px) {*/
@media all and (min-width: 661px) {
	.halfWidth{
		max-width:48.9130%;
	}
	.thirdWidth{
		max-width:31.8478%;
	}
	.twoThirdsWidth{
		max-width:65.8695%;
	}
	.fourthWidth{
		max-width:23.3695%;
	}	
}

@media all and (max-width: 660px) and (min-width: 50px) {
	.halfWidth, .thirdWidth, .fourthWidth, .twoThirdsWidth{
		max-width:100%;
		margin:0 0 20px 0;
	}
}

.indent{
	margin-left:60px;
}


/* Typography */

h1{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:35px;
	margin-bottom:20px;
	color:#e4457d;
	border-bottom:1px #004a87 solid;
	line-height: 47px;
	/* display: inline-block;*/ 
	/*padding-left:38px;*/
	
		
}

/*
h1:before {
	content: "\f0ad";
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
*/
	
	
	/*--adjust as necessary--*/
/*
	color: rgba(0,0,0,.5);
    font-size: 30px;
    position: absolute;
	margin-left:-34px;
	text-decoration: none;
	
}
*/

h2{
	 font-size:1.5em;
	/*margin-bottom:20px;
	margin-top:20px;
	padding-left:38px; */
	
	
	font-family: 'Open Sans Condensed', sans-serif;
	display:block;
	white-space:nowrap;
	color:#FFF;
	padding: 10px 20px;
	text-decoration:none;
	margin-bottom:10px;
}
h2:before {
	content: "\f0a9";
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
	
	
	/*--adjust as necessary--*/
	color: rgba(0,0,0,.5);
    font-size: 30px;
    position: absolute;
	margin-left:-34px;
	text-decoration: none;
	
}


h3, legend{
	font-size:1.6em;
	margin-bottom:20px;
}

h4, .org{
	font-size:1.4em;
	margin-bottom:10px;
}

h5{
	font-size:1.2em; 
	margin-bottom:15px;
	color:#FFF;

}

h6{
	font-size:1em; 
	margin-bottom:10px;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{
	text-decoration:none;
}



/* Navigation */
a:link{
	color:#666;
}

a:visited{
	color:#333;
}

a:hover{
	color:#900;
}

a:active{
	color:#FC0;
}

a:focus{
	color:#FC0;
}

p, ul{
	margin-bottom:20px;
}

strong{
	font-weight:bold;
}


#mainNav {
	position:absolute;
	bottom:0;
	right:0;
}

/* Main Nav */

#mainNav li{ /*Float has to be on the li*/
	float:left;
	position:relative;
	/*border-right:1px #CCC solid;*/
}

#mainNav a{
	color:#777;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:18px;
	text-transform:uppercase;
	display:block;/* to use padding */
	padding:15px;
	background-color:rgba(255,255,255,.9);
	text-decoration:none;
	border-bottom:rgba(255,255,255,.5) 4px solid;
}

#mainNav a:hover, #mainNav > li:hover > a{
	background-color:rgba(255,255,255,1);
	border-bottom:#e4457d 4px solid;
	color:#004a87;
}

#mainNav .current{
	color:#004a87;
	background-color:rgba(255,255,255,.7);
	border-bottom:rgba(255,255,255,.8) 4px solid;
}

#mainNav .subMenu{
	background-color:rgba(255,255,255,.6);
	position:absolute;
	left:-10000em; /*moves the sub */
	z-index:1000;
}

#mainNav .subMenu li{
	float:none;
}

#mainNav li:hover .subMenu{
	left:0;
}

#mainNav .subMenu a {
	text-transform: none;
	font-size:16px;
	border-bottom:none;
	white-space:nowrap; /* Avoids line Wrapping */
	background-color:rgba(225,225,225,.8);
	color:#555;
	padding: 8px 20px;
}

#mainNav .subMenu a:hover{
	background-color:rgba(204,204,204,.7);
	color:#000;
}

/* breadCrumb Nav */

#breadCrumb a{
	color:#CCC;
	text-decoration:none;
}

#breadCrumb a:hover{
	color:#FFF;
	/*text-decoration:underline;*/
}

#breadCrumb span{
	padding:0 5px 0 0;
}


/* Footer Nav */

#footerNav li {
	float:left;

}

#footerNav a{
	display:block;
	color:#AAA;
	text-decoration:none;
	padding-left:20px;
	margin-bottom:10px;
}

#footerNav a:before{
	content: "\f054";
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
	
	
	/*--adjust as necessary--*/
	color:#777;
	font-size:13px;
	margin-left:0px;
	text-decoration: none;
}

#footerNav a:hover{
	color:#FFF;
}


/* Secondary menus */


.secondaryMenu li{
	float:left;
	padding:0 10px;
	border-right:#777 1px solid;
}

.secondaryMenu li:last-child{
	border-right:none;
}

.secondaryMenu a{
	color:#CCC;
	text-decoration:none;
}

.secondaryMenu a:hover{
	color:#FFF;
}



.secondarySocialMenu li{
	float:left;
	padding:0 10px;
}


.secondarySocialMenu a{
	color:#CCC;
}

.secondarySocialMenu a:hover{
	color:#FFF;
}





/* ContentSubmenus */


#subNav .subMenu a {
	font-family: 'Open Sans Condensed', sans-serif;
	display:block;
	white-space:nowrap;
	color:#FFF;
	padding: 10px 20px;
	text-decoration:none;
}

#subNav .subMenu li:hover{
	background-color:rgba(0,0,0,.4);
}

#subNav .subMenu li{
	background-color:rgba(153,153,153,.6)
}


#subNav .subMenu .current{
	background-color:rgba(0,0,0,.4);
}

#subNav .subMenu .subMenu li{
	background:none;
}

#subNav .subMenu .subMenu a{
	color:#888;
	padding: 5px 0 5px 20px;
}

#subNav .subMenu .subMenu a:before {
	content: "\f0da";
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
	
	
	/*--adjust as necessary--*/
	color: rgba(0,0,0,.7);
    /*font-size: 30px;*/
    position: absolute;
	margin-left:-10px;
	
}

#subNav .subMenu .subMenu a:hover{
	color:#000;
	text-decoration:underline;
}

#subNav .subMenu .subMenu .current{
	background-color:rgba(153,153,153,.1);
	color:#000;
}


#subNav .subMenu .subMenu{
	padding-left:10px;
}

/* CTA Buttons */

.ctaButton, .ctaButton:link, .ctaButton:visited{
	-webkit-appearance: none;/* fixes the input button styling on iOs Devices */
	
	font-size:1em;
	
	color:#FFF;
	text-decoration: none;
	margin:10px;
	padding: 10px;
	display: inline-block;
	border:0;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
	box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
	background-color: #666;
	
}
.ctaButton:hover {
	background-color: #CCC;
	color: #000;
	
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.ctaButton:active, .ctaButton:focus, .ctaButton.current {
	background-color: #FFF;
	color: #000;
}

/* Lists */

.indent li{
	margin-left:60px;
}

/* Call Out, Quotes + Notification Boxes */

.callOutBox{
	padding:30px;
	margin:30px;
	background:rgba(204,204,204,.5);
	
	-webkit-border-radius: 4px;
	border-radius: 4px;
	
	-webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,.3);
	box-shadow: 0 0 7px 0 rgba(0,0,0,.3);
}


.quoteBox, .successBox, .warningBox, .errorBox{
    position: relative;
	
}

.quoteContent{
	padding-left:30px;
}

.quoteBox .quote{
	font-style:italic;
	padding-bottom:20px;
}

.quoteBox .name, .quoteBox .charge, .quoteBox .company{
	text-align:right;
}

.quoteBox .name{
	font-style:italic;
	font-weight:bold;
}

.quoteBox .company{
	font-style:italic;
}

 
.quoteBox:before {
    content: "\f10d"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #666;
    font-size: 25px;
    padding-right: 0.5em;
    position: absolute;
    top:25px;
    left:30px;
}

.notificationBox{
	padding:10px;
	margin:10px;
	
	-webkit-border-radius: 4px;
	border-radius: 4px;
	
	-webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,.3);
	box-shadow: 0 0 7px 0 rgba(0,0,0,.3);
}

.successContent, .warningContent, .errorContent{
	padding-left:30px;
}

.successBox{
	background-color:#060;
	color:#FFF;
}

.successBox:before {
    content: "\f058"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #FFF;
    font-size: 25px;
    padding-right: 0.5em;
    position: absolute;
    top:7px;
    left:10px;
}

.warningBox{
	background-color:#FC0;
	color:#000;
}

.warningBox:before {
    content: "\f06a"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 25px;
    padding-right: 0.5em;
    position: absolute;
    top:7px;
    left:10px;
}

.errorBox{
	background-color:#900;
	color:#FFF;
}

.errorBox:before {
    content: "\f057"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #FFF;
    font-size: 25px;
    padding-right: 0.5em;
    position: absolute;
    top:7px;
    left:10px;
}

.iconBox{
	padding:25px;
	background:rgba(255,255,255,1);
	
	text-align: center;
	
	-webkit-border-radius: 4px;
	border-radius: 4px;
	
	-webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,.3);
	box-shadow: 0 0 7px 0 rgba(0,0,0,.3);
}

/* Images & Frames */

.imageWrapper img{
    max-width:100% !important;
    height:auto;
    display:block;
	background:url(../images/loading.gif) no-repeat center center;
}

.imageWrapper{
	position: relative;
}

.lightbox-zoom, .lightbox-link {
	background:rgba(255,255,255,.6); /* update this color to change the "hover color" */
	position: absolute;
	width:100%;
	height:100%;
	
	display:none;

}

.lightbox-zoom:before {
	content: "\f002";
	/*content: "\f00e";*/
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
	
	
	/*--adjust as necessary--*/
	color: rgba(0,0,0,.6);
    font-size: 40px;
    position: absolute;
	top: 50%;
	left: 50%;
	margin-left:-15px;
	margin-top:-15px;
	text-decoration: none;
	
}

.lightbox-link:before {
	content: "\f0c1";
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
	
	
	/*--adjust as necessary--*/
	color: rgba(0,0,0,.6);
    font-size: 55px;
    position: absolute;
	top: 50%;
	left: 50%;
	margin-left:-25px;
	margin-top:-10px;
	text-decoration: none;
	
}


.imageWrapper a:hover .lightbox-zoom, .imageWrapper a:hover .lightbox-link{
	display:block;
}


.boxShadow1{
	background:url(../images/shadows/shadow1_min.png)bottom center no-repeat;
	background-size: 100% 30px;/*the plasement of this attribute matters!*/
	padding-bottom:30px;
}

.boxShadow2{
	background:url(../images/shadows/shadow2_min.png)bottom center no-repeat;
	background-size: 100% 30px;/*the plasement of this attribute matters!*/
	padding-bottom:30px;
}

.boxShadow3{
	background:url(../images/shadows/shadow3_min.png)bottom center no-repeat;
	background-size: 100% 30px;/*the plasement of this attribute matters!*/
	padding-bottom:30px;
}

.boxShadow4{
	background:url(../images/shadows/shadow4_min.png)bottom center no-repeat;
	background-size: 100% 30px;/*the plasement of this attribute matters!*/
	padding-bottom:30px;
}

.outlineBox img{
	/*outline: solid #FFF 5px;*/ /*Opera behaves wird */
	
	-webkit-box-shadow: 0 0 0 5px #FFF;
	box-shadow: 0 0 0 5px #FFF;
}


.vBoxShadow1L{
	background: url(../images/shadows/ShadowV1L_min.png) right center no-repeat;
	background-size:10px 100%;/*the plasement of this attribute matters!*/
	padding-right:30px;
}


.vBoxShadow1R{
	background: url(../images/shadows/ShadowV1R_min.png) left center no-repeat;
	background-size:10px 100%;/*the plasement of this attribute matters!*/
	padding-left:30px;
}

.vBoxShadow2L{
	background: url(../images/shadows/ShadowV2L_min.png) right center no-repeat;
	background-size:10px 100%;/*the plasement of this attribute matters!*/
	padding-right:30px;
}

.vBoxShadow2R{
	background: url(../images/shadows/ShadowV2R_min.png) left center no-repeat;
	background-size:10px 100%;/*the plasement of this attribute matters!*/
	padding-left:30px;
}

/* Horizontal Rules*/

hr{
	margin:50px auto;

}

hr.hrShadow1{
  height: 15px;
  background: url(../images/shadows/shadow1_min.png) no-repeat center;
  background-size: 100% 15px;/*the plasement of this attribute matters!*/
  border:0;
}

hr.hrShadow2{
  height: 15px;
  background: url(../images/shadows/shadow2_min.png) no-repeat center;
  background-size: 100% 15px;/*the plasement of this attribute matters!*/
  border:0;
}

hr.hrShadow3{
  height: 15px;
  background: url(../images/shadows/shadow3_min.png) no-repeat center;
  background-size: 100% 15px;/*the plasement of this attribute matters!*/
  border:0;
}


/* Arrows */

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	
	border-bottom: 5px solid black;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	
	border-top: 20px solid #f00;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
	
	border-left: 60px solid green;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	
	border-right:10px solid blue; 
}


/* Contact Styles */

fieldset{
}

fieldset label {
	display:block;
	margin-bottom:5px;
}

fieldset input, fieldset textarea {
	background: rgba(255,255,255,.8);
	border:#333 1px solid;
	margin-bottom:10px;
	width:95%;
	font-family: Arial, Helvetica, sans-serif;
	font-size:1em;
	padding:5px;
}

fieldset input{
	
}

fieldset textarea { resize:vertical; }

.contactInfo{
	font-size:.7em;
	color: #333;
}

.vcard .email, .vcard .adr, .vcard .tel{
	display:inline-block;
	margin-left:20px;
	text-decoration:none;
	margin-bottom: 20px;
}

.vcard .email:before{
	content: "\f0e0";
	font-family: FontAwesome;
}

.vcard .tel{
	font-weight:bold;
}


.vcard .tel:before{
	content: "\f095";
	font-family: FontAwesome;
	font-size:20px;
	font-weight:normal;
}


#newSocial{
	float:right;
}