/* Home */
body { background: #131C27; }
body.page-home { overflow: hidden; }
.main-container { padding: 0px; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 10px; background-clip: content-box; background-color: rgba(95,110,142,0.6); }

/* Header */
.navbar-right { margin-right: 0px; }
.room-list-heading { float: left; margin-left: 300px; }
.header-nav .section-title { float: left; margin: 0px; font-size: 16px; line-height: 40px; color: #fff; position: absolute; left: 0; right: 0; width: 100%; padding-left: 360px; text-align: center; z-index: 1; }

/* Intro Sidebar */
.intro-sidebar { background-color: #095AAF; position: relative; width: 360px; float: left; height: 100vh; padding: 20px 30px 20px 30px; }
.intro-sidebar .create-room { position: relative; padding: 0px; text-align: center; }
.intro-sidebar .create-room .andchill-url { position: absolute; right: 10px; top: 10px; background-color: #fff; padding: 5px; font-size: 16px; color: #5A6D8B; font-weight: 500; }
.intro-sidebar #frm-create-room.error .create-room-tip { display:none; }
.intro-sidebar #room-name { margin-bottom: 15px; }
.intro-sidebar #intro-error-message { text-align: center; }
.intro { text-align: center; position: relative; top: 50%; margin-top: -128px; }
.intro-sidebar h2.main-intro-text { margin: 0px 0px 40px 0px; font-size: 34px; }
.intro-sidebar .create-room-tip { font-size: 12px; color: rgba(255,255,255,0.5); }

/* Firetracks banner */
#firetracks_banner { background-color: #2c3d52; margin: 0 20px; margin-bottom: 20px; }
#firetracks_banner .ft-link { color: #25cc2a; font-weight: 500; }
#firetracks_banner .close { text-shadow: none; }


/* Public room list */
.rooms-container { margin: 0 auto;  }
.public-rooms { height: 100vh; overflow-y: scroll; margin-top: 62px; padding: 30px 0px 110px 0px; border-top: 1px solid #243345; }
ol { list-style: none; }
ol.room-list { max-width: 2100px; margin: 0 auto; padding: 0; }
ol.room-list:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
ol.room-list li.room a { float: left; }
ol.room-list li.room .room-overlay { position: absolute; width: 100%; height: 100%; border-radius: 4px; transition: all 0.2s; background-color: rgba(8,12,19,0.5);  background-image: -moz-linear-gradient(top, rgba(8,12,19,0) 50%, rgba(8,12,19,0.7) 70%, rgba(8,12,19,1) 100%); background-image: -webkit-linear-gradient(top, rgba(8,12,19,0) 50%,rgba(8,12,19,0.7) 70%,rgba(8,12,19,1) 100%); background-image: linear-gradient(to bottom, rgba(8,12,19,0) 50%,rgba(8,12,19,0.7) 70%,rgba(8,12,19,1) 100%); }
ol.room-list li.room a:hover .room-overlay { background-color: rgba(8,12,19,0.2); }
ol.room-list li.room img { max-width: 100%; border-radius: 4px; opacity: 1; }
ol.room-list li.room { position: relative; width: 320px; float: left; padding: 0; margin: 0 15px 30px 15px; }
ol.room-list li.room .room-views { position: absolute; right: 15px; bottom: 25px; z-index: 900; color: #fff; font-weight: 500; font-size: 13px; }
ol.room-list li.room .room-info { position: absolute; bottom: 0; left: 0; padding: 15px; z-index: 900; width: 100%; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
ol.room-list li.room .room-info .room-video-title { color: #E1E8F2; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width:85%; }
ol.room-list li.room .room-info .room-name { color: #5A6D8B; font-size: 13px; font-weight: 400; }
ol.room-list li.room .room-info p { margin: 0; padding: 0; }

/* Footer */
footer { text-align: center; position: absolute; bottom: 20px; left: 0; width: 100%; }

footer .made-by { font-size: 11px; color: rgba(255,255,255,0.3); }
footer .made-by a { color: rgba(255,255,255,0.5); padding: 0 5px; }
footer .made-by a:hover { color: rgba(255,255,255,0.8); text-decoration: none; }
footer .made-by a.ftr-link { padding: 0; color: rgba(255,255,255,0.3); text-decoration: underline; padding-right: 5px; }
footer .social-links { list-style-type: none; padding: 0; }
footer .social-links>li { display: inline-block; }
footer .social-links>li>a { font-size: 20px; color: #fff; margin: 0 6px; transition: all 0.2s; }
footer .social-links>li>a .fa-facebook-official:hover, footer .social-links>li>a .fa-twitter:hover { transform: scale(1.2); }

/* Terms */
.content-container { max-width: 800px; margin: 0 auto; padding: 80px 0; }

@media only screen and (min-width : 690px) {
    ol.room-list { width: 330px; }
}
@media only screen and (min-width : 1060px) {
    ol.room-list { width: 700px; }
}
@media only screen and (min-width : 1410px) {
	ol.room-list { width: 1050px; }
}
@media only screen and (min-width : 1760px) {
    ol.room-list { width: 1400px; }
}
@media only screen and (min-width : 2110px) {
    ol.room-list { width: 1750px; }
}