body{
background-color: #151517;
background-image: url(/images/padchain.png), url(/images/bc.png), url(/images/padded.png);
font-family: sans-serif;
background-repeat: repeat-x, repeat-y, repeat;
text-align:center;
font-size: 12px;
color: #fff;
margin: 0px;
padding: 0px;
text-shadow: #000 0px 0px 2px; }

#container{
margin: 0 0 0 527px;
margin-top:0px;
width:850px; }

#header{ 
margin: 0px -21px;
height: 454px;
width: 944px;
background: url(/images/header.png); }

/*---content---*/

#content {
    float: right; 
    width: 842px;
    min-height: auto;
    margin: 0px 0px 2px 0px;
    padding: 17px 0px 0px 5px;
    font-family: sans-serif;
    /* margin-top: 0px; */
    /* margin-left: 0px; */
    height: auto;
    position: static;
    background-color: rgba(4, 1, 1, 0.46);
    -webkit-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.36);
    -moz-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.36);
    box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.36);
}

#schatten{
box-shadow: 0px 0px 27px 16px rgba(0, 0, 0, 0.71);
height: auto;
/* height: 824px; */ }

/*---sitebarover---*/

#navtop{
padding: 1px 1px;
font-weight: 100;
text-align: center;
width: 842px;
height: 36px;
/* background-image: url(images/buttonnav.png); */
margin-left: 3px;
background-color: rgba(47, 79, 79, 0.68);
padding-right: 7px;
margin: 0px 0px; }

#navtop a{
float: right;
width: 85px;
height: 26px;
line-height: 37px;
font-family: sans-serif;
text-align: center;
padding: 2px;
margin: 0px 10px;
font-size: 10px;
color: #707173;
font-weight: bold;
text-transform: uppercase;
display: block; }

#navtop a:hover{ 
color: #e1e2e1;
/* background-image: url('images/buttonnav.png'); */
width: 85px;
height: 32px;
background-color: rgba(20, 23, 23, 0.83); }

#sidebar{
position: absolute;
left: 150px;
top: 291px;
width: 328px; }


/*---sidebar---*/

.naviline{
background-color: rgba(4, 1, 1, 0.46);
-webkit-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.36);
-moz-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.36);
box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.36);
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;padding:5px; }

.boxnavigation{
padding:3px;
margin:0px;
background-color: rgba(4, 1, 1, 0.46);
-webkit-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.36);
-moz-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.36);
box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.36);
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;padding:5px; }

a:link, a:active, a:visited{
text-decoration: none; 
color: #d6dcda; }

a{
color: #b8ccd5;
text-decoration: none;
text-shadow: #000 1px 1px 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-; }

a:hover{
    color: rgba(13, 85, 138, 0.86);
    text-decoration: none;
    text-shadow: rgb(3, 45, 76) 0px 0px 2px; }



a.navilink:link, a.navilink:active, a.navilink:visited{
display:block;
text-shadow: #000 0px 0px 2px;-webkit-box-shadow: 1px 1px 5x 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3); 
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3);
border: 3px solid transparent; }

a.navilink:link, a.navilink:active, a.navilink:visited{
font-family: sans-serif;
text-align:left;
padding:2px; margin:1px;
padding-left:7px;
font-size: 10px; 
border-left: 4px solid rgb(13, 85, 138);
color: #cacaca;
font-weight: bold;
background-color: rgb(17, 20, 26);
display:block; 
}

a.navilink:hover{
color: rgb(255, 255, 255);
border-left: 4px solid #1c1c1d;
border-right: 4px solid #1c1c1d;
text-shadow: #ffffff 0px 0px 2px;
display:block;
background-color: #0d0e13;
transition: all .5s ease-in-out; }


/*---footer---*/

#footer {
    background-color: rgba(1, 2, 4, 0.82);
    position: static;
    text-align: center;
    clear: both;
    width: 850px;
    margin: 0px 0px 0px 0px;
    height: 207px;
    -webkit-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.36);
    -moz-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.36);
    box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.36);
}

footerline{
color: #d9dddc; 
font-size: 10px; 
font-weight: bold; 
padding-left:2px; 
background-image: url('images/footer.png');
display:block;
text-align:center;
text-transform: lowercase; 
margin:0px; padding:16px; }

#footer a,#footer a:link,#footer a:active,#footer a:visited{
color: #FFFFFF; }

#footer a:hover{
color: #0d558a;}

#first{
text-align: left;
    margin: 5px 19px 0px 0px;
padding-left: 5px;
padding-top: 12px;
float: right;
width: 199px; }
  
#affiicons{
color: #dedede;
    text-align: left;
    padding-left: 32px;
    float: left;
    margin: 2px 5px 0px 0px;
    width: 283px; }

#extra{
    color: #dedede;
    text-align: left;
    padding-left: 0px;
    margin: 8px 0px 0px -21px;
    float: left;
    font-size: 13px;
    width: 300px;}



/*---headlines---*/

h1{
font-family: 'Dancing Script', cursive;
border-bottom: 2px dashed;
border-bottom-color: rgb(25, 26, 31);
font-variant: inherit;
line-height: 16px;
text-shadow: #000000 1px 1px 0px;
color: #0d558a;
font-size: 28px;
font-weight: bold;
display: block;
text-align: center;
text-transform: lowercase;
margin: 0px; 
padding: 2px; }

h2 {
font-size: 10px;
font-family: sans-serif;
font-weight: normal;
color: #FFFFFF;
text-shadow: 3px 1px #000000;
background: #31343e;
opacity: 0.4;
filter: alpha(opacity=60);
text-transform: uppercase;
text-align: center;
margin-top: 0px;
padding: 2px 12px 1px 0px;
width: 98%;
}
  
h3 {
font-weight: bold;
display: block;
font-variant: inherit;
line-height: 16px;
text-align: center;
text-transform: lowercase;
border-bottom: 3px solid #0d558a;
background-color: #191a21;
font-family: sans-serif;
}
     
h4{
display: block;
color: #d9dddc; 
font-size: 10px; 
font-weight: bold;
border-bottom: 3px solid #0d558a; } 

h5{
font-family: 'Dancing Script', cursive;
    border-bottom: 2px dashed;
    border-bottom-color: rgb(25, 26, 31);
    font-variant: inherit;
    line-height: 16px;
    text-shadow: #000000 1px 1px 0px;
    color: #0d558a;
    font-size: 28px;
    font-weight: bold;
    display: block;
    text-align: center;
    text-transform: lowercase;
    margin: 0px 284px 5px 5px;
} 


/*---block&area---*/

b {color: #0d558a;}
i {color: #5c6a82;}
u {color: #0188a1;}
p {color: #dedede;     
display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    margin: 4px 15px 6px 4px;}


blockquote{
    border-left: 5px solid #0d558a;
    border-right: 5px solid #0d558a;
    border-top: 5px solid #053b63;
    border-bottom: 5px solid #053b63;
color: #9e9e9e;
    margin: 5px 28px 6px 28px;
    padding: 6px 6px 6px 6px;
background-image: url('images/padded.png'); 
border-radius: 10px 10px 10px 10px;
}

input, submit, textarea{
padding:3px; margin:0px;
background-color: #1b1b1b; 
    border: 2px solid #262428;
color:#adadad;
font-family: sans-serif;
font-size: 10px; 
width:200px; }
  
/*---selection&scroll---*/

::selection {    
background: #191a21;
color: #5bafcc;}

::-moz-selection {     
background: #191a21;
color: #5bafcc; }

::-webkit-selection {     
background: #191a21;
color: #5bafcc;}

::-webkit-scrollbar-thumb:horizontal { background: #0d558a; }
::-webkit-scrollbar-thumb:vertical { background: #0d558a; }
::-webkit-scrollbar-track-piece { background: #11141a; }
::-webkit-scrollbar { width: 7px; }

/*---shoutbox---*/

#shoutbox {
    z-index: 9999;
      position: absolute;
    width: 245px;
    height: 609px;
    padding: 17px;
    background-image: url(images/shoutbox.png);
    background-repeat: no-repeat;
    top: -416px;
    margin: 0px auto;
    overflow: auto;
    margin-left: 191px;
    font-size: 25px;
    transition: all 0.7s ease 0s;
}

#shoutbox:hover{
top:0px;
color:#FFF; }
  
.about{
padding: 5px;
margin-top: 3px; }

/*---cutie---*/

.cuties{
opacity: .3;
-webkit-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s; }


.cuties:hover{
opacity: 1;
-webkit-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s; }


/*----------------cloud animation-----------------*/

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.blue {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.blue{
    background:transparent url(images/watercolor1.png) repeat top center;
    z-index:3;

  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 200s linear infinite;
}
.sky {
    z-index: 1;
    width: 847px;
    height: 291px;
    position: absolute;
    margin-top: -291px;
    margin-left: 0px;
}



/*---counter---*/

.owscounter {color:black}

  .left    { text-align: left; }
      .right   { text-align: right; }
      .center  { 
 margin-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    display: block;
    text-align: -webkit-center;}
      .justify { text-align: justify; }
      .start   { text-align: start; }
      .end { text-align: end; }

/*---listen and block---*/

ul, li{
color: #0d558a; 
list-style-type: none;}

.block1 {
    background: url(images/padded.png);
    border-top: 5px solid #053b63;
    border-bottom: 5px solid #053b63;
    margin: 0 150px 0 150px;
    border-radius: 5px 5px 5px 5px;
}

.block2 {
    color: #dedede;
    padding: 23px;
    text-align: justify;
    -moz-column-count: 2;
    -moz-column-gap: 20px;
  -webkit-column-gap: 32px;
    -webkit-column-count: 2;
}

.blockni{
 color: #dedede;
 text-align: justify;
    -moz-column-count: 2;
    -moz-column-gap: 20px;
  -webkit-column-gap: 32px;
    -webkit-column-count: 1;
    padding: 13px 0px 15px 133px;
}

.blockderu{
    background: url(images/padded.png);
    border-top: 5px solid #053b63;
    border-bottom: 5px solid #053b63;
    margin: 0 150px 0 150px;
       border-radius: 17px 52px 17px 52px;
    /* border-left: 5px solid #0b2131; */
    /* border-right: 5px solid #0b2131; */
}

.blocktalkout {
    background: url(images/padded.png);
    border-top: 5px solid #053b63;
    border-bottom: 5px solid #053b63;
    margin: 17px 46px 22px 52px;
    border-radius: 17px 52px 17px 52px;
}


.blocktalkin {
    color: #dedede;
    padding: 23px;
    text-align: justify;
    -moz-column-count: 2;
    -moz-column-gap: 20px;
  -webkit-column-gap: 32px;
    -webkit-column-count: 2;
}


/*---icon effekt by tympanus.net---*/
.ground {
    background: url(images/ground.png);
  padding: 10px;
    margin: 0px;
}

.rand {
    /* background-repeat: repeat-x; */
    /* height: 64px; */
    top: 84px;
    left: 1321px;
    /* margin: 36px 3px 3px 5px; */
    /* padding: 58px; */
    position: absolute;
    /* width: 146%; */
    /* z-index: 9999; */
}


.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
	background: url(images/preview.png) no-repeat;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h3 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h3,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
				


.view {
        width: 100px;
    background-image: url(images/ground1.png);
    height: 100px;
    float: left;
    border: 10px solid rgba(0, 0, 0, 0);
    overflow: hidden;
    position: relative;
    text-align: center;
    margin:0px -6px 20px 17px;
    /* background: rgba(17, 20, 25, 0); */
}

.view .mask,.view .content {
   width: 100px;
   height: 100px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.view img {
   display: block;
   position: relative;
}

.view h3 {
	    color: #ffffff;
    font-family: 'Boton', verdana;
    font-size: 9px;
    text-transform: uppercase;
    text-shadow: #3a3a3a 5px 3px 3px;
    text-align: center;
    margin: 26px 0px 0px;
    padding: 3px;
    position: relative;
}

.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 0px 36px;
    background: #0d558a;
    color: #ffffff;
    font-family: 'Boton', verdana;
    font-size: 11px;
    text-transform: initial;
    -webkit-box-shadow: 0 0 1px #000;
    -moz-box-shadow: 0 0 1px #000;
    box-shadow: 0 0 1px #000;
    margin: 0px 0px 0px -9px;
}

.view a.info:hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}



/*background*/


center {
    display: block;
    text-align: -webkit-center;
}

P.blocktext {
      margin-left: 40px;
    margin-right: auto;
    width: 64em;
}

.backg {
    background-image: url(images/ground1.png);
margin: 4px;
    padding: 0px;
    border: 8px solid transparent;
  -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-;
}
.backg:hover {
      background-color: #0d558a;
    text-decoration: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-;
 }


.box {
       margin: 2px 7px 96px 6px;
       padding: 10px 7px 14px 72px;
    width: 230px;
}

/*aboutme*/


* {
  margin:0px;
  padding:0px;
  font-family: 'Inconsolata', sans-serif;
}
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  line-height:1.8rem;
  font-size:1.6rem;
  font-weight:normal;
}
.card img, .card .info, .card .info:before {
  position:absolute;
}
.card img, .card .info { 
  -webkit-box-shadow:0px 0px 20px rgba(0,0,0,0.15);
  -moz-box-shadow:   0px 0px 20px rgba(0,0,0,0.15);
  box-shadow:        0px 0px 20px rgba(0,0,0,0.15);
}
.card {
    position: relative;
    margin: 0px;
    width: 400px;
    height: 560px;
    background: transparent;
    cursor: pointer;
}
.card img {
  z-index:999;
  -webkit-animation:flipback2 1s forwards;
  -moz-animation:   flipback2 1s forwards;
  -o-animation:     flipback2 1s forwards;
  animation:        flipback2 1s forwards;
}
.card .info {
     bottom: 11px;
    right: -179px;
    width: 95%;
    padding: 23px 44px 23px 23px;
  padding:20px 40px 20px 20px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:   border-box;
  box-sizing:        border-box;
  background:rgba(255,255,255,0.4);
  z-index:555;
  -webkit-animation:flipfront2 0.7s forwards;
  -moz-animation:   flipfront2 0.7s forwards;
  -o-animation:     flipfront2 0.7s forwards;
  animation:        flipfront2 0.7s forwards;
}

.card:hover img {
  -webkit-animation:flipback1 1s forwards;
  -moz-animation:   flipback1 1s forwards;
  -o-animation:     flipback1 1s forwards;
  animation:        flipback1 1s forwards;
}
.card:hover .info {
  -webkit-animation:flipfront1 0.7s forwards;
  -moz-animation:   flipfront1 0.7s forwards;
  -o-animation:     flipfront1 0.7s forwards;
  animation:        flipfront1 0.7s forwards;
}
.info h6 {
  font-size:1.8rem;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:2px;
  margin-bottom:1rem;
}
.info .links {
  list-style-type:none;
  margin-top:1.2rem;
}
.info .links li a,
.info .links .shareButtons,
.info .links .shareButtons a {
  display:block;
}
.info .links li a {
  width:20%;
  height:1.8rem;
  float:left;
  text-align:center;
  background:#13141a;
  color:white;
  text-decoration:none;
  line-height:1.8rem;
}
.info .links li a:hover {
  text-decoration:line-through;
}
.info .links li:first-child a {
  margin-right:2%;
}
.info .links .shareButtons {
  width:0%;
  height:1.8rem;
  overflow:hidden;
  -webkit-transition:all 0.2s;
  -moz-transition:   all 0.2s;
  -o-transition:     all 0.2s;
  transition:        all 0.2s;
}
.info .links .share:hover > .shareButtons {
  width:58%;
  -webkit-transition:all 1s;
  -moz-transition:   all 1s;
  -o-transition:     all 1s;
  transition:        all 1s;
}
.info .links .shareButtons a {
  width:2.5rem;
  float:left;
  background:transparent;
  color:rgba(0,0,0,0.7);
  -webkit-transition:all 0.2s;
  -moz-transition:   all 0.2s;
  -o-transition:     all 0.2s;
  transition:        all 0.2s;
}
.info .links .shareButtons a:hover {
  text-decoration:none;
  color:rgba(0,0,0,1);
  -webkit-transform:scale(1.3);
  -moz-transform:   scale(1.3);
  -o-transform:     scale(1.3);
  -ms-transform:    scale(1.3);
  transform:        scale(1.3);
}
/* move card to frontside */
@-webkit-keyframes flipfront1 {
  0%, 100% {-webkit-transform:translateX(0px);} 
  50%      {-webkit-transform:translateX(380px);}
}
@-moz-keyframes flipfront1 {
  0%, 100% {-moz-transform:translateX(0px);} 
  50%      {-moz-transform:translateX(380px);}
}
@-o-keyframes flipfront1 {
  0%, 100% {-o-transform:translateX(0px);} 
  50%      {-o-transform:translateX(380px);}
}
@keyframes flipfront1 {
  0%, 100% {transform:translateX(0px);} 
  50%      {transform:translateX(380px);}
}
 
/* move card to backside */
@-webkit-keyframes flipfront2 {
  0%, 100% {-webkit-transform:translateX(0px);} 
  50%      {-webkit-transform:translateX(380px);}
}
@-moz-keyframes flipfront2 {
  0%, 100% {-moz-transform:translateX(0px);} 
  50%      {-moz-transform:translateX(380px);}
}
@-o-keyframes flipfront2 {
  0%, 100% {-o-transform:translateX(0px);} 
  50%      {-o-transform:translateX(380px);}
}
@keyframes flipfront2 {
  0%, 100% {transform:translateX(0px);} 
  50%      {transform:translateX(380px);}
}
 
/* move img to backside */
@-webkit-keyframes flipback1 {
  0%       {z-index:999;background:rgba(250,250,210,0);}
  100%     {z-index:111;background:rgba(250,250,210,1);}
}
@-moz-keyframes flipback1 {
  0%       {z-index:999;background:rgba(250,250,210,0);}
  100%     {z-index:111;background:rgba(250,250,210,1);}
}
@-o-keyframes flipback1 {
  0%       {z-index:999;background:rgba(250,250,210,0);}
  100%     {z-index:111;background:rgba(250,250,210,1);}
}
@keyframes flipback1 {
  0%       {z-index:999;background:rgba(250,250,210,0);}
  100%     {z-index:111;background:rgba(250,250,210,1);}
}
 
/* move img to frontside */
@-webkit-keyframes flipback2 {
  0%       {z-index:111;background:rgba(250,250,210,1);}
  100%     {z-index:999;background:rgba(250,250,210,0);}
}
@-moz-keyframes flipback2 {
  0%       {z-index:111;background:rgba(250,250,210,1);}
  100%     {z-index:999;background:rgba(250,250,210,0);}
}
@-o-keyframes flipback2 {
  0%       {z-index:111;background:rgba(250,250,210,1);}
  100%     {z-index:999;background:rgba(250,250,210,0);}
}
@keyframes flipback2 {
  0%       {z-index:111;background:rgba(250,250,210,1);}
  100%     {z-index:999;background:rgba(250,250,210,0);}
}
 

/*about*/

.ac-container{
	
width: 692px;	
margin: 10px auto 30px auto;
	
text-align: left;

}


.ac-container label {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(72, 69, 69, 0.8);
    line-height: 33px;
    font-size: 19px;
    background: #afafaf;
    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#191a21));
       background: -webkit-linear-gradient(top, rgba(16, 18, 24, 0) 1%,#191a21 100%);
    background: -o-linear-gradient(top, #ffffff 1%,#191a21 100%);
    background: -ms-linear-gradient(top, #ffffff 1%,#191a21 100%);
    background: linear-gradient(top, #ffffff 1%,#191a21 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#191a21',GradientType=0 );
    /* box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); */
}

.ac-container label:hover{
	
background: #fff;
}


.ac-container input:checked + label,
.ac-container input:checked + label:hover{
	
background: #c6e1ec;
	
color: #3d7489;
	
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
	
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 
0px 2px 2px rgba(0,0,0,0.1);
}


.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
	
content: '';
 position: absolute;
	
width: 24px;
	
height: 24px;
	
right: 13px;
	
top: 7px;
	
background: transparent no-repeat center center;	
}


.ac-container input:checked + label:hover:after{
	

}


.ac-container input{
	
display: none;
}


.ac-container article{
	
    /* background: #c7c7c7; */
	
margin-top: 3px;
	
overflow: hidden;
	
height: 0px;
	
position: relative;
	
z-index: 10;
	
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}


.ac-container article p{
	
    font-style: italic;
    color: #dedede;
    line-height: 20px;
    font-size: 14px;
    padding: 14px;
    /*text-shadow: 1px 1px 1px rgb(243, 243, 243);*/
}


.ac-container input:checked ~ article{
	
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	
/*box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);*/
}


.ac-container input:checked ~ article.ac-small{
	  background-image: url(images/padded.png);
height: 549px;
}


.ac-container input:checked ~ article.ac-medium{
	    height:934px;
    background-image: url(images/padded.png);

}


.ac-container input:checked ~ article
.ac-large{
	
height: 931px;
}

.border, .randaffi {
    background-image: url(images/ground1.png);
margin: 4px;
    padding: 0px;
    border: 8px solid transparent;
 background-color: rgba(0, 99, 132, 0.78);
  
}

/*test*/
.kartendiv {
width:88px; height:31px; position:relative;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 100% 75px;
-webkit-transition: all 0.7s ease;
transform-style: preserve-3d;
transform-origin: 100% 23px;
transition: all 0.7s ease;
}
.cont:hover .kartendiv {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.oberseite, .unterseite {
width:88px; height:31px; position:absolute; left:0; 
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.unterseite {
padding-top:50px;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}

/*affi*/

.border, .affi {
    background-color: #fff;
margin: 4px;
    padding: 0px;
    border: 3px solid transparent;
  opacity: 0.7;
-webkit-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
}

.affi:hover {
    background-color: #0d558a;
margin: 4px;
    padding: 0px;
    border: 3px solid transparent;
  opacity: 1;
-webkit-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s; 
}

/*psds*/

#psd {
       color: #ffffff;
    width: 218px;
    height: 175px;
    padding: 1px;
    margin: 15px;
    background: url(images/padded.png);
    border-bottom: 1px dashed #191a1f;
}
.psdfont{

font-size: 15px;
text-decoration: none;
    text-shadow: #0d558a 1px 1px 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-; }

.psdfont:hover{
       font-size: 15px;
    color: rgba(13, 85, 138, 0.86);
    text-decoration: none;
    text-shadow: rgb(0, 0, 0) 1px 3px 2px;
    border-right: 6px solid #0d558a;
    border-left: 7px solid #0d558a;
    padding: 1px 4px 1px 4px;
    border-radius: 14px 14px 14px 14px;
 }

/*icon-crown*/

.active {
    color: #053b63;
    font-size: 18px;
}

.noneactive{
color:#000;
    font-size: 18px;
}

.about {
 margin: 0px 0px 0px 74px;
 padding: 5px 0px 0px 0px;
 width: 635px;   
}



/*formailer*/

a.dwflink:link {text-decoration: underline; color: #0000FF}
a.dwflink:visited {text-decoration: underline; color: #0000FF}
a.dwflink:hover {text-decoration: underline; color: #0000FF}
body {
 background-color: #bfbfbf;
}
.font-big {
 font-family:Verdana, sans-serif;
 font-size:16px; font-weight:bold;
 color:#bfbfbf;
}
.font-small {
 font-family:Verdana, sans-serif;
 font-size:10px; font-weight:normal;
 color:#bfbfbf;
}
.col2 {
 width:30%;
}
.col8 {
 width:8.33%;
}
.col10 {
 width:10%;
}
.col12 {
 width:12.5%;
}
.col16 {
 width:16.66%;
}
.col20 {
 width:20%;
}
.col25 {
 width:25%;
}
.col33 {
 width:33.33%;
}
.col50 {
 width:50%;
}
.table {
    margin-left: auto;
    width: 53%;
    margin-right: auto;
    border-spacing: 0px;
    /* background-color: rgba(255, 255, 255, 0); */
}
.table2 {
 background-color:#FFFFFF;
 width:100%;
 border-collapse:collapse;
}
.head {
 padding:3px;
 background-color:#0b0b0e;
}
.main {
    padding: 3px;
    background-color: #0b0b0e;
    font-family: Verdana, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #c1c1c1;
}
.foot {
 padding:3px;
 background-color:#0b0b0e;
}
.align {
 text-align:left;
}

.textarea:hover, .textarea:focus, .input:hover, .input:focus, .select:hover, .select:focus {
 border-color: #000000;
}
.button {
 min-width: 130px;
}
.button_send {
 min-width: 130px;
}

/*updates*/

.updates {
    background-image: url(images/ground.png);
    margin: 20px 7px 0px 15px;
    padding: 2px;
    width: 100px;
    height: 100px;
    border: 8px solid transparent;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-;
 
}

.updates:hover {
    background-color: #0d558a;
background-image: url(images/ground1.png);
    text-decoration: none;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-;
}

.updatesbg{
    background-image: url(images/updates.png);
    width: 774px;
    margin: 5px 0px 5px 28px;
    height: 171px;}

.updatesbg1{
    background-image: url(images/update1.png);
    width: 774px;
    margin: 5px 0px 5px 28px;
    height: 171px;}

--------------------------------------


.fas {
  margin-right: 4px !important; /*override*/
}

.fas .glyphicon {
  margin-right: 0px !important; /*override*/
}

.pagination a {
  color: #555;
}

.card ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

.news-item {
  padding: 4px 4px;
  margin: 0px;
  border-bottom: 1px dotted #555;
}

--------------------------------



@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
// Variables
$regal-blue: #034378;
$san-juan: #2d4e68;
$bermuda: #77d7b9;
$white: #fff;
$black: #000;
$open-sans: 'Open Sans',
sans-serif;
// clear-fix mixin
@mixin cf {
  &::before,
  &::after {
    content: '';
    display: table;
  }
  &::after {
    clear: both;
  }
}

* {
  box-sizing: border-box;
}


ai {
  text-decoration: none;
}

h1 {
  font-family: $open-sans;
  font-weight: 300;
}

.row {
  max-width: 900px;
  margin: 50px auto 0;
}

// Base styles
.card {
  float: left;
  padding: 0 1.7rem;
  width: 50%;
  .menu-contenti {
    @include cf;
    margin: 0;
    padding: 0;
    list-style-type: none;
    lii {
      display: inline-block;
    }
    ai {
      color: $white;
    }
    span {
      position: absolute;
      left: 50%;
      top: 0;
      font-size: 10px;
      font-weight: 700;
      font-family: 'Open Sans';
      transform: translate(-50%, 0);
    }
  }
  .wrapperi {
    background-color: $white;
    min-height: 540px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.2);
    &:hover {
      .datai {
        transform: translateY(0);
      }
    }
  }
  .datai {
    position: absolute;
    bottom: 0;
    width: 100%;
    transform: translateY(calc(70px + 1em));
    transition: transform 0.3s;
    .contenti {
      padding: 1em;
      position: relative;
      z-index: 1;
    }
  }
  .author {
    font-size: 12px;
  }
  .titlei{
    margin-top: 10px;
  }
  .texti {
    height: 70px;
    margin: 0;
  }
  input[type='checkbox'] {
    display: none;
  }
  input[type='checkbox']:checked + .menu-content {
    transform: translateY(-60px);
  }
}

// First example styles
.example-1 {
  .wrapperi {
    background: url(https://images.unsplash.com/photo-1496979551903-46e46589a88b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cda12b505afa1beb06e49d89014cbd65&auto=format&fit=crop&w=634&q=80) 20% 1% / cover no-repeat;
  }
  .date {
    position: absolute;
    top: 0;
    left: 0;
    background-color: $bermuda;
    color: $white;
    padding: 0.8em;
    span {
      display: block;
      text-align: center;
    }
    .day {
      font-weight: 700;
      font-size: 24px;
      text-shadow: 2px 3px 2px rgba($black, 0.18);
    }
    .month {
      text-transform: uppercase;
    }
    .month,
    .year {
      font-size: 12px;
    }
  }
  .contenti {
    background-color: $white;
    box-shadow: 0 5px 30px 10px rgba($black, 0.3);
  }
  .titlei {
    ai {
      color: lighten($black, 50%);
    }
  }
  .menu-buttoni {
    position: absolute;
    z-index: 999;
    top: 16px;
    right: 16px;
    width: 25px;
    text-align: center;
    cursor: pointer;
    span {
      width: 5px;
      height: 5px;
      background-color: lighten($black, 50%);
      color: lighten($black, 50%);
      position: relative;
      display: inline-block;
      border-radius: 50%;
      &::after,
      &::before {
        content: '';
        display: block;
        width: 5px;
        height: 5px;
        background-color: currentColor;
        position: absolute;
        border-radius: 50%;
      }
      &::before {
        left: -10px;
      }
      &::after {
        right: -10px;
      }
    }
  }
  .menu-contenti {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    transition: transform 0.3s;
    transform: translateY(0);
    lii {
      width: 33.333333%;
      float: left;
      background-color: $bermuda;
      height: 60px;
      position: relative;
    }
    ai {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
    }
    span {
      top: -10px;
    }
  }
}

// Second example styles
.example-2 {
  .wrapperi {
    background: url(https://tvseriescritic.files.wordpress.com/2016/10/stranger-things-bicycle-lights-children.jpg) center / cover no-repeat;
    &:hover {
      .menu-contenti {
        span {
          transform: translate(-50%, -10px);
          opacity: 1;
        }
      }
    }
  }
  .headeri {
    @include cf;
    color: $white;
    padding: 1em;
    .date {
      float: left;
      font-size: 12px;
    }
  }
  .menu-contenti {
    float: right;
    lii {
      margin: 0 5px;
      position: relative;
    }
    span {
      transition: all 0.3s;
      opacity: 0;
    }
  }
  .datai {
    color: $white;
    transform: translateY(calc(70px + 4em));
  }
  .titlei {
    ai {
      color: $white;
    }
  }
  .buttoni {
    display: block;
    width: 100px;
    margin: 2em auto 1em;
    text-align: center;
    font-size: 12px;
    color: $white;
    line-height: 1;
    position: relative;
    font-weight: 700;
    &::after {
      content: '\2192';
      opacity: 0;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(0, -50%);
      transition: all 0.3s;
    }
    &:hover {
      &::after {
        transform: translate(5px, -50%);
        opacity: 1;
      }
    }
  }
}

/*Design-ground*/