html {
	height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

* a {
	text-decoration: none;
}

body {
	background: #211b3b;
	font-family: 'Judson', serif;
	height: 100%;
	width: 100%;
}

.container {
	position: relative;
	min-height: 40em;
	width: 100%;
	background: url(../images/Pravin_background.png);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: -6em 0;
}

.heading {
	padding: 1em auto 0 1em;
	font-size: 1.25em;
	position: relative;
	top: 1.5em;
	left: 1em;
	max-width: 75%;
	max-height: 5em;
}

.title1 {
	font-family: 'Calligraffitti', cursive;
	color: #b0382a;
}

.title1 h1 {
	font-size: 3em;
}


.title2 {
	color: #e4c83e;
	position: relative;
	bottom: 1em;
	left: 5.5em;
	max-width: 45%;
}

.title2 h1 {
	font-size: 2.5em;
}

.facebook p {
	display: none;	
	font-size: 1.25em;
}

.facebook {
	position: absolute;
	top: 1em;
	right: 1em;
}

.facebook img {
	position: relative;
	max-width: 2em;
	top: .5em;
}

.facebook a {
	z-index: 20;
}

.bodyContainer {
	width: 100%;
	background: transparent;
	padding-top: 2em;
}

.tagline {
	font-family: 'cinzel', serif;
	font-weight: 700;
	color: white;
	display: inline;
}

.yellow {
	color: #e4c83e;
	display: inline;
}

.tagline h1 {
	max-width: 75%;
	text-align: right;
	position: relative;
	top: -1em;
	margin: 0 5% 0 auto;
}

.cards ul {
	position: relative;
	bottom: .5em;
}

.cards li{
    font-family: 'cinzel', serif;
	font-weight: 700;
	color: #b0382a;
	background: white;
	border: solid black 1px;
	border-radius: 1em;
	position: relative;
	text-align: center;
	max-width: 45%;
	margin: 1em 2.5% 1em auto;
}

.cards li img {
	display: none;
}

.cards a {
	text-decoration: none;
	color: #b0382a;
	display: block;
	padding: 1em;
	width: 100%;
	margin-right: 2.5%;
}

.examples {
    background: rgb(33, 27, 59); /* Fallback for older browsers without RGBA-support */
    background: rgba(33, 27, 59, 0.5);
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	color: white;
	margin-bottom: 2em;

}

.contact {
    background: rgb(33, 27, 59); /* Fallback for older browsers without RGBA-support */
    background: rgba(33, 27, 59, 0.5);
	position: relative;
	bottom: 0;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	color: white;
	width: 100%;
	height: 3em;
	padding-bottom: 1em;
}

.contact p {
	margin-top: .25em;
}

.contact a {
	text-decoration: none;
	color: white;
}

.secondaryMenu {
display: none;
}

.secondaryMenu {
	color: rgb(149, 151, 154);
	text-align: center;
	position: absolute;
	bottom: 0;
	margin: 5em auto 1em auto;
	width: 100%;
	font-size: 1.25em;
	
}

.secondaryMenu a {
	text-decoration: none;
	color: rgb(149, 151, 154);
}

.secondaryMenu li {
	margin: 0;
	display: inline;
}

.secondaryMenu ul li:before {
	content: " | ";
}

.secondaryMenu ul li:first-child:before {
content: none;
}

.secondaryMenu p {
	margin-top: .5em;
}

@media screen and (min-width: 500px) {

.liText {
	position: relative;
	top: 1.5em;
}

.thumb {
	display: inline-block;
	position: absolute;
	height: 4em;
	width: 4em;
	overflow: hidden;
	right: 1em;
}


.cards li img {
	display: inline-block;
	height: 6em;
	width: 4em;
	clip: rect(0px,60px,200px,0px);
}

.cards li {
	text-align: left;
	max-width: 48%;
}

.cards a {
	height: 6em;
}

.facebook p {
	font-family: 'Judson', serif;
	display: inline-block;
	text-decoration: none;
	color: rgb(149, 151, 154);
	margin-left: .5em;
}

}

@media screen and (min-width: 650px) {

.container {
	background-position: -4em 0;
}

.cards li {
	font-size: 1.25em;
}	

}

@media screen and (min-width: 850px) {


.tagline {
	font-size: 1.25em;
}

.heading {
	font-size: 1.5em;
	max-width: 80%;
}

.facebook {
	left: 14em;
	font-size: .9em;
}

.facebook a {
	z-index: 10000;
}

.container {
	min-height: 100%;
	padding-bottom: 5em;
}

.bodyContainer {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 0em;
}

.liText {
	top: -1em;
	right: 0em;
	bottom: 0em;
	left: 0em;
}

.thumb {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0em;
	right: 0em;
	bottom: 0em;
	top: 0em;
}

.cards {
	position: relative;
	max-width: 75%;
	top: 2em;
	margin-left: auto;
	text-align: center;
}

.cards ul {
	position: relative;
	bottom: .5em;
	margin-left: auto;
	margin-right: auto;
}

.cards li{
	height: 10.9em;
	width: 7.3em;
	position: absolute;
	text-align: center;
	padding-top: .25em;
	max-width: 100%;
	margin: 0;
	padding: 0;
	display: inline-block;
	position: relative;
	text-align: center;
	padding: .5em .25em 0 .25em;
	margin: 0 -1.25em 0 -1.25em;
	font-size: 1em;
}

.cards li img {
	width: 75%;
	height: auto;
	position: relative;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	margin-top: 2.5em;
	margin-bottom: .5em;
}

.one {
	position: relative;
	top: 6em;
	display: inline-block;
	-ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Safari */
    transform: rotate(-45deg);
	z-index: 10;
}

.one:hover {
	top: 5em;
	-ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Safari */
    transform: rotate(-45deg);
}

.two {
	position: relative;
	display: inline-block;
	top: 2em;
	right: 1em;
	-ms-transform: rotate(-26deg); /* IE 9 */
    -webkit-transform: rotate(-26deg); /* Safari */
    transform: rotate(-26deg);
	z-index: 9;
}

.two:hover {
	top: 1em;
	-ms-transform: rotate(-13deg); /* IE 9 */
    -webkit-transform: rotate(-13deg); /* Safari */
    transform: rotate(-13deg);
}

.three {
	position: relative;
	display: inline-block;
	top: 0em;
	-ms-transform: rotate(-9.25deg); /* IE 9 */
    -webkit-transform: rotate(-9.25deg); /* Safari */
    transform: rotate(-9.25deg);
	z-index: 8;
}

.three:hover {
	top: -1em;
	-ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Safari */
    transform: rotate(0deg);
}

.four {
	position: relative;
	display: inline-block;
	right: 0em;
	bottom: 0em;
	-ms-transform: rotate(9.25deg); /* IE 9 */
    -webkit-transform: rotate(9.25deg); /* Safari */
    transform: rotate(9.25deg);
	z-index: 7;
}

.four:hover {
	bottom:1em;
}

.five {
	position: relative;
	display: inline-block;
	top: 1em;
	left: 0em;
	-ms-transform: rotate(26deg); /* IE 9 */
    -webkit-transform: rotate(26deg); /* Safari */
    transform: rotate(26deg);
	z-index: 6;
}


.five:hover {
	top: 0em;
	-ms-transform: rotate(36deg); /* IE 9 */
    -webkit-transform: rotate(36deg); /* Safari */
    transform: rotate(36deg);
}

.six {
	position: relative;
	display: inline-block;
	top: 5em;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);
}

.six:hover {
	top: 4em;
	-ms-transform: rotate(55deg); /* IE 9 */
    -webkit-transform: rotate(55deg); /* Safari */
    transform: rotate(55deg);
}

.examples {
	position: relative;
	font-size: 1em;
	width: 45%;
    background: transparent;
	top: 3em;
	left: 7.5em;
}

.contact {
    background: transparent;
	position: absolute;
	right: 0;
	top: 0;
	height: 1em;
	text-align: right;
	margin-bottom: .5em;
	padding-top: 3em;
	margin-right: 5%;
}

.secondaryMenu {
	display: block;
	margin-bottom: 0;
}

}

@media screen and (min-width: 1200px) {

.cards li {
	font-size: 1.25em;
	height: 12em;
	width: 8em;
}

.examples {
	font-size: 1.25em;
	top: 2em;
	left: 6em;
}

.facebook {
	left: 0em;
}

}