.preload{
	position:absolute;
	top: 0;
	left:0;
	background:#000;
	width: 100%;
	height: 100%;
	z-index: 999999;
	color:#fff;
	display:none;
}
.preload .active{
	margin:0 auto;
	position: relative;
	display: block;
	top:50%;
}
body{
	background:url(../img/pattern-noise.png);
	background-color: ;
	overflow-x: hidden;
	padding-top:0;
}
.navigation{
	position: fixed;
	width: 100%;
	/* height: 4em; */
	background: #fff;
	z-index: 9999;
	top:-5em;
	transition:all 0.5s ease-in;
	overflow: hidden;
	padding-left:1em;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.navigation img{
	width: 65px;
	height: 65px;
	display: inline-block;
	vertical-align: bottom;
}
.navigation .title{
	display: inline-block;
	vertical-align: top;
	padding-top: 1em;
	font-weight: 100;
	font-size: 1.5em;
	text-transform: uppercase;
} 
.navigation a{
	float: right;
	/*font-size: 1.5em;*/
	margin-right: 1em;
	margin-top: 0.85em;
	background: #A8DBD8;
	color:#000;
	opacity:0.8;
	-webkit-transition: opacity 0.5s ease-out;
	-o-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;
}
.navigation a:hover{
	opacity: 1;
	background: #A8DBD8;
}
.navigation.show{
	top:0;
}
header{
	width: 100%;
	border-bottom:1px solid #ccc;
	

}
header h2{
	text-align:center;
	font-weight: 400;
	letter-spacing: 0.2em;
	/* margin-top:0 auto;
        left:0;
        right: 0;
        top: 40%;
        font-size: 65px;*/
        font-weight: 700;
        /*letter-spacing: 0.15em;*/
        color:rgba(0,0,0,0);
        -webkit-text-stroke: 2px #A8DBD8;
}
header .title{
	padding-left:1em;
}
header .title h1{
	font-weight: 100;
	font-size: 3.40em;
	margin-bottom:0;
	color:#A8DBD8;

}
header .row{
	float:none;
	clear: both;
	background:rgba(255,255,255,0);
	padding:1em;
	height: 35em;
	transition:opacity 0.3s ease-out;
	/*height: 100%;
	min-height: 553px;*/

}
.header-container{
	padding-top: 2em;
	background: url(../img/headerBG.jpeg) no-repeat top center;
	height: 100vh;
	background-size: cover;
	/*opacity:0;*/
}
.header-container .container{
opacity:0;
transition:all 0.3s 2s ease-out;
}
.flat.opacity{
	/*opacity:0.9;

	transition:all 0.25s ease-in;*/
	
}
.flat.opacity:hover{
	opacity: 1;
	-ms-transform: rotate(-0.5deg); /* IE 9 */
	-webkit-transform: rotate(-0.5deg); /* Chrome, Safari, Opera */
	transform: rotate(-0.5deg)
}


header .flat{
	background: #A8DBD8;
	width: 300px;
	height: 300px;
	position:relative;
	margin:0 auto;
	/*display:inline-block;*/
	overflow: hidden!important;
	transform-style: preserve-3d;



}

header .flat svg{
	width: 100%;
	height: auto;
	margin: 0 auto;
	
	transition:all 1s linear;
}

header .info{
	display: inline-block;
	vertical-align: top;
}
header .info h2{
	margin-top:0;
}
header .info .nav{
	width: 100%;
	/*padding-left: 2rem;*/
	padding-top: 1em;
	background: none;
	box-shadow: none;
	-moz-box-shadow:none;
	-ms-box-shadow:none;
	-webkit-box-shadow:none;
}
header .info .nav li{
	width: 100%;
	display:block;
}
header .info .nav a{
	margin-bottom: 1.5rem;
	width: 100%;
	font-size:2em;
	background-color: #745B57!important;
}
/*/////////////Main/////////////////*/
.main{
	display: none;
}
.main .main-content p {
	font-size:1.3em;
	line-height: 1.3em;
	margin-bottom: 0.5em;
}

/*////////////Portfolio/////////////*/
.section.main{
	padding-top: 0;
}
.portfolio{
	
}
.portfolio .card{
	/*background-color: #5EE0B4;*/
	/*background-color: #9C78FF;*/
}
.portfolio .card img.img2{
	/*width: 66%;*/
	max-width:100%;
	margin:1em auto;
	display: block;
}
/*cards*/
.portfolio .card .card-title{
	margin-bottom: 1em;
}
.portfolio .card .card-title i.close{
	position: absolute;
	top:0.5em;
	right: 0.5em;
}

.portfolio .card p{
	line-height: 1.5em;

}
.card .card-action{
	overflow: hidden;
}
.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating){
	color:#E3826A;
	text-transform: inherit;
}
.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating):hover{
	text-decoration:underline;
	color:#E3826A;
	/*text-transform: inherit;*/
}
/*////////////////////*/
/*////////Footer//////*/
footer.footer{
	position:fixed;
	z-index: 9999;
	padding-top: 1em;
	bottom:-100%;
	width: 100%;
	height: 11em;
	background:#A8DBD8;
	transition:all 1s ease-out;
	padding-top: 2em;
}
footer.footer.show{
	bottom:0;
}
footer.footer p a{
	color: #000;
	padding-left:0.5em;
	transition:all 0.3s linear;
}
footer.footer p a:hover{
	text-shadow: 4px 4px 7px rgba(119, 155, 153, 1);;
}
footer .container a, footer .container i{
	font-size: 3rem;
	vertical-align: top;
	text-align: center;
}
/*footer .container .mail a, footer .container .mail i{
	font-size: 3rem;
}*/
footer .container .tlf{
	margin-top: 1em;
	pointer-events:none;
}
footer .container span{
	font-size: 1.5em;
	position: absolute;
	right: 0.5em;
	top:0.5em;
	cursor: pointer;
}

/* Tablet */
/*---------------------------------------------------------------------------*/
@media
only screen and (max-width : 1023px),
only screen and (max-device-width : 1100px) {


}



/* Tablet Landscape */
/*---------------------------------------------------------------------------*/
@media
only screen and (max-width : 1023px),
only screen and (max-device-width : 1100px) and (orientation: landscape) {


}

/* Tablet Portrait */
/*---------------------------------------------------------------------------*/
@media
only screen and (max-width : 800px) and (orientation: portrait) {


}


@media only screen and (max-width : 767px){
	footer .container a, footer .container i{
		font-size:2em; 
	}
	footer.footer{
		height: 8em;
	}
} 


/* Mobile */
/*---------------------------------------------------------------------------*/
@media only screen and (max-width : 620px) {
	header .flat{
		width: 200px;
		height: 200px;

	}
	header h2, header .title h1{
		font-size:1.5em;
	}
	header .title h1{
		margin-bottom:0.5em;
	}
	header .row{
		padding:1em 0;

	}
	footer .container .tlf{
	margin-top: 1em;
	pointer-events:auto;
	}
}
@media only screen and (max-width : 468px){
	.navigation img{
		display: none;
	}
	.navigation .title{
		padding-top: 0.7em;
	}
	.navigation .btn{
		height: 100%;
		margin-top:0;
	}
	.navigation p.title{
		font-size: 1em;
	}
	footer .container a, footer .container i{
		font-size: 1.2em;
	}
}
/* Mobile Landscape */
/*---------------------------------------------------------------------------*/
@media
only screen and (max-width : 600px),
only screen and (max-device-width : 600px) and (orientation: landscape) {


}


/* Mobile Portrait */
/*---------------------------------------------------------------------------*/
@media
only screen and (max-width : 400px),
only screen and (max-device-width : 400px) and (orientation: portrait) {


}