/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

#msg-box {
	top:30%;
}

.projects {
	min-height:280px;	
}
.projectDetail {
	min-height:280px;	
}
}


/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
#msg-box {
	top:25%;
}

.projects {
	min-height:200px;	
}
.projectDetail {
	padding:0 10px;
	min-height:200px;	
}

.projectDetail h1 {
	font-size:25px;	
}

}


/* Smartphones (landscape) ----------- */
@media only screen 
and (max-width : 640px) {

#logo {
	position:absolute;
	left:50%;
	top:250%;
	margin-left:-100px;
	margin-top:-100px;
	width:auto;
	min-width:200px;
	height:200px;
	background:url(../images/logo1.svg) 0 0;
	background-size:100% auto;
}

#msg-box {
	top:10%;
}
.jaminpie h1{
	font-size:18px;	
}

.jaminpie img {
	width:150px;
	height:150px;	
}

.jaminpie h2 {
	font-size:16px;
}

.jaminpie p {
	font-size:14px;
	line-height:16px;
}

.x::before, .x::after {
  border-style: solid;
  border-color: #ccc;
  border-width: 0px 3px 3px 0px;
  height: 10px;  width: 10px;
  position: absolute; 
    top: -5px; 
    left: 10px;
  transform: rotate(45deg);
  -webkit-transform::rotate(45deg); 
  -moz-transform::rotate(45deg); 
  -ms-transform::rotate(45deg); 
  -o-transform::rotate(45deg); 
}
.x::before {
  border-width: 0px 3px 3px 0px;
  top: -5px;
}
.x::after {
  border-width: 3px 0px 0px 3px;
  top: 10px;
}


/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 480px) {
#msg-box {
	top:10%;
}

}