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

	body:after{
		background-image: url('img/paper_v.jpg');
	}
 
	.gif_tablet{
		width: 50%
	}

	.gif_container_tablet{
		padding: 20% 0px 15% 0px;
	}

	.sign_tablet{
		padding: 8%;
		width: 10%;
	}

	.title_2_tablet{
		padding-top: 10%;
	}

	.gif_container_empty_tablet{
		padding: 30% 0% 40%;
	}

	.gif_2_tablet{
		width: 70%;
		padding-top: 10%;
	}

	.bottom_container_tablet{

		padding: 5% 0px 30% 0px;
	}

	.view_content_tablet{
	 	width: 100%;
	 	height: 100%;
	 	padding-left: 25px;
	 	align-items: center;
	 }

	 .content_tablet{
		width: calc(33%);
	}

	 .img_content_tablet{
	 	width: 85%;
	 	height: auto;
	 }

	.close_button_tablet{
		width: 3%;
		height: auto;
		padding: 2px 10px 55% 10px;
	}


	.about_text_mobile{
		width: 80%;
        padding: 10%;
    	padding-bottom: 100%;
    	padding-top: 20%;
    }

    

    .about_text_container_mobile{
    	width: 500%;
 	    right: 100%;
 	    position: fixed;
 	    z-index: 1;
 	    opacity: 0.8;

    }

    .about_photo_container_tablet{
    	bottom: 0;
    	width: 120%;

    }
	

}

@import "compass/css3";

@media only screen and (max-width: 600px) {

	body:after{
		background-image: url('img/paper_v.jpg');
	}


	.top_nav_phone {
		padding-left: 1%;
	}

	.button_phone{
		display: none;
	}


	.menu {
		display: block;
		cursor: pointer;
		position: relative;
		width: 10%;
		height: 42px;
		color: white;
	}

	.menu-global {
	  backface-visibility: hidden;
	  position: absolute;
	  left: 10px;
	  border-top: 2px solid rgb(252, 247, 230);
	  width: 95%;
	  transition: 0.55s;
    }

    .menu-top {
	  top: 12px;
	}
	.menu-middle {
	  top: 20px;
	}
	.menu-bottom {
	  top: 28px;
	}

	.menu-top-click {
	  display: hidden;
	  top: 30px;
	  transform: rotate(45deg);
	  transition: 0.55s;
	}
	.menu-middle-click {
	  opacity: 0;
	}
	.menu-bottom-click {
	  backface-visibility: hidden;
	  top: 30px;
	  transform: rotate(-405deg);
	  transition: 0.55s;
	}


    .nav_mobile{
    	width: 100%;
    	height: 100%;
    	right: 100%;
    	z-index: 5;
    	background-color: black;
    	padding-top: 20%;
    	color: rgb(252, 247, 230);
    	position: fixed;
    	transition: 0.55s
    }
    .nav_mobile_click{
    	right: 0%;
    	transition: 0.55s;
    }

    .button_menu{
    	display: block;
    	text-align: center;
    	padding: 3%;

    }


 	.gif_phone{
 		width: 80%
 	}

 	.title{
		font-size: 300%;
		text-align: center;
		padding: 5%;
	}

	.sign_tablet{
		padding: 8%;
		width: 20%;
	}
		
	.title_2_phone{
		padding-top: 20%;
		padding-left: 0%;
	}

	.title_project_phone{
		width: 100%;
		padding: 32% 0px 30% 0px ;
		z-index: -1;
	}

	.gif_container_empty_phone{
		padding: 60% 0% 60% 0%;
	}

	.gif_2_phone{
		width: 100%;
		padding-top: 25%;
	}

	.bottom_container_tablet{
		padding: 5% 0px 30% 0px;
	}

	.content_phone{
		width: calc(100%);
	}

	.view_content_phone{

		padding-left: 15px;
	}

	.projects_img_mobile{
 	   width: 100%;
    }


    .input_container_mobile{
    	padding-bottom: 10%;

    }

    .input_mobile{
    	color: rgb(252, 247, 230);
	 	width: 90%;
	 	padding: 5%;
	 	background-color: rgba(110, 106, 100);
	 	border: none;
    }

    .about_photo_container_mobile{
    	bottom: 0;
    	width: 150%;
    }

    .list{
    	margin-left: 0%;
    }

    .text_mobile{
    	padding: 5% 10% 5% 10%;
    }

    
}