/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2; 
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope .width2{
	    position:relative; overflow:hidden; 
	
}
.isotope h1.wysiwyg_h1,.isotope h2.wysiwyg_h2,.isotope h3.wysiwyg_h3{
	padding:0; margin:0; color:#9c1006
	   	
}

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
	

}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
		  
		  
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}
.isotopeBorder{
	
	 display:block; 

}
.isotopeBorder img{
width:100%; display:block; margin-bottom:1%

}
.s_mainWrapper .isotopeBorder{}
.m_mainWrapper .isotopeBorder{}
.l_mainWrapper .isotopeBorder{}
.x_mainWrapper .isotopeBorder{}
.xx_mainWrapper .isotopeBorder{}
.isotopHeadline{
	
    color: #000;
    font-size: 92px;
	font-family: 'Arvo';
	font-weight:700;
    margin: 0;
    padding: 40px 0 0 20px; line-height:99px
}
/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


/**** Base styles ****/


/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */


#container {
 
  padding: 0px 0px 0px 0px;
  margin-bottom: 0px;
}

.element {
  width: 110px;
  height: 110px;
  margin: 5px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #888;
  color: #222;
  -webkit-border-top-right-radius: 1.2em;
      -moz-border-radius-topright: 1.2em;
          border-top-right-radius: 1.2em;
}

.element.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.element.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.element.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.element.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
.element.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.element.other.nonmetal  { background: #00F; background: hsl( 252, 100%, 50%); }
.element.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.element.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }


.element * {
  position: absolute;
  margin: 0;
}

.element .symbol {
  left: 0.2em;
  top: 0.4em;
  font-size: 3.8em;
  line-height: 1.0em;
  color: #FFF;
}
.element.large .symbol {
  font-size: 4.5em;
}

.element.fake .symbol {
  color: #000;
}

.element .name {
  left: 0.5em;
  bottom: 1.6em;
  font-size: 1.05em;
}

.element .weight {
  font-size: 0.9em;
  left: 0.5em;
  bottom: 0.5em;
}

.element .number {
  font-size: 1.25em;
  font-weight: bold;
  color: hsla(0,0%,0%,.5);
  right: 0.5em;
  top: 0.5em;
}

.variable-sizes .element.width2 { width: 230px; }

.variable-sizes .element.height2 { height: 230px; }

.variable-sizes .element.width2.height2 {
  font-size: 2.0em;
}

.element.large,
.variable-sizes .element.large,
.variable-sizes .element.large.width2.height2 {
  font-size: 3.0em;
  width: 350px;
  height: 350px;
  z-index: 100;
}

.clickable .element:hover {
  cursor: pointer;
}

.clickable .element:hover h3 {
  text-shadow:
    0 0 10px white,
    0 0 10px white
  ;
}

.clickable .element:hover h2 {
  color: white;
}

/**** Example Options ****/

#options {
  padding-bottom: 1.0em;
}

#options h3 {
  margin-bottom: 0.2em;
  font-size: 15px;
}

#options h4 { 
  font-weight: bold;
}

#options ul {
  margin: 0;
  list-style: none;
}

#options ul ul {
  margin-left: 1.5em;
}

#options li {
  float: left;
  margin-bottom: 0.2em;
}

#options li a {
  display: block;
  padding: 0.4em 0.5em;
  background-color: #DDD;
  color: #222;
  font-weight: bold;
  text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
  background-image: -webkit-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
  background-image:    -moz-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
  background-image:     -ms-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
  background-image:      -o-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
  background-image:         linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
}

#options li a:hover {
  background-color: #5BF;
}

#options li a:active {
  background-color: #39D;
  -webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
     -moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
       -o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
          box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
}

#options li a {
  border-left:  1px solid hsla( 0, 0%, 100%, 0.3 );
  border-right: 1px solid hsla( 0, 0%,   0%, 0.2 );
}

#options li:first-child a {
  border-radius: 7px 0 0 7px;
  border-left: none;
}

#options li:last-child a {
  border-radius: 0 7px 7px 0;
}

#options li a.selected {
  background-color: #13F;
  text-shadow: none;
  color: white;
}

/* Combination filter options*/

.option-combo {
  display: block; width:100%;
  float: left;
  margin-right: 0px;
}

#options .option-combo ul {
  margin-right: 20px;
  display: inline-block;
}

#options .option-combo h2,
#options .option-combo h4 {
  line-height: 34px;
  margin-bottom: 0;
  margin-right: 5px;
  display: inline-block;
  vertical-align: top;
}

/* Color shapes */

/**** Horizontal ****/

.horizontal #container {
  height: 80%;
}

#copy {
  max-width: 640px;
}

/**** Photo demo ****/

.photos .photo {
  width: 320px;
  margin: 5px;
  float: left;
}

.photos .photo img {
  display: block;
  width: 100%;
}

.demos #content {
  margin-left: 0px;
}

.demos #content {
  height: 100%;
}

/**** Docs ****/

.docs #content {
  max-width: 640px;
}

.docs #content a:hover {
  border-bottom: 1px dotted;
}

/**** Doc page nav ****/



#site-nav {
  width: 200px;
  position: absolute;
  left: 10px;
  top: 0px;
  padding-top: 20px;
  font-size: 12px;
}

#site-nav h1 {
  font-size: 24px;
  margin-bottom: 0.5em;
  margin-top: 0;
  font-weight: bold;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

#site-nav h2 {
  font-size: 17px;
  font-weight: normal;
  margin: 0 0 0.3em;
  border-top: none;
}

#site-nav h1 a { color: #4FB; }
#site-nav h1 a:hover { color: #4BF; }

#site-nav ul {
  list-style: none;
  margin: 0 0 1.0em;
  font-weight: bold;
}

#site-nav ul ul { margin-bottom: 0; }

#site-nav ul a {
  display: block;
  border: none;
  padding: 1px 5px;
}

#site-nav ul .current a {
  background: hsla( 0, 0%, 0%, 0.3 );
  color: #1BF;
}
#site-nav ul a:hover,
#site-nav ul .current a:hover { color: white; }
  
#site-nav ul .current .toc a {
  font-size: 12px;
  padding-left: 1.2em;
  font-weight: normal;
}

/**** Doc content ****/

.docs #content h2 {
  border-top: 1px solid #333;
  padding-top: 0.8em;
  margin-bottom: 0.8em;
}

.docs #content h2:target { 
  padding: 10px;
  background: white;
  color: #222;
}

.docs #content h3 {
  color: #FEC;
  background: hsla( 0, 0%, 75%, 0.05 );
  padding: 2px 0.5em;
  margin-bottom: 0.5em;
  font-size: 1.15em;
}

.docs #content h4 {
  margin-bottom: 0.5em;
  font-size: 14px;
}


footer {
  font-size: 12px;
  font-style: italic;
  border-top: 1px solid #333;
  padding: 0.8em 0;
}

pre {
  padding: 10px;
}

pre, code {
  background: black;
  color: white;
  font-family: 'Monaco', monospace, sans-serif;
}

#content code {
  font-size: 12px;
}

#content pre {
  line-height: 1.6em;
}

h3#options {
  padding-bottom: 0;
}

.option-def dl dt,
.option-def dl dd {
  float: left;
  padding: 0 1.2em;;
  background: #161616;
  line-height: 36px;
  height: 36px;
}

.option-def dl.header dt,
.option-def dl.header dd {
  background: #444;
}

.option-def dl .option-type {
  font-size: 13px;
  color: #AAA;
  font-style: italic;
}

.option-def dl dd {
  border-left: 1px solid #222;
}

/* Tagline */

.docs .tagline {
  font-size: 22px;
  font-weight: 300;
}

/* as-is from MIT */

.docs .as-is {
  font-size: 95%;
}

/* Commercial license blurb */

.docs #commercial {
  background: white;
  padding: 10px;
  font-size: 14px;
  color: #1F1F1D;
}

.docs #commercial a { font-weight: bold;}

/**** Pygments ****/

code .s1,
code .s { color: #78BD55; } /* string */
code .mi, /* integer */
code .cp, /* doctype */
code .kc { color: #5298D4; } /*boolean*/
code .k { color: #E39B79; } /* keyword */
code .kd, /* storage */
code .na { color: #A9D866; } /* markup attribute */
code .p  { color: #EDB; } /* punctuation */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */

/* comment */
code .c,
code .c1 { color: #666; font-style: italic; }

code .nt { color: #A0C8FC; } /* Markup open tag */

code .nf { color: #9EA8B8; } /* css id */
code .nc { color: #A78352; }  /* CSS class */
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */



/**** Box ****/


div.isotope-content {
	margin-bottom:0px

     
}

div.isotope-content .isotope_image {

    height: 172px; width:100%; 
	background-color:#366; padding:5px;
    cursor: pointer; 
    display:block;


}
div.isotope-content .isotope_text {
    top:0px;
    left:0px;
    display: table;cursor: pointer; 
    position:absolute;font-family: 'Ubuntu'; font-weight:700; font-size: 13px; color:#9c1006;
    text-align: center;
    background: transparent url("teaser-slide.png") repeat left top;
}
div.isotope-content .isotope_text div {
    display:table-cell;
    vertical-align:middle;
}
div.isotope-content .teaserBox {
    float: left;
    width: 300px;
    position:relative;
    margin: 0 15px 15px 0;
}
div.isotope-content .isotope_text div span {
    display: inline-block;  text-align:center;margin:0 auto; 
font-family: 'Ubuntu'; font-weight:700;
    text-align: center;
    padding: 5px 10px;
    border: solid 0px #fff;
    color: #fff;
    font-size: 22px;
}
.filter  {
	list-style:none; padding:0px 0 0 0px  ; margin:0; border:0; width:100%; display:block;   overflow:hidden; text-align:center; padding-bottom:15px
	
}
.filter li {
	list-style:none; padding:0; margin:0 4px 0 0 ; border:0; float:left
	
}
.filter a,.filter button{
    border-radius: 50px;
	display: inline-block;
	 border:3px solid #9c1006;
	color:#9c1006;
    font-size:18px;
	padding: 5px 10px;
    margin-bottom:5px;
    font-family: "Ubuntu", Times, serif;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
    .filter a:hover,.filter button:hover{

	border-color:#000;
	color:#000;

	
}
.galleryBox{
	width:100%;
	height:100%;
background: url(bg.png) ;
	position: fixed;
	z-index:100000000; overflow:auto;
	left:0; 
	top:0
	
	
}




/*  Gallery */



.myGaleryOuter{
	height:100%; margin:0 auto; position:relative; border:0px solid green;
}

.prefix14 .galeryInner{
	
	
}
.xx_mainWrapper .galeryInner{
    float:left; 	width:100%;  border:0px solid red;   position: absolute; top:50% ;
    min-height:600px; display:block;margin-top:-300px;
}
.x_mainWrapper .galeryInner{
	float:left; 	width:100%;  border:0px solid red;  background: url(bg.png) #fff; position: absolute; top:50% ;
	min-height:600px; display:block;margin-top:-300px; 
}
.l_mainWrapper .galeryInner{

}
.m_mainWrapper .galeryInner {

}
.s_mainWrapper .galeryInner{

}
.prefix14 .galery_images{
	 float:left; width:273px; border:0px solid; margin-right:0px; margin-top:0px; margin-bottom:0px	
}
.prefix14 .galery_image{
	 float:left; width:273px; height:274px; border:0px solid #96ba6f; margin:2px 4px 4px 0px; background-position:top center; background-repeat:no-repeat; overflow:hidden
}
.prefix14 .galery_image a{
	 float:left; width:273px; height:274px; display:block
}
.prefix14 .galery_pictureDescription{
	float:left; width:115px; border:0px solid; margin-bottom:7px
}
.prefix14 .galery_validationError{
	color:red; font-weight:bold; text-align:left; width:100%; font-size:12px; padding-top:10px; float:left; padding-left:160px
}

.prefix14 .galery_content{
 
	width:100%;
	
	padding: 0 ;
	float:left;
	color:#3d3d3d; 
}
.galleryBoxHeadline{
	width:330px;
	height:50px;
	position:absolute;
	top:440px;
	left:20px; color: #000;font-size:14px
}
.galleryBoxText{
	
	display:block;
	overflow:auto;
	float:left; color: #000;font-size:14px; padding-right:10px; padding-left:10px; padding-bottom:25px; text-align:center;  width:100%; box-sizing: border-box;
}
/*
.xx_mainWrapper .galleryBoxText{
    height:140px;
}
.x_mainWrapper .galleryBoxText{
	 height:140px;
}*/
.galleryBoxText p{
	font-size:14px; margin:0; padding:0;font-family: 'Ubuntu'; font-weight:300;
}
.prefix14 .galery_Headline{
	color:#fff;
	font-size:60px;
	text-transform:uppercase;
	
}
.galleryBoxText strong, .galleryBoxHeadline strong{
	display:block; font-family: 'Ubuntu'; font-weight:700; font-size:24px; margin: 0 0 5px 0
}

/* Galleriffic */

div.content {
	/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
	display: none;
	float: left;
	width: 100%;  
}
div.content a, div.navigation a {
	text-decoration: none;
	color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
	text-decoration: underline;
}
div.controls {
	margin-top: 0px;
	height: 39px;
	position:absolute;
	top:0; right:0; z-index:1000000
}
div.controls a {
	padding:0px;
}
div.ss-controls {
	float: left;
}
div.nav-controls {
	float: right;
}
div.nav-controls .prev{
	float: left;background-image: url('arrow_left_big2.png'); display:block; width:39px; height:39px
}
div.nav-controls .next{
	float: right;background-image: url('arrow_right_big2.png');display:block; width:39px; height:39px
}

.galleryBoxClose{
	background-image: url('close.png');display:block; width:39px; height:39px; position:absolute; left:0px; top:0px; z-index:1000000; cursor: pointer;
}
.galleryBoxClose:hover{
	background-position:0 -39px
	
}
div.nav-controls .prev:hover{
	background-position: 0 -39px
}
div.nav-controls .next:hover{
	background-position: 0 -39px
}
div.slideshow-container {
	position: relative;
	clear: both;
	height: 420px; /* This should be set to be at least the height of the largest image in the slideshow */
}
.xx_mainWrapper div.slideshow-container{
    height: 511px; /* This should be set to be at least the height of the largest image in the slideshow */
}
.x_mainWrapper div.slideshow-container{
	height: 409px; /* This should be set to be at least the height of the largest image in the slideshow */
}
.l_mainWrapper div.slideshow-container{
	height: 307px; /* This should be set to be at least the height of the largest image in the slideshow */
}
.m_mainWrapper div.slideshow-container {
	height: 192px; /* This should be set to be at least the height of the largest image in the slideshow */
}
.s_mainWrapper div.slideshow-container{
	height: 128px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 420px; /* This should be set to be at least the height of the largest image in the slideshow */
}
.xx_mainWrapper .slideshow .advance-link img {
    width:1280px;
    height:511px;
    float: left
}
.x_mainWrapper .slideshow .advance-link img {
	width:1024px;
	height:409px;
	float: left
}
.l_mainWrapper .slideshow .advance-link img {
	width:768px;
	height:307px;; padding:0; margin:0;
	float: left
}
.m_mainWrapper .slideshow .advance-link img {
	width:480px;
	height:192px;
	float: left
}
.s_mainWrapper .slideshow .advance-link img {
	width:320px;
	height:128px;
	float: left
}
div.slideshow span.image-wrapper {
	display: block; 
	position: absolute;
	top: 0;
	left: 0;
}
div.slideshow a.advance-link {
	display: block;
	width: 100%;
	line-height: 0px; /* This should be set to be at least the height of the largest image in the slideshow */
	text-align: center; overflow:hidden; border:0px solid red; padding:0; margin:0
}
.xx_mainWrapper div.slideshow a.advance-link {
    height: 511px; /* This should be set to be at least the height of the largest image in the slideshow */
}
.x_mainWrapper div.slideshow a.advance-link {
	height: 409px; /* This should be set to be at least the height of the largest image in the slideshow */
}
.l_mainWrapper div.slideshow a.advance-link {
	height: 307px; /* This should be set to be at least the height of the largest image in the slideshow */
}
.m_mainWrapper div.slideshow a.advance-link {
	height: 192px; /* This should be set to be at least the height of the largest image in the slideshow */
}
.s_mainWrapper div.slideshow a.advance-link {
	height: 128px; /* This should be set to be at least the height of the largest image in the slideshow */
}

div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
	text-decoration: none;
}
div.slideshow img {

	border: 0px solid #ccc;display:block; position:absolute; top:0px 
}
div.download {
	float: right;
}
div.caption-container {
	position: relative;
	clear: left;
	height: 75px;
}
span.image-caption {
	display: block;
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}
div.caption {
	padding: 12px;
}
div.image-title {
	font-weight: bold;
	font-size: 1.4em;
}
div.image-desc {
	line-height: 1.3em;
	padding-top: 12px;
}
div.navigation {
	/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
	
	
}
ul.thumbs {
	clear: both;
	margin: 0;
	padding: 0;
}
ul.thumbs li {
	float: left;
	padding: 0;
	margin: 5px 0px 5px 5px;
	list-style: none;float: left
}
.thumb {
	padding: 0px;
	display: block;
	border: 5px solid transparent; height: 42px; overflow:hidden
}
ul.thumbs li.selected a.thumb {
	background: #000;border: 5px solid #fff;
}
ul.thumbs li.selected .videoplay {
	display:block; border:0px solid red; background-color:#03F; width:980px; height:420px; position:absolute; left:0px; top:0px; ; 
}
ul.thumbs li .videoplay {
	display: none;
}
a.thumb:focus {
	outline: none;
}
ul.thumbs img {
	border: none; border:0;
	display: block;
}
div.pagination {
	clear: both; position:relative
}
div.navigation div.top {

}
div.navigation div.bottom {
	margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
	display: block;
	float: left;
	margin-right: 2px; width:29px; height:29px;
	padding: 0; position:absolute;
	border: 0;
}
.myNext {
  background: url('arrow_right.png'); right: -36px; top:17px

}
.myPrev {
background: url('arrow_left.png'); left:-29px;	 top:17px

}
.myNext:hover {
 background-position: 0 -29px

}
.myPrev:hover  {
	background-position: 0 -29px

}

div.pagination a:hover {
	background-color: #eee;
	text-decoration: none;
}
div.pagination span.current {
	font-weight: bold;
	background-color: #000;
	border-color: #000;
	color: #fff;
}
div.pagination span.ellipsis {
	border: none;
	padding: 5px 0 3px 2px;
}