/* Minification failed. Returning unminified contents.
(2367,5): run-time error CSS1035: Expected colon, found 'position'
 */
/*! jQuery UI - v1.10.4 - 2014-03-21
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.slider.css
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-clearfix {
	min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0);
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* For IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}

/* This style sheet is customized according to Office 16 UX guideline: http://fun/crux/16 */

/* Begin Global Styles */

html, body {
    height: 100%;
}

body {
    font-size: 12pt;
    line-height: 19px;
    font-family: 'Segoe UI Web Normal', 'wf_SegoeUI', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; /* Fix for bolder looking fonts on Mac OSX browsers. */
    -moz-osx-font-smoothing: grayscale; /* Fix for bolder looking fonts on Mac OSX browsers. */
    color: #666666;
    margin-top: 0;
}

#mainwrapper {
    background-image: url("Images/BackgroundTop.svg");
    -ms-background-size: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0 60px;
    margin-top: 0;
    min-height: 100%;
    overflow-x: hidden;
}

#mainwrapper nav {
    max-width: 1920px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.background-dark #mainwrapper {
    background: none;
}

header, footer, nav, section {
    display: block;
}

header {
    height: 80px;
    width: 100%;
}

.mix-container {
    margin-right: auto;
    margin-left: auto;
}

    .mix-container:before,
    .mix-container:after {
        display: table;
        content: " ";
    }

    .mix-container:after {
        clear: both;
    }

    .mix-container:before,
    .mix-container:after {
        display: table;
        content: " ";
    }

    .mix-container:after {
        clear: both;
    }

.mix-container-fluid {
    padding-top: 24px;
}

#site-alert {
    font-weight: bold;
    padding: 3px;
    text-align:center;
    position: relative;
    top: 66px;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
}

/* Begin Mix Pagination */

.mix-pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
    font-size: 14pt;
}

    .mix-pagination > li {
        display: inline;
    }

        .mix-pagination > li > a,
        .mix-pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.428571429;
            text-decoration: none;
            color: #424242;
        }

        .mix-pagination > li:first-child > a,
        .mix-pagination > li:first-child > span {
            margin-left: 0;
            border-bottom-left-radius: 4px;
            border-top-left-radius: 4px;
            color: #0072c6;
        }

        .mix-pagination > li:last-child > a,
        .mix-pagination > li:last-child > span {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            color: #0072c6;
        }

        .mix-pagination > li > a:hover,
        .mix-pagination > li > span:hover,
        .mix-pagination > li > a:focus,
        .mix-pagination > li > span:focus {
            background-color: #eeeeee;
        }

    .mix-pagination > .active > a,
    .mix-pagination > .active > span,
    .mix-pagination > .active > a:hover,
    .mix-pagination > .active > span:hover,
    .mix-pagination > .active > a:focus,
    .mix-pagination > .active > span:focus {
        z-index: 2;
        color: #424242;
        cursor: default;
        background-color: initial;
        font-family: 'Segoe UI Web Bold', 'wf_SegoeUIBold', 'Segoe UI Bold', 'Segoe WP Bold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    }

    .mix-pagination > .disabled > span,
    .mix-pagination > .disabled > a,
    .mix-pagination > .disabled > a:hover,
    .mix-pagination > .disabled > a:focus {
        color: #888888 !important;
        cursor: not-allowed;
        border-color: #dddddd;
    }

/* End Mix Pagination */

/* CorrelationId Style */
#correlationId {
    display: none;
}

/* Styles for basic forms begin */
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-family: 'Segoe UI Web Bold', 'wf_SegoeUIBold', 'Segoe UI Bold', 'Segoe WP Bold', Tahoma, Arial, sans-serif;
}

textarea {
    min-height: 75px;
}

.editor-label {
    margin: 1em 0 0 0;
}

.editor-field {
    margin: 0.5em 0 0 0;
}
/* Styles for basic forms end */

/* Styles for validation helpers begin */
.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-family: 'Segoe UI Web Bold', 'wf_SegoeUIBold', 'Segoe UI Bold', 'Segoe WP Bold', Tahoma, Arial, sans-serif;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}
/* Styles for validation helpers end */

.header-light {
    display: block;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 30px;
    line-height: 34px;
    margin-bottom: 20px;
}

.header-semibold {
    display: block;
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 14px;
}

hr.header-underline {
    border-bottom: 1px;
    border-bottom-color: #CCCCCC;
    border-bottom-style: solid;
    margin-bottom: 0px;
}

.header-light,
.header-semibold {
    color: #424242;
}

.header-semibold-40px {
    color: #424242;
    display: inline-block;
    font-size: 40px;
    line-height: 44px;
    margin: 0;
    padding: 0 15px;
}

.header-light-36px {
    color: #888888;
    display: inline-block;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 36px;
    line-height: 1;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.label-regular-21px {
    font-family: 'Segoe UI Web Normal', 'wf_SegoeUI', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 21px;
    color: #424242;
    margin-bottom: 14px;
}

.text-regular-20px {
    color: #424242;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 20px;
    line-height: 24px;
}

.text-regular-14px {
    color: #0072c6;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 18px;
}

.text-regular-14px-blue {
    color: #0072c6;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 18px;
}

.text-regular-11px {
    color: #424242;
    font-family: 'Segoe UI Web Normal', 'wf_SegoeUI', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 11px;
    line-height: 18px;
}

.greyText {
    color: grey;
}

/* End Global Styles */

/* Begin Portal Top Nav */

#dropdown {
    display: inline;
    margin-top: 5px;
}

#dropdown-menu-athena {
    text-align: left;
    margin-right: 10px;
}

#home-topnavbar-collapse {
    max-height: 370px !important;
}

#navbar-padding {
    height: 66px;
}

nav.navbar {
    min-width: 300px;
}

.navbar-inverse {
    background-image: linear-gradient(to bottom, #343434 0%, #343434 100%);
    background-color: #343434;
    background-repeat: repeat-x;
    border-color: #343434;
    position: fixed;
}

    .navbar-inverse .navbar-brand {
        color: #ffffff !important;
        font-size: 36px;
        font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
        line-height: 40px;
        padding: 4px 6px 4px 20px;
        margin: 2px 0 4px 4px;
        position: relative;
        width: 230px;
        text-decoration: none;
    }

.center-the-nav {
    margin: 0 auto;
    float: none;
}

.navbar-nav {
    font-family: 'Segoe UI Web Semilight', 'wf_SegoeUISemilight', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
}

    .navbar-nav > li > a {
        background-color: transparent;
        text-decoration: none;
        outline: none;
        font-size: 18px;
        line-height: 20px;
    }

.navbar-inverse .navbar-brand:hover {
    text-decoration: none;
    outline: none;
    color: #A9A9A9;
    background-color: transparent;
}

.navbar-inverse .navbar-brand:focus {
    text-decoration: none;
    outline: 1px dotted #FFFFFF;
    color: #A9A9A9;
    background-color: transparent;
}

.navbar-inverse .navbar-nav > li > a {
    color: #A9A9A9;
    background-color: transparent;
}

    .navbar-inverse .navbar-nav > li > a:hover {
        color: #FFFFFF;
        background-color: transparent;
    }

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover {
    color: #FFFFFF;
    background-color: transparent;
}

.navbar-inverse .navbar-nav > li > a:focus {
    color: #f4901e;
    background-color: transparent;
}

.navbar-inverse .navbar-nav > .active > a:focus {
    color: #f4901e;
    background-color: transparent;
}

.navbar-inverse .navbar-link {
    color: #FFFFFF;
    background-color: transparent;
}

    .navbar-inverse .navbar-link:hover {
        color: #FFFFFF;
        background-color: transparent;
    }

.navbar-inverse .navbar-toggle:focus {
    outline: 1px dotted #FFFFFF;
}

.navbar-inverse .navbar-nav > li.dropdown > a {
    background-color: transparent;
    font-size: 18px;
}

.navbar-inverse .navbar-nav > li.dropdown.open > a {
    background-color: transparent;
    color: #FFFFFF !important;
    font-size: 18px;
}

.navbar-inverse .navbar-nav > li > .dropdown-menu {
    margin-top: 19px;
}

.navbar-inverse .dropdown-menu > li > a:hover,
.navbar-inverse .dropdown-menu > li > a:focus {
    background-color: #A9A9A9;
}

.dropdown-menu > li > span {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #a6a6a6;
    white-space: nowrap;
}

.navbar-collapse.in {
    overflow-y: visible;
}

/*-Top Nav Office Mix Logo begin */
#customer_preview_span {
    float: right;
    color: #A7A7A7;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 12px;
    line-height: 6px;
    text-align: right;
    width: 100%;
}

.officemix_logo_block {
    display: inline-block;
    width: 46px;
    height: 46px;
    margin-bottom: -6px;
}

.officemix_logo_img {
    height: 36px;
    margin-top: -10px;
    width: 36px;
}
/*-Top Nav Office Mix Logo end */

/* End Portal Top Nav */

/* Begin Portal Footer */

footer.footer {
    background-color: #343434;
    padding: 14px 10px 0 10px;
    font-family: 'Segoe UI Web Semilight', 'wf_SegoeUISemilight', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    text-align: center;
    font-size: 13px;
    width: 100%;
    min-height: 60px;
    height: auto;
    max-height: 150px;
}

    footer.footer ul.footer-links {
        display: inline-block;
        padding: 0;
    }

        footer.footer ul.footer-links li:first-child {
            margin-left: 0;
            padding-left: 0;
        }

footer.footer ul.footer-links li,
footer.footer ul.footer-links li a {
    color: #A9A9A9;
    text-decoration: none;
}

    footer.footer ul.footer-links li a:hover,
    footer.footer ul.footer-links li a:focus {
        color: #FFFFFF;
        text-decoration: none;
    }

.footer-links li {
    display: inline;
    margin: 0em 1em 0em 0em;
}

.footer-links li {
    display: inline;
    padding-left: 1em;
    border-left: 1px solid #bbb;
}

.footer-links .ms-copyright {
    display: inline;
    border-left: 0;
}

.footer-links .footer-social {
    margin-left: 111px;
    border-left: none;
    display: inline-block;
}

.footer-twitter {
    width: 32px;
    height: 32px;
    border: none;
    text-decoration: none;
    outline: none;
    margin-left: 10px;
    margin-right: 10px;
}

.footer-pinterest {
    width: 32px;
    height: 32px;
    border: none;
    text-decoration: none;
    outline: none;
    margin-right: 10px;
}

.footer-rss {
    width: 32px;
    height: 32px;
    border: none;
    text-decoration: none;
    outline: none;
    margin-right: 10px;
}

/* End Portal Footer */

/* Begin Corner Ribbon Styles */
/* Original CSS from http://css-tricks.com/snippets/css/corner-ribbon/ */

.wrapper {
    position: relative;
}

.slideThumbnail-img-ribbon-block {
    position: relative;
    max-width: 200px;
    max-height: 120px;
    -moz-min-width: 200px;
    -ms-min-width: 200px;
    -o-min-width: 200px;
    -webkit-min-width: 200px;
    min-width: 200px;
    min-height: 100px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid #CCCCCC;
    overflow: hidden;
}

.ribbon-wrapper-green {
    width: 75px;
    height: 78px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
}

.ribbon-green {
    font: bold 13px Sans-Serif;
    color: #333;
    text-align: center;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: relative;
    padding: 2px 0;
    left: -5px;
    top: 10px;
    width: 120px;
    background-color: #BFDC7A;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
    background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
    color: #6a6340;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

    .ribbon-green:before, .ribbon-green:after {
        content: "";
        border-top: 3px solid #6e8900;
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        position: absolute;
        bottom: -3px;
    }

    .ribbon-green:before {
        left: 0;
    }

    .ribbon-green:after {
        right: 0;
    }

/* End Corner Ribbon Styles */

.descriptionDiv {
    margin-bottom: 35px;
    margin-top: 15px;
}

.modal-body-button-group {
    margin-top: 25px;
}

.mix-lesson-error {
    font-size: 11pt;
    color: darkred;
}

.mix-lesson-item {
    padding-top: 40px;
    padding-bottom: 40px;
    display: block;
    border-bottom: 1px;
    border-bottom-color: #CCCCCC;
    border-bottom-style: solid;
}

#lessonList p:first-child {
    margin: 12px 0 10px 0;
}

.slideThumbnail {
    margin-top: 35px;
    padding-top: 10px;
    padding-bottom: 5px;
}

.inlineDisplay {
    display: inline-block;
    margin-top: 10px;
}

.inlineDisplay-manage {
    float: left;
    display: inline-block;
}

.slideThumbnail img {
    max-width: 200px;
}

.mix-slidethumbnail-img {
    max-width: 200px;
    max-height: 120px;
    width: 100%;
    height: 100%;
    margin-bottom: 12px;
}

.mix-slidethumbnail-overlay {
    max-width: 200px;
    max-height: 120px;
    -moz-min-width: 200px;
    -ms-min-width: 200px;
    -o-min-width: 200px;
    -webkit-min-width: 200px;
    min-width: 200px;
    min-height: 100px;
    width: 100%;
    align-content: center;
    position: absolute;
    top: 0;
    z-index: 100;
}

/* Begin Getting Started Page */

#hero_bkg {
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%;
    height: auto;
    border: 0 none;
    padding: 0;
    overflow: hidden;
}

.homeHeroBackground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
}

#home_hero_canvas {
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%;
    height: auto;
    border: 0 none;
    overflow: hidden;
}

#home_hero_sliding_panels_viewport {
    height: auto;
    max-width: 100%;
    border: 0 none;
}

#mobile_device_flag {
    height: 0;
    width: 0;
    display: none;
}

.home_hero_buttons_canvas {
    border: 0 solid #008000;
    display: inline-block;
    height: 100%;
}

    .home_hero_buttons_canvas.desktop {
        width: 50px;
    }

    .home_hero_buttons_canvas.mobile {
        width: 50px;
        display: none;
    }

.home-hero-slide-visual-block {
}

.videoplayer {
    position: relative;
    padding-bottom: 42.22%;
    height: 0;
    overflow: hidden;
    display: none;
}

    .videoplayer div,
    .videoplayer video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0 none;
    }

    .videoplayer video {
        left: 1px; /* Firefox adds space around video, this is a workaround */
    }

#video_1 {
    background: #000000;
}

#video_2 {
    background: #000000;
}

#video_3 {
    background: #000000;
}

#video_4 {
    background: #000000;
}

.home-play-button {
    position: absolute;
    top: 50%;
    left: 60%;
    width: 100px;
    height: 100px;
    padding: 0;
    margin: -50px 0 0 -50px;
    border: 0 none;
    background-image: url("Images/Play100x100.svg");
    -ms-background-size: 100px 100px;
    background-size: 100px 100px;
    cursor: pointer;
}

    .home-play-button:focus {
        border: 1px dotted #000000;
    }

.home_hero_buttons_canvas.desktop {
    width: 50px;
}

.home_hero_buttons_canvas.mobile {
    width: 48px;
    display: none;
}

.slide-bkg-wrapper {
    position: relative;
    padding-bottom: 42.22%;
    height: 0;
    overflow: hidden;
}

    .slide-bkg-wrapper div,
    .slide-bkg {
        position: absolute;
        top: 0;
        left: 1px; /* Firefox adds space around video, this is a workaround to match */
        width: 100%;
        height: 100%;
        border: 0 none;
    }

#slide-bg-1 {
    background-image: url("Images/AboutMix.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#slide-bg-2 {
    background-image: url("Images/Create.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#slide-bg-3 {
    background-image: url("Images/Engage.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#slide-bg-4 {
    background-image: url("Images/Share.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#slide-bg-5 {
    background-image: url("Images/Share.jpg"); /* We use any previous slide image to add the difference in height to the last slide. */
    background-position: 100% top;
    background-repeat: no-repeat;
    visibility: hidden;
    opacity: 0;
}

/*-desktop-hero-buttons*/
.desktop.home-hero-button, .desktop.home-hero-button-spacer {
    border: 0 solid;
    cursor: pointer;
    display: block;
    height: 50px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 50px;
    outline: none;
    background: url("Images/HeroNavSprite.png");
    -ms-background-size: 150px 460px;
    background-size: 150px 460px;
    background-repeat: no-repeat;
    overflow: hidden;
}

.desktop.home-hero-button-spacer {
    background-position: 0 -50px;
    height: 38px;
    cursor: default;
}

.desktop.herobutton-5 {
    background-position: 0 -368px;
}

    .desktop.herobutton-5:hover,
    .desktop.herobutton-5:focus {
        background-position: -100px -368px;
    }

    .desktop.herobutton-5.home-selected-hero-button {
        background-position: -50px -368px;
    }

.desktop.herobutton-4 {
    background-position: 0 -276px;
}

    .desktop.herobutton-4:hover,
    .desktop.herobutton-4:focus {
        background-position: -100px -276px;
    }

    .desktop.herobutton-4.home-selected-hero-button {
        background-position: -50px -276px;
    }

.desktop.herobutton-3 {
    background-position: 0 -184px;
}

    .desktop.herobutton-3:hover,
    .desktop.herobutton-3:focus {
        background-position: -100px -184px;
    }

    .desktop.herobutton-3.home-selected-hero-button {
        background-position: -50px -184px;
    }

.desktop.herobutton-2 {
    background-position: 0 -92px;
}

    .desktop.herobutton-2:hover,
    .desktop.herobutton-2:focus {
        background-position: -100px -92px;
    }

    .desktop.herobutton-2.home-selected-hero-button {
        background-position: -50px -92px;
    }

.desktop.herobutton-1 {
    background-position: 0 0;
}

    .desktop.herobutton-1:hover,
    .desktop.herobutton-1:focus {
        background-position: -100px 0;
    }

    .desktop.herobutton-1.home-selected-hero-button {
        background-position: -50px 0;
    }
/*-desktop-hero-buttons*/

/*-mobile-hero-buttons*/
.mobile.home-hero-indicator, .mobile.home-hero-indicator-spacer {
    border: 0px solid;
    cursor: default;
    display: block;
    height: 48px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 48px;
    outline: none;
    background-repeat: no-repeat;
    overflow: hidden;
    background: url("Images/HeroNavSpriteMobile.svg");
    -ms-background-size: 240px 324px;
    background-size: 240px 324px;
    background-repeat: no-repeat;
    overflow: hidden;
}

.mobile.home-hero-indicator-spacer {
    background-position: 0 -48px;
    cursor: default;
    height: 9px;
}

.mobile.heroindicator-5 {
    background-position: 0 -56px;
    height: 21px;
}

    .mobile.heroindicator-5:hover {
        background-position: 0 -56px;
        height: 21px;
    }

    .mobile.heroindicator-5.home-selected-hero-indicator {
        background-position: -192px -113px;
        height: 49px;
    }

.mobile.heroindicator-4 {
    background-position: 0 -56px;
    height: 21px;
}

    .mobile.heroindicator-4:hover {
        background-position: 0 -56px;
        height: 21px;
    }

    .mobile.heroindicator-4.home-selected-hero-indicator {
        background-position: -144px -85px;
        height: 49px;
    }

.mobile.heroindicator-3 {
    background-position: 0 -56px;
    height: 21px;
}

    .mobile.heroindicator-3:hover {
        background-position: 0 -56px;
        height: 21px;
    }

    .mobile.heroindicator-3.home-selected-hero-indicator {
        background-position: -96px -56px;
        height: 49px;
    }

.mobile.heroindicator-2 {
    background-position: 0 -56px;
    height: 21px;
}

    .mobile.heroindicator-2:hover {
        background-position: 0 -56px;
        height: 21px;
    }

    .mobile.heroindicator-2.home-selected-hero-indicator {
        background-position: -48px -28px;
        height: 49px;
    }

.mobile.heroindicator-1 {
    background-position: 0 -56px;
    height: 21px;
}

    .mobile.heroindicator-1:hover {
        background-position: 0 -56px;
        height: 21px;
    }

    .mobile.heroindicator-1.home-selected-hero-indicator {
        background-position: 0 0;
        height: 49px;
    }
/*-mobile-hero-buttons*/

.home-hero-slide-contents-block {
    position: relative;
    top: 0;
    left: 0;
    width: 25%;
    height: auto;
    float: left;
    border: 0 none;
    padding: 6% 20px 0 20px;
    display: inline-block;
    overflow: hidden;
    z-index: 0;
}

.home-hero-slide-contents-block-text {
    border: 0 none;
    display: inline-block;
    height: 100%;
    padding-left: 23px;
    vertical-align: top;
    width: 65%;
}

    .home-hero-slide-contents-block-text.mobile {
        display: none;
    }

.home-hero-slide-contents-block-text-title {
    color: #FFFFFF;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 20px;
    line-height: 24px;
}

.home-hero-slide-contents-block-text-description {
    color: #FFFFFF;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 24px;
    padding-top: 20px;
}

.mix-info-box:before {
    border-style: solid;
    border-width: 18px 35px 20px 0;
    content: "";
    height: 0;
    left: 30px;
    position: absolute;
    top: 100%;
    width: 0;
}

.mix-info-box {
    position: absolute;
    top: 40px;
    right: 26px;
    width: 300px;
    height: auto;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 28px;
    color: #FFFFFF;
    padding: 15px;
    line-height: 36px;
    text-align: left;
}

.mix-info-box {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

    .mix-info-box.red:before {
        border-color: #DC3C00 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    .mix-info-box.red {
        background: none repeat scroll 0 0 #DC3C00;
    }

    .mix-info-box.blue:before {
        border-color: #619ecc rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    .mix-info-box.blue {
        background: none repeat scroll 0 0 #619ecc;
    }

    .mix-info-box.orange:before {
        border-color: #FF6100 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    .mix-info-box.orange {
        background: none repeat scroll 0 0 #FF6100;
    }

    .mix-info-box.lightorange:before {
        border-color: #f7931d rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    .mix-info-box.lightorange {
        background: none repeat scroll 0 0 #f7931d;
    }

.home-hero-navigation-next-button {
    border: 1px solid #FFFFFF;
    bottom: 20px; /* Need to leave enough vertical space for IE video controls */
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Segoe UI Web Normal', 'wf_SegoeUI', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 20px;
    height: 38px;
    left: 20px;
    line-height: 34px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    position: absolute;
    text-align: center;
    width: 100px;
}

    .home-hero-navigation-next-button.red {
        background: none repeat scroll 0 0 #DC3C00;
    }

    .home-hero-navigation-next-button.blue {
        background: none repeat scroll 0 0 #619ecc;
    }

    .home-hero-navigation-next-button.orange {
        background: none repeat scroll 0 0 #FF6100;
    }

    .home-hero-navigation-next-button.lightorange {
        background: none repeat scroll 0 0 #f7931d;
    }

#home_hero_contents_getStarted-block {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 556px;
    height: 200px;
    margin: -100px 0 0 -278px;
    border: 0 none;
}

.home-hero-navigation-next-button.blue {
    background: none repeat scroll 0 0 #619ecc;
}

.home-hero-navigation-next-button.orange {
    background: none repeat scroll 0 0 #FF6100;
}

.home-hero-navigation-next-button.lightorange {
    background: none repeat scroll 0 0 #f7931d;
}

.home-hero-navigation-next-button:hover,
.home-hero-navigation-next-button:focus {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;
}

#home_hero_contents_getStarted {
    width: 576px;
    height: 200px;
    border: 0 none;
}

#home_hero_contents_left_panel {
    background: url("Images/pptWhite220x220.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    float: left;
    height: 200px;
    margin: 0;
    padding: 0;
    width: 200px;
}

.home-hero-download-button {
    border: 0 none;
    height: 30px;
    margin-left: 230px;
    position: absolute;
    top: 95px;
}

.button-header {
    display: inline-block;
    font-size: 44px;
    line-height: 50px;
    margin: 0 10px 0 0;
    vertical-align: top;
}

.button-header-small {
    border: 0 none;
    color: #FFFFFF;
    display: inline-block;
    float: right;
    font-size: 20px;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    line-height: 30px;
    margin: 0 9px 0 0;
    vertical-align: top;
}

#button_download_lnk_small {
    background-image: url("Images/download50x50.png");
    background-repeat: no-repeat;
    background-size: 30px auto;
    border: 0 none;
    display: inline-block;
    height: 30px;
    outline-style: none;
    text-decoration: none;
    width: 30px;
}

    #button_download_lnk_small:focus {
        width: 32px;
        height: 32px;
        padding: 1px;
        border: 1px dotted #000000;
    }

.home-hero-download-sysreqs {
    border: 0 none;
    bottom: -5px;
    color: #FFFFFF;
    left: 230px;
    padding-right: 0;
    position: absolute;
    width: 346px;
}

.home-hero-download-contents-text-smal {
    display: block;
    font-size: 12px;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
}

.home-hero-download-contents {
    border: 0 none;
    color: #FFFFFF;
    left: 230px;
    position: absolute;
    top: 2px;
}

.home-hero-download-contents-title {
    display: block;
    font-size: 39px;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
}

.home-hero-download-contents-text {
    display: block;
    font-size: 16.5px;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    margin-top: 20px;
}

.home_hero_slides {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

#home_hero_slides_slide_1 {
    background-color: #DC3C00;
    overflow: hidden;
    display: block;
    z-index: 4;
}

#home_hero_slides_slide_2 {
    background-color: #f7931d;
    overflow: hidden;
    display: none;
    z-index: 3;
}

#home_hero_slides_slide_3 {
    background-color: #619ecc;
    overflow: hidden;
    display: none;
    z-index: 2;
}

#home_hero_slides_slide_4 {
    background-color: #FF6100;
    overflow: hidden;
    display: none;
    z-index: 1;
}

#home_hero_slides_slide_5 {
    background-color: #dc3c00;
    overflow: hidden;
    display: none;
    z-index: 0;
}

img.backdrop {
    border: 0 none;
    display: none;
    height: 100%;
    margin: 0;
    outline: medium none;
    padding: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}

/*-system req tooltip-start-*/
#system_req_tooltip {
    display: none;
}

#home_hero_sysreq_tooltip_link {
    color: #ffffff;
    font-family: 'Segoe UI Web Semibold', 'wf_SegoeUISemibold', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 11.5px;
    outline: medium none;
    text-decoration: none;
}

    #home_hero_sysreq_tooltip_link:hover {
        text-decoration: underline;
    }

    #home_hero_sysreq_tooltip_link + div.tooltip div.tooltip-inner {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        font-size: 10px;
        background-color: #72786B;
        min-width: 305px;
        margin-bottom: -6px;
    }

    #home_hero_sysreq_tooltip_link + div.tooltip.top.in {
        opacity: 1.0;
        filter: alpha(opacity=100);
    }

    #home_hero_sysreq_tooltip_link + div.tooltip.top > div.tooltip-arrow {
        border-top-color: #72786B;
        margin-bottom: -6px;
    }

    #home_hero_sysreq_tooltip_link + div.tooltip.top .system_req_tooltip_table {
        display: table;
        padding: 8px 0;
    }

        #home_hero_sysreq_tooltip_link + div.tooltip.top .system_req_tooltip_table .system_req_tooltip_raw {
            display: table-row;
            text-align: left;
        }

        #home_hero_sysreq_tooltip_link + div.tooltip.top .system_req_tooltip_table .system_req_tooltip_cell {
            display: table-cell;
            padding: 4px 10px 2px 2px;
        }

/*-system req tooltip-ends-*/

.blackStar {
    color: #000000;
    font-size: 13px;
    font-weight: normal;
    vertical-align: top;
}

.whiteStar {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: normal;
    vertical-align: top;
}

#heroUrl {
    color: #FFFFFF;
    text-decoration: none;
}

    #heroUrl:hover {
        color: #DC3C00;
    }

.home_download_button-container {
    margin: 0;
    overflow: hidden;
    padding: 12px 24px 0 26px;
}

.home_download_button {
    background: none repeat scroll 0 0 #DC3C00;
    color: #ffffff;
    border: 0 none;
    display: inline-block;
    height: 126px;
    margin: 0;
    overflow: hidden;
    position: relative;
    -webkit-transform: skewX(-16deg);
    -moz-transform: skewX(-16deg);
    -ms-transform: skewX(-16deg);
    -o-transform: skewX(-16deg);
    transform: skewX(-16deg);
    width: 100%;
}

.home_download_button-container-centered-block {
    border: 0 none;
    height: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 300px;
}

.home_download_button-left-container,
.home_download_button-right-container {
    -webkit-transform: skewX( 16deg);
    -moz-transform: skewX( 16deg);
    -ms-transform: skewX( 16deg);
    -o-transform: skewX( 16deg);
    transform: skewX( 16deg);
}

.home_download_button-left-container {
    border: 0 none;
    display: inline-block;
    height: 100%;
    margin-left: -4px;
    padding-top: 24px;
    vertical-align: top;
    width: 50px;
}

.home_download_button-icon-block {
    margin: 0;
    padding: 0;
}

#home_download_button_lnk {
    width: 100%;
    border: 0 none;
    outline-style: none;
    text-decoration: none;
    display: inline-block;
}

    #home_download_button_lnk:focus {
        outline: 1px dotted #000000;
    }

#home_download_button_icon {
    background-image: url("Images/download50x50.png");
    background-repeat: no-repeat;
    background-size: 50px auto;
    border: 0 none;
    display: inline-block;
    height: 50px;
    margin-top: 15px;
    outline-style: none;
    text-decoration: none;
    width: 50px;
}

.home_download_button-right-container {
    border: 0 none;
    color: #FFFFFF;
    display: inline-block;
    height: 100%;
    padding: 20px 8px 0;
    text-align: left;
    vertical-align: top;
}

.home_download_button-header {
    border: 0 none;
    display: inline-block;
    font-size: 42px;
    font-weight: normal;
    line-height: 50px;
    margin: 0 10px 0 0;
}

.home_download_button_lnk,
.home_download_button_lnk:hover,
.home_download_button_lnk:visited {
    color: #FFFFFF;
    outline-style: none;
    text-decoration: none;
}

.home_download_button-text-small {
    border: 0 none;
    display: block;
    font-size: 28px;
    font-weight: lighter;
    padding: 6px 0 0;
}

.mix-info-box .home_download_button-container {
    width: 250px;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.mix-info-box .home_download_button {
    background: none;
    color: #ffffff;
    border: 0 none;
    display: inline-block;
    height: auto;
    margin: 10px 0 0 12px;
    overflow: hidden;
    position: relative;
    -webkit-transform: skewX(0deg);
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -o-transform: skewX(0deg);
    transform: skewX(0deg);
    width: 100%;
}

.mix-info-box .home_download_button-container-centered-block {
    border: 0 none;
    height: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: auto;
}

.mix-info-box .home_download_button-left-container,
.mix-info-box .home_download_button-right-container {
    -webkit-transform: skewX(0deg);
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -o-transform: skewX(0deg);
    transform: skewX(0deg);
}

.mix-info-box .home_download_button-left-container {
    border: 0 none;
    display: inline-block;
    height: 100%;
    margin-left: -4px;
    padding-top: 0;
    vertical-align: top;
    width: 50px;
}

.mix-info-box .home_download_button-icon-block {
    margin: 0;
    padding: 0;
}

.mix-info-box #home_download_button_lnk {
    width: 100%;
    border: 0 none;
    outline-style: none;
    text-decoration: none;
    display: inline-block;
}

    .mix-info-box #home_download_button_lnk:focus {
        outline: 1px dotted #FFFFFF;
    }

.mix-info-box #home_download_button_icon {
    background-image: url("Images/download50x50.png");
    background-repeat: no-repeat;
    background-size: 50px auto;
    border: 0 none;
    display: inline-block;
    height: 50px;
    margin-top: 13px;
    outline-style: none;
    text-decoration: none;
    width: 50px;
}

.mix-info-box .home_download_button-right-container {
    border: 0 none;
    color: #FFFFFF;
    display: inline-block;
    height: 100%;
    padding: 0 8px 0;
    text-align: left;
    vertical-align: top;
}

.mix-info-box .home_download_button-header {
    border: 0 none;
    display: inline-block;
    font-size: 36px;
    font-weight: normal;
    line-height: 36px;
    margin: 0;
}

.mix-info-box .home_download_button_lnk,
.mix-info-box .home_download_button_lnk:hover,
.mix-info-box .home_download_button_lnk:visited {
    color: #FFFFFF;
    outline-style: none;
    text-decoration: none;
}

.mix-info-box .home_download_button-text-small {
    border: 0 none;
    display: block;
    font-size: 28px;
    font-weight: normal;
    padding: 0;
}

#home-bkg {
    height: 100%;
    background-image: url("Images/BackgroundTop.svg");
    -ms-background-size: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-right: auto;
    margin-left: auto;
}

#bkg-bottom-fade {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: -webkit-linear-gradient(rgba(255,255,255,0), white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(255, 255,255,0), white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(255, 255,255,0), white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(255, 255,255,0), white); /* Standard syntax */
}

.home-header-block {
    margin: 0;
    padding: 0;
}

.mix-home-p-short {
    padding: 14px 15px 12px 15px;
}

/* End Getting Started Page */

/* Begin HomePage redesign */
#home-page-container {
    margin-top: -50px;
    text-align: center;
}

.hero-canvas {
	height: 350px;
	background-repeat: no-repeat;
	background-size: cover;
}

#hero-slide-1 {
	height: 500px;
	background-image: url("Images/home_slide_1_1800x1200.jpg");
    background-position: right 70%;
    position: relative;
}

#hero-slide-2 {
	background-image: url("Images/home_slide_2_1800x1200.jpg");
	background-position: center 30%;
}

#hero-slide-3 {
	background-image: url("Images/home_slide_3_1800x1200.jpg");
    background-position: left top;
}

#hero-slide-4 {
	background-image: url("Images/home_slide_4_1800x1200.jpg");
	background-position: right 90%;
}

.hero-text-wrapper {
    padding-top: 20px;
    padding-left: 5%;
    text-align: left;
    width: 35%;
}

.hero-text-wrapper h2 {
    font-family: 'Segoe UI Web Normal', 'wf_SegoeUI', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif !important;
    margin-left: 0 !important;
    font-size: 40px !important;
}

.hero-text-wrapper h2>strong {
    font-size: 68px;
    display: block;
}

.hero-text-wrapper p {
    font-size: 21px;
    line-height: 30px;
    width: 360px;
    color: #000;
}

.hero-text-wrapper .home-page-button {
    margin-top: 35px;
    margin-left:0;
    margin-right:0;
}

#home-page-container h1 {
    font-family: 'Segoe UI Web Bold', 'wf_SegoeUIBold', 'Segoe UI Bold', 'Segoe WP Bold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    color: black;
    font-size: 38px;
    font-weight: bold;
    margin: 50px;
}

#home-page-container h2 {
    font-family: 'Segoe UI Web Bold', 'wf_SegoeUIBold', 'Segoe UI Bold', 'Segoe WP Bold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    color: black;
    font-size: 32px;
    margin: 30px;
}

#home-page-container h2+p {
    font-size: 16px;
	line-height: 24px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
    width: 70%;
}

.hero-slide-container {
    margin-top:50px;
    margin-bottom:50px;
}

.pillar {
	float: left;
	text-align: center;
    min-width: 220px;
    width: 33.33%;
}

.pillar img
{
	width: 100px;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.pillar h3
{
    font-family: 'Segoe UI Web Semibold', 'wf_SegoeUISemibold', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 23px;
    color: black;
}

.pillar p {
	width: 230px;
	margin-left: auto;
	margin-right: auto;
    font-size: 16px;
    line-height: 24px;
}

/* override default style for sign-in and get-office-mix button on nav bar */
.btn-navbar-action
{
    margin-top: 15px !important;
    margin-right: 8px !important;
    padding: 1px 1px 1px 12px !important;
    color:#ffffff !important;
    font-weight: normal !important;
    font-size: 14px !important;
}

.btn-navbar-action:hover, .btn-get-office-mix-lg:hover
{
    color:#ffffff !important;
}

.btn-sign-in {
    border: #666 solid 1px;
}

.btn-get-office-mix
{
	background: #c54426; /* Old browsers */
	background: -moz-linear-gradient(left, #dc3c00 0%, #dd5900 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dc3c00), color-stop(100%,#dd5900)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #dc3c00 0%,#dd5900 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #dc3c00 0%,#dd5900 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #dc3c00 0%,#dd5900 100%); /* IE10+ */
	background: linear-gradient(to right, #dc3c00 0%,#dd5900 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc3c00', endColorstr='#dd5900',GradientType=1 ); /* IE6-9 */
}

.btn-get-office-mix:hover
{
	background: -moz-linear-gradient(left, #dd5900 0%, #dc3c00 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dd5900), color-stop(100%,#dc3c00)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #dd5900 0%,#dc3c00 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #dd5900 0%,#dc3c00 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #dd5900 0%,#dc3c00 100%); /* IE10+ */
	background: linear-gradient(to right, #dd5900 0%,#dc3c00 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd5900', endColorstr='#dc3c00',GradientType=1 ); /* IE6-9 */
}

.btn-get-office-mix-lg
{
    width: 350px;
    font-size: 32px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.home-page-button img
{
    width: 48px;
    height: 48px;
}

.home-page-button
{
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 350px;
}

/* End HomePage redesign */

/* Begin About Page */

.aboutpage-paragraph {
    margin: 10px 0 20px 0;
}

    .aboutpage-paragraph a:hover {
        color: #428BCA;
        text-decoration: none;
    }

/* End About Page */

/* Begin Welcome/Sign-in Page */

#mainwrapper.red-svg-wrapper {
    background: #DC3C00;
    background-image: url("Images/BackgroundGetStarted.svg");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.welcome-header-light {
    color: #FFFFFF;
    display: block;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 60px;
    line-height: 64px;
    margin-top: 175px;
    padding-left: 11px;
}

.welcome-header-regular {
    color: #FFFFFF;
    display: block;
    font-size: 26px;
    line-height: 28px;
    margin-bottom: 0;
    margin-top: 25px;
    padding-left: 11px;
}

.welcome-header-sm-regular {
    color: #FFFFFF;
    display: block;
    font-size: 21px;
    line-height: 20px;
    margin-top: 75px;
    margin-bottom: 25px;
    padding-left: 11px;
}

#welcome-container-buttons-block {
    border: 0 none;
    padding: 0 11px 30px;
}

#welcome-container-buttons-disclaimer {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 13px;
    margin-top: 10px;
    max-width: 821px;
    padding: 10px 0 0;
}

.btns_div {
    border: 0 none;
    display: inline-block;
    height: 70px;
    margin-right: 6px;
    outline: medium none;
    width: 290px;
}

    .btns_div.last {
        margin: 0;
    }

.btns_sm_div {
    border: 0 none;
    display: block;
    height: 32px;
    margin: 0;
    outline: medium none;
    width: 220px;
}

    .btns_sm_div.last {
        margin-top: 6px;
    }

#orgid_btn {
    background-image: url("Images/SignIn_organization_290x70.svg");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 70px;
    width: 290px;
}

#ms_btn {
    background-image: url("Images/SignIn_MSFT_290x70.svg");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 70px;
    width: 290px;
}

#facebook_btn {
    background-image: url("Images/SignIn_Facebook_220x32.svg");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 32px;
    width: 220px;
}

#google_btn {
    background-image: url("Images/SignIn_Google_220x32.svg");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 32px;
    width: 220px;
}

#orgid_btn a, #ms_btn a {
    display: block;
    height: 70px;
    outline: medium none #000080;
    text-decoration: none;
    width: 290px;
}

#facebook_btn a, #google_btn a {
    display: block;
    height: 32px;
    outline: medium none #000080;
    text-decoration: none;
    width: 220px;
}

#get_office_mix_btn a {
    display: block;
    height: 48px;
    outline: medium none #000080;
    text-decoration: none;
    width: 220px;
}

a.welcome-access-link, a.welcome-access-link:hover, a.welcome-access-link:visited {
    outline: medium none;
    text-decoration: none;
    color: #ffffff;
}

.welcome-spacer {
    height: 40px;
}

/* End Welcome/Sign-in Page */

/* Begin Gallery Page */

.gallery-container-fluid {
    padding-top: 24px;
    padding-bottom: 40px;
}

#gallery_hero_canvas {
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%;
    height: auto;
    border: 0 none;
    text-align: center;
    overflow: hidden;
}

    #gallery_hero_canvas img {
        width: 100%;
        height: auto;
        -moz-min-width: 1227px;
        -ms-min-width: 1227px;
        -o-min-width: 1227px;
        -webkit-min-width: 1227px;
        min-width: 1227px;
        min-height: 270px;
        max-height: 480px;
        margin: 0 auto;
    }

#gallery-category-combobox {
    position: absolute;
    top: 81px;
    width: 100%;
    -moz-min-width: 394px;
    -ms-min-width: 394px;
    -o-min-width: 394px;
    -webkit-min-width: 394px;
    min-width: 394px;
    z-index: 201;
}

#gallery-category {
    position: relative;
    float: right;
    margin-right: 40px;
    z-index: 101;
}

#gallery-text-box {
    position: absolute;
    top: 77px;
    width: 100%;
    -moz-min-width: 394px;
    -ms-min-width: 394px;
    -o-min-width: 394px;
    -webkit-min-width: 394px;
    min-width: 394px;
    padding-left: 15px;
    z-index: 1;
}

#gallery-text-box-header {
    position: relative;
    top: 0;
    left: 0;
    width: 680px;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 60px;
    line-height: 80px;
    color: #FFFFFF;
}

#gallery-text-box-goto-wrapper {
    position: relative;
    top: 19px;
    left: 0;
    width: 300px;
    border: none;
    display: block;
    height: 40px;
}

    #gallery-text-box-goto-wrapper:hover,
    #gallery-text-box-goto-wrapper:focus {
        text-decoration: none;
        -ms-opacity: .75;
        opacity: .75;
    }

#gallery-text-box-author {re
    position: relative;
    font-size: 30px;
    line-height: 30px;
    color: #FFFFFF;
    float: left;
}

#gallery-text-box-description {
    position: relative;
    top: 30px;
    left: 0;
    height: auto;
    max-width: 540px;
    width: 100%;
    -moz-min-width: 394px;
    -ms-min-width: 394px;
    -o-min-width: 394px;
    -webkit-min-width: 394px;
    min-width: 394px;
    color: #FFFFFF;
    font-size: 16px;
    display: block;
}

#gallery-goto-hero-mix {
    position: relative;
    width: 32px;
    height: 32px;
    margin-left: 12px;
    float: left;
}

/* The gallery category drop-down */
#gallery-category .btn-group {
    height: 50px;
}

#gallery-category .btn-default {
    border-color: #FFFFFF;
    width: 250px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

#gallery-category .btn {
    padding: 11.5px 12px;
    font-size: 18px;
    text-align: left;
}

    #gallery-category .btn .caret {
        position: absolute;
        right: 12px;
        top: 23px;
        float: none;
    }

#gallery-category .dropdown-menu {
    -moz-min-width: 250px;
    -ms-min-width: 250px;
    -o-min-width: 250px;
    -webkit-min-width: 250px;
    min-width: 250px;
    font-size: 18px;
    margin: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    border: 1px solid #FFFFFF;
    -ms-opacity: .9;
    opacity: .9;
    padding: 0;
    margin-top: -1px;
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
}

#gallery-category .btn-default:active,
#gallery-category .btn-default.active,
#gallery-category .open .dropdown-toggle.btn-default {
    color: #343434;
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}

#gallery-category .btn-default:hover,
#gallery-category .btn-default:focus {
    color: #343434;
    background-color: #E4E4E4;
    border-color: #FFFFFF;
}

#gallery-category .btn-group.open .dropdown-toggle {
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
}

#gallery-category .btn:active,
#gallery-category .btn.active {
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
}

#gallery-category .dropdown-menu > li > a {
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    color: #343434;
}

    #gallery-category .dropdown-menu > li > a:hover {
        background-color: #DC3c00;
        color: #FFFFFF;
        font-family: 'Segoe UI Web Semibold', 'wf_SegoeUISemibold', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    }
/* The gallery category drop-down */

/* The gallery searchcategory drop-down */
#gallery-search-category-combobox {
    position: absolute;
    top: 94px;
    width: 100%;
    -moz-min-width: 500px;
    -ms-min-width: 500px;
    -o-min-width: 500px;
    -webkit-min-width: 500px;
    min-width: 500px;
    z-index: 201;
}

#gallery-search-category {
    position: relative;
    float: right;
    z-index: 101;
}

    #gallery-search-category .btn-group {
        height: 45px;
        width: 100%;
    }

    #gallery-search-category .btn-default {
        border-color: #FFFFFF;
        width: auto;
        max-width: 180px;
        border-left: 1px solid #D8D8D8;
        border-top: 1px solid #D8D8D8;
        border-bottom: 1px solid #D8D8D8;
        border-right: none;
        background-color: #ffffff;
    }

    #gallery-search-category .btn {
        height: 45px;
        padding: 10px 42px 8px 12px;
        font-size: 18px;
        text-align: left;
        border-radius: 0;
        overflow: hidden;
    }

        #gallery-search-category .btn .caret {
            position: absolute;
            right: 12px;
            top: 23px;
            float: none;
        }

        #gallery-search-category .btn .caret-bg {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 100%;
            background: #FFFFFF;
        }

    #gallery-search-category .btn-default:active .caret-bg,
    #gallery-search-category .btn-default.active .caret-bg,
    #gallery-search-category .open .dropdown-toggle.btn-default .caret-bg {
        background: #FFFFFF;
    }

    #gallery-search-category .btn-default:hover .caret-bg,
    #gallery-search-category .btn-default:focus .caret-bg {
        background: #E4E4E4;
    }

    #gallery-search-category .dropdown-menu {
        width: 100%;
        font-size: 18px;
        margin-top: -1px;
        border-top: 1px solid #D8D8D8;
        border-left: 1px solid #D8D8D8;
        border-bottom: 1px solid #D8D8D8;
        border-right: 1px solid #D8D8D8;
        padding: 0;
    }

    #gallery-search-category .btn-default:active,
    #gallery-search-category .btn-default.active,
    #gallery-search-category .open .dropdown-toggle.btn-default {
        color: #343434;
        background-color: #FFFFFF;
        border-left: 1px solid #D8D8D8;
        border-top: 1px solid #D8D8D8;
        border-bottom: 1px solid #D8D8D8;
        border-right: none;
    }

    #gallery-search-category .btn-default:hover,
    #gallery-search-category .btn-default:focus {
        color: #343434;
        background-color: #E4E4E4;
        border-left: 1px solid #D8D8D8;
        border-top: 1px solid #D8D8D8;
        border-bottom: 1px solid #D8D8D8;
        border-right: none;
    }

    #gallery-search-category .btn-group.open .dropdown-toggle {
        -webkit-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
    }

    #gallery-search-category .btn:active,
    #gallery-search-category .btn.active {
        -webkit-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
    }

    #gallery-search-category .dropdown-menu > li > a {
        font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
        color: #343434;
    }

        #gallery-search-category .dropdown-menu > li > a:hover {
            background-color: #DC3c00;
            color: #FFFFFF;
            font-family: 'Segoe UI Web Semibold', 'wf_SegoeUISemibold', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
        }

.gallery-search-mobile-wrapper {
    float: left;
}

.gallery-textarea-search {
    height: 45px;
    min-height: 45px;
    max-width: 300px;
    width: 300px;
    -moz-min-width: 300px;
    -ms-min-width: 300px;
    -o-min-width: 300px;
    -webkit-min-width: 300px;
    min-width: 300px;
    padding: 12px;
    font-size: 18px;
    line-height: normal !important;
    outline: none;
    border-left: 1px solid #D8D8D8;
    border-top: 1px solid #D8D8D8;
    border-bottom: 1px solid #D8D8D8;
    border-right: none;
    white-space: nowrap;
    float: left;
    overflow: hidden;
    z-index: 0;
}

.gallery-search-button-wrapper {
    position: relative;
    float: left;
    width: 44px;
    height: 45px;
    border-left: none;
    border-top: 1px solid #D8D8D8;
    border-bottom: 1px solid #D8D8D8;
    border-right: 1px solid #D8D8D8;
    background-color: #FFFFFF;
    z-index: 1;
}

.gallery-search-button {
    position: absolute;
    top: 10px;
    left: 0;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    background: url('Images/Forum/searchSprite.svg') no-repeat;
    background-position: center top;
    -ms-background-size: 24px 49px;
    background-size: 24px 49px;
    outline: none;
    border: none;
}

    .gallery-search-button:hover {
        background-position: center -25px;
    }
/* The gallery searchcategory drop-down */

.tiles-row div:nth-child(5) {
    display: none;
}

.tiles-row div:nth-child(6) {
    display: none;
}

#gallery-bkg {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 60px;
}

.gallery-header-light {
    display: inline-block;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 24px;
    color: #424242;
    line-height: 24px;
    margin: 0 0 14px 14px;
    -webkit-user-select: none; /* Prevents iOS Copy and Paste */
}

.tiles-row a:hover,
.tiles-row a:focus {
    text-decoration: none;
}

.tiles-row a span:hover,
.tiles-row a span:focus {
    color: #888888;
    text-decoration: none;
}

#gallery-bkg .mix-thumb-wrapper {
    -moz-min-width: 271px;
    -ms-min-width: 271px;
    -o-min-width: 271px;
    -webkit-min-width: 271px;
    min-width: 271px;
    max-width: 542px;
    height: 153px;
    background-image: url("Images/transparent-background.gif");
    -ms-background-size: 100% 100%;
    background-size: 100% 100%;
    border: 1px solid #CCCCCC;
    margin-bottom: 0;
    overflow: hidden;
    -webkit-user-select: none; /* Prevents iOS Copy and Paste */
}

#gallery-bkg .mix-slidethumbnail-img {
    max-width: 271px;
    max-height: 600px;
    width: 271px;
    height: auto;
    margin-bottom: 0;
}

#gallery-bkg .mix-slidethumbnail-overlay {
    max-width: 271px;
    max-height: 153px;
    width: 271px;
    height: 153px;
    cursor: pointer;
    background-image: url("Images/transparent-background.gif");
    -ms-background-size: 100% 100%;
    background-size: 100% 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

#lesson-details {
    position: absolute;
    top: 0;
    left: 271px;
    width: 271px;
    min-height: 153px;
    height: auto;
    align-content: center;
    color: #FFFFFF;
    padding: 13px 15px 15px 15px;
    font-family: 'Segoe UI Web Normal', 'wf_SegoeUI', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 18px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    display: none;
    z-index: 200;
}

#lesson-details-bkg-right,
#lesson-details-bkg-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 271px;
    min-height: 153px;
    height: 100%;
    background-color: #222222;
    border: 1px solid #222222;
    display: none;
}

#lesson-details-mobile-bkg {
    position: absolute;
    top: 0;
    left: 0;
    width: 271px;
    height: 153px;
    background-color: #222222;
    border: 1px solid #222222;
    display: none;
}

#lesson-details-bkg-right:before {
    position: absolute;
    top: 65px;
    bottom: auto;
    left: -27px;
    width: 14px;
    height: 14px;
    border-style: solid;
    border-width: 14px;
    content: "";
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

#lesson-details-bkg-right:before {
    border-color: #222222 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

#lesson-details-bkg-left:before {
    position: absolute;
    top: 65px;
    bottom: auto;
    right: -27px;
    width: 14px;
    height: 14px;
    border-style: solid;
    border-width: 14px;
    content: "";
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

#lesson-details-bkg-left:before {
    border-color: #222222 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

#lesson-details-mobile-bkg:before {
    position: absolute;
    top: 152px;
    right: auto;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -14px;
    border-style: solid;
    border-width: 14px;
    content: "";
}

#lesson-details-mobile-bkg:before {
    border-color: #222222 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

#lesson-details a {
    color: #FFFFFF;
}

    #lesson-details a:hover {
        color: #FFFFFF;
        text-decoration: underline;
    }

#gallery-bkg .lesson-details-description-truncated {
    position: relative;
    top: 0;
    left: 0;
    width: 235px;
    max-height: 36px;
    margin-bottom: 8px;
    padding-right: 50px;
    line-height: 18px;
    display: none;
    overflow: hidden;
}

#gallery-bkg .lesson-details-description-auto {
    position: relative;
    top: 0;
    left: 0;
    width: 235px;
    min-height: 36px;
    height: auto;
    max-height: 145px;
    margin-bottom: 8px;
    overflow: hidden;
    display: none;
}

#gallery-bkg .lesson-details-more {
    position: absolute;
    bottom: 0;
    left: 200px;
    width: 60px;
    color: #629bca;
    cursor: pointer;
    display: none;
}

#gallery-bkg .lesson-details-ellipses {
    position: absolute;
    bottom: 6px;
    left: 200px;
    width: 60px;
    font-size: 30px;
    color: #629bca;
    cursor: pointer;
    display: none;
}

#gallery-bkg .lesson-details-mobile-ellipses {
    position: absolute;
    bottom: 6px;
    left: 200px;
    width: 60px;
    font-size: 30px;
    color: #629bca;
    cursor: pointer;
    display: none;
    z-index: 10;
}

#gallery-bkg .lesson-details-more:hover,
#gallery-bkg .lesson-details-more:focus {
    text-decoration: underline;
}

#gallery-bkg .lesson-details-ellipses:hover,
#gallery-bkg .lesson-details-ellipses:focus,
#gallery-bkg .lesson-details-mobile-ellipses:hover,
#gallery-bkg .lesson-details-mobile-ellipses:focus {
    text-decoration: none;
    color: #888888;
}

#gallery-bkg .lesson-details-info-wrapper {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
}

#lesson-details .lesson-details-info-wrapper .lesson-details-title-truncated {
    position: relative;
    top: 0;
    width: 100%;
    max-height: 18px;
    display: block;
    overflow: hidden;
}

#lesson-details .lesson-details-info-wrapper .lesson-details-title-auto {
    position: relative;
    top: 0;
    width: 100%;
    min-height: 18px;
    height: auto;
    display: none;
}

#lesson-details .lesson-details-info-wrapper .lesson-details-author {
    position: relative;
    top: 4px;
    width: 100%;
    height: 18px;
    display: block;
}

#lesson-details .lesson-details-info-wrapper .lesson-details-time-wrapper {
    position: relative;
    top: 4px;
    left: 0;
    width: 100%;
}

#lesson-details .lesson-details-info-wrapper .lesson-details-created {
    height: 18px;
    display: block;
    float: left;
    color: #6d6e70;
    margin-right: 12px;
}

#lesson-details .lesson-details-info-wrapper .lesson-details-duration {
    height: 18px;
    display: block;
    float: left;
    color: #6d6e70;
}

#lesson-details .lesson-details-info-wrapper .lesson-details-social-wrapper {
    position: relative;
    top: 10px;
    left: 0;
    width: 100%;
    color: #629bca;
    display: table-cell;
    vertical-align: middle;
    margin-bottom: 4px;
    float: left;
}

    #lesson-details .lesson-details-info-wrapper .lesson-details-social-wrapper .lesson-details-information {
        margin-left: 5px;
    }

    #lesson-details .lesson-details-info-wrapper .lesson-details-social-wrapper img {
        margin-bottom: 2px;
    }

/* End Gallery Page */

.appended-player-page-content {
    background-image: url("Images/BackgroundTop.svg");
    -ms-background-size: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #FFFFFF;
    height: auto;
    padding: 0 15px 50px 15px;
    margin-top: 60px;
}

#player_page_choicecard {
    min-height: 136px;
    height: auto;
    margin: 0 auto;
    display: block;
    padding-top: 24px;
}

/* Begin Lesson Card Styles */

#player_page_lessondetailcard {
    position: relative;
    /* top: 4px; */
    left: 0;
    min-height: 256px;
    height: auto;    
    width: 100%;
    /* border: 1px solid; */
    /* margin-top: 40px; */
    /* display: block; */
    /* border-top-style: solid; */
    /* border-top-width: 2px; */
}

#player_page_lessondetailcard:before {
    position: absolute;
    bottom: auto;
    left:20px;
    top: -14px;
    width: 14px;
    height: 5px;
    margin-top: -13px;
    border: 2px solid;
    border-width: 13px;    
    content: "";
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#player_page_lessondetailcard:after {
    position: absolute;
    bottom: auto;
    left:20px;
    top: -15px;
    width: 5px;
    height: 5px;
    margin-top: -10px;
    border: 2px solid;
    border-width: 13px;
    content: "";
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
   
    #player_page_lessondetailcard:after {
        border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    #player_page_lessondetailcard:before {
        border-color: #989898 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

.lesson-detail-card-wrapper {
    position: relative;      
    display: inline-block;
    margin: 38px;
}

#player_page_downloadcard {
    position: relative;
    /* top: 4px; */
    min-height: 256px;
    height: auto;
    margin: 0 auto px auto;
    width: 100%;
    /* border: 1px solid; */
}

#player_page_downloadcard:before {
    position: absolute;
    bottom: auto;
    left:310px;
    top: -60px;
    width: 14px;
    height: 5px;
    margin-top: -13px;
    border-style: solid;
    border-width: 13px;
    content: "";
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#player_page_downloadcard:after {
    position: absolute;
    bottom: auto;
    left:310px;
    top: -60px;
    width: 5px;
    height: 5px;
    margin-top: -10px;
    border-style: solid;
    border-width: 13px;
    content: "";
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

    #player_page_downloadcard:after {
        border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    #player_page_downloadcard:before {
        border-color: #989898 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

.download-card{
    margin-left: 40px;
}

.download-method 
{
    margin: 10px 0px 10px 0px;
    padding: 2px 20px 5px 20px;
    background-color: #00bcf2;
    width: 200px;
    text-align: center;
}

.download-left-float
{
  float:left;
  margin-left: 10px;
}

.download-right-float
{
    display: inline;
    margin-left: 10px;
    float:left;
}

.lesson-card {
    position: relative;
    left: 0;
    top: 0;
    min-height: 124px;
    height: auto;
    display: inline-block;
    width: 100%;
}

.lesson-card-title {
    position: relative;
    left: 0;
    top: 0;
    min-height: 26px;
    height: auto;
    font-family: 'Segoe UI';
    font-size: 30px;
    line-height: 30px;
    color: #343434;
}

.lesson-card-created-by {
    position: relative;
    left: 0;
    top: 7px;
    height: 15px;
    font-size: 15px;
    line-height: 25px;
}

    .lesson-card-created-by a:hover,
    .lesson-card-created-by a:focus {
        text-decoration: none;
    }

.lesson-card-created-by-span {
    max-width: 512px;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    text-wrap: none;
    white-space: nowrap;
    display: block;
    /* font-weight: bold; */
}

.lesson-card-created-on {
    position: relative;
    left: 0;
    top: 16px;
    height: 26px;
    font-size: 14px;
    line-height: 26px;
}

.lesson-card-date-created {
    margin-right: 4px;
    float: left;
}

.lesson-card-duration {
    float: left;
}


.lesson-detail-card-date-created {
    margin-right: 4px;
    float: left;
    display: block;
    font-weight: bold;
}

.lesson-detail-card-duration {
    float: left;
    dsiplay: block;
    font-weight: bold;
}

.lesson-card-permission {
    margin: -2px 0 0 0;
}

.lesson-card-views-wrapper {
    float: left;
}

.lesson-card-views {
    margin: -2px 0 0 20px;
}

.lesson-card-description {
    position: relative;
    float: left;
    left: 0;
    top: 22px;
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 17px;
    overflow-x: hidden;
    -moz-min-width: 100%;
    -ms-min-width: 100%;
    -o-min-width: 100%;
    -webkit-min-width: 100%;
    min-width: 100%;
}

.lesson-card-social {
    position: relative;
    float: left;
    left: 0;
    top: 0;
    min-height: 24px;
    height: auto;
    -moz-min-width: 100%;
    -ms-min-width: 100%;
    -o-min-width: 100%;
    -webkit-min-width: 100%;
    min-width: 100%;
    margin-top: 24px;
}

.lesson-card .fb-like {
    width: 50px;
}

.lesson-card .lesson-card-social-item {
    margin: 0 24px 0 0;
    font-size: 14px;
    font-color:#343434;
    color: #828282;
    line-height: 20px;
    float: left;
}

.lesson-card .lesson-card-social-item a {
    font-size: 14px;
    color: #828282;
}

    .lesson-card .lesson-card-social-item a:hover,
    .lesson-card .lesson-card-social-item a:focus {
        text-decoration: none;
        color:#0078d7;
    }

.lesson-card .lesson-card-social-item-video {
    margin: 0 24px 0 0;
}

.lesson-card .lesson-card-social-item-mix {
    margin: 0 27px 0 0;
}

.lesson-card .lesson-card-social-item-detail {
    margin: 0 25px 0 0;
}

.lesson-card .lesson-card-social-item-analytics {
    margin: 0 26px 0 0;
}

.lesson-card .lesson-card-social-item-discuss {
    margin: 0 25px 0 0;
}

.lesson-card .lesson-card-social-item-delete {
    margin: 0 27px 0 0;
}

.lesson-card .lesson-card-social-item-report {
    margin: 0 30px 0 0;
}

.lesson-card .lesson-card-social-item-fb {
    margin: 5px 14px 0 0;
    z-index: 10;
}

.lesson-card-publishing-error {
    position: relative;
    float: left;
    left: 0;
    top: 22px;
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 17px;
    overflow-x: hidden;
}

#player_page_slidescard {
    position: relative;
    top: 24px;
    left: 0;
    min-height: 136px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.slides-card {
    display:inline-block;
    position:relative;
    left: 0;
    top: 0;
    min-height: 124px;
    height: auto;
    width: 100%;
}

.slides-card-name {
    position: relative;
    left: 0;
    top: 0;
    min-height: 26px;
    height: auto;
    font-family: 'Segoe UI', 'Segoe UI';
    font-size: 30px;
    line-height: 30px;
    color: #343434;
}

.slides {
    list-style: none;
}

.slide {
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;    
}

.slide-text .slide-texts{
    float: left;
    font-family: 'Segoe UI';
    font-size: 12px;
    color: #666666;
    list-style: disc;
}

.slide-index-text {
    font-family: 'Segoe UI';
    font-size: 15px;
    color: #343434;    
}

.slide-keywords-text {
    font-family: 'Segoe UI';
    font-size: 12px;
    color: #666666;
    padding-top: 20px;
}

.slide-keywords-text  a {
    font-family: 'Segoe UI';
    font-size: 12px;
    color: #0078d7;
}

.slide-keywords-text a:hover {
    color: #828282;
    text-decoration: none;
}

.slide-keywords-text > strong {
    display: inline;
    font-family: "Segoe UI";
    font-size: 15px;
    color: #343434;
}

.slide-title-text {
    font-family: 'Segoe UI';
    font-size: 14px;
    color: #343434;
}

#user-display-name {
    max-width: 200px;
    text-align: right;
    display: inline-block;
    vertical-align: bottom;
}

.dropdown #user-display-name {
    max-width: 200px;
    text-align: right;
    display: inline;
    vertical-align: bottom;
}

.author-lesson-card {
    width: 100%;
    overflow: hidden;
    margin-top: 30px;
    word-wrap: break-word;
}

.author-lesson-information {
    background: #F1F1F1;
}

.author-lesson-analytics {
    margin-top: 2px;
    background: #F1F1F1;
    padding: 15px 20px;
    font-size: 13px;
}

    .author-lesson-analytics img {
        vertical-align: text-bottom;
        width: 15px;
    }

.author-lessons {
    margin-bottom: 30px;
}

.author-lessons-header {
    font-size: 24px;
    margin-bottom: -10px;
    margin-top: 40px;
}

.author-name {
    font-size: 36px;
    margin: 0;
    line-height: normal;
}

.author-card-content {
    position: relative;
    border: 1px solid rgba(52, 52, 52, 0.2);
    width: 202px;
    height: 202px;
}

    .author-card-content .edit-image {
        width: 200px;
        height: 200px;
    }

.author-details {
    line-height: 1.428571429;
    word-wrap: break-word;
}

.author-title {
    color: #929497;
    font-size: 24px;
    margin-bottom: 25px;
}

.author-edit-break hr {
    border-top: 1px solid #D0D2D3;
    margin-bottom: 0px;
}

.author-lesson-card-duration {
    margin-bottom: 20px;
}

.author-lesson-card-details {
    padding: 20px;
    font-size: 14px;
}

.author-lesson-card-header {
    margin-top: 2px;
    margin-bottom: 15px;
    font-size: 22px;
}

.ellipsis-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.author-lesson-card-header a {
    color: #666666;
}

.author-lesson-card-description {
    height: 57px;
    margin-bottom: 0px;
    overflow: hidden;
}

    .author-lesson-card-description:hover {
        overflow-y: auto;
    }

.author-info {
    padding-top: 45px;
}

/* End Lesson Card Styles */

/* Begin Share Card Styles */

#player_page_sharecard {
    position: relative;
    min-height: 256px;
    height: auto;
    width: 100%;
    margin: 0 auto 15px auto;
}

#player_page_sharecard:before {
    position: absolute;
    bottom: auto;
    left:160px;
    top: -14px;
    width: 14px;
    height: 5px;
    margin-top: -13px;
    border-style: solid;
    border-width: 13px;
    content: "";
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#player_page_sharecard:after {
    position: absolute;
    bottom: auto;
    left:160px;
    top: -15px;
    width: 5px;
    height: 5px;
    margin-top: -10px;
    border-style: solid;
    border-width: 13px;
    content: "";
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
    
    #player_page_sharecard:after {
        border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    #player_page_sharecard:before {
        border-color: #989898 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

#share-card {
    position: relative;
    left: 0;
    height: auto;
}

.share-card-field {
    font-family: "Segoe UI Light";
    font-size: 18pt;
    color: #666666;
    /*margin-top: 45px;*/
}

.download-card-field {
    font-family: "Segoe UI Light";
    font-size: 18pt;
    color: #666666;
    margin-top: 45px;
}
.share-card-email-btns {
    margin: 10px 0px 10px 0px;
    padding: 2px 20px 5px 20px;
    background-color: #00bcf2;
    width: 200px;
    text-align: center;
}

.share-card-email-button {
    margin: 10px 0px 10px 0px;
    padding: 9px 20px 9px 20px;
    background-color: #0072c6;
    border-color: #0072c6;
    color: #ffffff;
    width: 200px;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
}

        .share-card-email-button :active,
        .share-card-email-button :hover,
        .share-card-email-button :focus {
            color: #ffffff;
            background-color: #005a9e;
            border-color: #005a9e;
            outline: 0;
            -webkit-box-shadow: none;
            -ms-box-shadow: none;
            box-shadow: none;
        }

        .download-buttons {
            margin-top: 35px;
        }

#share-card-nav {
    position: relative;
    top: 0;
    left: 0;
    height: 28px;
    display: inline-block;
}

#email_share{
    margin-top:20px;
}

.share-card-nav-tabs {
    position: relative;
    top: 0;
    left: 0;
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

    .share-card-nav-tabs > li {
        float: left;
        margin-bottom: -1px;
        margin-right: 50px;        
}

.share-card-nav-tabs > li > a {
            font-size: 15px;
            line-height: 15px;
            margin-right: 25px;
            color: #828282;
        }

    #detail_icon {
        background-image: url("Images/Detail_Gray.svg");
        background-repeat: no-repeat;
        border: 0 none;
        display: inline-block;
        height: 20px;
        outline-style: none;
        text-decoration: none;
        width: 20px;
    }

    .share-card-nav-tabs > li.active #detail_icon{
        background-image: url("Images/Detail.svg");
    }

    .share-card-nav-tab-link:hover > #detail_icon {
        background-image: url("Images/Detail.svg");
    }

    #analytic_icon {
        background-image: url("Images/Analytics_Gray.svg");
        background-repeat: no-repeat;
        border: 0 none;
        display: inline-block;
        height: 20px;
        outline-style: none;
        text-decoration: none;
        width: 20px;
    }

    .share-card-nav-tabs > li.active #analytic_icon{
        background-image: url("Images/Analytics.svg");
    }

    .share-card-nav-tab-link:hover > #analytic_icon {
        background-image: url("Images/Analytics.svg");
    }

    #delete_icon {
        background-image: url("Images/Delete_Gray.svg");
        background-repeat: no-repeat;
        border: 0 none;
        display: inline-block;
        height: 20px;
        outline-style: none;
        text-decoration: none;
        width: 20px;
    }

    .share-card-nav-tabs > li.active #delete_icon{
        background-image: url("Images/Delete.svg");
    }

    .share-card-nav-tab-link:hover > #delete_icon {
        background-image: url("Images/Delete.svg");
    }

    #share_icon {
        background-image: url("Images/Share_20x_Gray.svg");
        background-repeat: no-repeat;
        border: 0 none;
        display: inline-block;
        height: 20px;
        outline-style: none;
        text-decoration: none;
        width: 20px;
    }

    .share-card-nav-tabs > li.active #share_icon{
        background-image: url("Images/Share_20x.svg");
    }
            
    .share-card-nav-tab-link:hover > #share_icon {
        background-image: url("Images/Share_20x.svg");
    }

    #comments_icon {
        background-image: url("Images/Discussion_Gray.svg");
        background-repeat: no-repeat;
        border: 0 none;
        display: inline-block;
        height: 20px;
        outline-style: none;
        text-decoration: none;
        width: 20px;
    }

    .share-card-nav-tabs > li.active #comments_icon{
        background-image: url("Images/Discussion.svg");
    }

    .share-card-nav-tab-link:hover > #comments_icon {
        background-image: url("Images/Discussion.svg");
    }

    #download_icon {
        background-image: url("Images/Download_Gray.svg");
        background-repeat: no-repeat;
        border: 0 none;
        display: inline-block;
        height: 20px;
        outline-style: none;
        text-decoration: none;
        width: 20px;
    }

    .share-card-nav-tabs > li.active #download_icon{
        background-image: url("Images/Download.svg");
    }
            
    .share-card-nav-tab-link:hover > #download_icon {
        background-image: url("Images/Download.svg");
    }

    #report_icon {
        background-image: url("Images/Report_Gray.svg");
        background-repeat: no-repeat;
        border: 0 none;
        display: inline-block;
        height: 20px;
        outline-style: none;
        text-decoration: none;
        width: 20px;
    }

    .share-card-nav-tabs > li.active #report_icon{
        background-image: url("Images/Report.svg");
    }
            
    .share-card-nav-tab-link:hover > #report_icon {
        background-image: url("Images/Report.svg");
    }

            .share-card-nav-tabs > li > a:hover,
            .share-card-nav-tabs > li > a:active {
                border: none;
                text-decoration: none;
                outline: none;
                color: #0078d7;
            }

        .share-card-nav-tabs > li.active > a,
        .share-card-nav-tabs > li.active > a:hover,
        .share-card-nav-tabs > li.active > a:focus {
            cursor: default;
            color: #0078d7;
            border: none;
            text-decoration: none;
            outline: none;
        }

        .share-card-nav-tabs > li.disabled > a,
        .share-card-nav-tabs > li.disabled > a:hover,
        .share-card-nav-tabs > li.disabled > a:focus {
            cursor: default;
            text-decoration: none;
            pointer-events: none;
        }

#choice-card-content {
    position: relative;
    top: 0px;
    left: 0;
    width: 100%;
    min-height: 38px;
    height: auto;
    margin: 15px 0 0 0;
    padding: 0;
    display: inline-block;
    border:2px solid;
    border-color: #CCCCCC;
    background-color: #FFFFFF;
}

#share-card-content {
    position: relative;
    top: 0px;
    left: 0;
    width: 100%;
    min-height: 38px;
    height: auto;
    margin: 25px 0 0 0;
    padding: 0;
    display: inline-block;
}

#detail-share-card-content {
    position: relative;
    left: 0;
    width: 100%;
    min-height: 38px;
    height: auto;
    padding: 0;
    display: inline-block;
}

.mobile-watchpage-fb-like {
    display:none;
}

.watchpage-fb-like{
   margin-top: 5px;
}

.sharecard-mail-icon {
    width: 32px;
    height: 32px;
}

#sharecard_share {
    position: relative;
    top: 0;
    left: 0;
}

#share-card-presentation-link {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
}

.share-card-input {
    width: 70%;
    height: 30px;
    padding: 5px;
    border: 1px solid #747474;
    -ms-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
}

    .share-card-input::-ms-clear {
        display: none;
    }

#share-card-embed-btns {
    position: relative;
    top: 0;
    left: 0;
    margin-top: 10px;
}

.social-share-btns {
    margin: 10px 0px 10px 0px;
}

#share-card-embed-code {
    position: relative;
    top: 12px;
    left: 0;
    width: 100%;
    display: inline-block;
    padding-bottom: 20px;
}

#share-card-social-btns-wrapper {
    position: relative;
    top: 0;
    left: 0;
    height: 34px;
    width: 100%;
    display: block;
}

    #share-card-social-btns-wrapper a:hover {
        text-decoration: none;
    }

.share-card-social-btn {
    margin-right: 1px;
}

.share-card-email-link {
    padding-bottom: 10px;
    width: 100%;
    display: inline-block;
}

#share-card-email-btns-wrapper {
    position: relative;
    top: 0;
    left: 0;
    height: 32px;
    width: 100%;
    display: block;
}

    #share-card-email-btns-wrapper a:hover {
        text-decoration: none;
    }

.share-card-email-btn {
    width: 32px;
    height: 32px;
}

/* End Share Card Styles */

/* Begin Image Edit Styles */

.photo-edit {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.photo-edit-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.photo-edit-description {
    position: relative;
    top: 50%;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 24pt;
    margin-top: -12px;
}

.photo-edit-upload {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0px;
    left: 0px;
    opacity: 0;
    cursor: pointer;
}

.image-cropper {
    position: relative;
}

.author-lesson-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: block;
    margin: auto;
}

.image-holder {
    padding-bottom: 56.25%;
    position: relative;
}

.image-link {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(52, 52, 52, 0.2);
}

.cropper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
}

.cropper-selector {
    width: 20px;
    height: 20px;
}

.upper-left-selector {
    position: absolute;
    left: 0;
    top: 0;
}

.upper-right-selector {
    position: absolute;
    right: 0;
    top: 0;
}

.lower-left-selector {
    position: absolute;
    left: 0;
    bottom: 0;
}

.lower-right-selector {
    position: absolute;
    right: 0;
    bottom: 0;
}

.cropper-highlight {
    position: absolute;
    background: black;
    opacity: 0.5;
}

.cropper-highlight-left {
    left: 0;
    top: 0;
    bottom: 0;
}

.cropper-highlight-right {
    right: 0;
    top: 0;
    bottom: 0;
}

.cropper-highlight-top {
    top: 0;
}

.cropper-highlight-bottom {
    bottom: 0;
}

.selector-handle-nw {
    cursor: nw-resize;
}

.selector-handle-ne {
    cursor: ne-resize;
}

.selector-handle-sw {
    cursor: ne-resize;
}

.selector-handle-se {
    cursor: nw-resize;
}

.drag-image-control {
    cursor: move;
}

/* End Image Edit Styles */

/* Begin My Mixes Pages */

.author-card {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

/* Define an intermediate range set of values as well */
.col-tn-1,
.col-tn-2,
.col-tn-3,
.col-tn-4,
.col-tn-5,
.col-tn-6,
.col-tn-7,
.col-tn-8,
.col-tn-9,
.col-tn-10,
.col-tn-11,
.col-tn-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

/* -Left Sidebar navigation begins */
.sidebar-container {
    min-height: 20px;
    margin-top: 30px;
}

.sidebar-navigation {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    min-width: 190px;
    padding-top: 24px;
}

.sidebar-navigation > li {
    position: relative;
    font-size: 18px;
    padding: 10px 0px 10px 10px;
    margin-left: -39px;
}

    .sidebar-navigation > li .sidebar-link-title {
        padding: 0px 0px 0px 20px;
    }

    .sidebar-navigation > li.active {
        background-image: url("Images/LeftNavSelection.svg");
        background-repeat: no-repeat;
        color: #428bca;
        font-family: 'Segoe UI Web Semibold', 'wf_SegoeUISemibold', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    }

.sidebar-navigation li a:hover,
.sidebar-navigation li a:focus {
    text-decoration: none;
    background-color: #eeeeee;
}
/* -Left Sidebar navigation ends */

.mymixes-thumbnail-card-fb-icon {
    position: absolute !important;
    right: 0px;
}

#mymixes-header-underline {
    margin-top: 50px;
}

.lessondetails-mix-thumbnail-block {
    position: relative;
    border: 1px solid #888888;
    margin: 0 0 30px;
    max-width: 506px;
    overflow: hidden;
}

.lessondetails-mix-thumbnail-img {
    border: 0 none;
    width: 100%;
}

.lessondetails-share-link-block {
    position: relative;
    top: 0;
    left: 0;
    max-width: 506px;
    height: 30px;
    margin-bottom: 30px;
}

.lessondetails-share-input {
    width: 100%;
    height: 30px;
    padding: 5px;
    border: 1px solid #747474;
    -ms-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
}

    .lessondetails-share-input::-ms-clear {
        display: none;
    }

.lessondetails-header-block {
    border: 0 none;
    min-height: 60px;
    height: auto;
    margin: 0 0 34px;
    padding: 0;
    vertical-align: middle;
}

.lessondetails-header-block-arrow {
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

#lessondetails-header-block-arrow-link {
    background-image: url("Images/BackArrowGray50x50.png");
    background-repeat: no-repeat;
    -ms-background-size: 50px auto;
    background-size: 50px auto;
    border: 0 none;
    display: inline-block;
    height: 50px;
    margin-right: 18px;
    outline-style: none;
    padding: 0;
    text-decoration: none;
    vertical-align: middle;
    width: 50px;
}

.lesson-details-input {
    width: 100%;
    height: 32px;
    padding: 5px;
    border: 1px solid #747474;
    -ms-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
}

.lesson-details-textarea {
    width: 100%;
    height: auto;
    padding: 5px;
    -moz-resize: none;
    -ms-resize: none;
    -o-resize: none;
    resize: none;
    border: 1px solid #747474;
    -ms-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
}

#lessondetails-taxonomy-group {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 95px;
}

#lessondetails-categories {
    width: 50%;
    float: left;
    position: relative;
}

#lessondetails-category-box {
    width: 100%;
}

/*** Lesson Details Category Drop Down ***/
#lessondetails-categories .btn-group {
    border: 1px solid #747474;
    width: 100%;
}

#lessondetails-categories .btn-default {
    border-color: #FFFFFF;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

#lessondetails-categories .btn {
    text-align: left;
    padding: 3px 8px;
    font-size: 16px;
    width: 100%;
}

    #lessondetails-categories .btn .category-button {
        text-align: left;
        width: 100%;
        height: 100%;
    }

    #lessondetails-categories .btn .category-box-text {
        width: 90%;
        height: 100%;
        overflow-x: hidden;
    }

    #lessondetails-categories .btn .caret-box {
        background-color: white;
        width: 10%;
        height: 100%;
        z-index: 1;
        border-width: 0;
        border-style: none;
    }

    #lessondetails-categories .btn .caret {
        position: absolute;
        right: 5px;
        top: 14px;
        float: none;
        z-index: 2;
    }

#lessondetails-categories .caret {
    float: left;
}

#lessondetails-categories .dropdown-menu {
    width: 100.8%;
    -moz-min-width: 100.8%;
    -ms-min-width: 100.8%;
    -o-min-width: 100.8%;
    -webkit-min-width: 100.8%;
    min-width: 100.8%;
    -ms-border-radius: 0;
    border-radius: 0;
    border: 1px solid #747474;
    -ms-opacity: .9;
    opacity: .9;
    padding: 0;
    margin: -1px;
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

#lessondetails-categories .btn-default:active,
#lessondetails-categories .btn-default.active,
#lessondetails-categories .open .dropdown-toggle.btn-default {
    color: #343434;
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}

#lessondetails-categories .btn-default:hover,
#lessondetails-categories .btn-default:focus {
    color: #343434;
    background-color: #E4E4E4;
    border-color: #FFFFFF;
}

#lessondetails-categories .btn-group.open .dropdown-toggle {
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
}

#lessondetails-categories .btn:active,
#lessondetails-categories .btn.active {
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
}

#lessondetails-categories .dropdown-menu > li > a {
    font-family: 'Segoe UI Web Normal', 'wf_SegoeUI', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    color: #343434;
}

    #lessondetails-categories .dropdown-menu > li > a:hover {
        background-color: #DC3c00;
        color: #FFFFFF;
        font-family: 'Segoe UI Web Semibold', 'wf_SegoeUISemibold', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    }

/*** Lesson Details Category Drop Down ***/

#lessondetails-tags {
    width: 48%;
    float: left;
    margin-left: 2%;
}

.lessondetails-title-group,
.lessondetails-description-group,
.lessondetails-taxonomy-group {
    margin-bottom: 28px;
}

#permissionsslider .active-slider-block {
    height: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 206px;
}

#permissionsslider {
    height: 10px;
    margin-top: 10px;
    margin-left: 12px;
    margin-bottom: 10px;
    background-image: none;
    width: 206px;
    background-color: #6c6c6b;
}

    #permissionsslider .ui-slider-range {
        background-color: #428bca;
    }

    #permissionsslider .ui-slider-handle-range {
        position: absolute;
        left: 0;
        right: 0;
        height: 100%;
    }

    #permissionsslider .ui-slider #permissionsslider .ui-slider-horzontal #permissionsslider .ui-widget-content {
        background-color: #428bca;
    }

    #permissionsslider .ui-slider-progress {
        background-color: #428bca;
        height: 100%;
    }

    #permissionsslider .ui-slider-handle {
        position: absolute;
        margin: 0 0 0 -8px;
        height: 20px;
        width: 20px;
        z-index: 120;
        cursor: pointer;
        -ms-border-radius: 20px;
        border-radius: 20px;
        -webkit-box-shadow: 0 2px 8px #000;
        -ms-box-shadow: 0 2px 8px #000;
        box-shadow: 0 2px 8px #000;
        border: 4px solid #fff;
        background-color: #428bca;
        -ms-touch-action: none;
        touch-action: none;
        z-index: 120;
    }

        #permissionsslider .ui-slider-handle:focus {
            outline: 0;
        }

    #permissionsslider #rectone,
    #permissionsslider #recttwo,
    #permissionsslider #rectthree,
    #permissionsslider #rectfour {
        position: absolute;
        background-color: #428bca;
        width: 54px;
        height: 10px;
        top: 0;
        cursor: pointer;
        z-index: 2;
    }

    #permissionsslider #rectone {
        left: 0;
    }

    #permissionsslider #recttwo {
        left: 50px;
    }

    #permissionsslider #rectthree {
        left: 100px;
    }

    #permissionsslider #rectfour {
        left: 152px;
    }

    #permissionsslider #recttype2one,
    #permissionsslider #recttype2two,
    #permissionsslider #recttype2three {
        position: absolute;
        background-color: #428bca;
        width: 68px;
        height: 10px;
        top: 0;
        cursor: pointer;
        z-index: 2;
    }

    #permissionsslider #recttype2one {
        left: 0;
    }

    #permissionsslider #recttype2two {
        left: 67px;
    }

    #permissionsslider #recttype2three {
        left: 135px;
    }

    #permissionsslider .markers {
        width: 100%;
        height: 10px;
        position: absolute;
        top: 0;
        background-color: transparent;
    }

    #permissionsslider .marker-one,
    #permissionsslider .marker-two,
    #permissionsslider .marker-three {
        position: absolute;
        background-color: #f0f0f0;
        width: 2px;
        height: 10px;
        top: 0;
        cursor: pointer;
        z-index: 5;
    }

    #permissionsslider a {
        color: inherit;
        text-decoration: none;
    }

        #permissionsslider a:hover #permissionsslider a:focus {
            color: inherit;
            text-decoration: none;
        }

    #permissionsslider .markertype1-one-position {
        left: 25%;
    }

    #permissionsslider .markertype1-two-position {
        left: 50%;
    }

    #permissionsslider .markertype1-three-position {
        left: 75%;
    }

    #permissionsslider .markertype2-one-position {
        left: 33%;
    }

    #permissionsslider .markertype2-two-position {
        left: 66%;
    }

#details-share-card {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 20px;
}

.lessondetails-mail-icon,
.lessondetails-warning-icon {
    width: 32px;
    height: 32px;
}

#details-share-card .panel-heading {
    padding: 5px 7px;
    margin: 1px 1px 0 1px;
    border-bottom: 1px solid #747474;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

#details-share-card .panel {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #747474;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    margin-bottom: 8px;
    display: inline-block;
}

#permissions-content-wrapper {
    position: relative;
    top: 12px;
    right: 0;
    width: 100%;
    height: auto;
    min-height: 100px;
    font-size: 14px;
    margin-bottom: 12px;
}

#permissions-content:before {
    position: absolute;
    bottom: auto;
    top: -14px;
    width: 14px;
    height: 14px;
    margin-top: -14px;
    border-style: solid;
    border-width: 14px;
    content: "";
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#permissions-content:after {
    position: absolute;
    bottom: auto;
    top: -15px;
    width: 13px;
    height: 13px;
    margin-top: -10px;
    border-style: solid;
    border-width: 13px;
    content: "";
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#permissions-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    border: 1px solid #747474;
    color: #434343;
    z-index: 0;
}

    #permissions-content:before {
        border-color: #747474 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    #permissions-content:after {
        border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

.permissions-content-privatetype1:before {
    left: -1px;
}

.permissions-content-orgtype1:before {
    left: 51px;
}

.permissions-content-limitedtype1:before {
    left: 102px;
}

.permissions-content-unlistedtype1:before {
    left: 154px;
}

.permissions-content-publictype1:before {
    left: 204px;
}

.permissions-content-privatetype1:after {
    left: 0;
}

.permissions-content-orgtype1:after {
    left: 52px;
}

.permissions-content-limitedtype1:after {
    left: 103px;
}

.permissions-content-unlistedtype1:after {
    left: 155px;
}

.permissions-content-publictype1:after {
    left: 205px;
}

.permissions-content-privatetype2:before {
    left: -1px;
}

.permissions-content-limitedtype2:before {
    left: 68px;
}

.permissions-content-unlistedtype2:before {
    left: 136px;
}

.permissions-content-publictype2:before {
    left: 204px;
}

.permissions-content-privatetype2:after {
    left: 0;
}

.permissions-content-limitedtype2:after {
    left: 69px;
}

.permissions-content-unlistedtype2:after {
    left: 137px;
}

.permissions-content-publictype2:after {
    left: 205px;
}

#lessondetails-checkboxes {
    position: relative;
    top: 12px;
    left: 0;
    height: auto;
    padding: 0 20px;
    margin-bottom: 38px;
    display: inline-block;
}

.lesson-details-private-icon,
.lesson-details-private-restricted-icon,
.lesson-details-public-icon,
.lesson-details-limited-icon,
.lesson-details-unlisted-icon {
    width: 16px;
    height: 16px;
    margin-top: -3px;
    margin-left: 5px;
}

.lesson-details-bold-txt {
    font-family: 'Segoe UI Web Bold', 'wf_SegoeUIBold', 'Segoe UI Bold', 'Segoe WP Bold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
}

#allowdownloaddeckdiv {
    position: relative;
    top: 12px;
    left: 0;
}

#allowdownloaddeck,
#allowdiscussion {
    margin-top: 3px;
    cursor: pointer;
}

#allowdiscussiondiv {
    position: relative;
    top: 12px;
    left: 0;
}

.allowdownloaddeckclass {
    margin-bottom: 6px;
    margin-top: 0;
}

.allowdiscussionclass {
    margin-bottom: 0;
    margin-top: 0;
}

#allowdownloaddeckdiv .radio + .radio, .checkbox + .checkbox,
#allowdiscussiondiv .radio + .radio, .checkbox + .checkbox {
    margin-top: 0;
}

#permission-name {
    position: relative;
    top: 18px;
    left: 20px;
    width: 100%;
    font-family: 'Segoe UI Web Semibold', 'wf_SegoeUISemibold', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 16px;
    display: block;
    z-index: 1;
}

#permission-data {
    position: relative;
    top: 6px;
    left: 20px;
    width: 100%;
    padding-right: 30%;
    display: block;
    z-index: 1;
}

#lessondetails-canvas-form-save-txt-block {
    width: 100%;
    font-size: 14px;
    line-height: 14px;
    color: red;
    margin-bottom: 12px;
    display: none; /* Switch to inline-block when visible */
}

#lessondetails-canvas-form-buttons-block {
    width: 100%;
    height: 24px;
    margin-bottom: 30px;
    display: block;
}

    #lessondetails-canvas-form-buttons-block .btn-xs {
        padding: 1px 5px;
    }

    #lessondetails-canvas-form-buttons-block .btn-sm, .btn-xs {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        -ms-border-radius: 0;
        border-radius: 0;
    }

    #lessondetails-canvas-form-buttons-block .btn-primary {
        width: 74px;
        height: 24px;
        color: #000000;
        background-color: #FFFFFF;
        border-color: #747474;
        float: right;
    }

        #lessondetails-canvas-form-buttons-block .btn-primary:active,
        #lessondetails-canvas-form-buttons-block .btn-primary:hover,
        #lessondetails-canvas-form-buttons-block .btn-primary:focus {
            color: #ffffff;
            background-color: #619bca;
            border-color: #1d76bb;
            background-image: none;
            outline: 0;
            -webkit-box-shadow: none;
            -ms-box-shadow: none;
            box-shadow: none;
        }

    #lessondetails-canvas-form-buttons-block .btn.active {
        color: #ffffff;
        background-color: #619bca;
        border-color: #1d76bb;
        background-image: none;
        outline: 0;
        -webkit-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
    }

        #lessondetails-canvas-form-buttons-block .btn.active:hover,
        #lessondetails-canvas-form-buttons-block .btn.active:focus {
            background-color: #468847;
            border-color: #468847;
        }

.lessondetails-mix-thumbnail-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
}

.display-disabled {
    display: none;
    visibility: hidden;
}

.display-enabled {
    display: block;
    visibility: visible;
}

.required-fields {
    color: #df2624;
    margin-left: -16px;
}

.cc-icon {
    height: 14px;
    width: 14px;
}

#cc-more-info {
    font-size: 14px;
}

.permissioninfo-table {
    width: 300px;
    max-width: 300px;
}

.permissions-grid {
    z-index: 1;
}

/* Error Message Class */
.error-message {
    font-family: 'Segoe UI Web Semibold', 'wf_SegoeUISemibold', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 13px;
    color: #b94a48;
}

.warning-message {
    font-family: 'Segoe UI Web Semibold', 'wf_SegoeUISemibold', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 13px;
}

.warning-message-heading {
    font-family: 'Segoe UI Web Bold', 'wf_SegoeUIBold', 'Segoe UI Bold', 'Segoe WP Bold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 14px;
    color: red;
}
/* Error Message Class Ends */

/* End My Mixes Page */

/* Account/Settings */

#settings-useEmail-message {
    display: block;
    margin: 0 0 0 20px;
    padding: 0 0 0 4px;
}

input[name="useEmail"] {
    float: left;
    margin-right: 10px;
}

/* Account/Settings */

/* class to hide the SEO text information */

.seo-text {
    position: absolute;
    height: 0;
    overflow: hidden;
    display: none;
    z-index: -1;
}

/* End SEO text */

/* Begin Mix Contest Styles */

.contest-submit-link-big {
    position: relative;
    top: 45px;
    left: 0;
    text-decoration: none;
    background-color: #009E49;
    height: 80px;
    max-width: 540px;
    width: 100%;
    -moz-min-width: 394px;
    -ms-min-width: 394px;
    -o-min-width: 394px;
    -webkit-min-width: 394px;
    min-width: 394px;
    display: block;
}

    .contest-submit-link-big:hover,
    .contest-submit-link-big:focus {
        outline: 1px solid white;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        -khtml-opacity: 0.8;
        opacity: 0.8;
    }

.contest-submit-text-big {
    position: absolute;
    left: 150px;
    font-size: 30px;
    line-height: 80px;
    color: #FFFFFF;
}

    .contest-submit-text-big img {
        margin-bottom: 8px;
    }

.contest-submit-link-medium {
    position: relative;
    top: 0;
    text-decoration: none;
    background-color: #009E49;
    height: 40px;
    max-width: 506px;
    width: 100%;
    display: block;
}

    .contest-submit-link-medium:hover,
    .contest-submit-link-medium:focus {
        outline: 1px solid white;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        -khtml-opacity: 0.8;
        opacity: 0.8;
    }

.contest-submit-text-medium {
    position: absolute;
    left: 50%;
    font-size: 18px;
    line-height: 40px;
    color: #FFFFFF;
    margin-left: -84px;
}

.contest-submit-link-inactive {
    position: relative;
    top: 0;
    text-decoration: none;
    background-color: #999999;
    height: 40px;
    max-width: 506px;
    width: 100%;
    display: block;
}

.contest-submit-description-inactive {
    position: relative;
    left: 0;
    top: 0;
    height: 40px;
    max-width: 506px;
    width: 100%;
    display: block;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    color: #434343;
}

.contest-submit-link-small {
    position: relative;
    top: 10px;
    text-decoration: none;
    background-color: #009E49;
    height: 40px;
    max-width: 200px;
    width: 100%;
    -moz-min-width: 200px;
    -ms-min-width: 200px;
    -o-min-width: 200px;
    -webkit-min-width: 200px;
    min-width: 200px;
    display: block;
}

    .contest-submit-link-small:hover,
    .contest-submit-link-small:focus {
        outline: 1px solid white;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        -khtml-opacity: 0.8;
        opacity: 0.8;
    }

.contest-submit-text-small {
    position: absolute;
    left: 16px;
    font-size: 18px;
    line-height: 40px;
    color: #FFFFFF;
}

.contest-submit-icon-small {
    width: 16px;
    height: 16px;
    margin-bottom: 3px;
}

/* End Mix Contest Styles */

/* Begin RSS Page */

.rss-header-light {
    display: block;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 26px;
    line-height: 30px;
    margin-top: 73px;
    margin-bottom: 15px;
}

.rss-header-semibold {
    display: block;
    font-family: 'Segoe UI Web Semibold', 'wf_SegoeUISemibold', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 14px;
}

.rss-description {
    margin-bottom: 31px;
}

.rss-list {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

    .rss-list li {
        margin-bottom: 15px;
        margin-left: 0;
        padding-left: 0;
    }

.rss {
    margin-right: 10px;
}

#rss-page .col-sm-6, #rss-page .col-md-6, #rss-page .col-lg-6 {
    padding-left: 0;
}

/* End RSS Page */

/* Begin Responsive Layout Media Query Break Points */

@media only screen and (max-width: 480px) {
    .navbar-inverse .navbar-brand {
        margin-right: -11px; /* Prevents brand text from wrapping on desktops */
    }
}

/* Mitigates weird text wrapping on desktops and tablets */
@media only screen and (min-width: 480px) {
    .aboutpage-orphan-header-wrap {
        margin-right: 20%;
    }

    .aboutpage-orphan-paragraph-wrap {
        margin-right: 10%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .col-tn-1,
    .col-tn-2,
    .col-tn-3,
    .col-tn-4,
    .col-tn-5,
    .col-tn-6,
    .col-tn-7,
    .col-tn-8,
    .col-tn-9,
    .col-tn-10,
    .col-tn-11 {
        float: left;
    }

    .col-tn-1 {
        width: 8.333333333333332%;
    }

    .col-tn-2 {
        width: 16.666666666666664%;
    }

    .col-tn-3 {
        width: 25%;
    }

    .col-tn-4 {
        width: 33.33333333333333%;
    }

    .col-tn-5 {
        width: 41.66666666666667%;
    }

    .col-tn-6 {
        width: 50%;
    }

    .col-tn-7 {
        width: 58.333333333333336%;
    }

    .col-tn-8 {
        width: 66.66666666666666%;
    }

    .col-tn-9 {
        width: 75%;
    }

    .col-tn-10 {
        width: 83.33333333333334%;
    }

    .col-tn-11 {
        width: 91.66666666666666%;
    }

    .col-tn-12 {
        width: 100%;
    }
}

@media only screen and (max-width: 494px) {
    .footer-links .ms-copyright {
        display: block;
        margin-bottom: 2px;
    }

    .footer-links .footer-terms,
    .footer-links .footer-support {
        border-left: none;
    }
}

@media only screen and (max-width: 590px) {
    .lessonInfo {
        float: left;
        width: 100%;
        min-width: 220px;
    }
}

@media only screen and (min-width: 591px) and (max-width: 1023px) {
    .lessonInfo {
        float: left;
        width: 60%;
    }
}

@media only screen and (max-width: 641px) {
    .footer-links .footer-support {
        border-left: none;
        display: inline-block;
    }
}

@media only screen and (min-width: 641px) and (max-width: 750px) {
    .footer-links .footer-report {
        display: inline-block;
        border-left: none;
    }
}

@media only screen and (max-width: 660px) {
    #lessonList .lesson-card {
        margin-top: 30px;
    }
}

@media only screen and (max-width: 768px) {
    #gallery-bkg .col-lg-3,
    #gallery-bkg .col-md-3,
    #gallery-bkg .col-sm-6,
    #gallery-bkg .col-xs-12 {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 14px;
        width: 271px;
        height: 167px;
        float: left;
    }

    #gallery-category {
        float: none;
        margin-right: 0;
        margin-left: 8px;
    }

    #gallery-category-combobox {
        position: relative;
        top: -250px;
        width: 100%;
        -moz-min-width: 394px;
        -ms-min-width: 394px;
        -o-min-width: 394px;
        -webkit-min-width: 394px;
        min-width: 394px;
        float: right;
        z-index: 201;
    }

    #gallery-search-category {
        float: none;
        margin-right: 0;
        margin-left: 0;
    }

    #gallery-search-category-combobox {
        position: relative;
        top: -250px;
        width: 100%;
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
        float: left;
        padding-left: 6px;
        z-index: 201;
    }

    #gallery-search-category .btn-group {
        height: 45px;
        width: 100%;
        max-width: 380px;
        min-width: 250px;
    }

    #gallery-search-category .btn {
        width: 100%;
        max-width: 380px;
        margin-bottom: 6px;
    }

    #gallery-search-category .dropdown-menu {
        width: 100%;
    }

    .gallery-search-mobile-wrapper {
        width: 100%;
        max-width: 380px;
    }

    .gallery-textarea-search {
        position: relative;
        min-width: 100%;
        width: 100%;
        max-width: 336px;
    }

    .gallery-search-button-wrapper {
        position: absolute;
        right: 0;
        float: none;
    }

    .gallery-search-button {
        position: absolute;
        top: 10px;
        left: 0;
        width: 24px;
        height: 24px;
        margin-left: 10px;
        background: url('Images/Forum/searchSprite.svg') no-repeat;
        background-position: center top;
        -ms-background-size: 24px 49px;
        background-size: 24px 49px;
        outline: none;
        border: none;
    }

    #gallery-text-box {
        position: relative;
        top: -185px;
        width: 100%;
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
        padding-left: 6px;
        margin-bottom: -230px;
        float: left;
    }

    #gallery-text-box-header {
        width: 250px;
        font-size: 20px;
        font-family: 'Segoe UI Web Normal', 'wf_SegoeUI', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
        line-height: 26px;
    }

    #gallery-text-box-goto-wrapper {
        top: 12px;
        width: 160px;
    }

    #gallery-text-box-author {
        position: relative;
        font-size: 20px;
        line-height: 26px;
        color: #FFFFFF;
        float: left;
    }

    #gallery-text-box-description {
        position: relative;
        top: 4px;
        left: 0;
        height: auto;
        max-width: 380px;
        width: 90%;
        -moz-min-width: 250px;
        -ms-min-width: 250px;
        -o-min-width: 250px;
        -webkit-min-width: 250px;
        min-width: 250px;
        color: #FFFFFF;
        font-size: 12px;
        line-height: 16px;
        display: none;
    }

    #gallery-goto-hero-mix {
        position: relative;
        width: 26px;
        height: 26px;
        margin-left: 12px;
        float: left;
    }

    #gallery-bkg {
        position: relative;
        top: -26px;
    }

    .contest-submit-link-big {
        position: relative;
        top: 16px;
        left: 0;
        text-decoration: none;
        background-color: #009E49;
        height: 40px;
        max-width: 380px;
        width: 90%;
        -moz-min-width: 250px;
        -ms-min-width: 250px;
        -o-min-width: 250px;
        -webkit-min-width: 250px;
        min-width: 250px;
        display: block;
    }

        .contest-submit-link-big:hover,
        .contest-submit-link-big:focus {
            text-decoration: none;
        }

    .contest-submit-text-big {
        position: absolute;
        left: 50%;
        margin-left: -73px;
        font-size: 20px;
        line-height: 40px;
        color: #FFFFFF;
    }

        .contest-submit-text-big img {
            width: 22px;
            height: 22px;
            margin-bottom: 6px;
        }

    #lessondetails-categories {
        width: 100%;
        float: left;
    }

    #lessondetails-tags {
        width: 100%;
        float: left;
        margin-left: 0;
        margin-bottom: 28px;
    }

    #lessondetails-canvas-form-buttons-block {
        margin-right: 15px;
    }
}

@media only screen and (min-width: 768px) {
    .nav-container-fluid {
        margin-left: auto;
        margin-right: auto;
    }

    .container-fluid {
        margin-left: 14px;
        margin-right: 14px;
    }

    .navbar .navbar-nav {
        display: inline-block;
        float: none;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }

    .navbar-nav > li > a {
        padding-bottom: 0;
        padding-top: 21px;
    }

    .author-card {
        float: left;
    }
}

@media only screen and (max-width: 922px) {
    .lesson-card-created-on {
        height: auto;
        float: left;
    }

        .lesson-card-created-on span {
            margin-bottom: 5px;
        }

    .lesson-card-social {
        height: auto;
        float: left;
    }

    .lesson-card .lesson-card-social-item-video {
        margin: 0 12px 0 0;
    }

    .lesson-card .lesson-card-social-item-mix {
        margin: 0 12px 0 0;
    }

    .lesson-card .lesson-card-social-item-detail {
        margin: 0 12px 0 0;
    }

    .lesson-card .lesson-card-social-item-analytics {
        margin: 0 12px 0 0;
    }

    .lesson-card .lesson-card-social-item-discuss {
        margin: 0 12px 0 0;
    }

    .lesson-card .lesson-card-social-item-delete {
        margin: 0 12px 0 0;
    }

    .lesson-card .lesson-card-social-item-report {
        margin: 0 12px 0 0;
    }

    .lesson-card .lesson-card-social-item-fb {
        margin: 5px 14px 0 0;
    }

    .share-card-nav-tabs > li > a {
        margin-right: 30px;
    }
}

@media only screen and (min-width: 769px) and (max-width: 992px) {
    #gallery-text-box {
        top: 136px;
    }
}

@media only screen and (min-width: 769px) and (max-width: 992px) {
    #gallery-bkg .col-lg-3, #gallery-bkg .col-md-3, #gallery-bkg .col-sm-6, #gallery-bkg .col-xs-12 {
        margin-right: 14px;
        width: 271px;
        height: 167px;
        float: left;
    }

    #gallery-search-category {
        float: none;
        margin-right: 0;
        margin-left: 0;
    }

        #gallery-search-category .btn-group {
            height: 45px;
            width: auto;
        }

    #gallery-search-category-combobox {
        position: relative;
        top: -250px;
        width: 100%;
        -moz-min-width: 394px;
        -ms-min-width: 394px;
        -o-min-width: 394px;
        -webkit-min-width: 394px;
        min-width: 394px;
        float: right;
        z-index: 201;
    }
    #gallery-text-box-header {
        width: 450px;
        font-size: 32px;
        line-height: 42px;
    }

    #gallery-text-box-author {
        position: relative;
        font-size: 20px;
        line-height: 26px;
        color: #FFFFFF;
        float: left;
    }

    #gallery-text-box-description {
        position: relative;
        top: 0;
        left: 0;
        height: auto;
        max-width: 400px;
        width: 100%;
        -moz-min-width: 294px;
        -ms-min-width: 294px;
        -o-min-width: 294px;
        -webkit-min-width: 294px;
        min-width: 294px;
        color: #FFFFFF;
        font-size: 14px;
        display: block;
    }

    #gallery-text-box-goto-wrapper {
        position: relative;
        top: 0;
        left: 0;
        width: 300px;
        border: none;
        display: block;
        height: 30px;
    }

    #gallery-goto-hero-mix {
        position: relative;
        width: 26px;
        height: 26px;
        margin-left: 12px;
        float: left;
    }

    .contest-submit-link-big {
        position: relative;
        top: 8px;
        left: 0;
        text-decoration: none;
        background-color: #009E49;
        height: 40px;
        max-width: 380px;
        width: 100%;
        -moz-min-width: 294px;
        -ms-min-width: 294px;
        -o-min-width: 294px;
        -webkit-min-width: 294px;
        min-width: 294px;
        display: block;
    }

    .contest-submit-text-big {
        position: absolute;
        left: 110px;
        font-size: 20px;
        line-height: 40px;
        color: #FFFFFF;
    }

        .contest-submit-text-big img {
            width: 22px;
            height: 22px;
            margin-bottom: 6px;
        }
}

@media only screen and (max-width: 992px) {
    .sidebar-navigation {
        padding-left: 46px;
        padding-bottom: 20px;
    }
}

@media only screen and (min-width: 1024px) {
    .mix-container {
        min-width: 1000px; /* We allow 24px for the vertical scrollbar */
        max-width: 1200px;
    }

    .home-hero-slide-contents-block-text-title {
        font-size: 20px;
        line-height: 32px;
    }

    .home-hero-slide-contents-block-text-description {
        font-size: 14px;
        line-height: 28px;
    }

    .home-hero-slide-contents-block {
        padding: 2% 20px 0 20px;
    }

    .desktop.home-hero-button-spacer {
        height: 23px;
    }
}

@media only screen and (max-width: 1024px) {
    .mix-container {
        width: 1024px;
    }

    #gallery-bkg .container {
        padding-left: 8px;
    }

    #gallery-text-box {
        padding-left: 0;
    }
}

@media only screen and (max-width: 1050px) {
    .footer-links .footer-social {
        margin-top: 10px;
        margin-bottom: 16px;
        margin-left: 0;
        display: block;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .lessonInfo {
        float: left;
        width: 70%;
    }

    #lessonList .col-md-3 {
        width: 30%;
    }

     #gallery-bkg .col-lg-3, #gallery-bkg .col-md-3, #gallery-bkg .col-sm-6, #gallery-bkg .col-xs-12 {
        margin-right: 14px;
        width: 271px;
        height: 167px;
        float: left;
    }

    .tiles-row div:nth-child(5) {
        display: inline-block;
    }

    .tiles-row div:nth-child(6) {
        display: inline-block;
    }

    #gallery-search-category-combobox {
        position: absolute;
        top: 85px;
        width: 100%;
        -moz-min-width: 500px;
        -ms-min-width: 500px;
        -o-min-width: 500px;
        -webkit-min-width: 500px;
        min-width: 500px;
        z-index: 201;
    }

    #gallery-text-box {
        top: 76px;
    }

    #gallery-text-box-header {
        width: 500px;
        font-size: 40px;
        line-height: 50px;
    }

    #gallery-text-box-description {
        position: relative;
        top: 38px;
        left: 0;
        height: auto;
        max-width: 400px;
        width: 100%;
        -moz-min-width: 294px;
        -ms-min-width: 294px;
        -o-min-width: 294px;
        -webkit-min-width: 294px;
        min-width: 294px;
        color: #FFFFFF;
        font-size: 14px;
        display: block;
    }

    #gallery-text-box-goto-wrapper {
        top: 28px;
    }

    .contest-submit-link-big {
        position: relative;
        top: 50px;
        left: 0;
        text-decoration: none;
        background-color: #009E49;
        height: 40px;
        max-width: 380px;
        width: 100%;
        -moz-min-width: 294px;
        -ms-min-width: 294px;
        -o-min-width: 294px;
        -webkit-min-width: 294px;
        min-width: 294px;
        display: block;
    }

    .contest-submit-text-big {
        position: absolute;
        left: 110px;
        font-size: 20px;
        line-height: 40px;
        color: #FFFFFF;
    }

        .contest-submit-text-big img {
            width: 22px;
            height: 22px;
            margin-bottom: 6px;
        }
}

@media only screen and (min-width: 1200px) {
    .mix-container {
        min-width: 1176px; /* We allow 24px for the vertical scrollbar */
        max-width: 1576px;
    }

    .home-hero-slide-contents-block {
        padding: 3% 20px 0 20px;
    }

    .home-hero-slide-contents-block-text-title {
        font-size: 24px;
        line-height: 36px;
    }

    .home-hero-slide-contents-block-text-description {
        font-size: 18px;
        line-height: 30px;
    }

    .desktop.home-hero-button-spacer {
        height: 38px;
    }

    .lessonInfo {
        float: left;
        width: 75%;
        min-width: 220px;
    }

    #gallery-bkg .col-lg-3, #gallery-bkg .col-md-3, #gallery-bkg .col-sm-6, #gallery-bkg .col-xs-12 {
        margin-right: 14px;
        width: 271px;
        height: 167px;
        float: left;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1370px) {
    #gallery-text-box-goto-wrapper {
        position: relative;
        top: 0;
        left: 0;
        width: 300px;
        border: none;
        display: block;
        height: 40px;
    }

    #gallery-text-box-description {
        position: relative;
        top: 8px;
        left: 0;
        height: auto;
        max-width: 400px;
        width: 100%;
        -moz-min-width: 294px;
        -ms-min-width: 294px;
        -o-min-width: 294px;
        -webkit-min-width: 294px;
        min-width: 294px;
        color: #FFFFFF;
        font-size: 14px;
        display: block;
    }

    .contest-submit-link-big {
        position: relative;
        top: 19px;
        left: 0;
        text-decoration: none;
        background-color: #009E49;
        height: 40px;
        max-width: 380px;
        width: 100%;
        -moz-min-width: 294px;
        -ms-min-width: 294px;
        -o-min-width: 294px;
        -webkit-min-width: 294px;
        min-width: 294px;
        display: block;
    }

    .contest-submit-text-big {
        position: absolute;
        left: 110px;
        font-size: 20px;
        line-height: 40px;
        color: #FFFFFF;
    }

        .contest-submit-text-big img {
            width: 22px;
            height: 22px;
            margin-bottom: 6px;
        }
}

@media only screen and (max-width: 1244px) {
    #gallery_hero_canvas {
        position: relative;
        top: 0;
        left: 0;
        width: 1227px;
        height: 270px;
        border: 0 none;
        text-align: center;
        overflow: hidden;
    }

        #gallery_hero_canvas img {
            position: absolute;
            top: 0;
            left: 50%;
            width: 1227px;
            height: 270px;
            margin: 0 auto 0 -614px;
        }
}

@media only screen and (min-width: 1370px) and (max-width: 1520px) {
    #gallery-text-box-goto-wrapper {
        top: 8px;
    }

    #gallery-text-box-description {
        top: 15px;
    }

    .contest-submit-link-big {
        position: relative;
        top: 30px;
        left: 0;
        text-decoration: none;
        background-color: #009E49;
        height: 60px;
        max-width: 500px;
        width: 100%;
        -moz-min-width: 394px;
        -ms-min-width: 394px;
        -o-min-width: 394px;
        -webkit-min-width: 394px;
        min-width: 394px;
        display: block;
    }

    .contest-submit-text-big {
        position: absolute;
        left: 130px;
        font-size: 30px;
        line-height: 60px;
        color: #FFFFFF;
    }
}

@media only screen and (min-width: 1600px) {
    .mix-container {
        min-width: 1576px; /* We allow 24px for the vertical scrollbar */
        max-width: 1920px;
    }

    .home-hero-slide-contents-block-text-title {
        font-size: 32px;
        line-height: 44px;
    }

    .home-hero-slide-contents-block-text-description {
        font-size: 24px;
        line-height: 44px;
    }
}

@media only screen and (min-width: 1920px) {
    .mix-container {
        min-width: 1896px; /* We allow 24px for the vertical scrollbar */
        max-width: 1920px;
    }

    #gallery-category-combobox {
        min-width: 1896px; /* We allow 24px for the vertical scrollbar */
        max-width: 1920px;
    }

    #gallery-text-box {
        min-width: 1896px; /* We allow 24px for the vertical scrollbar */
        max-width: 1920px;
    }
}

/* End Responsive Layout Media Query Break Points */

/* Begin Microsoft High-Contrast Styles */

.hc-white-img {
    display: none;
    visibility: collapse;
}

.hc-black-img {
    display: none;
    visibility: collapse;
}

.default-img {
    display: inline;
    visibility: visible;
}

@media screen and (-ms-high-contrast: black-on-white) {
    .hc-white-img {
        display: inline !important;
        visibility: visible !important;
    }

    .hc-black-img {
        display: none !important;
        visibility: collapse !important;
    }

    .default-img {
        display: none !important;
        visibility: collapse !important;
    }

    .navbar-inverse .navbar-toggle .icon-bar {
        background-color: #000000;
    }

    #slide-bg-1 {
        background-image: url("Images/AboutMix.jpg");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #slide-bg-2 {
        background-image: url("Images/Create.jpg");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #slide-bg-3 {
        background-image: url("Images/Engage.jpg");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #slide-bg-4 {
        background-image: url("Images/Share.jpg");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #hero_bkg {
        position: relative;
        top: 0;
        left: 0;
        max-width: 100%;
        height: auto;
        border-top: 0 none;
        border-right: 0 none;
        border-bottom: 1px solid #000000;
        border-left: 0 none;
        padding: 0;
        overflow: hidden;
    }

    /*-desktop-hero-buttons*/
    .desktop.home-hero-button, .desktop.home-hero-button-spacer {
        border: 0 solid;
        cursor: pointer;
        display: block;
        height: 50px;
        margin: 0;
        padding: 0;
        position: relative;
        width: 50px;
        outline: none;
        background: url("Images/HighContrast/HeroNavSprite_HC_White.png");
        -ms-background-size: 150px 460px;
        background-size: 150px 460px;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .desktop.home-hero-button-spacer {
        background-position: 0 -50px;
        height: 38px;
        cursor: default;
    }

    .desktop.herobutton-5 {
        background-position: 0 -368px;
    }

        .desktop.herobutton-5:hover,
        .desktop.herobutton-5:focus {
            background-position: -100px -368px;
        }

        .desktop.herobutton-5.home-selected-hero-button {
            background-position: -50px -368px;
        }

    .desktop.herobutton-4 {
        background-position: 0 -276px;
    }

        .desktop.herobutton-4:hover,
        .desktop.herobutton-4:focus {
            background-position: -100px -276px;
        }

        .desktop.herobutton-4.home-selected-hero-button {
            background-position: -50px -276px;
        }

    .desktop.herobutton-3 {
        background-position: 0 -184px;
    }

        .desktop.herobutton-3:hover,
        .desktop.herobutton-3:focus {
            background-position: -100px -184px;
        }

        .desktop.herobutton-3.home-selected-hero-button {
            background-position: -50px -184px;
        }

    .desktop.herobutton-2 {
        background-position: 0 -92px;
    }

        .desktop.herobutton-2:hover,
        .desktop.herobutton-2:focus {
            background-position: -100px -92px;
        }

        .desktop.herobutton-2.home-selected-hero-button {
            background-position: -50px -92px;
        }

    .desktop.herobutton-1 {
        background-position: 0 0;
    }

        .desktop.herobutton-1:hover,
        .desktop.herobutton-1:focus {
            background-position: -100px 0;
        }

        .desktop.herobutton-1.home-selected-hero-button {
            background-position: -50px 0;
        }
    /*-desktop-hero-buttons*/

    .mix-info-box.red:before {
        border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    .mix-info-box.blue:before {
        border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    .mix-info-box.orange:before {
        border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    .mix-info-box.lightorange:before {
        border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    .home-play-button {
        position: absolute;
        top: 50%;
        left: 60%;
        width: 100px;
        height: 100px;
        padding: 0;
        margin: -50px 0 0 -50px;
        border: 0 none;
        background-image: url("Images/HighContrast/Play100x100_HC_White.svg");
        -ms-background-size: 100px 100px;
        background-size: 100px 100px;
        cursor: pointer;
    }

    .home_download_button {
        background: none repeat scroll 0 0 rgb(0, 0, 159);
        color: #FFFFFF;
        border: 0 none;
        display: inline-block;
        height: 126px;
        margin: 0;
        overflow: hidden;
        position: relative;
        -webkit-transform: skewX(-16deg);
        -moz-transform: skewX(-16deg);
        -ms-transform: skewX(-15.999999deg);
        -o-transform: skewX(-16deg);
        transform: skewX(-15.999999deg);
        width: 100%;
    }

    #home_hero_contents_left_panel {
        background: url("Images/HighContrast/ppt220x220_HC_White.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
        border: 0 none;
        float: left;
        height: 200px;
        margin: 0;
        padding: 0;
        width: 200px;
    }

    #home_download_button_icon {
        background-image: url("Images/HighContrast/download50x50_HC_White.png");
        background-repeat: no-repeat;
        background-size: 50px auto;
        border: 0 none;
        display: inline-block;
        height: 50px;
        margin-top: 15px;
        outline-style: none;
        text-decoration: none;
        width: 50px;
    }

    #button_download_lnk_small {
        background-image: url("Images/HighContrast/download50x50_HC_White.png");
        background-repeat: no-repeat;
        background-size: 30px auto;
        border: 0 none;
        display: inline-block;
        height: 30px;
        outline-style: none;
        text-decoration: none;
        width: 30px;
    }

    #orgid_btn {
        background-image: url("Images/HighContrast/SignIn_organization_290x70_HC_White.svg");
        background-position: left top;
        background-repeat: no-repeat;
        background-size: cover;
        height: 70px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/HighContrast/SignIn_MSFT_290x70_HC_White.svg");
        background-position: left top;
        background-repeat: no-repeat;
        background-size: cover;
        height: 70px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/HighContrast/SignIn_Facebook_220x32_HC_White.svg");
        background-position: left top;
        background-repeat: no-repeat;
        background-size: cover;
        height: 32px;
        width: 220px;
    }

    #google_btn {
        background-image: url("Images/HighContrast/SignIn_Google_220x32_HC_White.svg");
        background-position: left top;
        background-repeat: no-repeat;
        background-size: cover;
        height: 32px;
        width: 220px;
    }

    #get_office_mix_btn {
        background-image: url("Images/download50x50.png");
        background-position: right bottom;
        background-repeat: no-repeat;
        background-size: cover;
        height: 48px;
        width: 220px;
    }

    .caret {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 4px solid #000000;
        border-right: 4px solid #FFFFFF;
        border-bottom: 0 dotted;
        border-left: 4px solid #FFFFFF;
        content: "";
    }

    #lessondetails-header-block-arrow-link {
        background-image: url("Images/HighContrast/BackArrowGray50x50_HC_White.png");
        background-repeat: no-repeat;
        -ms-background-size: 50px auto;
        background-size: 50px auto;
        border: 0 none;
        display: inline-block;
        height: 50px;
        margin-right: 18px;
        outline-style: none;
        padding: 0;
        text-decoration: none;
        vertical-align: middle;
        width: 50px;
    }

    #lesson-details-bkg-right:before {
        position: absolute;
        top: 65px;
        bottom: auto;
        left: -28px;
        width: 14px;
        height: 14px;
        border-style: solid;
        border-width: 14px;
        content: "";
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    #lesson-details-bkg-right:before {
        border-color: #000000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    #lesson-details-bkg-left:before {
        position: absolute;
        top: 65px;
        bottom: auto;
        right: -28px;
        width: 14px;
        height: 14px;
        border-style: solid;
        border-width: 14px;
        content: "";
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    #lesson-details-bkg-left:before {
        border-color: #000000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    #lesson-details-mobile-bkg:before {
        border-color: #000000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    .caret-down-large {
        border-left: 5px solid rgba(0, 0, 0, 0);
        border-right: 5px solid rgba(0, 0, 0, 0);
        border-top: 5px solid #000000;
        content: "";
        display: inline-block;
        height: 0;
        margin: 0 0 7px 3px;
        vertical-align: middle;
        width: 0;
    }

    #lessondetails-category-box .btn {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.4285;
        text-align: left;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        border: 1px solid transparent;
        border-radius: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    #permissionsslider {
        height: 10px;
        margin-top: 10px;
        margin-left: 12px;
        margin-bottom: 10px;
        background-image: none;
        width: 206px;
        background-color: #000000;
    }

        #permissionsslider .ui-slider-range {
            background-color: #000000;
        }

        #permissionsslider .ui-slider #permissionsslider .ui-slider-horzontal #permissionsslider .ui-widget-content {
            background-color: #000000;
        }

        #permissionsslider .ui-slider-progress {
            background-color: #000000;
            height: 100%;
        }

        #permissionsslider #rectone,
        #permissionsslider #recttwo,
        #permissionsslider #rectthree,
        #permissionsslider #rectfour {
            position: absolute;
            background-color: #37006e;
            width: 54px;
            height: 10px;
            top: 0;
            cursor: pointer;
            z-index: 2;
        }

        #permissionsslider #recttype2one,
        #permissionsslider #recttype2two,
        #permissionsslider #recttype2three {
            position: absolute;
            background-color: #37006e;
            width: 68px;
            height: 10px;
            top: 0;
            cursor: pointer;
            z-index: 2;
        }

        #permissionsslider .markers {
            width: 100%;
            height: 10px;
            position: absolute;
            top: 0;
            background-color: transparent;
        }

        #permissionsslider .marker-one,
        #permissionsslider .marker-two,
        #permissionsslider .marker-three {
            position: absolute;
            background-color: #FFFFFF;
            width: 2px;
            height: 10px;
            top: 0;
            cursor: pointer;
            z-index: 5;
        }

    #permissions-content:before {
        border-color: #000000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    #permissions-content:after {
        border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    #gallery-text-box-header {
        color: #FFFFFF;
    }

    #gallery-text-box-author {
        color: #FFFFFF;
    }

    #gallery-text-box-description {
        color: #FFFFFF;
    }
}

@media screen and (-ms-high-contrast: white-on-black) {
    .hc-white-img {
        display: none !important;
        visibility: collapse !important;
    }

    .hc-black-img {
        display: inline !important;
        visibility: visible !important;
    }

    .default-img {
        display: none !important;
        visibility: collapse !important;
    }

    .navbar-inverse .navbar-toggle .icon-bar {
        background-color: #ffffff;
    }

    #slide-bg-1 {
        background-image: url("Images/AboutMix.jpg");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #slide-bg-2 {
        background-image: url("Images/Create.jpg");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #slide-bg-3 {
        background-image: url("Images/Engage.jpg");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #slide-bg-4 {
        background-image: url("Images/Share.jpg");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #hero_bkg {
        position: relative;
        top: 0;
        left: 0;
        max-width: 100%;
        height: auto;
        border-top: 0 none;
        border-right: 0 none;
        border-bottom: 1px solid #FFFFFF;
        border-left: 0 none;
        padding: 0;
        overflow: hidden;
    }

    /*-desktop-hero-buttons*/
    .desktop.home-hero-button, .desktop.home-hero-button-spacer {
        border: 0 solid;
        cursor: pointer;
        display: block;
        height: 50px;
        margin: 0;
        padding: 0;
        position: relative;
        width: 50px;
        outline: none;
        background: url("Images/HighContrast/HeroNavSprite_HC_Black.png");
        -ms-background-size: 150px 460px;
        background-size: 150px 460px;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .desktop.home-hero-button-spacer {
        background-position: 0 -50px;
        height: 38px;
        cursor: default;
    }

    .desktop.herobutton-5 {
        background-position: 0 -368px;
    }

        .desktop.herobutton-5:hover,
        .desktop.herobutton-5:focus {
            background-position: -100px -368px;
        }

        .desktop.herobutton-5.home-selected-hero-button {
            background-position: -50px -368px;
        }

    .desktop.herobutton-4 {
        background-position: 0 -276px;
    }

        .desktop.herobutton-4:hover,
        .desktop.herobutton-4:focus {
            background-position: -100px -276px;
        }

        .desktop.herobutton-4.home-selected-hero-button {
            background-position: -50px -276px;
        }

    .desktop.herobutton-3 {
        background-position: 0 -184px;
    }

        .desktop.herobutton-3:hover,
        .desktop.herobutton-3:focus {
            background-position: -100px -184px;
        }

        .desktop.herobutton-3.home-selected-hero-button {
            background-position: -50px -184px;
        }

    .desktop.herobutton-2 {
        background-position: 0 -92px;
    }

        .desktop.herobutton-2:hover,
        .desktop.herobutton-2:focus {
            background-position: -100px -92px;
        }

        .desktop.herobutton-2.home-selected-hero-button {
            background-position: -50px -92px;
        }

    .desktop.herobutton-1 {
        background-position: 0 0;
    }

        .desktop.herobutton-1:hover,
        .desktop.herobutton-1:focus {
            background-position: -100px 0;
        }

        .desktop.herobutton-1.home-selected-hero-button {
            background-position: -50px 0;
        }
    /*-desktop-hero-buttons*/

    .mix-info-box.red:before {
        border-color: #000000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    .mix-info-box.blue:before {
        border-color: #000000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    .mix-info-box.orange:before {
        border-color: #000000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    .mix-info-box.lightorange:before {
        border-color: #000000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    .home-play-button {
        position: absolute;
        top: 50%;
        left: 60%;
        width: 100px;
        height: 100px;
        padding: 0;
        margin: -50px 0 0 -50px;
        border: 0 none;
        background-image: url("Images/HighContrast/Play100x100_HC_Black.svg");
        -ms-background-size: 100px 100px;
        background-size: 100px 100px;
        cursor: pointer;
    }

    .home_download_button {
        background: none repeat scroll 0 0 yellow;
        color: #000000;
        border: 0 none;
        display: inline-block;
        height: 126px;
        margin: 0;
        overflow: hidden;
        position: relative;
        -webkit-transform: skewX(-16deg);
        -moz-transform: skewX(-16deg);
        -ms-transform: skewX(-15.999999deg);
        -o-transform: skewX(-16deg);
        transform: skewX(-15.999999deg);
        width: 100%;
    }

    #home_hero_contents_left_panel {
        background: url("Images/HighContrast/ppt220x220_HC_Black.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
        border: 0 none;
        float: left;
        height: 200px;
        margin: 0;
        padding: 0;
        width: 200px;
    }

    #home_download_button_icon {
        background-image: url("Images/HighContrast/download50x50_HC_Black.png");
        background-repeat: no-repeat;
        background-size: 50px auto;
        border: 0 none;
        display: inline-block;
        height: 50px;
        margin-top: 15px;
        outline-style: none;
        text-decoration: none;
        width: 50px;
    }

    #button_download_lnk_small {
        background-image: url("Images/HighContrast/download50x50_HC_Black.png");
        background-repeat: no-repeat;
        background-size: 30px auto;
        border: 0 none;
        display: inline-block;
        height: 30px;
        outline-style: none;
        text-decoration: none;
        width: 30px;
    }

    #orgid_btn {
        background-image: url("Images/HighContrast/SignIn_organization_290x70_HC_Black.svg");
        background-position: left top;
        background-repeat: no-repeat;
        background-size: cover;
        height: 70px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/HighContrast/SignIn_MSFT_290x70_HC_Black.svg");
        background-position: left top;
        background-repeat: no-repeat;
        background-size: cover;
        height: 70px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/HighContrast/SignIn_Facebook_220x32_HC_Black.svg");
        background-position: left top;
        background-repeat: no-repeat;
        background-size: cover;
        height: 32px;
        width: 220px;
    }

    #google_btn {
        background-image: url("Images/HighContrast/SignIn_Google_220x32_HC_Black.svg");
        background-position: left top;
        background-repeat: no-repeat;
        background-size: cover;
        height: 32px;
        width: 220px;
    }

    .caret {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 4px solid #FFFFFF;
        border-right: 4px solid #000000;
        border-bottom: 0 dotted;
        border-left: 4px solid #000000;
        content: "";
    }

    #lessondetails-header-block-arrow-link {
        background-image: url("Images/HighContrast/BackArrowGray50x50_HC_Black.png");
        background-repeat: no-repeat;
        -ms-background-size: 50px auto;
        background-size: 50px auto;
        border: 0 none;
        display: inline-block;
        height: 50px;
        margin-right: 18px;
        outline-style: none;
        padding: 0;
        text-decoration: none;
        vertical-align: middle;
        width: 50px;
    }

    #lesson-details-bkg-right:before {
        position: absolute;
        top: 65px;
        bottom: auto;
        left: -28px;
        width: 14px;
        height: 14px;
        border-style: solid;
        border-width: 14px;
        content: "";
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    #lesson-details-bkg-right:before {
        border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    #lesson-details-bkg-left:before {
        position: absolute;
        top: 65px;
        bottom: auto;
        right: -28px;
        width: 14px;
        height: 14px;
        border-style: solid;
        border-width: 14px;
        content: "";
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    #lesson-details-bkg-left:before {
        border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    #lesson-details-mobile-bkg:before {
        border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    .caret-down-large {
        border-left: 5px solid rgba(0, 0, 0, 0);
        border-right: 5px solid rgba(0, 0, 0, 0);
        border-top: 5px solid #FFFFFF;
        content: "";
        display: inline-block;
        height: 0;
        margin: 0 0 7px 3px;
        vertical-align: middle;
        width: 0;
    }

    #lessondetails-category-box .btn {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.4285;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        border: 1px solid transparent;
        border-radius: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    #permissionsslider {
        height: 10px;
        margin-top: 10px;
        margin-left: 12px;
        margin-bottom: 10px;
        background-image: none;
        width: 206px;
        background-color: #FFFFFF;
    }

        #permissionsslider .ui-slider-range {
            background-color: #FFFFFF;
        }

        #permissionsslider .ui-slider #permissionsslider .ui-slider-horzontal #permissionsslider .ui-widget-content {
            background-color: #FFFFFF;
        }

        #permissionsslider .ui-slider-progress {
            background-color: #FFFFFF;
            height: 100%;
        }

        #permissionsslider #rectone,
        #permissionsslider #recttwo,
        #permissionsslider #rectthree,
        #permissionsslider #rectfour {
            position: absolute;
            background-color: yellow;
            width: 54px;
            height: 10px;
            top: 0;
            cursor: pointer;
            z-index: 2;
        }

        #permissionsslider #recttype2one,
        #permissionsslider #recttype2two,
        #permissionsslider #recttype2three {
            position: absolute;
            background-color: yellow;
            width: 68px;
            height: 10px;
            top: 0;
            cursor: pointer;
            z-index: 2;
        }

        #permissionsslider .markers {
            width: 100%;
            height: 10px;
            position: absolute;
            top: 0;
            background-color: transparent;
        }

        #permissionsslider .marker-one,
        #permissionsslider .marker-two,
        #permissionsslider .marker-three {
            position: absolute;
            background-color: #000000;
            width: 2px;
            height: 10px;
            top: 0;
            cursor: pointer;
            z-index: 5;
        }

    #permissions-content:before {
        border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }

    #permissions-content:after {
        border-color: #000000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    }
}

/* End Microsoft High-Contrast Styles*/


/* NON DEVICE-SPECIFIC STYLES */

@media only screen and (max-width: 460px) {
    /*-General--*/
    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 30px;
        left: 50%;
        width: 354px;
        height: 200px;
        margin: 0 0 0 -177px;
    }

    #home_hero_contents_getStarted {
        width: 350px;
        height: 200px;
    }

    #home_hero_contents_left_panel {
        background-size: 60px 60px;
        height: 60px;
        width: 60px;
    }

    .home-hero-download-contents {
        left: 80px;
    }

    .home-hero-download-contents-title {
        left: 80px;
    }

    .home-hero-download-contents-text {
        left: 80px;
    }

    .home-hero-download-button {
        margin-left: 80px;
    }

    .home-hero-download-sysreqs {
        left: 80px;
        padding-right: 40px;
    }

    #gallery-category-combobox {
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
    }

    .tooltip.top {
        margin-left: -30px;
    }

    .tooltip-inner {
        max-width: 400px;
    }

    .tooltip.top .tooltip-arrow {
        left: 58% !important;
    }

    footer.footer {
        padding: 12px 10px 0 10px;
    }
    /*-General--ends--*/

    /* watch page */
    .lesson-card .lesson-card-social-item{
        font-size: 14px;
        color: #828282;
        margin-top: 20px;
    }

    #download_icon {
        display: block;
    }

    #comments_icon {
        display: block;
    }

    #detail_icon {
        display: block;
    }
    
    #analytic_icon {
        display: block;
    }

    #delete_icon {
        display: block;
    }

    #share_icon {
        display: block;
    }

    #report_icon {
        display: block;
    }

    .share-card-nav-tab-link div {
        margin: 0 auto;
    }

    .share-card-nav-tabs > li {
        float: left;
        margin-bottom: -1px;
        margin-right: 10px;        
    }

    .share-card-nav-tabs > li > a {
        font-size: 12px;
        line-height: 15px;
        margin-right: 5px;
    }

    .watchpage-fb-like {
        display:none;
    }

    .mobile-watchpage-fb-like {
        display:block;
    }


    #choice-card-content {
        position: relative;
        top: 0px;
        left: 0;
        width: 100%;
        min-height: 38px;
        height: auto;
        margin: 70px 0 0 0;
        padding: 0;
        display: inline-block;
    }

    #player_page_lessondetailcard:before {
        left:5px;
    }

    #player_page_lessondetailcard:after {
        left:5px;
    }

    #player_page_sharecard:before {
        left:50px;
    }

    #player_page_sharecard:after {
        left:50px;
    }

    #player_page_downloadcard:before {
        left:90px;
    }

    #player_page_downloadcard:after {
        left:90px;
    }

/*end of watch page*/
}

@media only screen and (max-width: 660px) and (min-width: 460px) {
    /*-General--*/
    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 60px;
        left: 50%;
        width: 400px;
        height: 200px;
        margin: 0 0 0 -200px;
    }

    #home_hero_contents_getStarted {
        width: 400px;
        height: 200px;
    }

    #home_hero_contents_left_panel {
        background-size: 100px 100px;
        height: 100px;
        width: 100px;
    }

    .home-hero-download-contents {
        left: 120px;
    }

    .home-hero-download-contents-title {
        left: 120px;
    }

    .home-hero-download-contents-text {
        left: 120px;
    }

    .home-hero-download-button {
        margin-left: 120px;
    }

    .home-hero-download-sysreqs {
        left: 120px;
        padding-right: 40px;
    }

    .tooltip.top {
        margin-left: -30px;
    }

    .tooltip-inner {
        max-width: 400px;
    }

    .tooltip.top .tooltip-arrow {
        left: 58% !important;
    }

    footer.footer {
        padding: 12px 10px 0 10px;
    }
    /*-General--ends--*/
}

@media only screen and (max-width: 900px) and (min-width: 660px) {
    /*-General--*/
    .tooltip.top {
        margin-left: -150px;
    }

        .tooltip.top .tooltip-arrow {
            left: 123%;
        }
    /*-General--ends--*/
}

@media only screen and (max-width: 1024px) {
    /*disable desktop and activate mobile*/
    #mobile_device_flag {
        display: block;
    }
    /*-General--*/
    .mix-container {
        width: 100%;
        -moz-min-width: 394px;
        -ms-min-width: 394px;
        -o-min-width: 394px;
        -webkit-min-width: 394px;
        min-width: 394px;
    }
    /*-General--ends--*/

    /*disabled elements-starts*/
    .home_hero_buttons_canvas.desktop,
    .mix-info-box,
    .home-hero-navigation-next-button {
        display: none;
    }
    /*disabled elements-ends*/

    /*enabled elements-starts*/
    .home-hero-slide-contents-block-text.mobile {
        display: inline-block;
    }

    .home_hero_buttons_canvas.mobile {
        padding-top: 15px;
        display: block;
    }
    /*enabled elements-ends*/

    /*------Hero layout--starts----*/
    /*layout-starts*/
    #home_hero_slides_slide_1 {
        display: block;
        z-index: 4;
    }

    #home_hero_slides_slide_2 {
        display: block;
        z-index: 3;
    }

    #home_hero_slides_slide_3 {
        display: block;
        z-index: 2;
    }

    #home_hero_slides_slide_4 {
        display: block;
        z-index: 1;
    }

    #home_hero_slides_slide_5 {
        display: block;
        z-index: 0;
    }

    .home-hero-slide-contents-block {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        height: 220px;
        padding: 0 15px 15px 15px;
        width: 100%;
    }

    .home-hero-slide-visual-block {
        position: relative;
        border: 0 none;
        width: 100%;
        height: auto;
        margin-left: 0;
    }

    .mix-info-box {
        font-size: 20px;
        line-height: 22px;
        padding: 8px;
        right: 12px;
        top: 12px;
        width: auto;
    }

    .videoplayer {
        width: 100%;
        height: auto;
        margin: 0;
        padding-bottom: 56.22%;
        margin-bottom: 235px;
        overflow: hidden;
    }

        .videoplayer div,
        .videoplayer video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0 none;
        }

    video[poster] {
        height: 100%;
        width: 100%;
    }

    .slide-bkg-wrapper {
        width: 100%;
        height: auto;
        margin: 0;
        padding-bottom: 56.22%;
        margin-bottom: 235px;
        overflow: hidden;
    }

        .slide-bkg-wrapper div,
        .slide-bkg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0 none;
        }

    .home-play-button {
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        -ms-background-size: 100px 100px;
        background-size: 100px 100px;
        margin: -50px 0 0 -50px;
    }

    .home_hero_buttons_canvas {
        position: absolute;
    }

    .home-hero-slide-contents-block-text {
        width: auto;
        padding-left: 60px;
    }

    /* begin - home page */
    #hero-slide-1 {
	    background-image: url("Images/home_slide_1_1024x680.jpg");
    }

    #hero-slide-2 {
	    background-image: url("Images/home_slide_2_1024x680.jpg");
    }

    #hero-slide-3 {
	    background-image: url("Images/home_slide_3_1024x680.jpg");
    }

    #hero-slide-4 {
	    background-image: url("Images/home_slide_4_1024x680.jpg");
    }
    /* end - home page */

    /*layout-ends*/

    /*typography-starts*/
    .home-hero-slide-contents-block-text-title {
        font-size: 26px;
        line-height: 32px;
        padding-top: 15px;
    }

    .home-hero-slide-contents-block-text-description {
        font-size: 18px;
        line-height: 24px;
        padding-top: 10px;
    }
    /*typography-ends*/

    /*------Hero layout--ends------*/
}

/* iOS Devices */

/* iPhone 2G-3GS and most other non-retina Smartphones Portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
    .mix-container {
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
    }

    .footer-links {
        padding-left: 1px;
        padding-right: 1px;
        margin: 0;
    }

        .footer-links .footer-developers,
        .footer-links .footer-report {
            display: inline-block;
        }

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }

    /*typography-starts*/
    #home_hero_slides_slide_1 .home-hero-slide-contents-block-text-title {
        padding-top: 30px;
    }

    #home_hero_slides_slide_2 .home-hero-slide-contents-block-text-title {
        padding-top: 10px;
    }

    #home_hero_slides_slide_3 .home-hero-slide-contents-block-text-title {
        padding-top: 0;
    }

    #home_hero_slides_slide_4 .home-hero-slide-contents-block-text-title {
        padding-top: 40px;
    }

    #home_hero_slides_slide_5 .home-hero-slide-contents-block-text-title {
        padding-top: 20px;
    }
    /*typography-ends*/

    /*analytics-start*/
    .tiles-row-block-tile {
        border: 0 none;
        display: inline-block;
        margin: 15px 0 30px 0px;
        padding: 0;
        width: 100%;
    }

    .tiles-row-block-tile-container {
        border: 0 none;
        text-align: left;
        color: #7c7c7c;
    }

    .tiles-row-block-tile-contents {
        border: 0 none;
        color: #7c7c7c;
        display: inline-block;
        font-size: 11px;
        height: 10px;
        line-height: 10px;
        text-align: left;
        width: 100%;
    }
    /*analytics-end*/

    /*------Welcome--page----starts----*/
    .welcome-header-light {
        font-size: 28px;
        line-height: 32px;
        margin-top: 30px;
        padding: 0;
        text-align: center;
    }

    .welcome-header-regular {
        display: none;
    }

    .welcome-header-sm-regular {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 30px;
        margin-top: 15px;
        padding: 0;
        text-align: center;
    }

    #welcome-container-buttons-block {
        border: 0 none;
        margin: 0 auto;
        padding: 0 0 30px;
        text-align: center;
        width: 290px;
    }

    .btns_div {
        height: 32px;
        margin-bottom: 30px;
        margin-right: 0;
        width: 290px;
    }

        .btns_div.last {
            margin: 0;
            height: 100px;
        }

    .btns_sm_div {
        height: 32px;
        margin: 0;
        width: 290px;
    }

        .btns_sm_div.last {
            margin-top: 30px;
        }

    #orgid_btn {
        background-image: url("Images/SignIn_organization.svg");
        height: 32px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/SignIn_MSFT.svg");
        height: 32px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/SignIn_Facebook.svg");
        height: 32px;
        width: 290px;
    }

    #google_btn {
        background-image: url("Images/SignIn_Google.svg");
        height: 32px;
        width: 290px;
    }

        #orgid_btn a, #ms_btn a, #facebook_btn a, #google_btn a {
            height: 32px;
            width: 290px;
        }
    /*------Welcome--page----ends----*/
}

/*------Home--page----starts----*/
@media only screen and (max-width: 766px) {
    .btn-office-mix-group {
        position: absolute !important;
        display: inline-block;
        z-index: 102;
        right: 30px;
        top: 63px;
    }
    .btn-sign-in {
        background-color: #343434!important;
    }
    .btn-navbar-action {
        margin-top: 5px!important;
        margin-bottom: 5px!important;
    }
}
/*------Home--page----ends----*/

/* iPhone 2G-3GS and most other non-retina Smartphones Landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
    .mix-container {
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
    }

    .footer-links {
        padding-left: 1px;
        padding-right: 1px;
        margin: 0;
    }

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #slideBkgWrapper_5 {
        margin-bottom: 100px;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }

    /*typography-starts*/
    #home_hero_slides_slide_1 .home-hero-slide-contents-block-text-title {
        padding-top: 30px;
    }

    #home_hero_slides_slide_2 .home-hero-slide-contents-block-text-title {
        padding-top: 10px;
    }

    #home_hero_slides_slide_3 .home-hero-slide-contents-block-text-title {
        padding-top: 0;
    }

    #home_hero_slides_slide_4 .home-hero-slide-contents-block-text-title {
        padding-top: 40px;
    }

    #home_hero_slides_slide_5 .home-hero-slide-contents-block-text-title {
        padding-top: 20px;
    }
    /*typography-ends*/

    /*analytics-start*/
    .tiles-row-block-tile {
        border: 0 none;
        display: inline-block;
        margin: 15px 20px 30px 0px !important;
        padding: 0;
        width: auto !important;
    }

    .tiles-row-block-tile-container {
        border: 0 none;
        text-align: center !important;
        color: #7c7c7c;
    }

    .tiles-row-block-tile-contents {
        border: 0 none;
        color: #7c7c7c;
        display: inline-block;
        font-size: 11px;
        height: 10px;
        line-height: 10px;
        text-align: center !important;
        width: 100%;
    }
    /*analytics-end*/

    /*------Welcome--page----starts----*/
    .welcome-header-light {
        font-size: 28px;
        line-height: 32px;
        margin-top: 30px;
        padding: 0;
        text-align: center;
    }

    .welcome-header-regular {
        display: none;
    }

    .welcome-header-sm-regular {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 30px;
        margin-top: 15px;
        padding: 0;
        text-align: center;
    }

    #welcome-container-buttons-block {
        border: 0 none;
        margin: 0 auto;
        padding: 0 0 30px;
        text-align: center;
        width: 290px;
    }

    .btns_div {
        height: 32px;
        margin-bottom: 30px;
        margin-right: 0;
        width: 290px;
    }

        .btns_div.last {
            margin: 0;
            height: 100px;
        }

    .btns_sm_div {
        height: 32px;
        margin: 0;
        width: 290px;
    }

        .btns_sm_div.last {
            margin-top: 30px;
        }

    #orgid_btn {
        background-image: url("Images/SignIn_organization.svg");
        height: 32px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/SignIn_MSFT.svg");
        height: 32px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/SignIn_Facebook.svg");
        height: 32px;
        width: 290px;
    }

    #google_btn {
        background-image: url("Images/SignIn_Google.svg");
        height: 32px;
        width: 290px;
    }

        #orgid_btn a, #ms_btn a, #facebook_btn a, #google_btn a {
            height: 32px;
            width: 290px;
        }
    /*------Welcome--page----ends----*/
}

/* iPhone 4 Portrait */
@media only screen and (min-device-pixel-ratio:1.5) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait), only screen and (-webkit-min-device-pixel-ratio:1.5) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait), only screen and (-o-min-device-pixel-ratio:3/2) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait), only screen and (min--moz-device-pixel-ratio:1.5) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait), only screen and (min-resolution: 144dpi) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait), only screen and (min-resolution: 1.5dppx) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
    .mix-container {
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
    }

    .footer-links {
        padding-left: 1px;
        padding-right: 1px;
        margin: 0;
    }

        .footer-links .footer-developers,
        .footer-links .footer-report {
            display: inline-block;
        }

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }

    /*typography-starts*/
    #home_hero_slides_slide_1 .home-hero-slide-contents-block-text-title {
        padding-top: 30px;
    }

    #home_hero_slides_slide_2 .home-hero-slide-contents-block-text-title {
        padding-top: 10px;
    }

    #home_hero_slides_slide_3 .home-hero-slide-contents-block-text-title {
        padding-top: 0;
    }

    #home_hero_slides_slide_4 .home-hero-slide-contents-block-text-title {
        padding-top: 40px;
    }

    #home_hero_slides_slide_5 .home-hero-slide-contents-block-text-title {
        padding-top: 20px;
    }
    /*typography-ends*/

    /*analytics-start*/
    .tiles-row-block-tile {
        border: 0 none;
        display: inline-block;
        margin: 15px 0 30px 0px;
        padding: 0;
        width: 100%;
    }

    .tiles-row-block-tile-container {
        border: 0 none;
        text-align: left;
        color: #7c7c7c;
    }

    .tiles-row-block-tile-contents {
        border: 0 none;
        color: #7c7c7c;
        display: inline-block;
        font-size: 11px;
        height: 10px;
        line-height: 10px;
        text-align: left;
        width: 100%;
    }
    /*analytics-end*/

    /*------Welcome--page----starts----*/
    .welcome-header-light {
        font-size: 28px;
        line-height: 32px;
        margin-top: 30px;
        padding: 0;
        text-align: center;
    }

    .welcome-header-regular {
        display: none;
    }

    .welcome-header-sm-regular {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 30px;
        margin-top: 15px;
        padding: 0;
        text-align: center;
    }

    #welcome-container-buttons-block {
        border: 0 none;
        margin: 0 auto;
        padding: 0 0 30px;
        text-align: center;
        width: 290px;
    }

    .btns_div {
        height: 32px;
        margin-bottom: 30px;
        margin-right: 0;
        width: 290px;
    }

        .btns_div.last {
            margin: 0;
            height: 100px;
        }

    .btns_sm_div {
        height: 32px;
        margin: 0;
        width: 290px;
    }

        .btns_sm_div.last {
            margin-top: 30px;
        }

    #orgid_btn {
        background-image: url("Images/SignIn_organization.svg");
        height: 32px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/SignIn_MSFT.svg");
        height: 32px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/SignIn_Facebook.svg");
        height: 32px;
        width: 290px;
    }

    #google_btn {
        background-image: url("Images/SignIn_Google.svg");
        height: 32px;
        width: 290px;
    }

        #orgid_btn a, #ms_btn a, #facebook_btn a, #google_btn a {
            height: 32px;
            width: 290px;
        }
    /*------Welcome--page----ends----*/
}

/* iPhone 4 Landscape */
@media only screen and (min-device-pixel-ratio:1.5) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape), only screen and (-webkit-min-device-pixel-ratio:1.5) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape), only screen and (-o-min-device-pixel-ratio:3/2) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape), only screen and (min--moz-device-pixel-ratio:1.5) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape), only screen and (min-resolution: 144dpi) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape), only screen and (min-resolution: 1.5dppx) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
    .mix-container {
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
    }

    .footer-links {
        padding-left: 1px;
        padding-right: 1px;
        margin: 0;
    }

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #slideBkgWrapper_5 {
        margin-bottom: 100px;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }

    /*typography-starts*/
    #home_hero_slides_slide_1 .home-hero-slide-contents-block-text-title {
        padding-top: 30px;
    }

    #home_hero_slides_slide_2 .home-hero-slide-contents-block-text-title {
        padding-top: 10px;
    }

    #home_hero_slides_slide_3 .home-hero-slide-contents-block-text-title {
        padding-top: 0;
    }

    #home_hero_slides_slide_4 .home-hero-slide-contents-block-text-title {
        padding-top: 40px;
    }

    #home_hero_slides_slide_5 .home-hero-slide-contents-block-text-title {
        padding-top: 20px;
    }
    /*typography-ends*/

    /*analytics-start*/
    .tiles-row-block-tile {
        border: 0 none;
        display: inline-block;
        margin: 15px 20px 30px 0px !important;
        padding: 0;
        width: auto !important;
    }

    .tiles-row-block-tile-container {
        border: 0 none;
        text-align: center !important;
        color: #7c7c7c;
    }

    .tiles-row-block-tile-contents {
        border: 0 none;
        color: #7c7c7c;
        display: inline-block;
        font-size: 11px;
        height: 10px;
        line-height: 10px;
        text-align: center !important;
        width: 100%;
    }
    /*analytics-end*/

    /*------Welcome--page----starts----*/
    .welcome-header-light {
        font-size: 28px;
        line-height: 32px;
        margin-top: 30px;
        padding: 0;
        text-align: center;
    }

    .welcome-header-regular {
        display: none;
    }

    .welcome-header-sm-regular {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 30px;
        margin-top: 15px;
        padding: 0;
        text-align: center;
    }

    #welcome-container-buttons-block {
        border: 0 none;
        margin: 0 auto;
        padding: 0 0 30px;
        text-align: center;
        width: 290px;
    }

    .btns_div {
        height: 32px;
        margin-bottom: 30px;
        margin-right: 0;
        width: 290px;
    }

        .btns_div.last {
            margin: 0;
            height: 100px;
        }

    .btns_sm_div {
        height: 32px;
        margin: 0;
        width: 290px;
    }

        .btns_sm_div.last {
            margin-top: 30px;
        }

    #orgid_btn {
        background-image: url("Images/SignIn_organization.svg");
        height: 32px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/SignIn_MSFT.svg");
        height: 32px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/SignIn_Facebook.svg");
        height: 32px;
        width: 290px;
    }

    #google_btn {
        background-image: url("Images/SignIn_Google.svg");
        height: 32px;
        width: 290px;
    }

        #orgid_btn a, #ms_btn a, #facebook_btn a, #google_btn a {
            height: 32px;
            width: 290px;
        }
    /*------Welcome--page----ends----*/
}

/* iPhone 4S Portrait */
@media only screen and (min-device-pixel-ratio:2) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait), only screen and (-webkit-min-device-pixel-ratio:2) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait), only screen and (-o-min-device-pixel-ratio:2/1) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait), only screen and (min--moz-device-pixel-ratio:2) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait), only screen and (min-resolution: 192dpi) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait), only screen and (min-resolution: 2dppx) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
    .mix-container {
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
    }

    .footer-links {
        padding-left: 1px;
        padding-right: 1px;
        margin: 0;
    }

        .footer-links .footer-developers,
        .footer-links .footer-report {
            display: inline-block;
        }

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }

    /*typography-starts*/
    #home_hero_slides_slide_1 .home-hero-slide-contents-block-text-title {
        padding-top: 30px;
    }

    #home_hero_slides_slide_2 .home-hero-slide-contents-block-text-title {
        padding-top: 10px;
    }

    #home_hero_slides_slide_3 .home-hero-slide-contents-block-text-title {
        padding-top: 0;
    }

    #home_hero_slides_slide_4 .home-hero-slide-contents-block-text-title {
        padding-top: 40px;
    }

    #home_hero_slides_slide_5 .home-hero-slide-contents-block-text-title {
        padding-top: 20px;
    }
    /*typography-ends*/

    /*analytics-start*/
    .tiles-row-block-tile {
        border: 0 none;
        display: inline-block;
        margin: 15px 0 30px 0px;
        padding: 0;
        width: 100%;
    }

    .tiles-row-block-tile-container {
        border: 0 none;
        text-align: left;
        color: #7c7c7c;
    }

    .tiles-row-block-tile-contents {
        border: 0 none;
        color: #7c7c7c;
        display: inline-block;
        font-size: 11px;
        height: 10px;
        line-height: 10px;
        text-align: left;
        width: 100%;
    }
    /*analytics-end*/

    /*------Welcome--page----starts----*/
    .welcome-header-light {
        font-size: 28px;
        line-height: 32px;
        margin-top: 30px;
        padding: 0;
        text-align: center;
    }

    .welcome-header-regular {
        display: none;
    }

    .welcome-header-sm-regular {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 30px;
        margin-top: 15px;
        padding: 0;
        text-align: center;
    }

    #welcome-container-buttons-block {
        border: 0 none;
        margin: 0 auto;
        padding: 0 0 30px;
        text-align: center;
        width: 290px;
    }

    .btns_div {
        height: 32px;
        margin-bottom: 30px;
        margin-right: 0;
        width: 290px;
    }

        .btns_div.last {
            margin: 0;
            height: 100px;
        }

    .btns_sm_div {
        height: 32px;
        margin: 0;
        width: 290px;
    }

        .btns_sm_div.last {
            margin-top: 30px;
        }

    #orgid_btn {
        background-image: url("Images/SignIn_organization.svg");
        height: 32px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/SignIn_MSFT.svg");
        height: 32px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/SignIn_Facebook.svg");
        height: 32px;
        width: 290px;
    }

    #google_btn {
        background-image: url("Images/SignIn_Google.svg");
        height: 32px;
        width: 290px;
    }

        #orgid_btn a, #ms_btn a, #facebook_btn a, #google_btn a {
            height: 32px;
            width: 290px;
        }
    /*------Welcome--page----ends----*/
}

/* iPhone 4S Landscape */
@media only screen and (min-device-pixel-ratio:2) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape), only screen and (-webkit-min-device-pixel-ratio:2) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape), only screen and (-o-min-device-pixel-ratio:2/1) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape), only screen and (min--moz-device-pixel-ratio:2) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape), only screen and (min-resolution: 192dpi) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape), only screen and (min-resolution: 2dppx) and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
    .mix-container {
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
    }

    .footer-links {
        padding-left: 1px;
        padding-right: 1px;
        margin: 0;
    }

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #slideBkgWrapper_5 {
        margin-bottom: 100px;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }

    /*typography-starts*/
    #home_hero_slides_slide_1 .home-hero-slide-contents-block-text-title {
        padding-top: 30px;
    }

    #home_hero_slides_slide_2 .home-hero-slide-contents-block-text-title {
        padding-top: 10px;
    }

    #home_hero_slides_slide_3 .home-hero-slide-contents-block-text-title {
        padding-top: 0;
    }

    #home_hero_slides_slide_4 .home-hero-slide-contents-block-text-title {
        padding-top: 40px;
    }

    #home_hero_slides_slide_5 .home-hero-slide-contents-block-text-title {
        padding-top: 20px;
    }
    /*typography-ends*/

    /*analytics-start*/
    .tiles-row-block-tile {
        border: 0 none;
        display: inline-block;
        margin: 15px 20px 30px 0px !important;
        padding: 0;
        width: auto !important;
    }

    .tiles-row-block-tile-container {
        border: 0 none;
        text-align: center !important;
        color: #7c7c7c;
    }

    .tiles-row-block-tile-contents {
        border: 0 none;
        color: #7c7c7c;
        display: inline-block;
        font-size: 11px;
        height: 10px;
        line-height: 10px;
        text-align: center !important;
        width: 100%;
    }
    /*analytics-end*/

    /*------Welcome--page----starts----*/
    .welcome-header-light {
        font-size: 28px;
        line-height: 32px;
        margin-top: 30px;
        padding: 0;
        text-align: center;
    }

    .welcome-header-regular {
        display: none;
    }

    .welcome-header-sm-regular {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 30px;
        margin-top: 15px;
        padding: 0;
        text-align: center;
    }

    #welcome-container-buttons-block {
        border: 0 none;
        margin: 0 auto;
        padding: 0 0 30px;
        text-align: center;
        width: 290px;
    }

    .btns_div {
        height: 32px;
        margin-bottom: 30px;
        margin-right: 0;
        width: 290px;
    }

        .btns_div.last {
            margin: 0;
            height: 100px;
        }

    .btns_sm_div {
        height: 32px;
        margin: 0;
        width: 290px;
    }

        .btns_sm_div.last {
            margin-top: 30px;
        }

    #orgid_btn {
        background-image: url("Images/SignIn_organization.svg");
        height: 32px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/SignIn_MSFT.svg");
        height: 32px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/SignIn_Facebook.svg");
        height: 32px;
        width: 290px;
    }

    #google_btn {
        background-image: url("Images/SignIn_Google.svg");
        height: 32px;
        width: 290px;
    }

        #orgid_btn a, #ms_btn a, #facebook_btn a, #google_btn a {
            height: 32px;
            width: 290px;
        }
    /*------Welcome--page----ends----*/
}

/* iPhone 5/5S Portrait */
@media only screen and (min-device-pixel-ratio:2) and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait), only screen and (-webkit-min-device-pixel-ratio:2) and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait), only screen and (-o-min-device-pixel-ratio:2/1) and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait), only screen and (min--moz-device-pixel-ratio:2) and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait), only screen and (min-resolution: 192dpi) and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait), only screen and (min-resolution: 2dppx) and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
    .mix-container {
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
    }

    .footer-links {
        padding-left: 1px;
        padding-right: 1px;
        margin: 0;
    }

        .footer-links .footer-developers,
        .footer-links .footer-report {
            display: inline-block;
        }

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }

    /*typography-starts*/
    #home_hero_slides_slide_1 .home-hero-slide-contents-block-text-title {
        padding-top: 30px;
    }

    #home_hero_slides_slide_2 .home-hero-slide-contents-block-text-title {
        padding-top: 10px;
    }

    #home_hero_slides_slide_3 .home-hero-slide-contents-block-text-title {
        padding-top: 0;
    }

    #home_hero_slides_slide_4 .home-hero-slide-contents-block-text-title {
        padding-top: 40px;
    }

    #home_hero_slides_slide_5 .home-hero-slide-contents-block-text-title {
        padding-top: 20px;
    }
    /*typography-ends*/

    /*analytics-start*/
    .tiles-row-block-tile {
        border: 0 none;
        display: inline-block;
        margin: 15px 0 30px 0px;
        padding: 0;
        width: 100%;
    }

    .tiles-row-block-tile-container {
        border: 0 none;
        text-align: left;
        color: #7c7c7c;
    }

    .tiles-row-block-tile-contents {
        border: 0 none;
        color: #7c7c7c;
        display: inline-block;
        font-size: 11px;
        height: 10px;
        line-height: 10px;
        text-align: left;
        width: 100%;
    }
    /*analytics-end*/

    /*------Welcome--page----starts----*/
    .welcome-header-light {
        font-size: 28px;
        line-height: 32px;
        margin-top: 30px;
        padding: 0;
        text-align: center;
    }

    .welcome-header-regular {
        display: none;
    }

    .welcome-header-sm-regular {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 30px;
        margin-top: 15px;
        padding: 0;
        text-align: center;
    }

    #welcome-container-buttons-block {
        border: 0 none;
        margin: 0 auto;
        padding: 0 0 30px;
        text-align: center;
        width: 290px;
    }

    .btns_div {
        height: 32px;
        margin-bottom: 30px;
        margin-right: 0;
        width: 290px;
    }

        .btns_div.last {
            margin: 0;
            height: 100px;
        }

    .btns_sm_div {
        height: 32px;
        margin: 0;
        width: 290px;
    }

        .btns_sm_div.last {
            margin-top: 30px;
        }

    #orgid_btn {
        background-image: url("Images/SignIn_organization.svg");
        height: 32px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/SignIn_MSFT.svg");
        height: 32px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/SignIn_Facebook.svg");
        height: 32px;
        width: 290px;
    }

    #google_btn {
        background-image: url("Images/SignIn_Google.svg");
        height: 32px;
        width: 290px;
    }

        #orgid_btn a, #ms_btn a, #facebook_btn a, #google_btn a {
            height: 32px;
            width: 290px;
        }
    /*------Welcome--page----ends----*/
}

/* iPhone 5/5S Landscape */
@media only screen and (min-device-pixel-ratio:2) and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape), only screen and (-webkit-min-device-pixel-ratio:2) and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape), only screen and (-o-min-device-pixel-ratio:2/1) and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape), only screen and (min--moz-device-pixel-ratio:2) and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape), only screen and (min-resolution: 192dpi) and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape), only screen and (min-resolution: 2dppx) and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
    .mix-container {
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
    }

    .mix-pagination {
        position: absolute;
        bottom: -60px;
        left: 16px;
    }

    .footer-links {
        padding-left: 1px;
        padding-right: 1px;
        margin: 0;
    }

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #slideBkgWrapper_5 {
        margin-bottom: 100px;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }

    /*typography-starts*/
    #home_hero_slides_slide_1 .home-hero-slide-contents-block-text-title {
        padding-top: 30px;
    }

    #home_hero_slides_slide_2 .home-hero-slide-contents-block-text-title {
        padding-top: 10px;
    }

    #home_hero_slides_slide_3 .home-hero-slide-contents-block-text-title {
        padding-top: 0;
    }

    #home_hero_slides_slide_4 .home-hero-slide-contents-block-text-title {
        padding-top: 40px;
    }

    #home_hero_slides_slide_5 .home-hero-slide-contents-block-text-title {
        padding-top: 20px;
    }
    /*typography-ends*/

    /*analytics-start*/
    .tiles-row-block-tile {
        border: 0 none;
        display: inline-block;
        margin: 15px 20px 30px 0px !important;
        padding: 0;
        width: auto !important;
    }

    .tiles-row-block-tile-container {
        border: 0 none;
        text-align: center !important;
        color: #7c7c7c;
    }

    .tiles-row-block-tile-contents {
        border: 0 none;
        color: #7c7c7c;
        display: inline-block;
        font-size: 11px;
        height: 10px;
        line-height: 10px;
        text-align: center !important;
        width: 100%;
    }
    /*analytics-end*/

    /*------Welcome--page----starts----*/
    .welcome-header-light {
        font-size: 28px;
        line-height: 32px;
        margin-top: 30px;
        padding: 0;
        text-align: center;
    }

    .welcome-header-regular {
        display: none;
    }

    .welcome-header-sm-regular {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 30px;
        margin-top: 15px;
        padding: 0;
        text-align: center;
    }

    #welcome-container-buttons-block {
        border: 0 none;
        margin: 0 auto;
        padding: 0 0 30px;
        text-align: center;
        width: 290px;
    }

    .btns_div {
        height: 32px;
        margin-bottom: 30px;
        margin-right: 0;
        width: 290px;
    }

        .btns_div.last {
            margin: 0;
            height: 100px;
        }

    .btns_sm_div {
        height: 32px;
        margin: 0;
        width: 290px;
    }

        .btns_sm_div.last {
            margin-top: 30px;
        }

    #orgid_btn {
        background-image: url("Images/SignIn_organization.svg");
        height: 32px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/SignIn_MSFT.svg");
        height: 32px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/SignIn_Facebook.svg");
        height: 32px;
        width: 290px;
    }

    #google_btn {
        background-image: url("Images/SignIn_Google.svg");
        height: 32px;
        width: 290px;
    }

        #orgid_btn a, #ms_btn a, #facebook_btn a, #google_btn a {
            height: 32px;
            width: 290px;
        }
    /*------Welcome--page----ends----*/
}

/* iPad mini, 1 and 2 Portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #slideBkgWrapper_5 {
        margin-bottom: 100px;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }

    #welcome-container-buttons-block {
        padding: 0 0 30px;
    }

    .btns_div {
        margin-right: 10px;
    }
}

/* iPad mini, 1 and 2 Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #slideBkgWrapper_5 {
        margin-bottom: 100px;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }
}

/* iPad mini (retina), 3 and 4 Portrait */
@media only screen and (min-device-pixel-ratio:2) and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait), only screen and (-webkit-min-device-pixel-ratio:2) and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait), only screen and (-o-min-device-pixel-ratio:2/1) and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait), only screen and (min--moz-device-pixel-ratio:2) and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait), only screen and (min-resolution: 192dpi) and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait), only screen and (min-resolution: 2dppx) and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #slideBkgWrapper_5 {
        margin-bottom: 100px;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }

    #welcome-container-buttons-block {
        padding: 0 0 30px;
    }

    .btns_div {
        margin-right: 10px;
    }
}

/* iPad mini (retina), 3 and 4 Landscape */
@media only screen and (min-device-pixel-ratio:2) and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape), only screen and (-webkit-min-device-pixel-ratio:2) and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape), only screen and (-o-min-device-pixel-ratio:2/1) and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape), only screen and (min--moz-device-pixel-ratio:2) and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape), only screen and (min-resolution: 192dpi) and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape), only screen and (min-resolution: 2dppx) and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #slideBkgWrapper_5 {
        margin-bottom: 100px;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }
}

/* Windows Phone */
@-webkit-viewport {
    width: device-width;
}

@-moz-viewport {
    width: device-width;
}

@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

@media screen and (max-device-width:485px) {
    .mix-container {
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
    }

    .footer-links {
        padding-left: 1px;
        padding-right: 1px;
        margin: 0;
    }

        .footer-links .footer-developers,
        .footer-links .footer-support,
        .footer-links .footer-report {
            border-left: 1px solid #bbb;
        }

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }

    /*typography-starts*/
    #home_hero_slides_slide_1 .home-hero-slide-contents-block-text-title {
        padding-top: 30px;
    }

    #home_hero_slides_slide_2 .home-hero-slide-contents-block-text-title {
        padding-top: 10px;
    }

    #home_hero_slides_slide_3 .home-hero-slide-contents-block-text-title {
        padding-top: 0;
    }

    #home_hero_slides_slide_4 .home-hero-slide-contents-block-text-title {
        padding-top: 40px;
    }

    #home_hero_slides_slide_5 .home-hero-slide-contents-block-text-title {
        padding-top: 20px;
    }
    /*typography-ends*/

    /*analytics-start*/
    .tiles-row-block-tile {
        border: 0 none;
        display: inline-block;
        margin: 15px 0 30px 0px;
        padding: 0;
        width: 100%;
    }

    .tiles-row-block-tile-container {
        border: 0 none;
        text-align: left;
        color: #7c7c7c;
    }

    .tiles-row-block-tile-contents {
        border: 0 none;
        color: #7c7c7c;
        display: inline-block;
        font-size: 11px;
        height: 10px;
        line-height: 10px;
        text-align: left;
        width: 100%;
    }
    /*analytics-end*/

    /*------Welcome--page----starts----*/
    .welcome-header-light {
        font-size: 28px;
        line-height: 32px;
        margin-top: 30px;
        padding: 0;
        text-align: center;
    }

    .welcome-header-regular {
        display: none;
    }

    .welcome-header-sm-regular {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 30px;
        margin-top: 15px;
        padding: 0;
        text-align: center;
    }

    #welcome-container-buttons-block {
        border: 0 none;
        margin: 0 auto;
        padding: 0 0 30px;
        text-align: center;
        width: 290px;
    }

    .btns_div {
        height: 32px;
        margin-bottom: 30px;
        margin-right: 0;
        width: 290px;
    }

        .btns_div.last {
            margin: 0;
            height: 100px;
        }

    .btns_sm_div {
        height: 32px;
        margin: 0;
        width: 290px;
    }

        .btns_sm_div.last {
            margin-top: 30px;
        }

    #orgid_btn {
        background-image: url("Images/SignIn_organization.svg");
        height: 32px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/SignIn_MSFT.svg");
        height: 32px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/SignIn_Facebook.svg");
        height: 32px;
        width: 290px;
    }

    #google_btn {
        background-image: url("Images/SignIn_Google.svg");
        height: 32px;
        width: 290px;
    }

        #orgid_btn a, #ms_btn a, #facebook_btn a, #google_btn a {
            height: 32px;
            width: 290px;
        }
    /*------Welcome--page----ends----*/
}

/* Surface Pro Portrait */
@media only screen and (max-device-width : 1280px) and (min-device-width : 720px) and (orientation : portrait) {

    /*------Welcome--page----starts----*/
    .welcome-header-light {
        margin-top: 30px;
        padding: 0;
        text-align: center;
    }

    .welcome-header-regular {
        display: none;
    }

    .welcome-header-sm-regular {
        margin-bottom: 30px;
        margin-top: 15px;
        padding: 0;
        text-align: center;
    }

    #welcome-container-buttons-block {
        border: 0 none;
        margin: 0 auto;
        padding: 0 0 30px;
        text-align: center;
        width: 390px;
    }

    .btns_div {
        height: 42px;
        margin-bottom: 30px;
        margin-right: 0;
        width: 390px;
    }

        .btns_div.last {
            margin: 0;
            height: 100px;
        }

    .btns_sm_div {
        height: 42px;
        margin: 0;
        width: 390px;
    }

        .btns_sm_div.last {
            margin-top: 30px;
        }

    #orgid_btn {
        background-image: url("Images/SignIn_organization.svg");
        height: 42px;
        width: 390px;
    }

    #ms_btn {
        background-image: url("Images/SignIn_MSFT.svg");
        height: 42px;
        width: 390px;
    }

    #facebook_btn {
        background-image: url("Images/SignIn_Facebook.svg");
        height: 42px;
        width: 390px;
    }

    #google_btn {
        background-image: url("Images/SignIn_Google.svg");
        height: 42px;
        width: 390px;
    }

        #orgid_btn a, #ms_btn a, #facebook_btn a, #google_btn a {
            height: 42px;
            width: 390px;
        }

    #welcome-container-buttons-disclaimer {
        margin-top: 20px;
    }
    /*------Welcome--page----ends----*/
}

/* MyPhone Portrait*/
@media only screen and (min-device-width : 360px) and (max-device-width: 640px) and (orientation:portrait) {
    .mix-container {
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
    }

    .footer-links {
        padding-left: 1px;
        padding-right: 1px;
        margin: 0;
    }

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }

    /*typography-starts*/
    #home_hero_slides_slide_1 .home-hero-slide-contents-block-text-title {
        padding-top: 30px;
    }

    #home_hero_slides_slide_2 .home-hero-slide-contents-block-text-title {
        padding-top: 10px;
    }

    #home_hero_slides_slide_3 .home-hero-slide-contents-block-text-title {
        padding-top: 0;
    }

    #home_hero_slides_slide_4 .home-hero-slide-contents-block-text-title {
        padding-top: 40px;
    }

    #home_hero_slides_slide_5 .home-hero-slide-contents-block-text-title {
        padding-top: 20px;
    }

    footer.footer {
        padding: 12px 10px 0 10px;
        font-size: 12px;
    }
    /*typography-ends*/

    /*analytics-start*/
    .tiles-row-block-tile {
        border: 0 none;
        display: inline-block;
        margin: 15px 0 30px 0px;
        padding: 0;
        width: 100%;
    }

    .tiles-row-block-tile-container {
        border: 0 none;
        text-align: left;
        color: #7c7c7c;
    }

    .tiles-row-block-tile-contents {
        border: 0 none;
        color: #7c7c7c;
        display: inline-block;
        font-size: 11px;
        height: 10px;
        line-height: 10px;
        text-align: left;
        width: 100%;
    }
    /*analytics-end*/

    /*------Welcome--page----starts----*/
    #welcome-container-buttons-block {
        max-width: 360px;
    }

    .welcome-header-light {
        font-size: 28px;
        line-height: 32px;
        margin-top: 30px;
        padding: 0;
        text-align: center;
    }

    .welcome-header-regular {
        display: none;
    }

    .welcome-header-sm-regular {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 30px;
        margin-top: 15px;
        padding: 0;
        text-align: center;
    }

    #welcome-container-buttons-block {
        border: 0 none;
        margin: 0 auto;
        padding: 0 0 30px;
        text-align: center;
        width: 290px;
    }

    .btns_div {
        height: 32px;
        margin-bottom: 30px;
        margin-right: 0;
        width: 290px;
    }

        .btns_div.last {
            margin: 0;
            height: 100px;
        }

    .btns_sm_div {
        height: 32px;
        margin: 0;
        width: 290px;
    }

        .btns_sm_div.last {
            margin-top: 30px;
        }

    #orgid_btn {
        background-image: url("Images/SignIn_organization.svg");
        height: 32px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/SignIn_MSFT.svg");
        height: 32px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/SignIn_Facebook.svg");
        height: 32px;
        width: 290px;
    }

    #google_btn {
        background-image: url("Images/SignIn_Google.svg");
        height: 32px;
        width: 290px;
    }

        #orgid_btn a, #ms_btn a, #facebook_btn a, #google_btn a {
            height: 32px;
            width: 290px;
        }
    /*------Welcome--page----ends----*/
}

/* MyPhone Landscape*/
@media only screen and (min-device-width : 360px) and (max-device-width: 640px) and (orientation:landscape) {
    .mix-container {
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
    }

    .footer-links {
        padding-left: 1px;
        padding-right: 1px;
        margin: 0;
    }

    /*disabled elements-starts*/
    .homeHeroBackground,
    .home_hero_buttons_canvas.desktop,
    #try_office_mix_block,
    .mix-info-box,
    .home-hero-navigation-next-button,
    .home-hero-download-contents,
    .home-hero-download-button,
    .home-hero-download-sysreqs {
        display: none;
    }
    /*disabled elements-ends*/

    #home_hero_contents_getStarted-block {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 150px;
        height: 200px;
        margin: 0 0 0 -75px;
        border: 0 none;
    }

    #slideBkgWrapper_5 {
        margin-bottom: 100px;
    }

    #home_hero_contents_left_panel {
        background-size: 150px 150px;
        height: 150px;
        width: 150px;
    }

    /*typography-starts*/
    #home_hero_slides_slide_1 .home-hero-slide-contents-block-text-title {
        padding-top: 30px;
    }

    #home_hero_slides_slide_2 .home-hero-slide-contents-block-text-title {
        padding-top: 10px;
    }

    #home_hero_slides_slide_3 .home-hero-slide-contents-block-text-title {
        padding-top: 0;
    }

    #home_hero_slides_slide_4 .home-hero-slide-contents-block-text-title {
        padding-top: 40px;
    }

    #home_hero_slides_slide_5 .home-hero-slide-contents-block-text-title {
        padding-top: 20px;
    }

    footer.footer {
        padding: 20px 10px 0 10px;
        font-size: 12px;
    }
    /*typography-ends*/

    /*analytics-start*/
    .tiles-row-block-tile {
        border: 0 none;
        display: inline-block;
        margin: 15px 20px 30px 0px;
        padding: 0;
    }
    /*analytics-end*/

    /*------Welcome--page----starts----*/
    #welcome-container-buttons-block {
        max-width: 640px;
    }

    .welcome-header-light {
        font-size: 28px;
        line-height: 32px;
        margin-top: 30px;
        padding: 0;
        text-align: center;
    }

    .welcome-header-regular {
        display: none;
    }

    .welcome-header-sm-regular {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 30px;
        margin-top: 15px;
        padding: 0;
        text-align: center;
    }

    #welcome-container-buttons-block {
        border: 0 none;
        margin: 0 auto;
        padding: 0 0 30px;
        text-align: center;
        width: 290px;
    }

    .btns_div {
        height: 32px;
        margin-bottom: 30px;
        margin-right: 0;
        width: 290px;
    }

        .btns_div.last {
            margin: 0;
            height: 100px;
        }

    .btns_sm_div {
        height: 32px;
        margin: 0;
        width: 290px;
    }

        .btns_sm_div.last {
            margin-top: 30px;
        }

    #orgid_btn {
        background-image: url("Images/SignIn_organization.svg");
        height: 32px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/SignIn_MSFT.svg");
        height: 32px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/SignIn_Facebook.svg");
        height: 32px;
        width: 290px;
    }

    #google_btn {
        background-image: url("Images/SignIn_Google.svg");
        height: 32px;
        width: 290px;
    }

        #orgid_btn a, #ms_btn a, #facebook_btn a, #google_btn a {
            height: 32px;
            width: 290px;
        }
    /*------Welcome--page----ends----*/
}

/* Begin Microsoft High-Contrast Styles */

.hc-white-img {
    display: none;
    visibility: collapse;
}

.hc-black-img {
    display: none;
    visibility: collapse;
}

.default-img {
    display: inline;
    visibility: visible;
}

@media only screen and (-ms-high-contrast: black-on-white) and (min-device-width : 360px) and (max-device-width: 640px) and (orientation:portrait) {
    #orgid_btn {
        background-image: url("Images/HighContrast/SignIn_organization_HC_White.svg");
        height: 32px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/HighContrast/SignIn_MSFT_HC_White.svg");
        height: 32px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/HighContrast/SignIn_Facebook_HC_White.svg");
        height: 32px;
        width: 290px;
    }

    #google_btn {
        background-image: url("Images/HighContrast/SignIn_Google_HC_White.svg");
        height: 32px;
        width: 290px;
    }
}

@media only screen and (-ms-high-contrast: white-on-black) and (min-device-width : 360px) and (max-device-width: 640px) and (orientation:portrait) {
    #orgid_btn {
        background-image: url("Images/HighContrast/SignIn_organization_HC_Black.svg");
        height: 32px;
        width: 290px;
    }

    #ms_btn {
        background-image: url("Images/HighContrast/SignIn_MSFT_HC_Black.svg");
        height: 32px;
        width: 290px;
    }

    #facebook_btn {
        background-image: url("Images/HighContrast/SignIn_Facebook_HC_Black.svg");
        height: 32px;
        width: 290px;
    }

    #google_btn {
        background-image: url("Images/HighContrast/SignIn_Google_HC_Black.svg");
        height: 32px;
        width: 290px;
    }
}

/* End Microsoft High-Contrast Styles */

/*--- guidelines and 016---*/
.main-header {
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 22px;
}

table {
    padding: 0 0 60px;
    border-collapse: collapse;
}

thead {
    display: table-header-group;
    vertical-align: middle;
}

.table thead th {
    vertical-align: bottom;
    font-size: 10px;
    text-transform: uppercase;
}

th, td {
    border-bottom: 1px solid #EAECEE;
    font-size: 13px;
    padding: 10px 10px 10px 0;
    text-align: left;
}

.tdcentered {
    text-align: center;
}
/*--- guidelines and 016 ---*/
#main_canvas {
    border: 0 none;
    margin: 20px 0 0;
    position: relative;
    font-size: 12px;
    line-height: 19px;
    color: #333333;
    margin-bottom: 30px;
}

#classInfo_canvas {
    border: 0 none;
    position: relative;
}

#title_block {
    border: 0 none;
    margin: 0 0 20px 0;
    padding: 0;
}

#analytics_type {
    border: 0 none;
    padding: 0;
}

#byusers_byslides {
    border: 0 none;
    display: inline-block;
}
#byusers_lnk, #byslides_lnk, #byexercises_lnk {
    display: inline-block;
    font-size: 16px;
    text-decoration: none;
    outline: 0;
    margin: 0 40px 0 0;
    border: 0 none;
}

#analytics_time {
    border: 0 none;
    bottom: 8px;
    font-size: 12px;
    padding: 0;
    position: absolute;
    width: 120px;
}

#analytics_documentId {
    border: 0 none;
    bottom: 8px;
    font-size: 12px;
    margin: 0 0 0 120px;
    position: absolute;
    width: 140px;
}

#analytics_infoblock {
    border-bottom: 1px solid #D8D8D8;
    height: 49px;
    margin: 0;
    padding: 0;
    position: relative;
}
/*--tools canvas--*/
#analytics_info {
    border: 0 none;
    bottom: 10px;
    height: 30px;
    position: relative;
    right: 0;
    margin: 10px 0 0 0;
}

#pastDaysDropdown a {
    color: #333333;
    outline: medium none;
    padding: 0 0 0 3px;
    text-decoration: none;
}

#pastDaysDropdownOptions {
    font-size: 12px;
    min-width: 80px;
    padding: 2px 0 0 4px;
    top: 25px;
    width: 100px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

    #pastDaysDropdownOptions .firstDateOption {
        display: none;
}

    #pastDaysDropdownOptions li {
    cursor: pointer;
}

#pastDocumentsDropdown a {
    color: #333333;
    outline: medium none;
    padding: 0 0 0 3px;
    text-decoration: none;
}

#pastDocumentsDropdownOptions {
    font-size: 12px;
    min-width: 80px;
    padding: 2px 0 0 4px;
    top: 25px;
    width: 130px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

    #pastDocumentsDropdownOptions .currentVersionOption {
        display: none;
}

    #pastDocumentsDropdownOptions li {
    cursor: pointer;
}

.per-page-dropdown a {
    color: #333333;
    outline: medium none;
    padding: 0 0 0 3px;
    text-decoration: none;
}

.per-page-dropdown-options {
    font-size: 12px;
    min-width: 80px;
    padding: 2px 4px 0 0;
    text-align: right;
    top: 20px;
}

    .per-page-dropdown-options a {
    text-decoration: none;
    outline: none;
    color: #333333;
}

#last_updated_text, #last_updated_time {
    float: right;
    height: 16px;
    line-height: 16px;
    vertical-align: middle;
    margin: 0 0 0 5px;
}

#refresh_icon, #email_icon, #export_icon {
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    display: inline-block;
    float: right;
    height: 16px;
    margin: 0 0 0 1px;
    outline-style: none;
    text-decoration: none;
    width: 16px;
}

#refresh_icon {
    background-image: url("Images/refresh_normal.png");
}

#email_icon {
    background-image: url("Images/email_default.png");
    display: none;
}

#export_icon {
    background-image: url("Images/export.svg");
    margin: 0 0 0 10px;
}
/*--tools canvas--*/
/*--------------------------------------------By Users View---*/
.byuserslidelink_highted {
    color: #0072C6;
}

.byuserslidelink_unhighted {
    color: #333;
}

#byUsersView {
    border: 0 none;
    margin: 48px 0 0;
    padding: 0;
}
/*--analytics info canvas-*/
#analytics_canvas {
    border: 0 none;
    margin: 0;
    position: relative;
}

#chart_block {
    border: 0 none;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 180px;
}

#data_block {
    border: 0 none;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}
/*--------------------------------------------By Exercises View---*/
.byexerciseslidelink_highted{
    color: #0072C6;
}
.byexerciseslidelink_unhighted{
    color: #333;
}
/*--analytics info canvas-*/
.tiles-row {
    border: 0 none;
    display: inline-block;
    padding: 0;
}

    .tiles-row.right-margin {
    margin-right: 137px;
}

.tiles-row-heading-text {
    border-bottom: 1px solid #D8D8D8;
    display: block;
    width: auto;
    color: #98A3A6;
}

.tiles-row-block {
    border: 0 none;
}

.tiles-row-block-tile {
    border: 0 none;
    display: inline-block;
    margin: 15px 50px 30px 0px;
    padding: 0;
}

    .tiles-row-block-tile.last {
    margin: 15px 0 30px;
}

.tiles-row-block-tile-container {
    border: 0 none;
    text-align: center;
    color: #7c7c7c;
}

.tiles-row-block-tile-title {
    border: 0 none;
    color: #7c7c7c;
    display: inline-block;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 36px;
    height: 30px;
    line-height: 28px;
    margin: 0;
    padding: 0;
}

.tiles-row-block-tile-title-min {
    border: 0 none;
    color: #7c7c7c;
    display: inline-block;
    font-size: 16px;
    height: 16px;
    line-height: 16px;
    margin: 0;
    padding: 0;
}

.tiles-row-block-tile-contents {
    border: 0 none;
    color: #7c7c7c;
    display: inline-block;
    font-size: 11px;
    height: 10px;
    line-height: 10px;
    text-align: center;
    width: 100%;
}

.tiles-row hr {
    height: 0.5px;
    color: #D9D9D9;
    margin-top: 3px;    
}

#classInfo_canvas hr {
    height: 0.5px;
    color: #737373;
    margin-top: 5px;
}

.slide-data-block hr {
    height: 0.5px;
    color: #D9D9D9;
    margin-top: 0px;
}

.tiles-row-block-tile-title-min.correctpercent,
.tiles-row-block-tile-title.correctpercent {
    color: #008000;
}
/*----- info container  ---*/
/*--users statistics canvas-*/
.users-statistics-canvas {
    border: 0 none;
    clear: both;
    margin: 0;
    padding: 0;
}

.users-statistics-title-block {
    border: 0 none;
    font-size: 22px;
    height: 31px;
    margin: 0;
    padding: 0;
}

.users-statistics-title {
    border: 0 none;
    display: inline-block;
    font-size: 22px;
    margin: 12px 0;
}
/*--users statistics canvas-*/

/*--SVG elements---*/
#vsg_info {
    border: 0 none;
    margin: 0 0 0 5px;
    padding: 0;
}

#vsg_info_marker {
    border: 0 none;
    display: inline-block;
    height: 11px;
    margin: 0 10px 0 0;
    padding: 0;
    width: 11px;
}

#vsg_info_marker, #vsg_info_percent, #vsg_compleate-text {
    border: 0 none;
    display: inline-block;
    font-size: 10px;
    height: 11px;
    line-height: 11px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

#vsg_info_marker, #vsg_info_percent, #vsg_compleate-text {
    margin-right: 2px;
}

#svg_div {
    border: 0 none;
    display: block;
    height: 126px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    resize: none;
    max-width: 126px;
}
/*--SWG elements---*/

/*--table elements-*/
.per-page {
    height: 20px;
}

.per-page-title {
    position: absolute;
    right: 1px;
}

.altered-row {
    background-color: #F7F7F7;
}

.user-icon {
    background-image: url("img/user-icon.png");
    background-repeat: no-repeat;
    border: 0 none;
    display: block;
    height: 56px;
    outline-style: none;
    text-decoration: none;
    width: 56px;
}

.table th, .table td {
    border: 0 none;
}

.caret-down {
    border-left: 3px solid rgba(0, 0, 0, 0);
    border-right: 3px solid rgba(0, 0, 0, 0);
    border-top: 3px solid #333333;
    content: "";
    display: inline-block;
    height: 0;
    margin: 0 0 2px 3px;
    vertical-align: middle;
    width: 0;
}

.caret-down-large {
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-top: 5px solid #333333;
    content: "";
    display: inline-block;
    height: 0;
    margin: 0 0 7px 3px;
    vertical-align: middle;
    width: 0;
}

.progress.time-spent {
    background-color: rgba(0, 0, 0, 0);
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}

.progress {
    border-radius: 0;
    box-shadow: none;
}

.progress-bar-container {
    border: 0 none;
    display: inline-block;
    height: 20px;
    width: 90px;
}

.progress.active .progress-bar {
    animation: 2s linear 0s normal none infinite progress-bar-stripes;
}

.progress-striped .progress-bar {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
    background-size: 40px 40px;
}

.progress-bar {
    box-shadow: none;
    color: rgb(255, 255, 255);
    float: left;
    font-size: 12px;
    height: 100%;
    line-height: 20px;
    text-align: center;
    transition: width 0.6s ease 0s;
    width: 0;
}

    .progress-bar.slide-progress {
    background-color: #009E49;
}

.progress-bar.time-spent {
    background-color: #91ddf2;
}

.progress-bar-block-text {
    border: 0 none;
    font-size: 11px;
    line-height: 20px;
    vertical-align: top;
}

.correct-answers-container {
    border: 0 none;
    height: 20px;
}

.correct-answers-text {
    border: 0 none;
    display: inline-block;
    font-size: 11px;
    line-height: 20px;
    overflow: hidden;
    vertical-align: top;
    width: 35px;
}

    .correct-answers-text.positive {
    color: #009E49;
}

    .correct-answers-text.negative {
    color: #DD5900;
}

.correct-answers-square {
    border-radius: 4px;
    display: inline-block;
    height: 20px;
    width: 20px;
}

    .correct-answers-square.positive {
    background: none repeat scroll 0 0 #009E49;
}

    .correct-answers-square.negative {
    background: none repeat scroll 0 0 #DD5900;
}

.user-table-cell-timespent {
    display: inline-block;
    vertical-align: top;
}

.user-name-column-text {
    max-width: 256px;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    text-wrap: none;
    white-space: nowrap;
    display: block;
}
/*--table elements-*/
/*--------------------------------------------By Users View ends here---*/
/*--------------------------------------------By Slides View -----------*/
#bySlidesView {
    border: 0 none;
    margin: 15px 15px 0;
    padding: 0;
}

.bySlideMoreDetailsLink {
    text-align: right;
}

.slide-block {
    border: 0 none;
    position: relative;
}

.slide-thumbnail-block {
    background: none repeat scroll 0 0 #000000;
}

.slide-block-button {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    clear: both;
    height: 1px;
    margin: 0;
}

.slide-block-table {
    display: block;
}

.arrow_box {
    position: relative;
    border-top: 0.5px solid #D8D8D8;
}

    .arrow_box:after, .arrow_box:before {
    bottom: 100%;
    left: 150px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

    .arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #ffffff;
    border-width: 18px;
    margin-left: -18px;
}

    .arrow_box:before {
    border-color: rgba(51, 51, 51, 0);
    border-bottom-color: #333;
    border-width: 18px;
    margin-left: -18px;
}

#customizedRangeBox {
    -webkit-box-shadow: 0 1px 1.5px 0.5px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 1.5px 0.5px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 1.5px 0.5px rgba(0, 0, 0, 0.1) inset;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
    height: 50px;
}

.slide-thumbnail-block-img {
    border: 1px solid rgb(216, 216, 216);
}

button#changeDate {
    background: inherit;
    border: 1px solid rgba(51, 51, 51, 0.5);
    margin: 0 0 4px;
}

#date-range-error {
    color: red;
    float: right;
}

#startTime, #endTime {
    border: 1px solid rgba(51, 51, 51, 0.5);
    width: 110px;
}

.reldiv {
    height: 30px;
    left: 8px;
    width: 3000px;
    position: relative;
    top: 14px;
}

#vsg_info_percent {
   overflow: hidden;
    width: 17px;
}

.per-page-title {
    display: none;
}

.slide-row:hover {
    background-color: #E6F2Fa;
}

.users-statistics-table-header {
    white-space: nowrap;
}

.progress-bar.user-slide-progress {
    background-color: #009E49;
}

.progress-bar.lesson-slide-progress {
    background-color: #91ddf2;
}

/*--analytics user data block--starts here--*/
.analytics-userdata-block {
    margin: 20px 0 16px;
    padding: 0;
}

.analytics-main-header-username {
    color: #333333;
    display: block;
    font-size: 20px;
    padding: 0 0 9px;
    width: 512px;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.analytics-main-header-useremail, .analytics-main-header-usergroups {
    color: #7C7C7C;
    display: block;
    font-size: 18px;
    padding: 4px 0;
}
/*--analytics user data block--ends here--*/

/*--analytics activities chart--starts here--*/
.analytics-activities-chart-title-block {
    margin: 45px 0 35px;
}

.analytics-activities-chart-header {
    color: #7C7C7C;
    font-size: 29px;
}

#analytics_activities_chart_canvas {
    border-bottom: 1px solid #E3E3E3;
    border-right: 1px solid #E3E3E3;
    margin: 0 auto 45px 20px;
    max-width: 800px;
    min-height: 300px;
    padding: 0;
    position: relative;
}	

#analytics_activities_levels_block {
    border: 0 none;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.analytics-activities-block-levels {
    border-top: 1px solid #E3E3E3;
    height: 10%;
    margin: 0;
    padding: 0;
    list-style: none outside none;
}

span.levels-number {
    border: 0 none;
    color: #7C7C7C;
    display: inline-block;
    margin: -10px 0 0 -33px;
    padding-right: 4px;
    position: absolute;
    text-align: right;
    width: 30px;
}

.levels-number-first {
    border: 0 none;
    color: #7C7C7C;
    display: inline-block;
    margin: 20px 0 0 -30px;
    padding-right: 4px;
    position: absolute;
    text-align: right;
    width: 30px;
} 

#analytics_activities_chart_block {
    border: 0 none;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 3;
}

.barchart-bar-block {
    border-left: 1px solid #E3E3E3;
    display: inline-block;
    float: left;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    width: 33.3%;
    word-wrap: break-word;
}

.barchart-bar-block-bar {
    border: 0 none;
    bottom: 0;
    color: #7C7C7C;
    left: 30%;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 40%;
}

.barchart-bar-block-title {
    border: 0 none;
    color: #7C7C7C;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 100%;
    width: 100%;
    word-wrap: break-word;
}

.barchart-bar-block-bar-number {
    border: 0 none;
    bottom: 100%;
    display: block;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    width: 100%;
}

.barchart-bar-block-bar.aqua {
    background: none repeat scroll 0 0 #00BCF2;
}

.barchart-bar-block-bar.blue {
    background: none repeat scroll 0 0 #0072C6;
}

.barchart-bar-block-bar.aquamarine {
    background: none repeat scroll 0 0 #27D8C7;
}

.barchart-bar-block-bar.pink {
    background: none repeat scroll 0 0 #FFC0CB;
}

.barchart-bar-block-bar.slateblue {
    background: none repeat scroll 0 0 #6366FF;
}
/*--analytics activities chart--ends here--*/

/*--analytics compare chart--starts here--*/
.analytics-compare-chart-header-dropdown,
.analytics-compare-chart-header-dropdown:hover,
.analytics-compare-chart-header-dropdown:focus {
    color: #7C7C7C;
    font-size: 17px;
    text-decoration: none;
}

#analytics_compare_chart_canvas {
    margin: 0 auto 45px;
    max-width: 1010px;
    min-height: 100px;
    padding: 0;
    position: relative;
}

#analytics_compare_chart_block {
    margin: 0;
    padding: 0;
}

.horizontal-barchart-bar-block {
    float: left;
    margin: 0 60px 10px 0;
}

.horizontal-barchart-bar-block-row {
    display: table-row;
}

.horizontal-barchart-bar-block-title {
    border-right: 1px solid #E3E3E3;
    color: #7C7C7C;
    display: table-cell;
    height: 30px;
    min-width: 110px;
    padding-right: 30px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.horizontal-barchart-bar-block-bar {
    display: table-cell;
    height: 30px;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    width: 100px;
}

.horizontal-barchart-bar-block-bar-progress {
    background: none repeat scroll 0 0 #FF0000;
    display: block;
    height: 20px;
}

    .horizontal-barchart-bar-block-bar-progress.aqualight {
        background: none repeat scroll 0 0 #91DDF2;
    }

    .horizontal-barchart-bar-block-bar-progress.grey {
        background: none repeat scroll 0 0 #E5E6E7;
    }

    .horizontal-barchart-bar-block-bar-progress.orange {
        background: none repeat scroll 0 0 #FA7872;
    }
/*--analytics compare chart--ends here--*/
.analytics-user-aggregate-response-title {
    font-size: 16px;
    color: #98A3A6;
}

.analytics-user-aggregate-response-content {
    font-size: 16px;
    color: #7c7c7c;
}

.button-information {
    background-image: url("Images/information.png");
    background-repeat: no-repeat;
    background-size: 15px auto;
    border: 0 none;
    display: inline-block;
    height: 15px;
    width: 15px;
    margin: 0 0 -2px 4px;
}

#video_information_tooltip {
    display: none;
}

.video_information_tooltip_content {
    background-color: white;
    text-align: left;
    color: black;
}

.lesson-video-title .tooltip-arrow {
    border-top-color: white !important;
}

.lesson-video-title .tooltip-inner {
    border-radius: 5px !important;
    border-width: 1px;
    border-color: #72786B !important;
    padding: 15px 15px 15px 15px !important;
    background-color: white;
    max-width: 350px;
}

#analytics-row-block {
    margin-right: 0;
}

.answer-correct {
    color: green;
}

.answer-wrong {
    color: red;
}

@media only screen and (max-width: 992px) {
    .tiles-row-block-tile {
        border: 0 none;
        display: inline-block;
        margin: 15px 20px 30px 0px;
        padding: 0;
    }
}

@media only screen and (max-width: 460px) {
    .tiles-row-block-tile {
        border: 0 none;
        display: inline-block;
        margin: 15px 0 30px 0px;
        padding: 0;
        width: 100%;
    }

    .tiles-row-block-tile-container {
        border: 0 none;
        text-align: left;
        color: #7c7c7c;
    }

    .tiles-row-block-tile-contents {
        border: 0 none;
        color: #7c7c7c;
        display: inline-block;
        font-size: 11px;
        height: 10px;
        line-height: 10px;
        text-align: left;
        width: 100%;
    }
}

/* Styles for lesson player
-----------------------------------------------------------*/

/* ReSharper disable Html.TagNotResolved */
/* ReSharper disable CssBrowserCompatibility */
/* ReSharper disable RequiresFallbackColor */
.normal-font {
    font-family: 'Segoe UI Web Normal', 'wf_SegoeUI', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
}

.background-dark {
    background-color: #353535;
}

.player-container {
    color: white;
}

.player-layout {
    margin: 0 auto;
    position: relative;
}

.player-contents {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-color: #202020;
}

#acetate {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

#media {
    right: 20px;
    top: 20px;
    height: 250px;
    width: 384px;
    display: none;
}

#closedcaptiondisplay {
    position: relative;
    left: 0;
    bottom: 10px;
    height: 20px;
    padding: 20px 0;
    text-align: center;
    display: none;
}

.lessonMedia {
    height: 100%;
    width: 100%;
}

#ink {
    background-color: transparent;
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: none;
}

    #ink > canvas {
        position: absolute;
        pointer-events: none;
    }

#quiz {
    height: 100%;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#overlay {
    top: 0;
    left: 0;
    bottom: 49px;
    width: 100%;
    z-index: 100;
    background-color: #202020;
    position: absolute;
}

    #overlay .background {
        height: 100%;
        width: 100%;
        background-color: #202020;
        opacity: 0.4;
        display: none;
        position: absolute;
    }

    #overlay .splash {
        height: 100%;
        width: 100%;
        background: no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        opacity: 0.6;
        position: absolute;
    }

    #overlay .loading {
        background-image: url(images/loading.gif);
        background-repeat: no-repeat;
        background-position: center;
        top: 50%;
        left: 50%;
        margin: -60px 0 0 -60px;
        width: 120px;
        height: 120px;
        position: absolute;
    }

        #overlay .loading span {
            font-size: 1.5em;
            bottom: 0;
            position: absolute;
            left: 50%;
            margin-left: -46px;
        }

    #overlay .button-image {
        cursor: pointer;
        height: 60px;
        width: 60px;
        top: 50%;
        left: 50%;
        margin: -30px 0 0 -30px;
        position: absolute;
        background: no-repeat center center;
        z-index: 110;
        display: none;
    }

    #overlay .play-button {
        background-image: url(images/player/Play_default_60x.svg);
    }

        #overlay .play-button:hover {
            background-image: url(images/player/Play_hover_60x.svg);
        }

        #overlay .play-button:active {
            background-image: url(images/player/Play_pressed_60x.svg);
        }

    #overlay .replay-button {
        background-image: url(images/player/Replay_default_60x.svg);
    }

        #overlay .replay-button:hover {
            background-image: url(images/player/Replay_hover_60x.svg);
        }

        #overlay .replay-button:active {
            background-image: url(images/player/Replay_pressed_60x.svg);
        }

    #overlay .failed {
        position: absolute;
        display: none;
        text-align: center;
        padding: 0 20px;
        top: 50%;
        width: 100%;
    }

        #overlay .failed .title {
            font-size: 2.5em;
            line-height: 1.2em;
            cursor: default;
        }

        #overlay .failed .message {
            font-size: 1.5em;
            line-height: 1.2em;
        }

        #overlay .failed .help-link {
            font-size: 1.2em;
            line-height: 1.2em;
        }

    #overlay .logo {
        position: absolute;
        z-index: 120;
        right: 0px;
        bottom: 0px;
        text-align: center;
        display: none;
    }

        #overlay .logo .logo-anchor {
            font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
            color: #ffffff !important;
            font-size: 40px;
            text-decoration: none;
        }

        .logo {
            margin: 36px;
        }

        .logo-anchor:hover {
            text-decoration: underline!important;
        }

        .share-icon {
            display: inline-block;
            background: no-repeat center center;
            background-size: 100% 100%;
            width: 50px;
            height: 50px;
            margin-bottom: 24px;
        }

        #share-icon-fb { background-image: url(images/social/Facebook_32x.svg); }
        #share-icon-fb:hover { background-image: url(images/social/Facebook_Hover_32x.svg); }
        #share-icon-google { background-image: url(images/social/GooglePlus_32x.svg); }
        #share-icon-google:hover { background-image: url(images/social/GooglePlus_Hover_32x.svg); }
        #share-icon-twitter { background-image: url(images/social/Twitter_32x.svg); }
        #share-icon-twitter:hover { background-image: url(images/social/Twitter_Hover_32x.svg); }
        #share-icon-pinterest { background-image: url(images/social/Pinterest_32x.svg); }
        #share-icon-pinterest:hover { background-image: url(images/social/Pinterest_Hover_32x.svg); }
        #share-icon-linkedin { background-image: url(images/social/LinkedIn_32x.svg); }
        #share-icon-linkedin:hover { background-image: url(images/social/LinkedIn_Hover_32x.svg); }

    #overlay .privacy {
        position: absolute;
        right: 40px;
        bottom: 5px;
        font-size: 14px;
    }

        #overlay .privacy a {
            color: #fff;
        }

    #overlay .slide-selection-popup {
        height: 100%;
        width: 100%;
        position: absolute;
        display: none;
        background-color: rgba(51,51,51,0.7);
    }

    #overlay .slide-container {
        height: 100%;
        width: 100%;
        position: absolute;
        overflow: auto;
        padding: 40px;
    }

    #overlay .slide-box {
        width: 213px;
        float: left;
        margin: 15px;
        color: white;
        cursor: pointer;
    }

        #overlay .slide-box:hover {
            color: #428bca;
            text-decoration: none;
        }

    #overlay .slide-thumbnail {
        background: no-repeat center center;
        background-size: cover;
        background-color: #333;
        height: 120px;
        width: 213px;
        display: inline-block;
    }

    #overlay .slide-thumbnail.fourbythree {
        background: no-repeat center center;
        background-size: cover;
        background-color: #333;
        height: 160px;
        width: 213px;
        display: inline-block;
    }

    #overlay .slide-text {
        font-size: 22px;
    }

    #overlay .slide-selection-popup .closebutton {
        color: #fff;
        right: 20px;
        top: 20px;
    }

@media (max-width: 960px) {
    #overlay .logo .logo-anchor {
        font-size: 32px;
    }
    .share-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 20px;
    }
    .logo {
        margin: 28px;
    }
}

@media (max-width: 620px) {
    #overlay .logo .logo-anchor {
        font-size: 24px;
    }
    .share-icon {
        width: 30px;
        height: 30px;
        margin-bottom: 5px;
    }
    .logo {
        margin: 15px;
    }
}

@media (max-width: 460px) {
    #overlay .slide-box {
        width: 142px;
    }

    #overlay .slide-thumbnail {
        height: 80px;
        width: 142px;
    }

    #overlay .slide-thumbnail.fourbythree {
        height: 106px;
        width: 142px;
    }

    #overlay .slide-text {
        font-size: 16px;
    }
    #overlay .logo .logo-anchor {
        font-size: 16px;
    }
    .share-icon {
        width: 20px;
        height: 20px;
        margin-bottom: 5px;
    }
    .logo {
        margin: 15px;
    }
}

.chrome {
    opacity: 0.0;
    height: 49px;
    width: 100%;
    background-color: #222;
    position: relative;
}

.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.playback-controls {
    position: relative;
    padding: 0 5px;
    height: 41px;
    top: 8px;
}

.seekbar {
    margin: 0;
    height: 8px;
    background-color: #6c6c6c;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
}

.markers {
    width: 100%;
    height: 8px;
    position: absolute;
    top: 0;
    background-color: transparent;
}

.marker {
    position: absolute;
    background-color: #f0f0f0;
    height: 8px;
    top: 0;
    cursor: pointer;
    z-index: 5;
}

.playback-slide {
    width: 2px;
}

.slideshow-slide {
    width: 6px;
}

.app-slide {
    width: 8px;
    background-color: transparent;
}

    .app-slide polygon {
        fill: #f0f0f0;
    }

#slider {
    height: 100%;
}

.slider-handle-range {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 100%;
}

.slider-progress {
    background-color: #2a75ad;
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
}

.slider-handle {
    position: absolute;
    margin: -6px 0 0 -10px;
    height: 20px;
    width: 20px;
    z-index: 120;
    cursor: pointer;
    border-radius: 20px;
    box-shadow: 0 2px 8px #000;
    border: 4px solid #fff;
    background-color: #2a75ad;
}

    .slider-handle:focus, .slider-handle:active, .slider-handle:hover {
        background: #428bca;
    }

.seekbar-hittarget {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 110;
}

.hint-info {
    float: left;
    display: none;
    margin-top: 12px;
}

.duration-info {
    float: right;
    font-size: 0.9em;
    margin-right: 6px;
    margin-top: 12px;
    color: white;
}

    .duration-info span:last-of-type {
        color: #8c8c8c;
    }

.stacking {
    position: absolute;
}

.hitzone {
    background-image: url('Images/transparent-background.gif');
    background-repeat: repeat;
}

.analyticsContainer {
    background-color: white;
}

.thumbnail-preview {
    height: 120px;
    top: -130px;
    background-color: #333;
    border-radius: 5px;
    width: 200px;
    margin-left: -100px;
    position: absolute;
    display: none;
    box-shadow: 0 2px 8px #000;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 200;
}

    .thumbnail-preview div {
        position: absolute;
        padding: 5px 10px;
        bottom: 0;
        text-shadow: 0 0 3px rgba(0,0,0,0.8);
    }

        .thumbnail-preview div:first-child {
            left: 0;
        }

        .thumbnail-preview div:last-child {
            right: 0;
        }

.svg-button {
    fill: #fff;
    height: 41px;
    width: 41px;
}

.svg-button-pressed, .svg-button-pressed text {
    fill: #2a75ad;
}

.svg-interactive:hover, .svg-interactive:hover text {
    cursor: pointer;
    fill: #428bca;
}

.svg-interactive:active, .svg-interactive:active text {
    cursor: pointer;
    fill: #2a75ad;
}

.svg-closedcaption-off, .svg-closedcaption-off text {
    cursor: pointer;
    fill: none;
    stroke: #ffffff;
    stroke-width:2px;
}

.svg-closedcaption-off:active, .svg-closedcaption-off:active text {
    cursor: pointer;
    fill: #2a75ad;
    stroke: #ffffff;
    stroke-width:2px;
}

.svg-closedcaption-off:hover, .svg-closedcaption-off:hover text {
    cursor: pointer;
    fill: #428bca;
    stroke: #ffffff;
    stroke-width:2px;
}

.svg-disabled {
    opacity: 0.65;
    pointer-events: none;
}

#play, #previous, #next, #slidegrid {
    float: left;
}

#volume, #speed, #gotoportal, #share, #closedcaptionbtn {
    float: right;
}

#volume, #speed, #closedcaptionbtn {
    position: relative;
    z-index: 300;
}

.playing-mode polygon {
    display: none;
}

.playing-mode rect {
    display: inline;
}

.paused-mode polygon {
    display: inline;
}

.paused-mode rect {
    display: none;
}

.slider-container {
    background-color: #2d2d2d;
    width: 33px;
    height: 160px;
    position: absolute;
    right: -5px;
    bottom: 0;
    z-index: 200;
    display: none;
}

    .slider-container > div {
        height: 100px;
        width: 3px;
        background-color: white;
        margin: 15px;
    }

.ui-slider-vertical .ui-slider-range-min {
    background-color: #2a75ad;
}

.ui-slider .ui-slider-handle {
    height: 5px;
    width: 15px;
    cursor: pointer;
    background-color: white;
}

.ui-slider-vertical .ui-slider-handle {
    left: -6px;
    margin-bottom: -5px;
}

.links {
    height: 0;
    width: 0;
    top: 0;
    left: 0;
}

.link {
    position: absolute;
    cursor: pointer;
}

.hide-layer {
    visibility: collapse;
    display: none;
}

#overlay .share-popup {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #353535;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 115;
    display: none;
}

#overlay .closebutton {
    position: absolute;
    right: 10px;
    top: 10px;
    border: 0 none;
    color: #000000;
    cursor: pointer;
    font-size: 32px;
    line-height: 11px;
    text-align: right;
    width: 20px;
    height: 20px;
}

#overlay .share-popup .share-container {
    display: table;
    height: 100%;
    width: 100%;
}

#overlay .share-popup .share-content {
    display: table-cell;
    vertical-align: middle;
}

#overlay .share-popup .share-bar {
    position: relative;
    padding: 30px;
    background-color: white;
    width: 100%;
    /*height: 198px;*/
}

/* Begin Microsoft High-Contrast Styles */

@media only screen and (-ms-high-contrast: black-on-white) {
    .svg-button {
        fill: rgb(0, 0, 159);
    }

    .svg-button-pressed, .svg-button-pressed text {
        fill: rgb(0, 0, 159);
    }

    .svg-interactive:hover, .svg-interactive:hover text {
        cursor: pointer;
        fill: rgb(0, 0, 159);
    }

    .svg-interactive:active, .svg-interactive:active text {
        cursor: pointer;
        fill: rgb(0, 0, 159);
    }

    .svg-closedcaption-off, .svg-closedcaption-off text {
        cursor: pointer;
        fill: rgb(0, 0, 159);
        stroke: rgb(255,255,255);
        stroke-width:2px;
    }

    .svg-closedcaption-off:hover, .svg-closedcaption-off:hover text {
        cursor: pointer;
        fill: rgb(0, 0, 159);
    }

    .svg-closedcaption-off:active, .svg-closedcaption-off:active text {
        cursor: pointer;
        fill: rgb(0, 0, 159);
        stroke: rgb(255,255,255);
        stroke-width:2px;
    }

    .svg-disabled {
        opacity: 0.65;
        fill: #000000;
        pointer-events: none;
    }

    #slider {
        outline: 1px solid #000000;
    }

    .slider-handle {
        border: 4px solid rgb(0, 0, 159);
    }

    .slider-progress {
        background-color: #000000;
    }

    .app-slide polygon {
        fill: #FFFFFF;
    }

    .marker {
        background-color: #FFFFFF;
        outline: 1px solid #000000;
    }

    .slider-container {
        background-color: #000000;
        height: 130px;
        bottom: 34px;
    }

    #overlay .play-button {
        background-image: url(Images/Player/HighContrast/Play_default_60x_HC_White.svg);
    }

        #overlay .play-button:hover {
            background-image: url(Images/Player/HighContrast/Play_hover_60x_HC_White.svg);
        }

        #overlay .play-button:active {
            background-image: url(Images/Player/HighContrast/Play_pressed_60x_HC_White.svg);
        }

    #overlay .replay-button {
        background-image: url(Images/Player/HighContrast/Replay_default_60x_HC_White.svg);
    }

        #overlay .replay-button:hover {
            background-image: url(Images/Player/HighContrast/Replay_hover_60x_HC_White.svg);
        }

        #overlay .replay-button:active {
            background-image: url(Images/Player/HighContrast/Replay_pressed_60x_HC_White.svg);
        }
}

@media only screen and (-ms-high-contrast: white-on-black) {
    .svg-button {
        fill: rgb(255, 255, 0);
    }

    .svg-button-pressed, .svg-button-pressed text {
        fill: rgb(255, 255, 0);
    }

    .svg-interactive:hover, .svg-interactive:hover text {
        cursor: pointer;
        fill: rgb(255, 255, 0);
    }

    .svg-interactive:active, .svg-interactive:active text {
        cursor: pointer;
        fill: rgb(255, 255, 0);
    }

    .svg-closedcaption-off, .svg-closedcaption-off text {
        cursor: pointer;
        fill: rgb(255, 255, 0);
        stroke: rgb(0,0,0);
        stroke-width:2px;
    }

    .svg-closedcaption-off:hover, .svg-closedcaption-off:hover text {
        cursor: pointer;
        fill: rgb(255, 255, 0);
    }

    .svg-closedcaption-off:active, .svg-closedcaption-off:active text {
        cursor: pointer;
        fill: rgb(255, 255, 0);
    }

    .svg-disabled {
        opacity: 0.65;
        fill: #FFFFFF;
        pointer-events: none;
    }

    #slider {
        outline: 1px solid #FFFFFF;
    }

    .slider-handle {
        border: 4px solid rgb(255, 255, 0);
    }

    .slider-progress {
        background-color: #FFFFFF;
    }

    .app-slide polygon {
        fill: #FFFFFF;
    }

    .marker {
        background-color: #FFFFFF;
        outline: 1px solid #000000;
    }

    .slider-container {
        background-color: #FFFFFF;
        height: 130px;
        bottom: 34px;
    }

    #overlay .play-button {
        background-image: url(Images/Player/HighContrast/Play_default_60x_HC_Black.svg);
    }

        #overlay .play-button:hover {
            background-image: url(Images/Player/HighContrast/Play_hover_60x_HC_Black.svg);
        }

        #overlay .play-button:active {
            background-image: url(Images/Player/HighContrast/Play_pressed_60x_HC_Black.svg);
        }

    #overlay .replay-button {
        background-image: url(Images/Player/HighContrast/Replay_default_60x_HC_Black.svg);
    }

        #overlay .replay-button:hover {
            background-image: url(Images/Player/HighContrast/Replay_hover_60x_HC_Black.svg);
        }

        #overlay .replay-button:active {
            background-image: url(Images/Player/HighContrast/Replay_pressed_60x_HC_Black.svg);
        }
}

/* End Microsoft High-Contrast Styles */

button:focus {
    outline: 0;
}

#forum {
    padding-bottom: 56px;
    margin-left: 0;
    margin-right: 0;
    color: #000000;
}

    #forum .container-fluid {
        margin: 0;
    }

.forum-wrapper {
    width: 100%;
    margin: 0 auto;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    display: none;
}

.appended-player-page-content .forum-wrapper {
    position: relative;
    top: 50px;
    left: 0;
}

#forum-list {
    position: relative;
}

.forum-header-wrapper {
    position: relative;
    margin-top: 20px;
    height: 45px;
}

.forum-text-primary {
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 26px;
    color: #1E1E1E;
    margin: 0 0 24px -2px;
    float: left;
}

.forum-text-secondary {
    display: block;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 20px;
    line-height: 34px;
    margin-bottom: 20px;
}

.forum-search {
    position: relative;
    width: 100%;
    max-width: 280px;
    -moz-min-width: 150px;
    -ms-min-width: 150px;
    -o-min-width: 150px;
    -webkit-min-width: 150px;
    min-width: 150px;
    height: 45px;
    margin-top: -10px;
    margin-bottom: 10px;
    float: right;
    z-index: 1;
}

.forum-clear-button {
    position: absolute;
    bottom: 0px;
    height: 43px;
    min-height: 43px;
    width: 42px;
    font-size: 12px;
    line-height: 14px;
    outline: none;
    border: 1px solid #1E1E1E;
    z-index: 100;
}

    .forum-clear-button:hover {
        background-color: #808184;
        color: #ffffff;
    }


.forum-textarea-search {
    position: absolute;
    right: 0;
    height: 45px;
    min-height: 45px;
    max-width: 236px;
    width: 100%;
    -moz-min-width: 104px;
    -ms-min-width: 104px;
    -o-min-width: 104px;
    -webkit-min-width: 104px;
    min-width: 104px;
    font-size: 13px;
    padding: 12px 10px 0 10px;
    outline: none;
    border-left: 1px solid #D8D8D8;
    border-top: 1px solid #D8D8D8;
    border-bottom: 1px solid #D8D8D8;
    border-right: none;
    -moz-resize: none;
    -ms-resize: none;
    -o-resize: none;
    resize: none;
    white-space: nowrap;
    overflow: hidden;
    z-index: 0;
}

.forum-search-button-wrapper {
    position: absolute;
    right: 0;
    width: 44px;
    height: 45px;
    border-left: none;
    border-top: 1px solid #D8D8D8;
    border-bottom: 1px solid #D8D8D8;
    border-right: 1px solid #D8D8D8;
    background-color: #FFFFFF;
    z-index: 1;
}

.forum-search-button {
    position: absolute;
    top: 10px;
    left: 0;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    background: url('Images/Forum/searchSprite.svg') no-repeat;
    background-position: center top;
    -ms-background-size: 24px 49px;
    background-size: 24px 49px;
    outline: none;
    border: none;
}

    .forum-search-button:hover {
        background-position: center -25px;
    }

.forum-add-question {
    position: relative;
    height: inherit;
    width: 100%;
    z-index: 0;
}

.forum-question {
    position: relative;
}

.forum-correct-answer-list, .forum-other-answer-list {
    position: relative;
    margin-left: 40px;
}

.forum-answer-wrapper {
    position: relative;
    top: 0;
    left: 0;
}

.forum-correct-answer-wrapper {
    position: relative;
    top: 0;
    left: 0;
}

.forum-correct-checkmark {
    position: absolute;
    top: 12px;
    left: -40px;
    width: 20px;
    height: 20px;
}

.forum-correct-answer {
    background-color: #e6ffe7;
    margin: 10px 0 10px -10px;
    padding: 10px;
}

.question-text {
    padding: 8px 62px 8px 10px !important;
    margin-bottom: 6px;
}

.answer-text {
    position: relative;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 13px;
    height: 64px;
    min-height: 64px;
    width: 100%;
    padding: 8px 10px 33px 10px;
    outline: none;
    border: 1px solid #D8D8D8;
    -moz-resize: none;
    -ms-resize: none;
    -o-resize: none;
    resize: none;
    overflow: hidden;
}

.forum-answer-textarea-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 0;
}

.forum-edit-question-text-wrapper, .forum-edit-answer-text-wrapper {
    position: relative;
    top: 0;
    left: 0;
    height: inherit;
    margin-bottom: -6px;
    min-height: 76px;
}

.forum-edit-answer-text-wrapper {
    margin-bottom: -8px;
}

.edit-question-textarea, .edit-answer-textarea {
    position: relative;
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    height: 76px;
    min-height: 76px;
    width: 100%;
    padding: 2px 10px 44px 10px;
    outline: none;
    border: 1px solid #D8D8D8;
    -moz-resize: none;
    -ms-resize: none;
    -o-resize: none;
    resize: none;
    overflow: hidden;
}

.edit-question-textarea {
    font-size: 21px;
    line-height: 25px;
}

.edit-answer-textarea {
    font-size: 16px;
}

.forum-add-question-button, .forum-post-answer-button,
.forum-post-edit-button {
    position: absolute;
    bottom: 10px;
    height: 23px;
    width: 42px;
    font-size: 12px;
    line-height: 14px;
    outline: none;
    border: 1px solid #D8D8D8;
    z-index: 100;
}

.forum-add-question-button {
    right: 12px;
    bottom: 13px;
}

.forum-post-edit-button {
    right: 82px;
}

.forum-post-answer-button {
    right: 92px;
    bottom: 20px;
}

    .forum-post-answer-button:hover, .forum-add-question-button:hover,
    .forum-post-edit-button:hover {
        background-color: #808184;
        color: #ffffff;
    }

.forum-answer-close-button, .forum-edit-close-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: 24px;
    width: 62px;
    font-size: 12px;
    line-height: 14px;
    outline: none;
    border: 1px solid #D8D8D8;
    z-index: 100;
}

.forum-answer-close-button {
    right: 20px;
    bottom: 20px;
}

    .forum-answer-close-button:hover, .forum-edit-close-button:hover {
        background-color: #808184;
        color: #ffffff;
    }

.forum-text-list-primary-best, .forum-text-list-primary-other {
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 16px;
    color: #7794a2;
}

.forum-text-list-primary-best {
    margin: 10px 0 6px 40px;
}

.forum-text-list-primary-other {
    margin: 17px 0 6px 40px;
}

.forum-textarea {
    height: 37px;
    min-height: 37px;
    width: 100%;
    font-size: 13px;
    padding: 2px 10px 0 10px;
    outline: none;
    border: 1px solid #D8D8D8;
    -moz-resize: none;
    -ms-resize: none;
    -o-resize: none;
    resize: none;
    overflow: hidden;
}

.forum-rule-wrapper {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    margin-top: 6px;
    overflow: hidden;
}

.accordion-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 20px;
    width: 20px;
    padding: 0;
    outline: none;
    border: none;
    z-index: 1;
}

    .accordion-button:hover {
        text-decoration: none;
    }

.forum-question-answer-rule {
    position: absolute;
    top: 12px;
    right: 28px;
    width: 100%;
    height: 1px;
    background-color: #CCCCCC;
    z-index: 0;
}

.forum-question-no-answer-rule {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    margin: 12px 0;
    background-color: #CCCCCC;
    z-index: 0;
}

.forum-answer-rule {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    margin: 12px 0;
    background-color: #CCCCCC;
    z-index: 0;
}

.forum-buttons {
    position: relative;
    top: 0;
    left: 0;
    height: 20px;
    z-index: 0;
}

.forum-button-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    z-index: 0;
}

.forum-open-answer-button {
    position: relative;
    background: url('Images/Forum/commentIconDefault.svg') no-repeat center;
    width: 11px;
    height: 13px;
    border: none;
    z-index: 0;
}

.forum-close-answer-button {
    position: relative;
    background: url('Images/Forum/commentIconPressed.svg') no-repeat center;
    width: 11px;
    height: 13px;
    border: none;
    z-index: 0;
}

.questionanswers {
    position: relative;
    color: #7794a2;
    margin-right: 8px;
    z-index: 0;
}

.questionlikes {
    position: relative;
    color: #7794a2;
    margin-right: 6px;
    z-index: 0;
}

.forum-like-button {
    position: relative;
    background: url('Images/Forum/likeIconDefault.svg') no-repeat center;
    width: 14px;
    height: 14px;
    border: none;
    visibility: visible;
    display: inline;
    z-index: 0;
}

.forum-unlike-button {
    position: relative;
    background: url('Images/Forum/likeIconPressed.svg') no-repeat center;
    width: 14px;
    height: 14px;
    border: none;
    visibility: visible;
    display: inline;
    z-index: 0;
}

.forum-flag-button {
    position: relative;
    background: url('Images/Forum/flagIconDefault.svg') no-repeat center;
    width: 9px;
    height: 12px;
    border: none;
    z-index: 0;
}

.questionText, .correctAnswerText, .answerText {
    position: relative;
    top: 0;
    left: 0;
    width: inherit;
    font-size: 21px;
    line-height: 25px;
    overflow: hidden;
    z-index: 0;
}

.answerText {
    position: relative;
    top: 0;
    left: 0;
    width: inherit;
    font-size: 16px;
    line-height: 20px;
    z-index: 0;
}

.questionText, .correctAnswerText {
    font-family: 'Segoe UI Web Semibold', 'wf_SegoeUISemibold', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    color: #424242;
}

.answerText {
    font-family: 'Segoe UI Web Light', 'wf_SegoeUILight', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
}

.answerlikes {
    color: #7794a2;
}

.question-bubblePoint, .answer-bubblePoint {
    position: relative;
    top: 1px;
    left: 4px;
    width: 10px;
    height: 6px;
    display: block;
    z-index: 1;
}

.question-textarea, .answer-textarea {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: #E6E7E8;
    border: 1px solid #D8D8D8;
    padding: 13px;
    margin: 0 -1px 0 -1px;
    z-index: 0;
}

.question-textarea {
    margin: 0 -1px 28px -1px;
}

.question-author-wrapper, .answer-author-wrapper {
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 2px;
    display: block;
}

.questionID, .answerID, .timestampInfo {
    color: #428bca;
    font-size: 12px;
}

.questionID, .answerID {
    font-family: 'Segoe UI Web Semibold', 'wf_SegoeUISemibold', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
}

.timestampInfo {
    color: #7794a2;
    margin-left: 4px;
}

.question-dropdown-button, .answer-dropdown-button {
    position: relative;
    width: 24px;
    height: 24px;
    font-family: 'Segoe UI Web Semibold', 'wf_SegoeUISemibold', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
    font-size: 24px;
    line-height: 18px;
    color: #888888;
    border: none;
    background: transparent;
    padding: 0;
    margin-left: 4px;
    z-index: 101;
}

    .question-dropdown-button:hover, .answer-dropdown-button:hover,
    .question-dropdown-button:focus, .answer-dropdown-button:focus {
        color: #428bca;
        text-decoration: none;
    }

.dropdown-wrapper {
    position: relative;
    display: inline;
}

.question-dropdown, .answer-dropdown {
    position: absolute;
    left: -169px;
    top: 21px;
    width: 200px;
    height: auto;
    z-index: 100;
}

.question-dropdown-bubblePoint, .answer-dropdown-bubblePoint {
    position: relative;
    top: 1px;
    left: 4px;
    width: 10px;
    height: 6px;
    display: block;
}

.question-dropdown-top-rect, .answer-dropdown-top-rect {
    position: absolute;
    top: -20px;
    right: 0;
    background: #FFFFFF;
    -moz-box-shadow: 0 0 4px 0 #888888;
    -o-box-shadow: 0 0 4px 0 #888888;
    -webkit-box-shadow: 0 0 4px 0 #888888;
    box-shadow: 0 0 4px 0 #888888;
    width: 30px;
    height: 20px;
    display: block;
}

    .question-dropdown-top-rect:after, .answer-dropdown-top-rect:after {
        background-color: #fff;
        width: 30px;
        height: 3px;
        content: "";
        position: absolute;
        bottom: -3px;
    }

.question-dropdown-content, .answer-dropdown-content {
    background: #FFFFFF;
    -moz-box-shadow: 0 0 4px 0 #888888;
    -o-box-shadow: 0 0 4px 0 #888888;
    -webkit-box-shadow: 0 0 4px 0 #888888;
    box-shadow: 0 0 4px 0 #888888;
    width: 100%;
    height: auto;
    display: block;
}

.forum-edit-button, .forum-delete-button,
.forum-mark-correct-button, .forum-unmark-correct-button {
    width: 194px;
    border: none;
    font-size: 13px;
    line-height: 23px;
    margin: 3px;
    padding-left: 20px;
    text-align: left;
    background: #FFFFFF;
}

    .forum-edit-button:active, .forum-delete-button:active,
    .forum-edit-button:hover, .forum-delete-button:hover,
    .forum-mark-correct-button:active, .forum-unmark-correct-button:active,
    .forum-mark-correct-button:hover, .forum-unmark-correct-button:hover {
        background-color: #888888;
        color: #FFFFFF;
    }

.forum-slideThumbnail-img-ribbon-block {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.forum-inlineDisplay {
    float: left;
    display: inline-block;
}

@media (min-width: 1024px) {
    .slideQnAInfo {
        float: left;
        width: 75%;
        min-width: 220px;
    }
}

@media (min-width: 591px) and (max-width: 1023px) {
    .slideQnAInfo {
        float: left;
        width: 60%;
        min-width: 220px;
    }
}

@media (max-width: 590px) {
    .slideQnAInfo {
        float: left;
        width: 100%;
        min-width: 220px;
    }
}

@media screen and (orientation: portrait) {
    .forum-wrapper.container {
        margin-bottom: 0; /* We remove for the footer when it's present' */
    }
}

/* list loading animation */

#loadMoreLoader {
    width: 93.33333333333333px;
    margin: 0 auto;
}

#forumLoader {
    width: 93.33333333333333px;
    margin: 0 auto;
}

.loadMoreLoader {
    background-color: #FFFFFF;
    float: left;
    height: 20px;
    margin-left: 11px;
    width: 20px;
    -moz-animation-name: bounce_loadMoreLoader;
    -moz-animation-duration: 1.35s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-border-radius: 13px;
    -webkit-animation-name: bounce_loadMoreLoader;
    -webkit-animation-duration: 1.35s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-border-radius: 13px;
    -ms-animation-name: bounce_loadMoreLoader;
    -ms-animation-duration: 1.35s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: normal;
    -ms-border-radius: 13px;
    -o-animation-name: bounce_loadMoreLoader;
    -o-animation-duration: 1.35s;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: normal;
    -o-border-radius: 13px;
    animation-name: bounce_loadMoreLoader;
    animation-duration: 1.35s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    border-radius: 13px;
}

#loadMoreLoader_1 {
    -moz-animation-delay: 0.27s;
    -webkit-animation-delay: 0.27s;
    -ms-animation-delay: 0.27s;
    -o-animation-delay: 0.27s;
    animation-delay: 0.27s;
}

#loadMoreLoader_2 {
    -moz-animation-delay: 0.63s;
    -webkit-animation-delay: 0.63s;
    -ms-animation-delay: 0.63s;
    -o-animation-delay: 0.63s;
    animation-delay: 0.63s;
}

#loadMoreLoader_3 {
    -moz-animation-delay: 0.8099999999999999s;
    -webkit-animation-delay: 0.8099999999999999s;
    -ms-animation-delay: 0.8099999999999999s;
    -o-animation-delay: 0.8099999999999999s;
    animation-delay: 0.8099999999999999s;
}

@-moz-keyframes bounce_loadMoreLoader {
    0% {
    }

    50% {
        background-color: #428bca;
    }

    100% {
    }
}

@-webkit-keyframes bounce_loadMoreLoader {
    0% {
    }

    50% {
        background-color: #428bca;
    }

    100% {
    }
}

@-ms-keyframes bounce_loadMoreLoader {
    0% {
    }

    50% {
        background-color: #428bca;
    }

    100% {
    }
}

@-o-keyframes bounce_loadMoreLoader {
    0% {
    }

    50% {
        background-color: #428bca;
    }

    100% {
    }
}

@keyframes bounce_loadMoreLoader {
    0% {
    }

    50% {
        background-color: #428bca;
    }

    100% {
    }
}