/* Stylesheet for redpacket.de */

/* Load fonts */

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

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



/* Settings */
	* {
		box-sizing: border-box;
		font-family: Fjord One, Times
		}

	html {
		scroll-behavior: smooth;
		}
		
	body {
		background-image:url(../images/diamond-upholstery.png);
		sbackground-attachment:fixed;
		margin:0;
		}
	hr { border:none; background-color:#c0c0c0; height:1px }

/* Responsive */	
	.grid {
		max-width:1360px;
		min-width:440px;
		margin:auto;
		sborder:1px solid blue;
		}
	.row {
		margin-left:40px;
		margin-right:40px;
		sborder:1px solid green;
		}
	
	.row::after {
		content: "";
		clear: both;
		display: table;
		}
	[class*="col-"] {
		float: left;
		sborder: 1px dotted white;
		}
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
	.col-footer {width:25%;}
	
	.img-responsive {swidth:100%;max-width:100%;height:auto;}



/* Fonts + colors */	
	h1,h2,h3 {
		sfont-family: Agency FB;
		font-weight:lighter;
		vertical-align:center;
		color:#4d4d4d;
		}
	
	h1 {
		margin-top:60px;
		font-size:40px;
		margin-bottom:40px;
		}
	h2 {
		font-size:24px;
		margin-bottom:-5px;
		}
	p {
		font-size:23px;
		margin-right:15px;
		color:#4d4d4d;
		}
	.small {
		font-size:13px;
		font-family:Open Sans;
		}
	a {
		cursor:pointer;
		text-decoration:none;
		}
	a.text {
		color:#953232;
	}
	a:hover {
		text-decoration:none;
	}
	a.underline:hover {
		text-decoration:underline;
	}
	
	i.smallericon {
		font-size:16px;
		}

/* LAYOUT */
		
	.container {
		padding-bottom:40px;
		}

	#container-main {
		background-image: linear-gradient( 
		   #f8f8f8 10%,
		   hsla(215,30%,70%,0) 50%
		);
		smargin-bottom:70px;
		spadding-bottom:70px;
		}
		.top-margin {
			height:90px;
		}
	.top {
		vertical-align:bottom;
		smargin-top:50px;
		height:60px;
		spadding-top:5px;
		}
		.top div {
			height:100%;
			}

		#logo-top {
			text-align:left;
			padding-left:5px;
			vertical-align:top;
			height:100%;
			}

		.nav {
			padding-top:30px;
			height:100%;
			text-align:right;
			sborder:1px solid green;
			white-space:nowrap;
			}
			.nav-link {
				text-decoration:none;
				background-repeat:no-repeat;
				color:#46646e;
				white-space:nowrap;
				}
			.nav-link {
				font-family:Open Sans;
				font-size:14px;
				letter-spacing: 1px;
				}
				.nav-link i {
					color:#46646e;
					}
				.nav-link:hover {
				}
				.nav-link:hover i {
					color:#af070c;
					}
	
	.header {
			sheight:300px;
		}
		.header div  img{
			width:1280px;
			-webkit-filter: brightness(70%);
    			-webkit-transition: all 0.5s ease;
    			-moz-transition: all 0.5s ease;
    			-o-transition: all 0.5s ease;
    			-ms-transition: all 0.5s ease;
    			transition: all 0.5s ease;
		}
		
		.header div img:hover {
			-webkit-filter: brightness(120%);
		}
		}
		
		/* Slider Anpassung */
		.slider {
		}

		.bx-wrapper {
			background:#000;
			border:0px;
			padding-bottom:3px;
		}
	#about h1{
		smargin-top:30px;
		}
	/* Services */
	#container-1 {
		sbackground:#344651;
		padding-bottom:50px;
		}
		#container-1 * {
			scolor:#e6e6e6;
			}
		
		div.service > div {
			padding-right:20px;
			smin-height:240px;
			stext-align:justify;
			}
			div.service h2 {
				swhite-space:nowrap;
				sfont-size:23px;
				}


		/* Services Icons */
			.icon {
				height:30px;
				width:45px;
				margin-top:3px;
				}
			.icon-cloud {background:url(../images/icon-cloud.png);}
			.icon-code {background:url(../images/icon-code.png);}
			.icon-console {background:url(../images/icon-console.png);}
			.icon-tools {background:url(../images/icon-tools.png);}
			.icon-lamp {background:url(../images/icon-lamp.png);width:30px}
			.icon-desktop {background:url(../images/icon-desktop.png);}
			.icon-network {background:url(../images/icon-network.png);}
			.icon-server {background:url(../images/icon-server.png);}
			.icon {
				background-repeat:no-repeat;
				float:left;
				}




	#container-software {
		padding-top:90px;
		sbackground:#344651;
		padding-bottom:50px;
		}
		#container-software .left {
			smargin-left:-40px;
			text-align:center;
			margin:auto;
			}
		
		#container-software .right h1 {
			margin-top:0px;
			}
		
		#container-software .right {
			padding-left:50px;
			padding-right:30px;
			float:right;
			margin-bottom:50px;	
			}

			.symbol {
				float:left;
				min-width:115px;
				width:20%;
				height:100px;
				text-align:center;
				color:#59788b;
				sborder:1px solid red;
				font-family:Open Sans;
				margin-bottom:50px;	
				}
				.symbol-pic {
					height:75px;
					text-align: center; smargin: 1em 0;
					white-space: nowrap;
					}
				/* HELPER SPAN (align image to center) */
				.symbol-pic span {
					display:inline-block;
					height:100%;
					vertical-align:middle
					}
				.symbol-pic img {
					vertical-align:middle;
					}

	#container-projects {
		background:#f9f8f7;
		}
		.projects-list div {
			margin-top:20px;
			padding-right:10px;
			padding-bottom:10px;
			smargin:10px;
			sheight:80px;
			smax-height:100px;
			text-align:left;
			}
		.projects-list .small {
			font-family:Open Sans;
			font-size:13px;
			text-align:left;
			}
	
	#container-footer {
		background:#30424e;
		padding-top:30px;
		min-height:250px;
		}
		#container-footer * {
			scolor:#c5cace;
			}
		
		#container-footer .small {
			stext-align:center;
			font-family:Open Sans;
			}
			.col-footer p.small span {
				font-size:13px;
				letter-spacing:1px;
				font-family:Open Sans;
				}
			.col-footer p, .col-footer h2 {
				color:#c5cace;
				}
			.col-footer a {
				color:#a5b9c7;
				}
			.col-footer a:hover {
				color:white;
				}
	
/* Horizontal lines */
	.break-light {height:5px; background:white}
	.break-dark {height:5px; background:black}
	
/* Top-Button */
	.top-button {
		sposition:absolute;
		text-align:right;
		color:white;
		swidth:100%;
		margin-top:15px;
		margin-bottom:-80px;
	}
		.top-button i {
			font-size:25px;
			color:white;
			margin-bottom:5px;
		}
		.top-button i.fa-circle {
			color:#30424e;
			font-size:40px;
		}
		.top-button a {
			color:white;
			font-weight:bold;
		}
	
/* Media Queries */			
	@media only screen and (max-width: 1024px) {
		#container-software div.right {
			float:left;
			width:100%;
			padding:0px;
			}
		#container-software div.left {
			float:right;
			width:100%;
			}
	}
	
	.fas,.far {
		margin-right:5px;
		sfont-size:10px;
		}
	
	@media only screen and (max-width: 768px) {
		[class*="col-3"] {
			width: 33%;
			}
		#container-main div.left {
			width:100%;
			text-align:justify;
			}
		#container-main div.right {
			width:100%;
			text-align:center;
			}
		#logo-top {
			width:100%;
			text-align:center;
			}
		.nav {
			padding-top:10px;
			smargin-bottom:10px;
			width:100%;
			text-align:center;
			}
			.nav-link {
					stext-align:center;
					sfloat:left;
					sbackground:#ddd;
					}
		.bx-wrapper {
			border:0px;
			margin-top:70px;
		}
		.projects-list div {
			width:50%;
			}
		div.service > div {
			width: 100%;
			sheight:100px;
			}
		.col-footer {
			width:50%;
			}
	}
	/* For mobile phones: */
	@media only screen and (max-width: 600px) {
		[class*="col-3"] {
			width: 50%;
			}
		.col-footer {
			width:100%;
			}
		#container-projects {
			text-align:center;
			}
		.projects-list div {
			width:100%;
			text-align:center;
			}		
	}
		
		
#mailto i {transition: transform .2s ease-in-out;}
		
#mailto:hover i {
     transform:rotate(15deg);
    -ms-transform:rotate(15deg);
    -webkit-transform:rotate(15deg);
	transition:0.2s;
}

#mailto span{ transition: 0.2s }
#mailto:hover span{
		scolor:red;
		spadding-left:3px;
}