body{	
	padding:0;
	margin:0;
}

h1 {
text-align:center;
color: #000000;
font-family: 'Verdana', sans-serif;
    font-weight: 700;
}

h2 {
text-align:left;
color: #003399;
font-family: 'Verdana', sans-serif;
  font-weight: 700;
}

h3 {
text-align:left;
color: #333333;
font-family: 'Verdana', sans-serif;
    font-weight: 700;
}

p {
	margin-bottom:0.5em;
	color: #333333;
	margin-top:0;
	text-align:left;
	font-family: 'Verdana', sans-serif;
    font-weight: 100;
}

a {
	text-decoration: none;
	color: #003399;
	font-family: 'Verdana', sans-serif;
}

a:hover {
	color:#0066ff;}
	
	
em {
    font-weight: 100;
}

strong {
   font-weight: 700;
}

li {
	font-family: Arial;
	margin-bottom:0.5em;
	color: #333333;
	margin-top:0;
	text-align:left;
	font-family: 'Verdana', sans-serif;
}


.button {
	 	
      
   border-radius: 9px;
background: linear-gradient(130deg, #000000, #003399);
    
box-shadow:  5px 5px 10px #e3e3e3,
             -5px -5px 10px #ffffff;
    
    
	 	text-align:center;
	 	padding:1em;
	 	margin:1em;
	 
	 	border-radius:6px;
	 	color:#ffffff;
    

    
	 	}
	 	
.button:hover{
	 	
	 	background: linear-gradient(130deg, #003399, #0066ff);
   box-shadow: none;
	 	color:#eeeeee;
	 	}


.introbuttons {
    display:flex;
   flex-wrap:wrap;
    justify-content:center;
    }
    

.button2 {
   
	 	text-align:center;
	 	padding:1em;
	 	margin:0em;
	 	border-radius:6px;
        border:2px solid #ffffff;
	 	color:#ffffff;   
	 	}
	 	
.button2:hover{
	 	background:#0066ff80;
	 	color:#ffffff;
	 	}



.videobutton {
    background:none;
	 	text-align:center;
	 	padding:1em;
	 	margin:0em;
	 	border-radius:6px;
        border:2px solid #ffffff;
	 	color:#ffffff;   
	 	}
	 	
.videobutton:hover{
	 	background:#ffffff;
	 	color:#000000;
	 	}




.topnav {
  background:linear-gradient(145deg, #ffffff, #cccccc);
  overflow: hidden;
}


@media (min-width: 640px) {
.topnav a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


}

@media (max-width: 639px) {
.topnav a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 14px 10px;
  text-decoration: none;
  font-size: 15px;
}
    

    
    .topnav a.animation {
        display:none;
    }
    
    .topnav a.illustration {
        display:none;
    }
   
}




.topnav a:hover {
  background-color: #0066ff;
  color: #ffffff;
}


.topnav a.active {
  color: #003399;
}

.topnav a.kaufen {
  background-color: #4370e2;
  color: #ffffff;
  text-align:center;
  padding:0.5em;
  margin-top:0.25em;
border-radius:6px;
}

.infoblock {
max-width:640px;
margin:auto;
padding-left:1em;
padding-right:1em;
}



    
@media (max-width: 639px) { 
    
   .introbild {
        overflow:auto;height:100vh;width:100vw;z-index:-99;
        background-color:#003399;   
        background-image:url('carvonmedia-web-mobile-640x1024.jpg');
        background-size:cover;
        background-position:center;
        background-repeat:no-repeat;
    }
    
    
    
        .introtext { 
     width:100%;height:100%;display:flex;margin-top:-3em;align-items:center;justify-content:center;
    }
}

@media (min-width: 640px) {
    
       .introbild {
        overflow:auto;height:100vh;width:100vw;z-index:-99;
        background-color:#003399;   
        background-image:url('carvonmedia-web-desktop-1920x1080.jpg');
        background-size:cover;
        background-position:center;
        background-repeat:no-repeat;
    }
    
    .introtext { 
    width:100%;height:100%;display:flex;margin-top:-3em;align-items:center;justify-content:center;
    }
}


.dreiercontainer {
display:flex;
justify-content:space-around;
align-items:stretch;
}



@media (max-width: 1023px) {
    

    
    
	.dreiercontainer {
	display:flex;
	flex-wrap:wrap;
	}

	


	.dreierbox {
		width:90vw;
		background: #f9f9f9;
		border-radius:6px;
		border:2px solid #aaaaaa;
		padding:1em;
         margin-left:1em;
        margin-right:1em;
        margin-top:0.5em;
        margin-bottom:0.5em;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		}
	}

@media (min-width: 1024px) {
    
    .dreiercontainer {
	display:flex;
	justify-content:space-around;
	align-items:stretch;
	}


	.dreierbox {
		width:25vw;
        
        border-radius: 9px;
background: #f9f9f9;
box-shadow: 5px 5px 10px #e0e0e0,
            -5px -5px 10px #ffffff;
		
      
       
		padding:1em;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		}
	}
	

	
.dreierbox p {
margin-left:1em;
margin-right:1em;
}

	
.dreierbox img {
width:100%;
height:auto;
}

.textblock {
padding-left:1em;
padding-right:1em;
}

.footer {
     padding-top:10vh;
    padding-bottom:10vh;
    width:100vw;
    background:linear-gradient(145deg, #000, #333);
    }


.footer a{
    color:#cccccc;
}

.footer a:hover {
	color:#ffffff;
}


@media (max-width: 1023px) {
	.awardicons-gold {
				width: 40%;
    	height: 40vw;
    	float:left;
  		margin: 0%; 
  		padding: 5%;
  		background:#000000;
		background-image: url("awards_icon_gold_512x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 80%;
		display:flex;
		justify-content:center;
		align-items:center;
    }
}

@media (min-width: 1024px) {
	.awardicons-gold {
		width: 10%;
    	height: 10vw;
    	float:left;
  		margin: 0%; 
  		padding: 5%;
  		background:#000000;
		background-image: url("awards_icon_gold_512x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 80%;
		display:flex;
		justify-content:center;
		align-items:center;
        font-size:small;
    }
}


.awardicons-gold dt {color:#d7b94b;	text-align:center;margin:0;font-family: 'Verdana', sans-serif;}
.awardicons-gold dd {color:#cccccc;	text-align:center;margin:0;font-family: 'Verdana', sans-serif;}

@media (max-width: 1023px) {
	.awardicons-silber {
		width: 40%;
    	height: 40vw;
    	float:left;
  		margin: 0%; 
  		padding: 5%;
  		background:#000000;
		background-image: url("awards_icon_silber_512x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 80%;
		display:flex;
		justify-content:center;
		align-items:center;
		}
	}
	
	
	
	@media (min-width: 1024px) {
	.awardicons-silber {
		width: 10%;
    	height: 10vw;
    	float:left;
  		margin: 0%; 
  		padding: 5%;
  		background:#000000;
		background-image: url("awards_icon_silber_512x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 80%;
		display:flex;
		justify-content:center;
		align-items:center;
        font-size:small;
		}
	}

.awardicons-silber dt {color:#ffffff;text-align:center;margin:0;font-family: 'Verdana', sans-serif;}
.awardicons-silber dd {color:#cccccc;text-align:center;margin:0;font-family: 'Verdana', sans-serif;}

@media (max-width: 1023px) {
	.awardicons-bronze {
		width: 40%;
    	height: 40vw;
    	float:left;
  		margin: 0%; 
  		padding: 5%;
		background:#000000;
		background-image: url("awards_icon_bronze_512x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 80%;
		display:flex;
		justify-content:center;
		align-items:center;
		}
	}
	
	
	
	@media (min-width: 1024px) {
	.awardicons-bronze {
		width: 10%;
    	height: 10vw;
    	float:left;
  		margin: 0%; 
  		padding: 5%;
  		background:#000000;
		background-image: url("awards_icon_bronze_512x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 80%;
		display:flex;
		justify-content:center;
		align-items:center;
        font-size:small;
		}
	}

.awardicons-bronze dt {color:#cd7f32;text-align:center;margin:0;font-family: 'Verdana', sans-serif;}
.awardicons-bronze dd {color:#cccccc;text-align:center;margin:0;font-family: 'Verdana', sans-serif;}

@media (max-width: 1023px) {
	.awardicons-nominierung {
		width: 40%;
    	height: 40vw;
    	float:left;
  		margin: 0%; 
  		padding: 5%;
  		background:#000000;
		background-image: url("awards_icon_nominierung_512x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 80%;
		display:flex;
		justify-content:center;
		align-items:center;
		}
	}
	
	
	
	@media (min-width: 1024px) {
	.awardicons-nominierung {
		width: 10%;
    	height: 10vw;
    	float:left;
  		margin: 0%; 
  		padding: 5%;
  		background:#000000;
		background-image: url("awards_icon_nominierung_512x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 80%;
		display:flex;
		justify-content:center;
		align-items:center;
        font-size:small;
		}
	}

.awardicons-nominierung dt {color:#cccccc;text-align:center;margin:0;font-family: 'Verdana', sans-serif;}
.awardicons-nominierung dd {color:#cccccc;text-align:center;margin:0;font-family: 'Verdana', sans-serif;}

@media (max-width: 1023px) {
	.awardicons-auszeichnung {
		width: 40%;
    	height: 40vw;
    	float:left;
  		margin: 0%; 
  		padding: 5%;
  		background:#000000;
		background-image: url("awards_icon_auszeichnung_512x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 80%;
		display:flex;
		justify-content:center;
		align-items:center;
		}
	}
	
	
	
	@media (min-width: 1024px) {
	.awardicons-auszeichnung {
		width: 10%;
    	height: 10vw;
    	float:left;
  		margin: 0%; 
  		padding: 5%;
  		background:#000000;
		background-image: url("awards_icon_auszeichnung_512x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 80%;
		display:flex;
		justify-content:center;
		align-items:center;
        font-size:small;
		}
	}

.awardicons-auszeichnung dt {color:#cccccc;text-align:center;margin:0;font-family: 'Verdana', sans-serif;}
.awardicons-auszeichnung dd {color:#cccccc;text-align:center;margin:0;font-family: 'Verdana', sans-serif;}


@media (max-width: 1023px) {
	.awardicons-platzhalter {
		width: 40%;
    	height: 40vw;
    	float:left;
  		margin: 0%; 
  		padding: 5%;
  		background:#000000;
		background-position:center;
		background-repeat:no-repeat;
		background-size: 80%;
		display:flex;
		justify-content:center;
		align-items:center;
		}
	}
	
	
	
@media (min-width: 1024px) {
	.awardicons-platzhalter {
		width: 10%;
    	height: 10vw;
    	float:left;
  		margin: 0%; 
  		padding: 5%;
  		background:#000000;
		background-position:center;
		background-repeat:no-repeat;
		background-size: 80%;
		display:flex;
		justify-content:center;
		align-items:center;
        font-size:small;
		}
	}


@media (min-width: 1024px) {
.cgi-illustration-titel {
    width:100vw;
    height:25vw;
    background:#003399;
		background-image: url("cgi-illustration-titel-2048x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 100%;
    
}
}

@media (max-width: 1023px) {
.cgi-illustration-titel {
    width:100vw;
    height:25vw;
    background:#003399;
		background-image: url("cgi-illustration-titel-1024x256.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 100%;
    
}
}


@media (min-width: 1024px) {
.animation-titel {
    width:100vw;
    height:25vw;
    background:#003399;
		background-image: url("3d-animation-titel-2048x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 100%;
    
}
}

@media (max-width: 1023px) {
.animation-titel {
    width:100vw;
    height:25vw;
    background:#003399;
		background-image: url("3d-animation-titel-1024x256.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 100%;
    
}
}


@media (min-width: 1024px) {
.kontakt-titel {
    width:100vw;
    height:25vw;
    background:#003399;
		background-image: url("kontakt-titel-2048x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 100%;
    
}
}

@media (max-width: 1023px) {
.kontakt-titel {
    width:100vw;
    height:25vw;
    background:#003399;
		background-image: url("kontakt-titel-1024x256.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 100%;
    
}
}

@media (min-width: 1024px) {
.animierte-werbefilme-titel {
    width:100vw;
    height:25vw;
    background:#003399;
		background-image: url("3d-animierte-werbefilme-header-2048x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 100%;
    
}
}

@media (max-width: 1023px) {
.animierte-werbefilme-titel {
    width:100vw;
    height:25vw;
    background:#003399;
		background-image: url("3d-animierte-werbefilme-header-1024x256.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 100%;
    
}
}

@media (min-width: 1024px) {
.animation-jobs-titel {
    width:100vw;
    height:25vw;
    background:#003399;
		background-image: url("3d-cgi-jobs-titel-2048x512.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 100%;
    
}
}

@media (max-width: 1023px) {
.animation-jobs-titel {
    width:100vw;
    height:25vw;
    background:#003399;
		background-image: url("3d-cgi-jobs-titel-1024x256.jpg");
		background-position:center;
		background-repeat:no-repeat;
		background-size: 100%;
    
}
}


@media (max-width: 1023px) {
.thumb_box {
	padding:0.5%;
	margin:0;
	width:49%;
	float:left;
}
}

@media (min-width: 1024px) {
.thumb_box {
	padding:0.45%;
	margin:0;
	width:24%;
	float:left;
}
}

.thumb_box dt {
    font-family: 'Verdana', sans-serif;
    color:#000000;
    text-align:left;
}

.thumb_box dd {
    font-family: 'Verdana', sans-serif;
    color:#555555;
    text-align:left;
}