/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}$

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}


/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
	
	.wrapper, .wrapper:hover {
		height:auto;
		
		filter: none;
		-webkit-filter: none;
		-moz-filter: none;
		-o-filter: none;
		-ms-filter: none;
	}

	/* Images */
	
	.index {
		background: url(../img/sm/index_back_sm.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	.about {
		background: url(../img/sm/aboutme_back_sm.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	.contact {
		background: url(../img/sm/contact_back_sm.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	.work {
		background: url(../img/sm/work_back_sm.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	.musically {
		background: url(../img/sm/musically_back_sm.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	.electronically {
		background: url(../img/sm/elec_back_sm.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	.programmingly {
		background: url(../img/sm/prog_back_sm.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	.wrapper {
		background: url(../img/sm/overlay_sm.png) repeat center center fixed;
		-webkit-background-size: 125px 125px;
		-moz-background-size: 125px 125px;
		-o-background-size: 125px 125px;
		background-size: 125px 125px;
	}
	
	.home-title {
		border-top: 1px solid #6F7275;	
		padding-top:30px;
		margin-top: 0px;
		font-size: 1.4em;
	}

	.home-subtitle {
		padding-top: 0px;
		font-size: 0.9em
	}

	.home-menu-mobile {
		display:block;
		margin-top: 10px;
    	margin-bottom: 10px;
	}

	.page-title {
		font-size:1.9em;
		margin-top:0px;
		padding-top:20px;
		border-top: 1px solid #6F7275;	
	}

	.page-subtitle {
		font-size: 1.1em;
	}


	.page-menu {
		margin-bottom: 10px;
	}
	.page-menu li {
		margin :0;
	}

	.socials {
		display:none;
	}

	.socials-works {
		margin-top:3px;
		padding-right: 11px;
	}

	#nav-menu {
		margin-top:30px;
		height:75vh;
	}

	#nav-menu ul {
		font-size: 1.5em;
	    line-height: 1.7;
	    font-weight: 800;
	    text-align: center;
	}

	#nav-menu li {
		list-style-type: none;
	    margin: 15px 0px 0px 0px;
	}

	#nav-menu li a {
		color:rgb(120, 120, 120)
	}

	.menu-socials {
		font-size: 1.5em;
		text-align: center;
	}

	.menu-socials a {
		margin:10px;
	}


	.about-img-wrapper {
		margin-left:auto;
		margin-right:auto;
		width:15em;
		height:15em;
	}

	.about-img-wrapper img {
		width:13em;
		height:13em;
	}


	/* TILES */
	
	.preview {
		position:relative;
		display:table-row;
		width: 100%;
	}

	.description--preview {
		position: relative;
		float: left;
		left:0;
	}

	.original {
		position:absolute;
		display: block;
		top:6%;
		padding:35px;
		max-width: 100% !important;
	}
}


@media screen and (max-width: 40em) {
	.description--preview h3 {
		font-size: 1em;
	}
	/*.description--preview p,
	.details {
		display: none;
	}*/
}




/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}