* {
    margin: 0px;
    padding: 0px;
}

@font-face {
    font-family: NeoGrey;
    src: url ('fonts/NeogreyRegular.ttf');
}

html {
    background: #1b1b1b;
    color: #ffffff;
    font-family: NeoGrey, Helvetica, Arial;
}

#containerFullView {
	width: 1024px;
    height: 100%;
    margin: 36px auto;
}

#mainContainer {
    width: 1024px;
    height: 100%;
    margin: 36px auto;
}

#header {
    width: 100%;
    height: 112px;
    display: inline-block;
    /*background: #03A696;*/
}

canvas { 
	position: absolute;
	top: 220px;
	width: 900px; 
	height: 374px; 
}

#site_logo_experience {
	width: 288px; 
	height: 48px;
	margin-top: 15px;
	margin-left: 30px;
}

/*HEADER SITE LOGO*/
#site_logo {
    width: 344px;
    height: 60px;
    /*background: #4A4A4A;*/
    float: left;
    margin-top: 30px;
    margin-left: 6px;
}

/*LOGIN TOP RIGHT CONTAINER*/
#login_container {
    width: 400px;
    height: 120px;
    /*background: grey;*/
    float: right;
}

/*LOGIN TOP RIGHT AVATAR*/
#user_avatar {
    width: 32px;
    height: 32px;
    background: #4A4A4A;
    margin-left: 366px;
    margin-bottom: 8px;
}

#signin_container {
    float: right;
    clear: left;
}

/*LOGIN TOP RIGHT SIGN IN TEXT*/
#login_txt {
    text-align: right; 
}

/*LOGIN TOP RIGHT SEARCH BAR*/
input[type=search] {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 8px 8px;
}

#main_search {
    width: 220px;
    height: 22px;
    float: right;
    margin-top: 10px;
}

/*MAIN NAVIGATION*/
#nav {
    width: 100%;
    height: 40px;
    /*background: grey;*/
    /*margin: 12px 0px;*/
    margin-top: -10px;
    margin-bottom: 20px;
    text-align: right;
}

#nav ul {
    padding: 10px 0px;
}

#nav ul li {
    text-transform: uppercase;
    letter-spacing: 2px;
}

ul li{
    display: inline-block;
    list-style-type: none;
}

/*CUSTOM DESIGN ARROWS STYLES ADDED >> */
.nav_arrows {
    font-size: 20px;
    padding-left: 8px;
    padding-right: 8px;
}

/*JUX aka JUKEBOX TEXT*/
.music_nav_txt {
   color: #FF24FD;
   letter-spacing: 2px;
   margin-left: -6px;
   padding-right: 2px;
}

a {
    color: #fff;
    text-decoration: none;
}

/*TODO: WE NEED A SMOOTHER HOVER EFFECT ON THE NAVIGATION FLOW*/
a:hover {
    color: #FF24FD;
    font-size: 20px;
}

a:active {
    color: #09A3EB;
}

/*SPECIFIC USE CASES WITH SPECIFIC NAV ELEMENTS*/
a:hover.music_nav_txt {
    color: #09A3EB;
}

/*LOGIN/SIGNUP HOVER STATES*/
a:hover.header_nav {
    color: #FF24FD;
    font-size: 16px;
}

a:active.header_nav {
    color: #09A3EB;
}

/*HERO HEADER IMAGE MAIN */
#main_hero_player {
    width: 100%;
    height: 320px;
    background: #4A4A4A;
    /*background-image: url('../img/playtrailers_hero_mandalorean_02.png');*/
    margin-bottom: 50px;
}

#main_hero_player_experience {
	width: 100%;
    height: 320px;
    margin-bottom: 50px;
}

#hero_content_identifier_txt {
    float: left;
    margin-top: 15px;
}

#hero_content_identifier_txt_home_screen {
    float: right;
    margin-top: 10px;
}

/*CONTENT CONTAINERS AND ROWS*/
.content_rows {
    width: 100%;
    height: 220px;
    /*background: grey;*/
    margin-top: 30px;
}

#indie_content_carousel {
    width: 100%;
    height: 180px;
    margin-top: 10px;
    /*background: yellow;*/
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

/*USING CLASS FOR ALL CAROUSEL*/
.content_carousel {
    width: 100%;
    height: 180px;
    margin-top: 10px;
    /*background: yellow;*/
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.content_carousel_01 {
    width: 100%;
    height: 180px;
    position: relative;
    top: -100px;
    margin-top: 10px;
    /*background: yellow;*/
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.small_carousel_item {
    width: 320px;
    height: 180px;
    background: #4A4A4A;
    display: inline-block;
    margin-right: 26px;
}

.indie_content_item_1 {
    background: url("../img/playtrailers_content_item.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.indie_content_item_2 {
    background: url("../img/xrtrailers_loki_thumbnail.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.indie_content_item_3 {
    background: url("../img/xrtrailers_wutang_saga_thumbnail_v7.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.indie_content_item_4 {
    background: url("../img/xrtrailers_nba_nets_vs_goldenstate_thumbnail.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.indie_content_item_5 {
    background: url("../img/transformersone/playtrailers__transformers_one_thumbnail_320x180.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.indie_content_item_6 {
    background: url("../img/captainamericabravenewworld/playtrailers_captain_america_thumbnail_320x180.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.indie_content_item_7 {
    background: url("../img/ashoka/playtrailers_ashoka_thumbnail_320x180.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.indie_content_item_9 {
    background: url("../img/teenage-mutant-ninja-turtles-mutant-mayhem/xrtrailers_tmnt_mutant_mayhem_320x180.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.content_title {
    margin-top: 40px;
}

#content_2 {
    position: relative;
    top: -100px;
    right: 0px;
    height: 100%;
    /*background: yellow;*/
}

.content_carousel_02 {
    width: 100%;
    height: 180px;
    position: relative;
    top: -100px;
    margin-top: 10px;
    /*background: yellow;*/
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

#content_3 {
    position: relative;
    top: -100px;
    right: 0px;
    height: 100%;
    /*background: yellow;*/
}

/*ARROW CONTENT SLIDER*/
a.content_arrow {
    position: relative; 
    top: 50px; 
    left: 1000px; 
    z-index: 1;
    font-size: 16px;
}

a:hover.content_arrow {
    position: relative; 
    top: 50px; 
    left: 1000px; 
    z-index: 1;
    font-size: 16px;
}

#experience_selection {
	float: right;
}

#highlights {
    width: 100%;
    height: 300px;
    margin-top: 10px;
    margin-bottom: 200px;
    background: #4A4A4A;
	background-image: url("../img/xrtrailers_highlight_item.png");
	background-repeat: no-repeat;
	background-size: 100% 300px;
}

#footer {
    /*background: yellow;*/
    position: relative;
    top: 655px;
    right: 0px;
	padding-bottom: 25px;
}

.footer {
    color: #ffffff;
    font-family: Helvetica, Arial;
    font-size: 16px;
    text-align: center;
	margin-bottom: 15px;
}

#video_player {
	width: 100%;
	height: 450px;
	padding-left: 55px;
}
.video_player_main {
	margin-top: 25px;
	align-content: center;
}