/*--- reset code ---*/
body{
	padding:0;
	margin:0;
	/*background:#FFF;*/
	background:#FAF5E7;
}
body a{
    transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}

h1,h2,h3,h4,h5,h6{
	margin:0;	
	padding:0;
}	
p{
	margin:0;
}
ul{
	margin:0;
	padding:0;
}
label{
	margin:0;
}

/*--- end reset code ---*/
body {
	font-family: 'Quicksand', sans-serif;
}


/*-- Portfolio --*/
.myportfolio {
	padding:0;
	margin:0 auto;
}
.myportfolio h3 {
	color:#333333;
	font-size:30px;
	font-family: 'source Sans Pro', sans-serif;
	line-height:25px;
	font-weight:bold;
	padding: 85px 0 20px;
}
.myportfolio p {
	padding: 5px 0 15px;
	font-size:17px;
	line-height:25px;
	font-weight:400;
}
/*-- /Portfolio --*/

/*-- sliding --*/
.slideanim {visibility:visible;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}
/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    } 
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
/*-- /sliding --*/
/*---- responsive-design -----*/
@media (max-width: 1600px) {

}

@media (max-width: 1366px) {

}

@media (max-width: 1280px) {

}

@media (max-width: 1080px) {
	.grid figure, .grid .placeholder {
    width: 295px;
    height: auto;
}
	.grid figure {
    margin: 10px;
}

}

@media (max-width: 1024px) {

}

@media (max-width: 991px) {
	.grid figure, .grid .placeholder {
    width: 280px;
    height: auto;
}


}

@media (max-width: 900px) {
	.grid figure, .grid .placeholder {
    width: 260px;
    height: auto;
}

}

@media (max-width: 800px) {
}

@media (max-width: 768px) {

}

@media (max-width: 736px) {

}

@media (max-width: 667px) {

	.content-img {
    height: 385px;
}
}

@media (max-width: 640px) {
	
	.content-img {
    height: 374px;
}
	.myportfolio p.content-text {
	padding:0 50px 100px;	
}	
}

@media (max-width: 600px){
	.content-img {
    height: 350px;
}
	.close-content {
	top:-17px;
}

}

@media (max-width: 568px){

	.content-img {
    height: 332px;
}
	.myportfolio p.content-text {
    padding: 0 35px 70px;
}
}

@media (max-width: 480px){

.myportfolio h3 {
	font-size:25px;
	padding:40px 0 20px;
}
.myportfolio p {
	font-size:15px;
}

}

@media (max-width: 414px){

	.myportfolio h3.content-text {
	font-size:25px;
}
	.myportfolio p.content-text {
	font-size:15px;
}
 
}

@media (max-width: 384px) {

	.myportfolio h3 {
    font-size: 23px;
    padding: 35px 0 15px;
}


	.myportfolio h3.content-text {
    font-size: 22px;
}
}

@media (max-width: 375px) {
	.myportfolio p{
	font-size:15px;
}	
	.myportfolio h3.content-text {
	font-size:20px;
}	
	.content-img {
    height: 215px;
}
	.myportfolio p.content-text {
    padding: 0 20px 70px;
}
}

@media (max-width: 320px) {

	.myportfolio p {
    padding: 0px 0 0px;
}
.content-img {
    height: 183px;
}

}