* {
	padding: 0;
	margin: 0;
	font-family: 'Space Mono', monospace;

}

a{
    color: #626262;
}

a:hover{
    color: #000000;
}

body{
	background: rgba(255, 254, 0, 0.54);
    color: #626262;
}


p, h3{
	font-size:1em;

}


/* label */
#ID-container{
	background-color:none;
	width:32px;
	height:100%;
	z-index: 2;
	position:fixed;
	top:0px;
	font-size:14.5px;
	font-family: 'Space Mono', monospace;

}

#ID-background{
	background-color:white;
	height:100%;
	width:100%;
	margin: 0;
	padding: 0;
    z-index: 3;

}
#dot{
    background-color: black;
    width: 16px;
    height: 16px;
    margin: 0px auto;
    position: fixed;
    border-radius: 50%;
    top: 8px;
    z-index: 4;
    padding: left;
    margin: 8px;
}

#ID-container-logo{
	position: absolute;
	bottom:22.8px;
	-ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
    margin:0px auto;
    width: 100%;
    z-index: 4;

}

#ID-container-code {
    position: absolute;
    bottom: 50%;
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    margin: -150% auto;
    width: 100%;
    z-index: 4;

}

#ID-container a{
	text-decoration: none;
}



/*HEADER STYLES*/

.header {
	width: 80%;
	margin: 30px auto;
	overflow: hidden;
}

.header h1 {

/* 	font: 50px/1.0 'acumin-pro-condensed', sans-serif; */
/* 	font-weight: 400; */
	font-size: 2em;
/* 	text-transform: uppercase; */
	margin: 0 0 15px 2%;

}
.header .logo{
float: right;
}
.logo img{
width: 40px;
padding:4px;
}

.header p {
	color: #797478;
/* 	font: 16px/1.5 'acumin-pro-condensed', Helvetica, sans-serif; */
	margin: 0 0 0 2%;
}


/*CONTAINER STYLES*/

.container {
	width: 80%;
	margin: 30px auto;
	overflow: hidden;
}

/*GALLERY STYLES*/
.galleryItem {
	color: #797478;
/* 	font: 14px/1.5 'acumin-pro-condensed', Helvetica, sans-serif; */
	width: 46%;
	margin:  2% 2% 50px 2%;
	float: left;
	-webkit-transition: color 0.5s ease;
}

.galleryItem h3 {
    text-transform: uppercase;
    line-height: 2;
    margin-top: -50px;
    margin-left: 20px;
}

.galleryItem:hover {
	color: #000;
}

.galleryItem img {
	max-width: 100%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 25px;
}

.modal{
background:white;
}

#simplemodal-overlay{
background: black;
}

#simplemodal-container a.modalCloseImg {
	background:url('x.png') no-repeat; /* adjust url as required */
	width:80px;
	height:80px;
	display:inline;
	z-index:3200;
	position:absolute;
	top:-15px;
	right:-18px;
	cursor:pointer;
    background-size: contain;
}

/*============================================================================
#Buy Button
==============================================================================*/

.myButton {
	background-color:white;
	display:inline-block;
	cursor:pointer;
	color:black;
	font-size:14px;
	padding:13px 30px;
	text-decoration:none;
    border: 1px solid;
    margin: 20px;

}
.myButton a{

	text-decoration:none;
}

.myButton:hover {
	background-color:black;
}
.myButton:active {
	position:relative;
	top:1px;
}
a.myButton:hover{
    color: white;
}

.description {
width:400px;
}
p{
margin:20px;
}



/* MEDIA QUERIES*/
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
	.galleryItem {width: 46%;}
}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
	.galleryItem {width: 96%;}
	.header h1 {font-size: 40px;}
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
	.galleryItem {width: 96%;}
	.header h1 {font-size: 28px;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
	.galleryItem {width: 96%;}
	.galleryItem img {width: 96%;}
	.galleryItem h3 {font-size: 18px;}
	.galleryItem p, .header p {font-size: 18px;}
	.header h1 {font-size: 70px;}
}