h1, h2, h3, h4, h5, h6, body {
    font-family: Myriad Web Pro, Candara, Calibri, Helvetica, sans-serif;
}

    h1 { font-size: 350%; }
    h2 { font-size: 125%; }
    A { color:#ffec89; text-decoration:none; }
    A:visited { color:#e4a21c; text-decoration: none; }


    body {
        font-size: 100%; 
		width: 100%;
		height: 100%;
        
        color: white;
        background-color: black;
        background-image: url("images/silk_background.jpg");
		background-size: auto;
		background-repeat: no-repeat;
    }

@media only all and (min-width: 1811px) {
	body {
		background-size: 100%;
	}
}
    img { border: 0px; }

	#endpage {
		/*max-width: 900px;*/
		font-size: 150%;
		text-align: center;
		color: white;
		margin-right: auto; margin-left: auto;
	}

#comingsoon
{
	width: 100%;
	height: auto;
	text-align: center;

	position: absolute;
	top: 0;
	margin-left:auto; margin-right: auto;
	z-index: 11;
}
#symbolgraphic
{
	width: calc(100vw*0.2);
	min-width: 100px;
	max-width: 550px;
	height: auto;

	position: absolute;
	top: 35%;
	left: 0;
	z-index: 5;
}
@media all and (min-width: 900px) {
	#symbolgraphic
	{
		top: 40%;
	}
}
@media all and (max-width: 899px) {
	#symbolgraphic
	{
		top: 50%;
	}
}

#itemdisplay {
	max-width: 1200px; 
	text-align: center;
	margin-top: 10px;
	height: 100vh;
}
#itemdisplay > img {
	width: 100%;
}
#ssvid
{
	min-width: 560px;
	min-height: 315px;
	max-width: 1200px;
	max-height: 675px;
	height: calc((100vw*0.8)/1.778);
	z-index: 10;
}
@media all and (min-width: 561px) {
    #ssvid, #ssvid2
    {
        width: calc(100vw*0.8);
    }
}

@media all and (max-width: 560px) {
    #ssvid, #ssvid2
    {
        width: 100%;
    }
}

.content-links,
.content-links a {
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
	
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.content-links a {
	display: block;
	max-width: 100%;
}

.order-box {
	position: relative; 
	left: 100px; 
	max-width: 700px; 
	text-align: center;
	
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.video_box {
	position: relative;
	margin: auto;
	width: fit-content;
	text-align: center;
	
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
@media all and (max-width: 850px) {
	.order-box {
		left: 0;
	}
	.video_box {
		margin-left: auto;
		width: 100%;
		left: 0;
	}
}


.essay > h2 {
	text-align: center;
}

.essay > p {
	padding-left: 10px;
	padding-right: 10px;
}
@media only all and (min-width: 900px) {
	.fb-box {
		margin-left: auto; 
		margin-right: auto; 
		max-width: 900px;
	}
	.fb-like-box {
		margin-left: auto; 
		margin-right: auto; 
		max-width: 900px;
	}
}
@media only all and (max-width: 899px) {
	.fb-box {
		margin-left: auto; 
		margin-right: auto; 
		max-width: 100%;
	}
	.fb-like-box {
		margin-left: auto; 
		margin-right: auto; 
		max-width: 100%;
	}
}

.maindisplay {
	
	padding: 5px;

	border: 0;
	background-color: transparent;
	margin-right: auto; margin-left: auto; margin-top: auto;
}
@media all and (min-width: 900px) {
	.maindisplay {
		max-width: 1900px;
	}
}
@media all and (max-width: 899px) {
	.maindisplay {
		max-width: 100%;
		
	}
}
.ccoverimg {
	width: 100%;
	margin-right: auto; 
	margin-left: auto;
}
.coverimg {
	padding: 5px;
	max-width: 100%;
	margin-right: auto; margin-left: auto;
}

    .spinheader {
        position: relative; left: 50px;
        
        color: red;
        background-color: rgba(75, 75, 75, 0.85);
    }
    .spincontent {
        position: relative; left: 50px;
        background-color: rgba(75, 75, 75, 0.85);
    }

.center-content {
    min-width: 100%; /* Fallback for vh unit */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* Align the bootstrap's container vertically */
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* In legacy web browsers such as Firefox 9
     we need to specify the width of the flex container */
    width: 100%;
    /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
     hence the bootstrap's container won't be aligned to the center anymore.
  
     Therefore, we should use the following declarations to get it centered again */
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

    .font50 { font-size: 50%; }
    .font75 { font-size: 75%; }
    .font110 { font-size: 110%; }
    .font125 { font-size: 125%; }
    .font150 { font-size: 150%; }
    .font155 { font-size: 155%; }
    .font160 { font-size: 160%; }
    .font165 { font-size: 165%; }
    .font175 { font-size: 175%; }


.imagesizer{
	margin: 2px; height: 51px;
}