body {
background: #c8c8c8;
}

.content { -webkit-animation:fadein 1s; animation:fadein 1s }
@-webkit-keyframes fadein { from {opacity:0} to {opacity:1} }
@keyframes fadein { from {opacity:0} to {opacity:1} }

.header {
background: url('../images/header.jpg') no-repeat;
background-size:cover;
position: relative;
}
.header > img{
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}
.header > div{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.box {
margin-top:30px;
margin-bottom:20px;
border: 5px solid white;
    width:100%;
    height:100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cccccc+0,e5e5e5+21,eff1f2+49,e5e5e5+78,cccccc+100 */
background: #cccccc; /* Old browsers */
background: -moz-linear-gradient(left,  #cccccc 0%, #e5e5e5 21%, #eff1f2 49%, #e5e5e5 78%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cccccc), color-stop(21%,#e5e5e5), color-stop(49%,#eff1f2), color-stop(78%,#e5e5e5), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #cccccc 0%,#e5e5e5 21%,#eff1f2 49%,#e5e5e5 78%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #cccccc 0%,#e5e5e5 21%,#eff1f2 49%,#e5e5e5 78%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #cccccc 0%,#e5e5e5 21%,#eff1f2 49%,#e5e5e5 78%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to right,  #cccccc 0%,#e5e5e5 21%,#eff1f2 49%,#e5e5e5 78%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */
}

.corner-image {
		position: absolute;
		bottom: -15px;
		right:-15px;
}

@media (max-width: 790px) {
.corner-image {
width:60px;
bottom:-10px;
right: -10px;
}
}

.title-banner {
display:block;
margin-left:auto;
margin-right:auto;
width:200px;
height:65px;
margin-top:-33px;
}

@media (max-width: 790px) {
  .title-banner { display: none; }
  .title {margin-top: 0};
}

.title {
text-align: center;
display:block;
margin-left:auto;
margin-right:auto;
margin-top: -58px;
text-shadow: 0 1px 1px #fff; 
}

@media (max-width: 550px) {
  .title-banner { display: none; }
  .title {margin-top: 0};
}

.about {
position:absolute;
top: 14px;
left:0px;
text-shadow: 0 1px 1px #fff; 
}
.ribbon-about {
height:79px;
width:200px;
position:absolute;
top: 6px;
left:-52px;
}

.about-us {
float:left; 
margin-right:20px;
margin-bottom:20px;
border-top: #777 3px solid;
border-right: #eee 3px solid; 
border-bottom: #eee 3px solid;
border-left: #777 3px solid;
}

.about-us {
float:left; 
margin-right:20px;
margin-bottom:0;
}

.fem-img {
position:relative;
float:left;
margin-top:-30px;
padding: 0 10px 10px 10px;
}

.tab-img {
width:45%;
float:left;
padding: 10px;
}

.fem {

}

.male {
margin-top:100px;
}

@media (max-width: 690px) {
.male {
margin-top:0px;
}
}

.shows li {
font-size:15px;
margin-bottom: 0;
margin-left:0  }
  
.shows li:hover {
  font-weight:500 }  

.shows{
  list-style: none; }
  
.shows i {
color: #00bff3;
}

.psy {
font-size:16px;
}

.inner {
padding:15px 55px 0 35px;
}

.inner1{
padding:15px 15px 15px 15px;
}

.more {
text-decoration: none;
text-align:right;
padding-top:20px!important;
text-shadow: 0 1px 1px #fff; 
position:absolute;
bottom:0;
right:10px;
}

.more span {
color: #696969;
}

.more:hover span {
color: #2a2b2b;
}


.footer {
background-image: url('../images/footer.png');
background-repeat:no-repeat;
background-size:100% auto;
width:100%;
height:200px;
margin-bottom:20px;
}

@media (max-width: 550px) {
  .footer { display: none; }
}

.footer-logo {
float:right;
padding:15% 15% 0 0;
}
.footer-logo-ppr {
float:left;
padding:190% 0 0 0;
margin-left:-20px
}

.footer-logo-org {
float:right;
width:55%;
padding:20% 10px 0 15px;
display:inline-block;
margin-right:-40px;
}

.line {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	display:none;
}
@media (max-width: 550px) {
  .line { display: block; }
}

      #map {
        width: 100%;
        height: 440px;
		margin-top:32px;
border-top: 1px solid #999b9c;
border-left: 1px solid #999b9c;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
      }
	  
.retired {
width:150px;
position:absolute;
left:-23px;
bottom:-17px;
}

.retired2 {
width:150px;
position:absolute;
right:-20px;
bottom:-20px;
display:none
}

@media (max-width: 850px) {
.retired {
display:none
}

.retired2 {
display:block
}
}

.zap {
width:100%;
}

.dob {
padding-top:20px;
text-align: center;
}

.dob i{
color: #00bff3;
background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;

    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

.tab {
min-height:290px;
position:relative;
}

.flag {
margin-top:8px;
float:right;
width:40px;
height:10px;
padding-left:8px;
}

.current-lang {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
	opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}
/*==================================================
 * Box Shadow Effect
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 5px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

/*==================================================
 * Slider
 * ===============================================*/
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

div#slider { 
overflow: hidden; 
width:85%; 
display:block; 
margin-left:auto; 
margin-right:auto;   
border-top: #777 3px solid;
border-right: #777 3px solid; 
border-bottom: #ccc 3px solid;
border-left: #ccc 3px solid;
margin-bottom:15px;
}

div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

/*==================================================
 * Circles
 * ===============================================*/
.side-ribbon1 {
	position:absolute;
	top:60px;
	right:-67px;
}
.side-ribbon1 img {
height:38px;
width: 40px;
}
.side-ribbon2 {
	position:absolute;
	top:115px;
	right:-67px;
}
.side-ribbon2 img {
height:38px;
width: 40px;
}
.side-ribbon3 {
	position:absolute;
	top:170px;
	right:-67px;
}
.side-ribbon3 img {
height:38px;
width: 40px;
}
 
.side-ribbon1 a {
cursor:default;
}
.circle li {
    overflow: hidden;
    background: #fff;
    list-style: none;
    white-space:nowrap;
    margin-right: 5px;
	border: 4px solid #00bff3;
	height:30px;
    border-radius: 30px;
    display: inline-block;
	position:absolute;
	top:0px;
	right:17px;
}

    .circle li a {
        opacity: 0;
        color: #424242;
        max-width: 0;
        display: inline-block;
        text-decoration: none;
        transition: max-width 1s ease-out .1s, opacity 1s ease-out .1s;
    }
        .circle li a:hover {
            color: #424242;
        }
        .circle li a i {
            float:right;
            display: block;
            padding-right: 1em;
            font:1em/1 'rokkitt', sans-serif;
        }
    .circle li b {
        color: #424242;
        line-height:1;
        font-size: 25px;
        display: inline-block;
        padding:0 .295em;
    }
    .circle li:hover {}
        .circle li:hover a {
            opacity: 1;
            max-width: 210px;
            transition: max-width 1s ease-out .1s, opacity 1s ease-out .1s;
        }
		
		
/*==================================================
 * sliding panel
 * ===============================================*/		
#contacts-cont{
 position:fixed;
 top:30%;
    left:-260px;
    -webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
z-index:9999;
}
#contacts-cont:hover{
    left:0;
}
#hidden{
height:350px;
width:260px;
 background-color:#fff; 
float:left; 
padding:0px 0 0px 0;   
overflow-x: hidden;
}
#shown{
 height:100px;
width:20px;   
 background-color:#000;
float:left;    
}

/*==================================================
 * Gallery
 * ===============================================*/
.Collage{

    /*This is where you set the padding you want between the images*/
    padding:10px;

}
.Collage img{
    margin:0;
    padding:0;
    display:inline-block;
    vertical-align:bottom;
    opacity:1;

    /*This is where you set the border you want for the image*/
    border:6px solid #FFF;
}

/*==================================================
 * 3D Button
 * ===============================================*/
 
.a_demo_four {
	background-color:#3bb3e0;
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
	line-height:16px;
	text-decoration:none;
	color:#f5f4f4;
	position:relative;
	padding:13px 10px;
	padding-right:50px;
	margin-right:10px;
	background-image: linear-gradient(bottom, rgb(74,74,74) 0%, rgb(133,133,133) 100%);
	background-image: -o-linear-gradient(bottom, rgb(74,74,74) 0%, rgb(133,133,133) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(74,74,74) 0%, rgb(133,133,133) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(74,74,74) 0%, rgb(133,133,133) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(74,74,74) 0%, rgb(133,133,133) 100%);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(74,74,74)),
	color-stop(1, rgb(133,133,133))
	);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 0px #cacccc, 0px 5px 0px 0px #313131, 0px 10px 5px #999;
	-moz-box-shadow: inset 0px 1px 0px #cacccc, 0px 5px 0px 0px #313131, 0px 10px 5px #999;
	-o-box-shadow: inset 0px 1px 0px #cacccc, 0px 5px 0px 0px #313131, 0px 10px 5px #999;
	box-shadow: inset 0px 1px 0px #cacccc, 0px 5px 0px 0px #313131, 0px 10px 5px #999;
}

.a_demo_four:active {
	top:3px;
	background-image: linear-gradient(bottom, rgb(133,133,133) 0%, rgb(74,74,74) 100%);
	background-image: -o-linear-gradient(bottom, rgb(133,133,133) 0%, rgb(74,74,74) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(133,133,133) 0%, rgb(74,74,74) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(133,133,133) 0%, rgb(74,74,74) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(133,133,133) 0%, rgb(74,74,74) 100%);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(133,133,133)),
	color-stop(1, rgb(74,74,74))
	);
	-webkit-box-shadow: inset 0px 1px 0px #cacccc, 0px 2px 0px 0px #313131, 0px 5px 3px #999;
	-moz-box-shadow: inset 0px 1px 0px #cacccc, 0px 2px 0px 0px #313131, 0px 5px 3px #999;
	-o-box-shadow: inset 0px 1px 0px #cacccc, 0px 2px 0px 0px #313131, 0px 5px 3px #999;
	box-shadow: inset 0px 1px 0px #cacccc, 0px 2px 0px 0px #313131, 0px 5px 3px #999;
}

.a_demo_four::before {
	background-color:#515151;
	background-image:url(../images/right_arrow.png);
	background-repeat:no-repeat;
	background-position:center center;
	content:"";
	width:20px;
	height:20px;
	position:absolute;
	right:15px;
	top:50%;
	margin-top:-9px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: inset 0px 1px 0px #515152, 0px 1px 0px #e9eaea;
	-moz-box-shadow: inset 0px 1px 0px #515152, 0px 1px 0px #e9eaea;
	-o-box-shadow: inset 0px 1px 0px #515152, 0px 1px 0px #e9eaea;
	box-shadow: inset 0px 1px 0px #515152, 0px 1px 0px #e9eaea;
}

.a_demo_four:active::before {
	top:50%;
	margin-top:-12px;
	-webkit-box-shadow: inset 0px 1px 0px #e9eaea, 0px 3px 0px #202020, 0px 6px 3px #9e9f9f;
	-moz-box-shadow: inset 0px 1px 0px #e9eaea, 0px 3px 0px #202020, 0px 6px 3px #9e9f9f;
	-o-box-shadow: inset 0px 1px 0px #e9eaea, 0px 3px 0px #202020, 0px 6px 3px #9e9f9f;
	box-shadow: inset 0px 1px 0px #e9eaea, 0px 3px 0px #202020, 0px 6px 3px #9e9f9f;
}


#toggle, #toggle1 , #toggle2, #toggle3, #toggle4, #toggle5, #toggle6{
    display: none;
	padding-top:15px;
}

.gallery img {
border: solid 5px white;
margin-right:5px;
}

#toggle img, #toggle1 img, #toggle2 img,  #toggle3 img, #toggle4 img, #toggle5 img, #toggle6 img {
height:130px;
}