/* This CSS file is part of the HTML5 / CSS3 tutorial on http://www.lingulo.com */

/* GLOBAL */

html, body
{
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
}

body
{
        font-family: 'IM Fell Double Pica', serif;
        color:#000;
        background: #DCDCDC;
}

#main
{
        width: 1280px;
        margin: 30px auto;
        font-size: 22px;
        line-height: 25.66px;
        z-index: 1;
}

#one, #two
{
        width: 596px;
        height: 916px;
        float:left;
        margin-top: 20px;
        border: 22px solid #FFF;
        background:#FFFF33;
        overflow: hidden;
        z-index: 10;
}

#one
{
		text-align:center;
}

#one img
{
		margin-top: 206px;
		margin-left: 15px;
        width: 65.7%;
}

#abstandhalter
{
		height: 30px;
}

a
{
        color: black;
        transition: color .5s ease;
        text-decoration: none;
}

a:hover
{
        color: #888888;
}

strong
{
        font-weight:bold;
}

h1
{
        font-size: 22px;
		text-decoration: underline;
		margin: 0;
		padding: 0;
}

.links, .rechts
{
        float:left;
        width: 50%;
}

#text_columns
{
        margin-top: 433px;
        width: 100%;
        text-align: justify;
        /* hyphens */
   		-moz-hyphens: auto;
   		-o-hyphens: auto;
  		-webkit-hyphens: auto;
   		-ms-hyphens: auto;
   		hyphens: auto;
   		z-index: 20;
        position: relative;
}

.copyright
{
		top: 212px;
        font-size: 13px;
        position: relative;
        z-index: 100;
}


/* MISC */
.clear
{
        clear:both;
}


/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */

@media (max-width: 1279px)
{

#main
{
        width: auto;
        max-width: 95.08%;
        margin: 0;
        font-size: 100%;
        font-size: 2.68vw;
        line-height: 3.12vw;
}

#one, #two
{
        width: 100%;
        height: 70.08vw;
        margin: 0 0 20px 0;
        border: 2.46vw solid #FFF;
}

#one img
{
		margin-top: 11.7vw;
		margin-left: 2vw;
        height: 68.3%;
        width: auto;
}

h1
{
        font-size: 2.68vw;
}

#text_columns
{
        margin-top: 35vw;
        width: 100%;
}

.copyright
{
		top: 8.2vw;
        font-size: 13px;
}

#abstandhalter
{
		display: none;
}

}


@media (max-width: 720px)
{

#main
{
        width: auto;
        max-width: 93%;
        margin: 0;
        font-size: 100%;
        font-size: 3.42vw;
        line-height: 4.02vw;
}

#one, #two
{
        width: 100%;
        height: 126.1vw;
        margin: 0 0 20px 0;
        border: 3.5vw solid #FFF;
}

#one img
{
		margin-top: 24vw;
		margin-left: 1.9vw;
        width: 66.5%;
        height: auto;
}

h1
{
        font-size: 3.5vw;
}

#text_columns
{
        margin-top: 62.9vw;
        width: 100%;
}

.copyright
{
		top: 20.2vw;
        font-size: 13px;
}

#abstandhalter
{
		display: none;
}

}


@media (max-width: 520px)
{

#main
{
        width: auto;
        max-width: 93%;
        margin: 0;
        font-size: 100%;
        font-size: 4.4vw;
        line-height: 5.13vw;
}

#one, #two
{
        width: 100%;
        height: 152vw;
        margin: 0 0 20px 0;
        border: 3.5vw solid #FFF;
}

#one img
{
		margin-top: 36.6vw;
		margin-left: 2.3vw;
        width: 66.66%;
        height: auto;
}

h1
{
        font-size: 4.4vw;
}

.links, .rechts
{
        float:left;
        width: 100%;
}

#text_columns
{
        margin-top: 75.2vw;
        width: 100%;
}

.copyright
{
		top: 7.4vw;
        font-size: 10px;
}

}


/* Nur Firefox */
@-moz-document url-prefix() {
.copyright
{
		top: 205px;
}

@media (max-width: 1279px)
{
.copyright
{
		top: 7.5vw;
}
}

@media (max-width: 720px)
{
.copyright
{
		top: 19.5vw;
}
}

@media (max-width: 520px)
{
.copyright
{
		top: 5.5vw;
}
}

}

/* Nur Chrome */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {

@media (max-width: 720px)
{
.copyright
{
		top: 19.9vw;
}
}

}



/* KEYFRAMES */

@keyframes stylie-transform-keyframes {
  0% {transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);}
}

@keyframes stylie-transform2-keyframes {
  0% {transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);}
}