/* stylesheet for demo and examples */

@import url(http://fonts.googleapis.com/css?family=Lobster+Two:700italic,700);
@import url(http://fonts.googleapis.com/css?family=Oswald:300);



/* content*/

.content1{
	overflow: auto;
	position: relative;
	padding: 20px 0;
	margin: 10px;
	width: 100%;
	max-width: 100%;
	height: 400px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

.content1.hidden{ display: none; }

.content1.light{
	color: #333;
}



.content1 p{ margin: 2px 0; font-family: "Century Gothic";
    font-size: 15px; text-align:justify;}



.content1.light p:nth-child(odd){

}

.content1.light p:nth-child(3n+3){ }

.content1 p.full:nth-child(odd), .content1 p.half:nth-child(odd), 
.content1 p.full:nth-child(3n+3), .content1 p.half:nth-child(3n+3){
	background: none;
	padding: 0;
}

.content1 h2{
	font-size: 200%;
	line-height: 130%;
}

.content1 h2:first-child{ margin-top: 5px; }

.content1:nth-child(odd) h2{
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-style: normal;
}

hr + .content1:nth-child(odd) h2{
	font-family: "Lobster Two", "Georgia", serif;
	font-weight: 700;
	font-style: italic;
}

.content1.light h2{ color: inherit; }

.content1 img{
	margin: 0;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	padding: 3px;
	background: rgba(0,0,0,0.2);
}

.content1.light img{ background: rgba(255,255,255,0.4); }

.content1 input[type='text'], .content1 textarea{
	border: none;
	background: transparent;
	background-color: #bbb;
	background-color: rgba(255,255,255,0.6);
	min-height: 20px;
	padding: 5px;
	-moz-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
	box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
	width: 50%;
	font-size: inherit;
	font-family: inherit;
	color: #222;
}

.content1 textarea{
	min-height: 80px;
	width: 70%;
}

.content1 .half img{
	max-width: 48%;
	margin: 0 0 2% 2%;
}

.content1 .half img:nth-child(odd){ margin: 0 2% 2% 0; }

#demo.showcase{ min-width: 740px; }



#resizable.content1 p{ width: 1000px }

.content1.fluid{
	width: 90%;
	max-width: 1680px;
}

.content1.fluid h2{
	color: #eb3755;
	font-family: "Lobster Two", "Georgia", serif;
	font-weight: 700;
	font-style: italic;
}

.content1.nested{ height: 600px; }

.content1.nested .nested{
	margin: 0 auto;
	background-color: rgba(0,0,0,0.1);
	height: 400px;
}

#content1-1.content1.nested{ margin-bottom: 40px; }

#content1-1.content1.nested p{ width: 1000px; }

#content1-1.content1.nested .nested{
	margin: 20px;
	width: 600px;
	height: 300px;
}

.content1.zero-height{ height: 0; }

.content1.zero-width{ width: 0; }
/* content end*/




/* content2 */



.content2{
	overflow: auto;
	position: relative;
	padding: 20px 0;
	margin: 10px;
	width: 740px;
	max-width: 100%;
	height: 400px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

.content2.hidden{ display: none; }

.content2.light{
	color: #333;
}



.content2 p{ margin: 2px 0; font-family: "Century Gothic";
    font-size: 15px; text-align:justify;}



.content1.light p:nth-child(odd){

}

.content1.light p:nth-child(3n+3){ color: #666; }

.content1 p.full:nth-child(odd), .content1 p.half:nth-child(odd), 
.content1 p.full:nth-child(3n+3), .content1 p.half:nth-child(3n+3){
	background: none;
	padding: 0;
}

.content2 h2{
	font-size: 200%;
	line-height: 130%;
}

.content2 h2:first-child{ margin-top: 5px; }

.content2:nth-child(odd) h2{
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-style: normal;
}

hr + .content2:nth-child(odd) h2{
	font-family: "Lobster Two", "Georgia", serif;
	font-weight: 700;
	font-style: italic;
}

.content2.light h2{ color: inherit; }

.content2 img{
	margin: 0;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	padding: 3px;
	background: rgba(0,0,0,0.2);
}

.content2.light img{ background: rgba(255,255,255,0.4); }

.content2 input[type='text'], .content1 textarea{
	border: none;
	background: transparent;
	background-color: #bbb;
	background-color: rgba(255,255,255,0.6);
	min-height: 20px;
	padding: 5px;
	-moz-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
	box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
	width: 50%;
	font-size: inherit;
	font-family: inherit;
	color: #222;
}

.content2 textarea{
	min-height: 80px;
	width: 70%;
}

.content2 .half img{
	max-width: 48%;
	margin: 0 0 2% 2%;
}

.content2 .half img:nth-child(odd){ margin: 0 2% 2% 0; }

#demo.showcase{ min-width: 740px; }



#resizable.content2 p{ width: 1000px }

.content2.fluid{
	width: 90%;
	max-width: 1680px;
}

.content2.fluid h2{
	color: #eb3755;
	font-family: "Lobster Two", "Georgia", serif;
	font-weight: 700;
	font-style: italic;
}

.content2.nested{ height: 600px; }

.content2.nested .nested{
	margin: 0 auto;
	background-color: rgba(0,0,0,0.1);
	height: 400px;
}

#content1-1.content2.nested{ margin-bottom: 40px; }

#content1-1.content2.nested p{ width: 1000px; }

#content1-1.content2.nested .nested{
	margin: 20px;
	width: 600px;
	height: 300px;
}

.content2.zero-height{ height: 0; }

.content2.zero-width{ width: 0; }

/* content2 end */












/* content2 */



.content3{
	overflow: auto;
	position: relative;
	padding: 20px 0;
	margin: 10px;
	width: 100%;
	max-width: 100%;
	height: 400px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

.content3.hidden{ display: none; }

.content3.light{
	color: #333;
}



.content3 p{ margin: 2px 0; font-family: "Century Gothic";
    font-size: 15px; text-align:justify; color:#fff;}



.content3.light p:nth-child(odd){

}

.content3.light p:nth-child(3n+3){ color: #666; }

.content3 p.full:nth-child(odd), .content1 p.half:nth-child(odd), 
.content3 p.full:nth-child(3n+3), .content1 p.half:nth-child(3n+3){
	background: none;
	padding: 0;
}

.content3 h2{
	font-size: 200%;
	line-height: 130%;
}

.content3 h2:first-child{ margin-top: 5px; }

.content3:nth-child(odd) h2{
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-style: normal;
}

hr + .content23:nth-child(odd) h2{
	font-family: "Lobster Two", "Georgia", serif;
	font-weight: 700;
	font-style: italic;
}

.content3.light h2{ color: inherit; }

.content3 img{
	margin: 0;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	padding: 3px;
	background: rgba(0,0,0,0.2);
}

.content3.light img{ background: rgba(255,255,255,0.4); }

.content3 input[type='text'], .content1 textarea{
	border: none;
	background: transparent;
	background-color: #bbb;
	background-color: rgba(255,255,255,0.6);
	min-height: 20px;
	padding: 5px;
	-moz-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
	box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
	width: 50%;
	font-size: inherit;
	font-family: inherit;
	color: #222;
}

.content3 textarea{
	min-height: 80px;
	width: 70%;
}

.content3 .half img{
	max-width: 48%;
	margin: 0 0 2% 2%;
}

.content3 .half img:nth-child(odd){ margin: 0 2% 2% 0; }

#demo.showcase{ min-width: 740px; }



#resizable.content2 p{ width: 1000px }

.content3.fluid{
	width: 90%;
	max-width: 1680px;
}

.content3.fluid h2{
	color: #eb3755;
	font-family: "Lobster Two", "Georgia", serif;
	font-weight: 700;
	font-style: italic;
}

.content3.nested{ height: 600px; }

.content3.nested .nested{
	margin: 0 auto;
	background-color: rgba(0,0,0,0.1);
	height: 400px;
}

#content1-1.content3.nested{ margin-bottom: 40px; }

#content1-1.content3.nested p{ width: 1000px; }

#content1-1.content3.nested .nested{
	margin: 20px;
	width: 600px;
	height: 300px;
}

.content3.zero-height{ height: 0; }

.content3.zero-width{ width: 0; }

/* content2 end */



@media(max-width:700px) {
.content1{
	overflow: auto;
	position: relative;
	padding: 20px 0;
	margin: 10px 10px 10px 20px;
	width: 100%;
	max-width: 100%;
	height: 400px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
}