@charset "UTF-8";
/* CSS Document */

html {
    -webkit-text-size-adjust: 100%;
}

body {
	background-color:#edf1f5;
	font-size:14px;
	overflow-x: hidden;
	color:#000;
	font-family: 'Helvetica Neue', Helvetica, sans-serif, Arial;
	min-width:1038px;
}
body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, img, ol, ul, li {
	margin: 0;
	padding: 0;
}
ol, ul {
    list-style: none outside none;
}
a {
	outline:none;
}
h1 {
	font-weight:300;
}
h2 {
	font-weight:400;
	letter-spacing:0.7px;
	word-spacing:3px;
}

.logo, .charm-logo {
	background:url(../../images/turnaboutforautism-norepeat.png) no-repeat scroll 0 0 / 400px 200px rgba(0, 0, 0, 0);
	background-repeat:no-repeat;
}

header {
	background-color:#FFF;
	height:80px;
	box-shadow:0 0 8px rgba(0, 0, 0, 0.2);
	position:relative;
	z-index:10;
}
.logo {
    background-position:-11px -14px;
    float:left;
    height:43px;
    margin:16px 0;
    width:150px;
}
.content {
	overflow:hidden;
	height:682px;
}
.home-menu {
	background-color:#48C9BE;
	background-image: -webkit-gradient(
	linear,
	left top,
	right top,
	color-stop(0, #2CB2A7),
	color-stop(0.33, #60CCC1),
	color-stop(0.67, #60CCC1),
	color-stop(1, #2CB2A7)
);
background-image: -o-linear-gradient(right, #2CB2A7 0%, #60CCC1 33%, #60CCC1 67%, #2CB2A7 100%);
background-image: -moz-linear-gradient(right, #2CB2A7 0%, #60CCC1 33%, #60CCC1 67%, #2CB2A7 100%);
background-image: -webkit-linear-gradient(right, #2CB2A7 0%, #60CCC1 33%, #60CCC1 67%, #2CB2A7 100%);
background-image: -ms-linear-gradient(right, #2CB2A7 0%, #60CCC1 33%, #60CCC1 67%, #2CB2A7 100%);
background-image: linear-gradient(to right, #2CB2A7 0%, #60CCC1 33%, #60CCC1 67%, #2CB2A7 100%);
	text-align:center;
	overflow:scroll;
	overflow-x:hidden;
	-webkit-overflow-scrolling: touch;
	height:100%;
	padding-right:30px;
	margin-right:-30px;
}
#viewlist {
	padding:50px 0 0;
}
#viewlist h1 {
	border-bottom:2px solid #FFF;
	display:inline-block;
	color:#FFF;
	font-size:45px;
	font-weight:200;
	letter-spacing:2px;
	padding:50px 0 10px;
	margin-bottom:100px;
}
.list {
	display:inline-block;
	cursor:pointer;
	margin:0 50px;
}
.list h2 {
	color:#FFF;
	font-size:24px;
	margin:30px 0 0;
}
.list .img {
	border:10px solid #FFF;
	box-shadow:0 0 10px rgba(0,0,0,0.05);
	border-radius:300px;
	display:inline-block;
	height:150px;
	width:150px;
}

.photo-view, .video-view, .polls-view, .testimonials-view {
	background-color:#3E9AF0	;
	text-align:center;
	overflow:scroll;
	overflow-x:hidden;
	-webkit-overflow-scrolling: touch;
	height:100%;
	padding-right:30px;
	margin-right:-30px;
}
.video-view {
	background-color:#CF7468;
}
.polls-view {
	background-color:#fca000	;
	box-shadow:0 0 10px rgba(0, 0, 0, 0.1) inset;
}
.testimonials-view {
	background-color:#A8BA27	;
}
.photo-view .list {
	cursor:default;
}
.photo-view .list .img, .polls-view .list .img, .testimonials-view .list .img {
	border:0px solid transparent;
	box-shadow:none;
	height:50px;
	width:50px;
}
.photo-view .list img, .polls-view .list img, .testimonials-view .list img {
	margin-top:-27px;
}
.photo-view .list .img:before, .polls-view .list .img:before, .testimonials-view .list .img:before {
	background-color:#FFF;
	content:"";
	height:1px;
	display:inline-block;
	margin:15px 0 0px -100px;
	width:250px;
}
.photo-view .list h2, .polls-view .list h2, .testimonials-view .list h2 {
	color:#FFF;
	margin:50px 0 10px;
}
.photo-list li {
	border:5px solid rgba(255,255,255,0.5);
	display:inline-block;
	margin:0 10px 20px;
	width:280px;
}
.photo-list li img {
	vertical-align:top;
	width:100%;
}
.polls-list, .video-list, .photo-list {
	float:left;
	margin:30px 0 20px;
	width:100%;
}
.testimonial-list {
	display:inline-block;
	text-align:left;
	letter-spacing:1px;
	word-spacing:2px;
	margin-top:30px;
	padding:0 20px 20px;
	width:80%;
}
.testimonial-list div {
	background-color:rgba(255,255,255,0.8);
	display:inline-block;
	padding:20px;
	margin-bottom:20px;
	width:90%;
}
.testimonial-list span {
	text-align:right;
	font-weight:bold;
	line-height:34px;
	padding-top:10px;
}
.testimonial-list p {
	font-size:16px;
	font-weight:300;
	line-height:28px;
}
.polls-list .polls {
	background-color:#FFF;
	display:inline-block;
	text-align:left;
	height:355px;
	padding:15px;
	margin:0 10px 20px;
	width:280px;
}
.polls-list h2 {
	font-size:15px;
	font-weight:500;
	letter-spacing:0.7px;
	word-spacing:2px;
	line-height:24px;
	margin-bottom:20px;
}
.polls-list h3 {
	color:#555;
	float:left;
	font-size:14px;
	font-weight:400;
	letter-spacing:0.7px;
	word-spacing:2px;
	margin-bottom:10px;
	width:100%;
}
.polls-list .polls-rate, .polls-list .rate {
	background-color:#EEE;
	float:left;
	height:3px;
	margin-bottom:20px;
	width:82%;
}
.polls-list .rate {
	background-color:#029bdb;
	margin:0;
}
.polls-list span {
	float:left;
	color:#A8BA27;
	margin:-8px 0 0 12px;
}
.polls-list .total {
	float:right;
	color:#888;
	margin:5px 0 0 10px;
}

.top-arrow {
	background-color:rgba(255,255,255,0.5);
	border:1px solid rgba(255,255,255,0.5);
	color:#FFF;
	float:;
	cursor:pointer;
	height:60px;
	position:relative;
	z-index:2;
	margin-bottom:-85px;
	line-height:25px;
	letter-spacing:0.7px;
	width:60px;
}
.top-arrow span {
	background-color:#FFF;
	display:inline-block;
	height:3px;
	margin:28px 0 0;
	width:35px;
}
.top-arrow span:before, .top-arrow span:after {
	content:"";
	background-color:#FFF;
	display:inline-block;
	height:3px;
	margin:-8px 11px 21px -9px;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	width:25px;
}
.top-arrow span:after {
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}

.freezelayer {
	background-color:rgba(255,255,255,0.8);
    height:100%;
    left:0;
    position:fixed;
	display:none;
    top:0;
    width:100%;
    z-index:200;
}
#next-pre {
	border:10px solid rgba(255,255,255,0.8);
	box-shadow:0 0 16px rgba(0,0,0,0.2);
	position:absolute;
	z-index:201;
	height:600px;
	width:600px;
}
#next-pre .prie, #next-pre .next {
	background-color:#FFF;
	box-shadow:0 0 10px rgba(0,0,0,0.1);
	height:100px;
	cursor:pointer;
	position:absolute;
	left:-80px;
	top:250px;
	width:80px;
}
#next-pre .next {
	right:-80px;
	left:auto;
}
#next-pre .prie:before, #next-pre .prie:after {
	background-color:#555;
	content:"";
	display:inline-block;
	height:40px;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	margin:17px 0 0 33px;
	width:5px;
	vertical-align:top;
}
#next-pre .prie:after {
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	margin:42px 0 0 -5px;
}
#next-pre .next:before, #next-pre .next:after {
	background-color:#555;
	content:"";
	display:inline-block;
	height:40px;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	margin:17px 0 0 42px;
	width:5px;
	vertical-align:top;
}
#next-pre .next:after {
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	margin:42px 0 0 -5px;
}
#next-pre img {
	width:100%;
	position:relative;
	z-index:1;
}

/*Footer Start*/

footer {
	background-color:#FFF;
	box-shadow:0 0 8px rgba(0, 0, 0, 0.2);
	position:relative;
	z-index:10;
	float:left;
	text-align:center;
	height:25px;
	padding:10px 0;
	width:100%;
}
footer span {
	color:#777;
	letter-spacing:0.7px;
	display:inline-block;
	padding:4px 0;
}
footer a {
	color:#777;
	text-decoration:none;
}
footer a:hover {
	text-decoration:underline;
}
footer .charm-logo {
	background-position:-13px -70px;
	float:right;
	cursor:pointer;
	height:32px;
	margin:-8px 0 -8px -20%;
	width:88px;
}

/*Footer End*/

/*common css Start*/

.cm-wd {
    margin:0 auto;
	max-width:1020px;
	padding:0 10px;
	position:relative;
	z-index:1;
}
.martop40 {
	margin-top:40px;
}
.martop20 {
	margin-top:20px;
}
.fl {
	float:left;
}
.fr {
	float:right;
}
.cmfw {
	float:left;
	width:100%;
}

/*common css End*/

@media (min-width:769px) and (max-width:980px) {
}

@media (max-width:1038px) {
	body {
		min-width:100%;
	}
	.cm-wd {
		min-width:100%;
		padding:0;
	}
	.logo {
		margin-left:10px;
	}
	.charmalot, footer .charm-logo {
		margin-right:10px;
	}
}
@media (max-width:817px) {
	.list .img {
		border:6px solid #fff;
		height:120px;
    	width:120px;
	}
	.list h2 {
		font-size:20px;
	}
}
@media (max-width:736px) {
	#viewlist {
		padding:20px 0 0;
	}
	#viewlist h1 {
		padding:10px 0 10px;
		margin-bottom:30px;
	}
	.list h2 {
		font-size:18px;
		margin-top:20px;
	}
}
@media (max-height:704px) {
	#viewlist h1 {
		padding:30px 0 10px;
		margin-bottom:100px;
	}
}
@media (max-height:680px) {
	#viewlist h1 {
		padding:30px 0 10px;
		margin-bottom:80px;
	}
}
@media (max-height:414px) {
	#viewlist h1 {
		padding:0 0 10px;
		margin-bottom:30px;
	}
}
@media (max-width:736px) {
	.home-menu .list {
		margin:0 30px 50px;
	}
	.polls-list, .video-list, .photo-list, .testimonial-list {
		margin-top:10px;
	}
}
@media (max-width:500px) {
	.home-menu .list {
		margin:0 100px 50px;
	}
	#viewlist h1 {
    	margin-bottom:40px;
    	padding:10px 0;
	}
	.charmalot {
		font-size:16px;
		margin-top:-14px;
		line-height:26px;
	}
	.charmalot span {
		margin-top:-2px;
	}
	.charmalot br {
		display:block;
	}
	footer span {
		float:left;
		margin-left:10px;
	}
}