@import url('all.min.css');
@import url('lightbox.min.css');
@import url('flickity.min.css');
/*Allgemeine Formatierungen*/

* {
  padding:0;
  margin:0;
  box-sizing:border-box;
}
body{
	font-family:'Comfortaa',sans-serif;
	color:#555;
    font-size:0.9em;
}

a{
	text-decoration:none;
}

p{
	margin:15px 0;
	line-height:1.5em;
}

h2{
	/*font-family:'Viga',sans-serif;*/
	color:#ffa500;
	text-align:center;
	letter-spacing:0.1em;
	margin-bottom:1.5em;
	margin-top:2em;
}

h3,h4,h5,h6{
	/*text-transform:capitalize;*/
	color:#833dce;
	text-align:center;
    /*font-family:'Viga',sans-serif;*/
}


h3{
	margin-bottom:15px;
}

/* _Schalter - button /////////////////  */
.button{
	margin: 20px 0;
    display: inline-block;
    /*text-transform: uppercase;*/
    color: #ffa500;
    font-weight: 600;
    background: #833dce;
    padding: 35px 5px;
    font-size: 12px;
    letter-spacing: 2px;
	-webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  border-radius:50%;
}

.button:hover {
    background: #FFA500;
}

.round-button{
	margin: 20px 0;
    display: inline-block;
    color: #ffa500;
    font-weight: 600;
    background: #833dce;
    padding: 33px 15px;
    font-size: 12px;
    letter-spacing: 0.1em;
	-webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  border-radius:100%;
}
.round-button:hover {
    background: #FFA500;
	 color: #fff;
}


/* about ///////////////////////// */
#about .innerbox{
	position:relative;
    margin-bottom: 7em;
    /*margin-top: 3em;*/
}

 #mustsee .innerbox{
    /*padding: 5px 0;*/
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container-new {
   text-align:center;
    margin-bottom: 10px;
    padding-top: 70px;
}


.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#mustsee .innerbox .plastic{
   margin-top:10px;
    padding:10px 0 10px 0;
    }

#about p,
#mustsee p{
	text-align:center;
			}
			
#about span,
#mustsee span{
	color:#ffa500;
			}
			
#about p span{
	 font-weight: 600;
			}
			
#about .round-button,
#portfolio .round-button{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	margin-top:0em;
}


#portfolio .round-button{
	margin:2em 0 3em 0;
	padding: 47px 30px;
}

#portfolio .innerbox h2{
	color:#833dce;
    margin-top:10px;
    margin-bottom: 10px;
			}

#portfolio h2 span{
	color:#ffa500;
			}

#about .skills{
	margin-top:10em;
}
#about .row{
	margin-top:80px;
}

#about h3{
	text-align:center;
    margin-top:2em;
			}
			


/* skillbars ///////////// */

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    color: #777;
    text-transform: capitalize;
    letter-spacing: 1.5px;
	font-size:0.7em;
	font-weight:bold;
}



/* raster-grid-spaltenlayout ///////////////// */
.row{
	overflow:hidden;
}

.halbe{
	width:49%; 
	float:left;
	margin-right:2%;
	/*line-height:2.5em;
	font-size:0.9em;
	letter-spacing:0.07em;*/ 
	color:#555;
 }
  
 
 .drittel{
	width:31.3333%; 
	float:left;
	margin-right:3%;
 }
 
  .zweidrittel{
	width:65.666%; 
	float:left;
	margin-right:3%;
 }
 
 .viertel{
	width:23.5%; 
	float:left;
	margin-right:2%;
	border-radius:20px;
 }
 .viertel:nth-child(4n){
	margin-right:0;
 }/* viertel my passions //////////////////  */
 
  .sechstel{
	width:15%; 
	float:left;
	margin-right:2%;
	border-radius:20px;
 }
 .sechstel:nth-child(6n){
	margin-right:0;
 }
 
 .drittel p,
 .viertel p,
 .sechstel p{
	line-height:1.5em;
	font-size:0.7em;
	/*letter-spacing:0.05em;*/
	margin:15px 0 ;
	/*padding:0 5px;*/
	
 }
 
 article.drittel,
 article.viertel,
 article.sechstel{
	 text-align:center;
	 background:#fff;
	 padding:15px 0;
	 min-height:265px;
     max-height:270px;
 }

#whatido h2{
	color:#fff;
    margin-bottom: 1.5em;
 } 

#whatido article h3{
	font-size:0.85em;
	color:#ffa500;
	/*transform: rotate(-7deg);*/
	margin-top:-40px;
 }

#whatido article p{
	margin-top:40px;
 }
 
 .halbe:last-child,
 .drittel:last-child,
 .viertel:last-child{
	margin-right:0;
 }
 

.halbe h3, .halbe h6{
	text-align:left;
}

/* section: what I do /////////////// */
#whatido{
	background:#bbb;
	/*width:100%;
	transform: rotate(-7deg);*/
	padding-bottom:7em;
}

#whatido h3{
	font-family:'Comfortaa',sans-serif;
	/*letter-spacing:0.1em;*/
	font-size:0.8em;
}

.innerbox {
  max-width: 970px;
  margin: 0 auto;
  position: relative;
  padding: 60px 2%;
}

header .innerbox {
padding: 0 2%;
}


.iconbox{
	background:#833dce;/* rgba*/
	display:inline-block;
	width:100px;
	height:100px;
	border-radius:50%;
	padding-top:20px;
	/*margin-bottom:25px;	*/
}

.iconbox i{
	font-size:2em;
	color:#fff;
	
}

/* my team //////////////// */

#teamlist{
	overflow:hidden;
	list-style-type:none;
}

/* Kind-Selektor */
#teamlist > li{
	width:30%;
	float:left;
	margin:1% 2% 2% 1%;
}

#teamlist li:last-child{
	margin-right:2%;
}



#teamlist img{
	width:100%;
	/* sw 	
	-webkit-filter: grayscale(1);
    filter: grayscale(1);
	position:relative;*/
}

#teamlist figure{
	text-align:center;
	
}

#teamlist figcaption{
	/*background:#ff0;*/
}

figcaption span{
	display:block;
	/*letter-spacing:0.05em;
	position:absolute;
	top:50%;
	left:-10%;
	transform: rotate(-90deg);*/
	color:#ffa500;
	/*text-transform:uppercase;*/
	font-size:1.1em;
}

figcaption span.name{
	padding:1.5em 0 1.2em 0;
}

figcaption span.titel{
	color:#888;
	font-size:0.8em;
	font-weight:bold;
	margin-top:0.5em;
}

#teamlist .ausblenden{
	display:none;
}

.overlaybox{
	position:relative;
	line-height:0;
    /*padding:10px;*/
	border-radius:20px;
	 -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
}

.overlaybox img{
	border-radius:20px;
	position:relative;
}

.overlay{
	position:absolute;
	background:rgba(131,61,206,0.7);
	color:#ffa500;
	top:0;
	left:0;
	bottom:0;
	right:0;
	line-height:0.1em;
	-webkit-transition: all 300ms ease-in;
  -moz-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
	opacity:0;
	border-radius:20px;
	/*width:200px;
	height:200px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);*/
}

.overlay:hover{
	opacity:1;
    background:#833dce;
	  cursor: pointer;
}


.overlaycontent{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:50%;
	font-size:1.2em;
}

.overlaycontent p{
	line-height:2em;
}

.social li{
	display: inline-block;
	list-style-type:none;
}

.social li a{
	color:rgba(255,255,255,1);
	margin:0 10px;
}

.social li a:hover{
	color:rgba(255,255,255,0.6);
	margin:0 10px;
}

/* sticky header //////////// */

.main_h {
  position: fixed;
  top: 0;
  max-height: 71px;  
  overflow: hidden;
  z-index: 999;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 20px;
  color:#833dce;
}

.main_h a{
	-webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

.main_h a:hover{
	color:#ffa500;
}

/*wird ab einer scroll-höhe von 100px über die index.js dynamisch der Klasse .main_h hinzugefügt
Ab sofort greifen beide Klassen
*/

.sticky {
  background-color: rgba(255, 255, 255, 0.8);
  top: 0px;
  border-bottom: 1px solid gainsboro;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  color:#833dce;
}

header .logo{
	padding-top:12px;
}

/*
 mobile ansicht - steuerung der navigation(auf/zu) über hamburger-icon , toggle-Effekt
*/

.open-nav {
  max-height: 400px !important;
  background-color: rgba(255, 255, 255, 0.93);
  top: 0px;
  border-bottom: 1px solid gainsboro;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.open-nav .mobile-toggle {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.logo {
  width: 50px;
  font-size: 25px;
  color: #8f8f8f;
  text-transform: uppercase;
  float: left;
  display: block;
  margin-top: 0;
  line-height: 1;
  margin-bottom: 10px;
}

/* navigation ///////////  */
nav{
	float: right;
	margin-top:8px;
	/*font-family:'Viga',sans-serif;*/
}

nav ul {
  list-style: none;
  text-align: right;
}

nav ul li {
  display: inline-block;
  margin-right:20px;
  line-height: 2em;
}

nav ul li:nth-child(5n) {
  margin-right:30px;
}

nav ul li:nth-child(6n),
nav ul li:nth-child(7n) {
  margin-right:10px;
}

nav ul a {
  color: #833dce;
  /*text-transform: uppercase;*/
  font-size: 0.9em;
  letter-spacing:0.02em;
}

nav ul a i{
  font-size: 1.4em;
}

nav ul a:hover {
  color: #833dce;
}

.sticky nav ul a {
  color: #833dce;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

.sticky nav ul li{
	padding-bottom:10px;
}

.sticky nav ul a:hover {
  color: #ffa500;
}

.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 22px;
  top: 0;
  width: 30px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  }

.mobile-toggle span {
  width: 30px;
  height: 4px;
  margin-bottom: 6px;
  border-radius: 1000px;
  background: #ffa500;
  display: block;
}


/* Großbild-Bereich /// */

.hero {
  position: relative;
  background: url(../bilder/color-background-white.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  color: #fff;
  min-height: 300px;
  height:100vh;
}

.logo-big{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.bubble{
	background:rgba(256,256,256,0.71);
	width:270px;
	height:270px;
	border-radius:100%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

.hero p{
	position:absolute;
	bottom:1%;
	left:1%;
	font-size:0.5em;
	color:#ffa500;
}

.hero .typewriter{
	max-width:270px !important;
	}

.hero h1 {
	font-weight:800;
	font-style:normal;
  font-size:1.5em;
  color: #fff;
  position: absolute;
  top:55%;
  left:50%;
  transform:translate(-50%,-50%);
  /* Korrektur der Position um die Hälfte der Breite/Höhe, versetzt negativ nach oben und links; absolute horizontale/vertikale Mitte */
  text-shadow: 1px 1px 1px #999;
}


.hero h1 span.wrap {

}


/* schnellkontakt ////////////////// */
#schnellkontakt{
	/*background:#833dce;*/
	color:#fff;
text-align:center;
margin-top:3em;
}

#schnellkontakt h3{
	color:#ffa500;
	
}

#schnellkontakt .round-button{
	background:/*rgba(255,255,255,1)*/#833dce;
	color:#ffa500;
	-webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  padding: 42px 10px;
}

#schnellkontakt .round-button:hover{
	/*background:rgba(255,255,255,0.9);*/
	background:#ffa500;
	color:#fff;
	font-weight:bold;
}

#schnellkontakt .drittel{
	text-align:right;
}

/* work //////<div class="halbe">	////////////////// */

#work{
	margin-bottom:5%;
}
#work .innerbox {
  max-width:100%;
  padding: 80px 2%;
}

#galerie{
	overflow:hidden;
	list-style-type:none;
	/*margin-bottom:2%;*/
    padding-top:5%;
}

#galerie li{
	width:33.3333%;
	float:left;
	line-height:0;
	float:left;
    margin-bottom: 0;
    margin-top: -60px;
}

#galerie figcaption{
	padding-bottom:-50px;
}

#work h2{
	margin-top:2em;
}

#work h3{
	color:#ffa500;
	font-size:1.5em;
}

#galerie img{
	width:100%;

}

/* flickitytestimonial ///////////////////// */
	#testimonial{
		background:#f7f7f7;	
padding-bottom:2em;		
	}


/* contact me ///////////////////////// */
#contact .innerbox{
			padding-top:40px;
		}
#contact{
    margin-top:10em;
	margin-bottom:2em;
}

#contact .foto {
  width: 150px;
  border-radius: 50%;
  border:5px dotted #ffa500;
  padding:7px;
  background:#fff;
}


#about .gallery-cell {
  margin-bottom:3em;
    
}

#about .gallery-cell h3 {
  font-family:'Comfortaa',sans-serif;
    color:#ffa500;
    margin-top:0.5em;
}

#contact .gallery-cell {
  width: 100%;
    text-align: center;

}

#contact .gallery-cell .social a{
	font-size:2em;
    text-align: center;
	margin:0.5em 0.4em;
	color:#ffa500;
	
}
#contact a[href^="mailto:"]{
	color:#ffa500;
	-webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}
#contact a:hover[href^="mailto:"]{
	color:#833dce;
}


#kontaktformular input[type="text"],
#kontaktformular input[type="email"],
#kontaktformular textarea{
	font-family:Verdana,sans-serif;
	font-size:0.9em;
	padding:10px;
	background:#eee;
	border:none;
	/*text-transform:capitalize;*/
	color:#666;
	border-radius:7px;
}

#kontaktformular textarea{
	height:220px;
	width:100%;
}

#kontaktformular .round-button{
	border:0;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	cursor: pointer; /* ansonsten nur "Pfeil"!*/
}


/*  footer //////////////////////// */
footer{
	background:#833dce;
	width:100%;
	color:#ffa500;
	text-align:center;
}
footer p{
	font-size:0.8em;
}
footer p a{
	color:#ffa500;
	text-decoration:underline;
}

footer .social{
	margin-top:1em;
}

footer .social a{
	font-size:1.5em;
	-webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}
footer .social a:hover{
	color:#ffa500;
}

/* scroll-to-top /////////////// */
#back-top{
	background:#999;
	width:40px;
	height:40px;
	position:fixed;
	right:15px;
	bottom:30px;
	text-align:center;
	padding-top:4px;
	border-radius:100%;
}

#back-top i{
	color:#fff;
	font-size:2em;
	text-align:center;
	-webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

#back-top:hover i{
	color:#833dce;
}


/* Problematik fixe Grafik mit Cover-Effekt lösen */
/*  Breakpoint von  0 bis 1234px ///////////////////////// */
@media only screen and (max-width: 1234px) {
	.hero {
	  background: url(../bilder/color-background-white.jpg) no-repeat center center scroll;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  background-size: cover;
	}
	
}/* ende breakpoint max-width 1234px */



/*  Breakpoint von  0 bis 920px /////////////////////////// */
@media only screen and (max-width: 930px) {
    
	.viertel{
				width:49%;
				float:left;
				margin-right:2%;
				margin-bottom:1em;
			}
			
	.viertel:nth-child(2n){
			margin-right:0;
		}
	
	.viertel:last-child
			{
				margin-bottom:0;
			}
    
    .sechstel{
				width:32%;
				float:left;
				margin-right:2%;
			}
			
		.sechstel:nth-child(3n){
			margin-right:0;
		}
    
    .sechstel{
				margin-bottom:1em;
			}
    
	.hero h1 {
			  position: absolute;
			  top:55%;
			  left:50%;
			  transform:translate(-50%,-50%);
			}
	
}
/* ende breakpoint max-width 920px */



/*  Breakpoint von  0 bis 800px /////////////////////////// */
@media only screen and (max-width: 800px) {
    #galerie li{
				width:100%;
                text-align: center;
			}
}
/* ende breakpoint max-width 800px */



/*  Breakpoint von  0 bis 766px /////////////////////////// */
@media only screen and (max-width: 766px) {
    
    .video-container-new video,
.video-container-new iframe,
.video-container iframe,
.video-container object,
.video-container embed {
    width: 100%;
    height: 100%;
     left: 0;
}
	
    
			  .main_h {
				padding-top: 15px;
			  }

			  .logo {
				float: none;
			  }

			  nav {
				width: 100%;
			  }

			  nav ul {
				padding-top: 7px;
				margin-bottom: 22px;
				float: left;
				text-align: center;
				width: 100%;
			  }

			  nav ul li {
				width: 100%;
				/*padding: 1px 0;*/
				margin: 0;
			  }

			  .mobile-toggle {
				display: block;
			  }
		
		/* about */
			.halbe,
			.drittel,
			.zweidrittel{
				width:100%;
				float:none;			
			}
			
		#about .innerbox .row{
			margin-top:9em;
		}
			
		.viertel{
				width:49%;
				float:left;
				margin-right:2%;
			}
			
		.viertel:nth-child(2n){
			margin-right:0;
		}
    
    
        
			
			.halbe:first-child{
				margin-bottom:3em;
			}
			
			.drittel,
			.viertel{
				margin-bottom:1em;
			}
		
			.drittel:last-child,
			.viertel:last-child,
            /*.sechstel:last-child*/
			{
				margin-bottom:0;
			}
		
			
			#teamlist{
				width:70%;
				margin:auto;
				padding:2% 3% 4% 1%;
			
			}
			#teamlist > li{
				width:100%;
				float:none;
				margin-right:0;
				margin-bottom:3em;
			}
			
			#teamlist > li:last-child{
				margin-bottom:0;
			}
			

    
.overlay:hover{
	opacity:1;
    background:#833dce;
	  cursor: pointer;
}


.overlaycontent{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:50%;
	font-size:1.5em;
}
			
		.overlay{
				opacity:1;
				/*top:50%;
            left:50%;
				width:50%;
				height:50%;*/
            color:#ffa500;
			}
			
		#kontaktformular textarea{
			height:150px;
			width:100%;
		}
			
		/* schnellkontakt */
			#schnellkontakt .drittel,
			.zweidrittel,
			#schnellkontakt h3{
				text-align:center;
			}
			
		/* works */
			/*#galerie li{
				width:50%;
                text-align: center;
			}*/
			
			#kontaktformular .halbe:first-child{
				margin-bottom:15px;
			}
			
			
}/* ende breakpoint max-width766px*/



/*  Breakpoint von  0 bis 480px  */
@media only screen and (max-width: 480px) {
		    
    /* team */
			#teamlist{
				width:100%;
				padding:2% 3% 4% 1%;
			}
			
			.hero h1 {
			  position: absolute;
			  top:55%;
			  left:50%;
			  transform:translate(-50%,-50%);
			}
			
			/*#galerie li{
				width:100%;
                text-align: center;
			}*/
			
			/*.overlay{
				opacity:0.9;
                top:50%;
				left:50%;
				width:100%;
				height:100%;
			}*/
			
			.overlay .social li a{
				margin:0 5px;
			}
			
			/*.overlaycontent p{
				display:none;
			}*/
			
		.viertel{
			width:100%;
			float:none;
		}
		
    .sechstel,
    .sechstel:nth-child(3n){
				width:49%;
				float:left;
				margin-right:2%;
				margin-bottom: 1em;
			}
			
	.sechstel:nth-child(2n){
			margin-right:0;
		}
    
		#about .innerbox .row{
			margin-top:3em;
		}
			
		#kontaktformular textarea{
			height:140px;
			width:100%;
		}
		
		#contact h2{
			margin-bottom:0;
		}
		
		#contact .innerbox{
			padding-top:20px;
		}
		
}/* ende breakpoint max-width480px*/



/* viga-regular - latin */
@font-face {
  font-family: 'Viga';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/viga-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Viga-Regular'),
       url('../fonts/viga-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/viga-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/viga-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/viga-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/viga-v7-latin-regular.svg#Viga') format('svg'); /* Legacy iOS */
}

/* comfortaa-600 - latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/comfortaa-v22-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/comfortaa-v22-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/comfortaa-v22-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/comfortaa-v22-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/comfortaa-v22-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/comfortaa-v22-latin-600.svg#Comfortaa') format('svg'); /* Legacy iOS */
}

/* comfortaa-regular - latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/comfortaa-v22-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/comfortaa-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/comfortaa-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/comfortaa-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/comfortaa-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/comfortaa-v22-latin-regular.svg#Comfortaa') format('svg'); /* Legacy iOS */
}