*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after {display: table;  content: ''; }
.clearfix:after { clear: both; }

#page-transition-overlay { background:#131C27; position:absolute; top:0; left:0; width:100%; height:100%; z-index:99999; }

body { font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #fff; }
a { outline: 0; color: #aaa; text-decoration: none; cursor: pointer; }
a:focus { outline: 0; }
.hidden { position: absolute; overflow: hidden; width: 0; height: 0; pointer-events: none; }
.subtle-text { color: #7E8FAA; }
.small-text { font-size: 14px; font-weight: 400; }
a.small-subtle-link { color: #8392A5; font-size: 13px; }
a.blue-link { color: #53b4ff; font-weight: 500; text-decoration: none; }
a.blue-link:hover { color: #419CE2; }
.margin-large-bottom { margin-bottom: 20px; }

::selection { background: #2D89CF; color: #fff; }
::-moz-selection { background: #2D89CF; color: #fff; }

h4 { font-size: 20px; }
.no-opacity { opacity: 0 !important; }

.margin-top { margin-top: 10px; }
.margin-right { margin-right: 10px; }
.margin-bottom { margin-bottom: 10px; }
.margin-left { margin-left: 10px; }
.margin-bottom-large { margin-bottom: 20px; }
.margin-top-large { margin-top: 20px; }

body.logged-in .logged-out { display:none; }
body.logged-out .logged-in { display:none; }

.small-icon { font-size: 10px; }

.flip-image { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }

/* User Settings */
.user-settings { list-style-type: none; margin: 0; float: right; padding: 0; position: relative; z-index: 4; }

/* Modals */
.modal { background-color: rgba(13, 20, 30, 0.6); }
.modal .modal-dialog .modal-content { background-color: #313D50; border-radius: 4px; box-shadow: none; border: none; }
.modal .modal-header { border-bottom: 0; padding: 25px 25px 0px 25px; }
.modal .modal-header .close { color: #95A4BC; font-size: 28px; font-weight: 400; text-shadow: none; opacity: 1; }
.modal-header .close:focus { outline: 0; }
.modal .modal-body { padding: 0px 25px 25px 25px; }
.modal .modal-title { font-size: 20px; }
.modal.edged-image img.hanging-sloth { margin-top: -51px; }
.modal.fade .modal-dialog { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; }
.modal.fade.in .modal-dialog { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }

::-webkit-input-placeholder { color: #98A4BE !important; }
:-moz-placeholder { color: #98A4BE !important; }
::-moz-placeholder { color: #98A4BE !important; }
:-ms-input-placeholder { color: #98A4BE !important; }

.dropdown-menu { background-color: #1E2737; border: 0; border-radius: 2px; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,.175); -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.175); }
.dropdown-menu>li>a { color: #8295B5; padding: 12px 20px; font-size: 14px; line-height: 1; font-weight: 500; }
.dropdown-menu>li>a:hover { color: #fff; background-color: #5C6B7E; }

/* Header */
.header-nav { width: 100%; position: fixed; top: 0; left: 0; z-index: 1050; padding: 10px 20px; line-height: 40px; }
.header-brand { margin: 0; padding: 0px 15px 0px 0px; font-size: 1em; line-height: 40px; float: left; }
.header-nav a { font-size: 14px; color: #8295B5; text-decoration: none; font-weight: 500; }
.header-nav a:hover { color: #ABBBD6; cursor: pointer; }
.header-nav .input-tiny, .header-nav .input-tiny:hover { color: #fff; }

/* Buttons */
.btn { -webkit-transition: all 0.2s; transition: all 0.2s; }
.btn:hover { box-shadow:inset 0px -2px 0px 0px rgba(0,0,0,0.4); webkit-box-shadow:inset 0px -3px 0px 0px rgba(0,0,0,0.3);  moz-box-shadow:inset 0px -3px 0px 0px rgba(0,0,0,0.3); }
.btn:focus { box-shadow:inset 0px 2px 0px 0px rgba(0,0,0,0.4); webkit-box-shadow:inset 0px -3px 0px 0px rgba(0,0,0,0.3); moz-box-shadow:inset 0px -3px 0px 0px rgba(0,0,0,0.3); outline: none !important; }

.btn-success { background-color: #35B039; color: #fff; border: 0; }
.btn-success:hover { background-color: #35B039; color: #fff; }
.btn-success:focus { background-color: #35B039 !important; color: #fff !important; }

.btn-primary { background-color: #2D89CF; color: #fff; border: 0; }
.btn-primary:hover { background-color: #2D89CF; color: #fff; }
.btn-primary:focus { background-color: #2D89CF !important; color: #fff !important; }

.btn-secondary { background-color: #5A6D8B; color: #fff; border: 0; }
.btn-secondary:hover { background-color: #5A6D8B; color: #fff; }
.btn-secondary:focus { background-color: #5A6D8B !important; color: #fff !important; }

.btn.facebook-modal-log-in { background-color: #3b5998; min-width: 220px; }
.btn.facebook-modal-log-in:focus { background-color: #3b5998 !important; }
.btn.twitter-modal-log-in { background-color: #00ACED; min-width: 220px; }
.btn.twitter-modal-log-in:focus { background-color: #00ACED !important; }

/* Forms */
.form-control { box-shadow: none; color: #171645; border-color: #fff; }
.form-control:focus { border: 1px solid #5399FD; -webkit-box-shadow: none; box-shadow: none; }
.input-large { height: 50px; font-size: 16px; font-weight: 600; padding: 14px 18px; }

.input-small { height: 42px; font-size: 13px; font-weight: 400; }
.input-small.btn { font-weight: 600; }

.input-tiny { height: 34px; }
.input-tiny.btn { padding: 7px 12px; color: #fff; }

.checkbox-slider-sm { padding: 0 !important; margin: 0 !important; }

/* Validation */
.error-message { color: #F94931; margin: 8px 0; font-weight: 500; text-align: left; }
.form-error { border-color: #F94931; }

.intro-text { text-align: center; margin-bottom: 40px; margin-top: 0px; }
.browser-support-container .browser-support { text-align: center; width: 100%; }
.browser-support-container { display:none; }

.small-sloth { max-width: 160px; }
.medium-sloth { max-width: 200px; }
.tick-small { max-width: 70px; }

.fa-people-small::before { content: url("../img/people-small.svg"); }
.fa-people-small-gray::before { content: url("../img/people-small-gray.svg"); }

/* Room list */
#rooms-list-modal .rooms-list { border-bottom: 1px solid #3F4A5F; }
#rooms-list-modal .rooms-list .room { float: left; width: 100%; border-top: 1px solid #3F4A5F; padding: 10px; line-height: 24px; }
#rooms-list-modal .rooms-list .room a.room-name { color:#fff; text-decoration:none; }
#rooms-list-modal .rooms-list:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.animated { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
/* fadeInUp animation */
@-webkit-keyframes fadeInUp { 
    0% { opacity: 0; -webkit-transform: translateY(20px); } 
    100% { opacity: 1; -webkit-transform: translateY(0); } 
} 
@keyframes fadeInUp { 
    0% { opacity: 0; transform: translateY(20px); } 
    100% { opacity: 1; transform: translateY(0); } 
} 
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
.line1 { -webkit-animation-delay: 0.3s; }
.line2 { -webkit-animation-delay: 0.4s; }

@media only screen and (max-width : 992px) {
	.video-control-bar .send-feedback { display: none; }
}
@media only screen and (max-width : 768px) {
	.intro-sidebar .create-room { display: none; }
	.rooms-container { display: none; }
	.join-room, .intro .welcome-user, .container, .plan, .public-rooms { display: none; }
	.browser-support-container,.intro-sidebar { position: absolute; width: 100% !important; bottom: 0; z-index: 20; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 100%; background-color: #0D141E !important; }
	.browser-support-container { z-index:1050; }
	.intro-container { padding: 0 !important; }
	footer { display: none; }
	body.page-home .intro { display: none; }
	header .navbar-nav li { display: none; }
	header .section-title, header .navbar-right { display: none; }
}