html,body{
background-color : transparent;
height : 100%;
box-sizing: border-box;
}
#MainContainer{
height : 100%;
width : 100%;
box-sizing: border-box;
}
.row{
margin : 0;
}
.colContent,.RightBlock{
background-repeat : no-repeat;
background-position : center;
background-size : cover;
width: 100%;
}
.MainCol{
height : 100%;
position : relative;
float : left;
}
#LeftCol{
width : 48%;
margin-right: 2%;
}
#CenterCol{
width : 24%;
margin-right: 1%;
}
#RightCol{
width : 24%;
margin-left : 1%;
border : none;
}
.MainCol, .RightBlock{
border : 1px solid #888;
box-sizing: border-box;
}
.MainCol:hover, .RightBlock:hover{
border : 1px solid #FFF;
}
.statusIndicator{
font-style: italic;
color : rgba(255,255,255,0.6);
font-weight : bold;
position : relative;
margin : 20px 25px;
float : left;
}
.colContent{
height : 100%;
display: block;
}
.ColLabel{
color : white;
position : absolute;
bottom : 7%;
}
.ColLabel h2{
margin-bottom: .4em;
}
#LeftBlock .ColLabel{
padding: 0 50px;
}
#CenterBlock .ColLabel{
padding: 0 40px;
}
.RightBlock{
height : 13%;
display: block;
margin-bottom : 15px;
}
#CenterBlock .statusIndicator{
float: right;
}
/* CONFIGURABLE PART */
.ColLabel h2{
font-family: 'Lora', serif;
font-size: 3em;
}
.ColLabel p{
font-size: 1.5em;
font-family: 'Open Sans', sans-serif;
}
.statusIndicator{
font-size: 1.7em;
}
@media screen and (max-width: 995px) , screen and (max-height: 700px){
.ColLabel h2{
font-size: 2em;
}
.ColLabel p{
font-size: 1em;
}
.statusIndicator{
font-size: 0.8em;
}
}
#LeftBlock{
background-image : url("romanbundle.jpg");
}
#CenterBlock{
background-image : url("bundle.jpg");
}
#RightBlock1{
background-image : url("block_aztecs.jpg");
}
#RightBlock2{
background-image : url("block_arabs.jpg");
}
#RightBlock3{
background-image : url("block_chinese.jpg");
}
#RightBlock4{
background-image : url("block_french2.jpg");
}
#RightBlock5{
background-image : url("block_koreans.jpg");
}
#RightBlock6{
background-image : url("block_mongols2.jpg");
margin-bottom : 0px;
}