.italic {
font-family : 'ralewaysemibold_italic';
}
.capitalize {
text-transform : capitalize;
}
.presenter {
font-family : 'ralewaysemibold';
}
.button {
font-family : 'ralewaybold';
}
body {
font-family : 'ralewayregular';
}
.pg {
font-family : 'ralewaybold';
}
#loginform {
font-family : 'ralewaylight';
text-transform : uppercase;
}
.text-right {
	text-align: right;
}
.text-left {
	text-align: left;
}
.bold {
	font-weight: bold;
}
h1 {
font-size : 28px;
}
h2 {
font-size : 20px;
}
h3 {
font-size : 16px;
line-height : 14px;
margin: 6px 0 0;
}
/*
h4 {
font-size : 12px;
line-height: 10px;
margin: 6px 0 0 6px;
}
*/
/*
h5 {
font-size : 14px;
}
h6 {
font-size : 13px;
}
*/
a {
color : inherit;
transition : color 0.2s ease-out;
}
a:hover {
color : rgb(150, 150, 150);
cursor : pointer;
}

.two-col {
column-count : 2;
text-align : left;
width : 50%;
display : inline-block;
}
/*
.column {
width : 500px;
height : auto;
display : inline-block;
text-align : center;
padding : 10px;
}
*/
span {
line-height : 100%;
}
body {
text-align : center;
position : relative;
background-color : #cccccc;
}
/*
.gradient_horizontal {
background : rgb(127, 127, 127);
}
*/
body {
min-height : 2000px;
}
header {
background-color : #cccccc;
width : 100%;
height : 90px;
position : relative;
text-align : center;
}
.block {
display : inline-block;
position : relative;
}
#page-wrapper {
display : inline-block;
height : auto;
text-align : left;
position : relative;
margin : 0 auto 0;
background-color : white;
margin-bottom : 100px;
min-width : 1000px;
padding: 10px;
}
.page {
width : 100%;
min-height : 880px;
float : left;
text-align : center;
margin-bottom: 100px;
}
footer {
width : 100%;
float : left;
clear : both;
text-align : right;
position : relative;
height : 100px;
}
footer p {
width : 100%;
text-align : right;
margin-top : 39px;
}
footer p a {
margin: 0 10px;
height: 25px;
line-height: 25px;
color: #5c5c5c;
}
footer p a.envelope,
footer p a.phone {
width : 115px;
height : 25px;
background-position : left center;
background-repeat : no-repeat;
background-size : contain;
cursor : pointer;
display : inline-block;
margin : 0 20px;
top : -3px;
text-align: right;
}
footer p a.envelope {
background-image : url(../img/envelope-81x54.png);
}
footer p a.phone {
background-image : url(../img/phone-75x76.png);
}

/*
.topics .grid-view {
overflow : hidden;
}
*/
.logo {
  left: 0;
  position: absolute;
  bottom: -5px;
  max-width: 610px;
}
footer .logo {
left : 20px;
opacity : 0.5;
top : 32px;
}
#welcome {
float : right;
width : 480px;
text-align : right;
}
#sign-out {
height: 32px;
}
#player-block {
	width: 50vw;
}
.preview .details, #player-block .details {
width : 100%;
float : left;
clear : both;
margin-bottom : 100px;
text-align : left;
margin-top: 25px;
}

.preview .details.upper, #player-block .details.upper {
  float: none;
  font-size: 16px;
  margin: 0;
  position: absolute;
  right: 0;
  text-align: left;
  top: -35px;
  width: 338px;
}
@media screen and (max-width:1400px) {
	.preview .details.upper, #player-block .details.upper {
	  font-size: 12px;
	  top: -30px;
	  width: 338px;
	}
}
.preview .details.upper {
	text-align: right;
}
.preview .details.upper .share, #player-block .details.upper .share, .preview .details.upper .comment, #player-block .details.upper .comment {
float: right;	
margin-top: -3px;
margin-left: 10px;
}
.preview .details.upper .rating, #player-block .details.upper .rating {
	margin-top: 4px;
float: right;	
}

#player-block .details {
color : white;
}
.preview .details .button {
position : absolute;
top : 8px;
right : 0px;
}
.preview .details p {
margin : 20px 0 40px;
float: left;
}
.preview .details p.more {
height : 195px;
overflow : hidden;
position : relative;
}
.details > p.more::after {
top : 120px;
content : "more...";
cursor : pointer;
font-size : 14px;
position : absolute;
right : 0;
color : #aaaaaa;
height : 20px;
width : 100px;
}
.details > p.less::after {
bottom : 120px;
content : "...less";
cursor : pointer;
font-size : 14px;
position : absolute;
right : 0;
color : #aaaaaa;
}
.preview .details .avatar {
float : left;
height : auto;
margin : 0 10px 4px 0;
width : 176px;
}
.preview .iframe {
float : left;
clear : both;
background-color : black;
/* border : black solid 1px; */
top: 0;
margin: 0px;
margin-bottom: 10px;
}
.preview .iframe.display  {
  background: transparent none repeat scroll center center / contain ;
  overflow: hidden;
}
.preview {
	position: relative;
}
.preview .iframe.display iframe {
	position: absolute;
	top: -8px;
	left: -8px;
}
.list {
width : 100%;
float : left;
}
.list a {
background-position : left top;
background-repeat : no-repeat;
background-size : 10% auto;
height : 40px;
width : 80%;
float : left;
margin-bottom : 10px;
}
.list a {
font-size : 17px;
line-height : 16px;
padding-left : 67px;
}
.list a span {
display : inline-block;
margin-left : 10px;
font-size : 80%;
}
.preview .iframe {
/* width : 100%; */
overflow: hidden;
}
.preview {
float : right;
margin-top : 0;
}

.preview {
width : 40%;
}

.preview .categories {
display : none;
}
h1.preview .presenter {
margin-bottom : 20px;
}
.preview .title {
margin-bottom: 20px;
width : 100%;
font-size : 1.5vw;
}
.preview .video-details {
	height: 32px;
	width: 100%;
	margin-bottom: 20px;
}
.preview .duration {
	height: 32px;
	font-size: 0.8vw;
	line-height: 32px;
}
#free-preview.preview {
float : none;
display : inline-block;
background-color : white;
text-align : left;
padding : 40px;
border-radius : 20px;
margin-top : 40px;
text-align: center;
}
.player-mode #free-preview {
display : none;
}
#free-preview.preview .iframe {
margin: 0;
margin: 0 auto;
display: inline-block;
float: none;
}
.blocker {
width : 100%;
height : 3000px;
display : none;
background-color : rgba(0, 0, 0, 0.9);
position : absolute;
text-align : center;
top : 0;
left : 0;
z-index : 999999;
}
.player-mode #video-blocker, .preview-mode #video-blocker {
display : block;
}
.blocker .block {
display : inline-block;
margin : 0 auto;
border : white solid 1px;
}
.preview-mode #video-blocker .block {
display : none;
}
#video-blocker .block > h1, #video-blocker .block > h4 {
color : white;
position : absolute;
left : 0;
}
#video-blocker .block > h1 {
font-family : 'ralewaysemibold_italic';
font-size : 2vw;
width: 35vw;
bottom : 585px;
text-align: left;
}
#video-blocker .block > h4 {
bottom : -50px;
font-size : 30px;
}
@media screen and (max-width:1400px) {
#video-blocker .block > h1 {
  bottom: 365px;
  font-size: 1.2vw;
  width: 25vw;
}
#video-blocker .block > h4 {
color: red;
}	
}
#fs-player {
background-color : white;
position : relative;
width : 100%;
height : inherit;
top : 0;
left : 0;
margin-bottom: 20px;
}
#chapter-selector {
  bottom: -50px;
  height: 40px;
  left: 0;
  overflow: hidden;
  position: absolute;
  text-align: right;
  width: 350px;
}
#chapter-selector select {
font-size : 16px;
background : transparent;
color : white;
border : transparent none;
display : inline-block;
margin-right : -20px;
}
.closer {
position : absolute;
top : 0;
right : 10px;
cursor : pointer;
width : 40px;
height : 40px;
font-family : 'ralewayextralight';
color : white;
font-size : 40px;
}
.event-block {
width : 80%;
text-align : left;
margin-top : 60px;
background-color : rgba(0, 0, 0, 0.2);
padding : 5%;
margin-bottom : 200px;
display: none;
}
.event-block img.event {

background-color : black;
float : left;
margin : 10px 0;
}
.event-block .content {
	float: left;
}
.home .events .thumb {
background-color : black;
margin-top : 10px;
}
.home .events .thumb .overlay {
transition : none;
}
.home .events .thumb:hover .overlay {
bottom : -137px;
}
.hero, .featured-presenters, .trending_topics, .events {
background-color : transparent;
position : relative;
float : left;
}
.featured-presenters,
.events {
	height: 14vw;
	min-height: 180px;
}
.featured-presenters {
	background: rgb(127, 127, 127) none repeat scroll 0 0;
	
}
.events {
background-color : #222222;
text-align : center;
}
.scroll-holder .headline {
color: white;
  top: -40px;
  font-size: 1.8vw;
  left: 2%;
  position: absolute;
  text-align: left;
  vertical-align: text-bottom;
}
.hero #member.button, .hero #login.button {
position : absolute;
}
#hero {
background : url("../img/hero-4.jpg") center center /cover no-repeat scroll transparent;
overflow : hidden;
}
.hero h1 {
font-size : 4vw;
margin : 50px 0 0 20px;

}
.hero h1 span {
	font-family: 'ralewaybold';
}
.hero h1, .hero h2 {
color : white;
}
.hero h2 {
font-size : 1.4vw;
margin : 0 0 0 20px;
line-height: 1.4vw;
}

#hero-buttons {
	position: absolute;
	left: 20px;
	top: 16vw;
}
.hero #member.button, .hero #login.button {
position: absolute;
left : 0px;
width : 144px;
}
.hero #member.button {
top : 0;
}
.hero #login.button {
top : 50px;
}

.scroll-holder {

position : relative;
float : left;
text-align : center;
/*
margin-bottom : 20px;
margin-left : 20px;
margin-top : 10px;
*/
background : transparent;
width: 100%;
}
.scroll-holder {
position : absolute;
bottom : 0;
}

body {
font-size : 14px;
}
header .block {
height : 80px;
position : relative;
}
nav {
position : absolute;
bottom : -5px;
width : 100%;
}
#welcome {
height : 33px;
line-height : 40px;
top : 5px;
}
.grid-view {
width : 59%;
min-height: 565px;
float : left;
}

.no-side .grid-view {
width : 100%;
}

#page-wrapper, .hero, .featured-presenters, .events, #control .block, header .block {
max-width : 1620px;
width: 90vw;
min-width: 1000px;
}
.hero {
	height: 45vw;
	max-height: 820px;
}
.presenter {
font-family : 'ralewaymedium';
width : 100%;
float : left;
}
#player-block .presenter {

}


.presenter span {
font-family : 'ralewaylight';
font-size : 16px;
display : inline-block;
margin-left : 10px;
}
@media screen and (max-width:1400px) {
.presenter {
font-size : 14px;
}

.presenter span {
font-size : 12px;
}	
}
.about {
float : left;
width : 100%;
background-color : rgba(0, 0, 0, 0.25);
text-align: center;
}
.about .two-col {
font-size : 75%;
margin-bottom : 60px;
margin-top : 20px;
text-align : left;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}


/* MESSAGE BLOCK  *************************************************************************************************************************/

.message-block {
  border: 1px solid grey;
  display: inline-block;
  height: 201px;
  top: 200px;
  width: 800px;
  background-color: white;
  
}
#message-blocker {
	display: none;
}
.message-block .block {
width: 72%;
display: inline-block;
margin: 10px auto;
border: none;
}
.message-block input.button[type="submit"] {
  margin-left: 480px;
}

.message {
	font-family: 'ralewaybold';
}
/**************************************************************************************************************************/



.row {
	position: relative;
	float: left;
	clear: both;
}

.row select {
  border: 0 none;
/*
  height: 30px;
  padding: 4px;
*/
  width: 115%;
  font-size: 12px;
}


.form .row:nth-of-type(1) {
	margin-top: 40px;
}

#form.page,
#form .page-content,
#regular.page,
#promo.page  {
	text-align: left;
}
.page-content {
	padding: 0 40px;
}
.tabs {
  height: 40px;
  width: 100%;
  margin-top: 20px;
}

.tab {
  background: rgb(200,200,200);
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
  width: 105px;
  display: inline-block;
}
.tab.on {
  background: rgb(100,100,100);
  color: white;
}
.tab-page {
/* margin-left: 40px; */
}




a.next,
input[type="submit"].button {
  clear: both;
  float: left;
  margin: 20px 0 0 395px;
}
a.next {
	margin-left: 415px;
}
input[type="submit"].button {
	margin-right: 0;
}

/*
#loginform, #registerform {
background-color : rgba(0, 0, 0, 0.3);
background-color : #aaaaaa;
border : black solid 1px;
border-radius : 10px;
display : inline-block;
margin-top : 100px;
padding : 50px 100px 100px 100px;
width : 460px;
text-align : left;
}
.form h2 {
width : 100%;
margin-bottom : 30px;
text-align : center;
color: red;
}
*/
textarea {
  clear: both;
  float: left;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  padding: 10px;
  width: 480px;
  resize: none;
  overflow: hidden;
  height: 200px;
  position: relative;
}
input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="number"]   {
font-size : inherit;
height : 22px;
border : none 0;
padding : 4px;
position: relative;
}
.select.border {
	height : 22px;
	padding : 4px;
}
input[type="text"].border,
input[type="email"].border,
input[type="password"].border,
input[type="number"].border,
.select.border,
textarea,
.border {
border : rgba(0, 0, 0, 0.25) solid 1px;
border-radius : 4px;
}
input[type="text"].border.error,
input[type="email"].border.error,
input[type="password"].border.error,
input[type="number"].border.error,
.select.border.error {
	border-color: red;
}
input[type="text"],
input[type="password"], 
input[type="email"], 
.select,
#loginform input[type="text"],
#loginform input[type="password"], 
#loginform input[type="email"],
#loginform input[type="number"],
#adminform input[type="text"],
#adminform input[type="password"], 
#adminform input[type="email"],
#adminform input[type="number"] { 
width: 490px;
float: left;
clear: both;
}
input[type="text"].medium,
input[type="password"].medium,
input[type="email"].medium,
#loginform input[type="text"].medium,
#loginform input[type="password"].medium, 
#loginform input[type="email"].medium,
#loginform input[type="number"].medium,
#adminform input[type="text"].medium,
#adminform input[type="password"].medium, 
#adminform input[type="email"].medium,
#adminform input[type="number"].medium { 
width: 360px;	
clear: none;	
}
input[type="text"],
input[type="password"], 
input[type="email"], 
.select,
#admin input[type="text"],
#admin input[type="password"], 
#admin input[type="email"],
#admin input[type="number"],
#admin input[type="text"],
#admin input[type="password"], 
#admin input[type="email"],
#admin input[type="number"] { 
width: 100%;
float: left;
clear: both;
}


#email-identifier {
  float: left;
  height: 35px;
  line-height: 35px;
  text-align: left;
  width: 200px;
}
#loginform input[type="text"],#loginform input[type="password"], #loginform input[type="email"], #loginform input[type="number"] {

}
.select {
float: left;
overflow: hidden;
width: 500px;
}
.subrow.select {
	width: 100px;
	clear: none;
}
.subrow.select option {
	width: auto;
}
.select.short {
width: 100px;
clear: none;
}
.select.short.first {
	clear: left;
	margin-right: 20px;
}
.select.short select {
	width: 120px;
}

/*
label, .label {
margin-top: 20px;
float : left;
clear: both;
}
*/

#login-message {
position : absolute;
left : 12px;
top : -30px;
color: pink;

}

#login {
float: right;
clear: none;	
margin: 0;
margin-left: 20px;
border: none transparent;
}
.forgot {
float: right;
clear: none;
padding-top: 11px;
padding-bottom: 11px;
margin-left: 20px;
}
#send-password {
	display: none;
}
#loginform .row {
/* 	height: 85px; */
}
.email-row {
display: none;
}


.micro {
font-size : 10px;
position: absolute;
left: 0;
bottom: -15px;
}
#become-member input[type="submit"].button {
top : 36px;
}
#paid-preview h2 {
font-weight: 900;

}


.sign-up .tab-page h3 {
margin-top: 20px;
margin-left: 0;
}

.events, .about {
overflow : hidden;
}

.popup {
  background: white none repeat scroll 0 0;
  border-radius: 10px;
  display: inline-block;
  height: 560px;
  margin-top: 10vh;
  width: 560px;
}
.popup form {
  display: inline-block;
  padding: 5%;
  width: 90%;
}

.popup form .button {
float: right;
border: none transparent;
margin-top: 20px;
}



body.saving::before {
  background-color: white;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}


.feedback {
  background: white none repeat scroll 0 0;
  display: none;
  height: 630px;
  margin-left: 0;
  opacity: 0.8;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 1;
}
.feedback::after {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 0.4);
  content: "PROCESSING";
  cursor: default;
  display: block;
  font-family: "ralewaybold";
  font-size: 14px;
  height: 100%;
  left: -45px;
  position: absolute;
  text-align: center;
  top: 410px;
  width: 100%;
}

.feedback::before {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  animation: 2s linear 0s normal none infinite running spin;
  border-color: #3498db #f3f3f3 #f3f3f3;
  border-image: none;
  border-radius: 50%;
  border-style: solid;
  border-width: 20px;
  content: "";
  cursor: default;
  display: inline-block;
  height: 40px;
  left: 50%;
  margin-left: -86px;
  position: absolute;
  top: 50%;
  width: 40px;
  z-index: 1;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.no-side .grid {
	width: 100%;
}
.no-side .thumb {
	width: 25%;
	margin: 0;
	margin-right: 0;
	float: left;
}

.no-side .preview {
	display: none;
}

.preview-mode .social,
.preview-mode .close-social {
	right: 160px;
}
#paid-preview .social, 
#paid-preview .close-social {
	top: -28px;
}

#free-preview .social, 
#free-preview .close-social {
	top: -20px;
}