/* ssjn.css */

.ssjn {
    position: relative;
    margin-bottom: 20px;
}

.ssjn .face {
    width: 100%;
    box-shadow:2px 2px 4px rgb(128,128,128);
    -webkit-box-shadow:2px 2px 4px rgb(128,128,128);
    padding: 5px;
    box-sizing: border-box;
    background-color: white;
}

.ssjn .face.front {
    padding: 0;
    line-height: 0;
    position: relative;
}
.ssjn .face.front img,
.ssjn .face.front video {
    width: 100%;
    margin: 0;
}

.ssjn .face.front video {
    position: absolute;
    left: 0;
    top: 0;
    margin: 5px;
}

.ssjn .face.back {
    position: absolute;
    left:0px;
    top: 0px;
    height: 100%;
}
.ssjn .face.back .back-content {
    width: 100%;
    height: 100%;
}
.ssjn .face.back .text {
    padding: 30% 15% 30% 15%;
}

.ssjn.simple .face.back {
    visibility: visible;
}
.ssjn.simple .face.front {
    visibility: hidden;
}
.ssjn.simple.uncovered .face.back {
    visibility: hidden;
}
.ssjn.simple.uncovered .face.front {
    visibility: visible;
}

/* portrait and landscape mobile phones */
@media only screen and (max-width : 700px) {
	/*
	.ssjnWrapper {
		width: auto;
		float: none;
	}
	*/
	
	.ssjn .face.back .text {
		padding: 30% 5% 30% 5%;
	}
	
	.landscape div.colum1.ssjnColumn,
	.landscape div.colum2.ssjnColumn
	{
		width: 50%;
		float: left;
	}
}