/*inicial*/
img, object, embed, video {
	max-width: 100%;
	}
	

*{
	margin:0;
 	padding:0;
	}
 
*, *::after, *::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
html {
	font-size: 50%;
	scroll-behavior: smooth;
}
	
.ie6 img {
	width:100%;
	}

.gridContainer { 
	margin-left:auto; 
	margin-right:auto;
	width:100%;
	}



/*atribute */
img {
	border:0;
	padding:0;
	margin:0;
	}

	
a{
	border:0;
	text-decoration:none;
	}


	/*effects */
	.inline-photo {
		opacity: 0;
		transform: translateY(3em) rotateZ(0.5deg);
		transition: transform 9s .50s cubic-bezier(0,1,.3,1), opacity .5s .50s ease-out;
		will-change: transform, opacity;
	}


	.inline-photo.is-visible {
		opacity: 1;
		transform: rotateZ(0deg);
	}

	.main-photo {
		transform: scale(.8);
	}

	.heading {
		transform: translate(-50%, calc(-50% + 1em));
	}

	.is-visible .main-photo {
		transform: none;
	}

	.is-visible .heading {
		transform: translate(-50%, -50%);
	}


	

@media only screen and (min-width: 300px) {
	

	/*body*/
	body{
		background-image: url("file/background-mobile.jpg");
		background-repeat: repeat;
		background-size: 100%;
		bottom: 0;
		left: 0;
		padding: 3em;
		position: absolute;
		right: 0;
		text-align: center;
		top: 0;
		overflow-x: hidden;
		overflow-y: hidden;
	}
	
	
	header{
		font-family: 'Mulish', sans-serif;
		font-weight: normal;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		height: 100%;
		font-size: 16px;
	}
	
	h1{
		font-size: 0
	}
	
	img.logo:hover{
		opacity: 0.7;
		transition: 1s
	}
	
	.row{
		float: left;
		width: 100%;
		margin: 90px 0
	}
	
	.row a{
		color: #fff;
		text-align: center;
		float: left;
		width: 100%;
		margin: 15px 0;
		box-shadow: inset 0 0 0 0 #5b47c2;
		padding: 0 .100rem 2px;
		transition: color 1s ease-in-out, box-shadow 1s ease-in-out;
	}
	
	.row a:hover{
		box-shadow: inset 400px 0 0 0 #5b47c2;
		color: #fff;
	}
	
	.row a:hover img{
		filter: brightness(0.2)
	}
	
	.row a img{
		position: relative;
		top: 5px;
		left: 0
	}
	
	p{
		color: #765bff
	}
	
	

}





@media only screen and (min-width: 603px) {	
				
}










@media only screen and (min-width: 1024px) {

	
	/*body*/
	body{
		background-image: url("file/background.jpg") ;
	}
	
	header{
		font-family: 'Mulish', sans-serif;
		font-weight: normal;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		height: 100%;
		font-size: 22px;
	}
	
	.row{
		margin: 100px 0
	}
	
	.row a{
		color: #fff;
		text-align: left;
		float: none;
		width: auto;
		margin: 0 25px;
		padding: 0 .100rem 2px;
		transition: color 1s ease-in-out, box-shadow 1s ease-in-out;
	}
	
	
}






/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}