@charset "UTF-8";
/***************************************
LAYOUT STYLES
****************************************/

div#wrapper { 
    display: flex;
    flex-flow: row;
}

div#lft_sidebar {
    width: 265px;
    flex: initial;
    order: 1;
    margin-right: 5px;
	padding-right: 5px;
	background: rgba(30, 16, 18, 0.95);
    border-radius: 10px;
}

div#main_content {
    width: 600px;
    flex: initial;
    order: 2;
    margin-right: 5px;
    padding-bottom: 20px;
	background: rgba(30, 16, 18, 0.95);
	border-radius: 10px;
}

div#rgt_sidebar {
    flex: 1;
    order: 3;
	background: rgba(30, 16, 18, 0.95);
	border-radius: 10px;
}

footer#footer { 
    order: 4;
    margin-top: 5px;
    max-width: 1200px;
	margin: 0 auto; 
    margin-top: 5px;
}

/*---------Navigation -------------*/

div#wrapper div#lft_sidebar section#nav-container nav.navigation ul.nav li a.current { padding-top: 30px; }

nav.topnav { display: none; }

/* ---------------- lft_sidebar specific styles ----------------*/

/* ------- most_popular_movies specific styles -----------*/

section.section_default h1, h2, h5 {
	 position:absolute;
	 left:-2000em;
}

div#lft_sidebar section { padding-bottom: 30px; }

#header_most_popular_movies {
	margin: 0px 0px 15px 0px;
	width: 100%;
	height: 55px;
	background: #F3D61C no-repeat;
	border-radius: 10px;
}

#header_most_popular_movies h4 { text-align: center; }

.us_flag_icon {
	width: 100%;
	height: 30px;
	margin: 0px 7px 0px 50px;
}

.us_flag_icon ul li {
	display: inline-block;
	color: #FFFFFF;
    text-align: center;
}

.us_flag_icon ul li img {
	width: 20px;
    height; 12px;
}

div.most_popular_movies {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

.left_ul_img {
	margin: 0px 0px 20px 7px;
	list-style-type: none;
	width: 30%;
}

.left_ul_img li a img {width: 100%; }

.left_ul {
	margin: 0px 0px 20px 0px;
	width: 50%;
	color: #FFF;
	list-style-type: none;
}

.left_ul li:first-child { font-weight: bold; }

p.note { 
    font-size: .8em;
    margin: 20px 10px 30px 10px; 
}

/*------ contentslider styles -------------------*/
 /* Color, Border, and Button Rules */

.contentslider { padding: 0px; /* This acts as a border for the content slider */ }

.cs_leftBtn, .cs_rightBtn { width: 30px; /* Should be as wide as the button graphic being used */ }

/*
 ******************************************************************************
 * These styles may be affected by the plugin, so avoid changing them if 
 * it's not absolutely necessary.
 ******************************************************************************
 */

.cs_article {
  position: relative;
  top: 0;
  left: 5px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}

.cs_article img {
  float: left;
  top: 0;
  left: 0;
  width: 100%;
  margin: 20px 0px 0px 0px;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

/* ---------------- most_popular_documentaries specific styles ----------------*/

#header_most_popular_documentaries {
	margin: 0px 0px 15px 0px;
	width: 100%;
	height: 55px;
	background: #F3D61C no-repeat;
	border-radius: 10px;
}

#header_most_popular_documentaries h4 { text-align: center; }

/* ---------------- main_content specific styles ----------------*/
/* ---------------- the_greatest_movies_of_all_time specific styles ----------------*/

div#header_the_greatest_movies_of_all_time {
	width: 100%;
	height: 60px;
	background: #F3D61C no-repeat;
	border-radius: 10px;
}

#tabs {
	font-size: 1.2em;
	margin: 5px 0;
    width: 100%;
}

#tabs_ul { width: 100%; }

#tabs li {
	margin-left: 5px;
	list-style-type: none;
}

#tabs_ul li,
#tabs_ul li a {
	float: left;
	position: relative;
	top: -17px;
	right: -50px;
}

#tabs_ul li a {
	text-decoration: none;
	padding: 2px;
	color: #FFFFFF;
}

#tabs ul li.active a { color: #000; }

#tabs ul li a:hover {
	font-weight: bold;
	color: #DB3827;
}

.tab_content {
	position: relative;
	padding-top: 20px;
	padding-left: 10px;
}

.tab_content a { margin-right: 5px; }

.tab_content h4 {
    position: relative;
	color: #FFF;
	margin-bottom: 30px;
    margin-left: 10px;
    left: -200px;
}

.main_ul_img {
	float: left;
	width: 40%;
	margin-left: 20px;
    margin-right: 20px;
	list-style-type: none;
}

.main_ul {
	float: left;
	width: 50%;
	color: #FFF;
	list-style-type: none;
	/*margin: 0px;*/
    padding-bottom: 250px;
}

.main_ul a {
	color: #CDEBF2;
	text-decoration: none;
}

.main_ul li:first-child { font-weight: bold; }

p.note {
	clear: both;
	margin-left: 30px;
	color: #FFF;
}

/* ---------------- rgt_sidebar specific styles ---------------*/

#header_greatest_romantic_comedies {
	width: 100%;
	height: 30px;
	background: #F3D61C no-repeat;
	border-radius: 10px;
}

#header_greatest_romantic_comedies h6 { 
    color: black;
    text-align: center;
    padding-top: 4px;
    font-weight: 400;
}

#header_greatest_adventure_movies {
	width: 100%;
	height: 30px;
	background: #F3D61C no-repeat;
	border-radius: 10px;
}

#header_greatest_adventure_movies h6 { 
    color: black;
    text-align: center;
    padding-top: 4px;
    font-weight: 400;
}

#header_most_popular_animations {
	width: 100%;
	height: 30px;
	background: #F3D61C no-repeat;
	border-radius: 10px;
    margin-top: 30px;
}

#header_most_popular_animations h6 { 
    color: black;
    text-align: center;
    padding-top: 4px;
    font-weight: 400;
}

div#us_flag_icon_rt { 
    margin: 0px auto;
    width: 95%;
    padding: 10px;
    margin-bottom: -50px;
}

#us_flag_icon_rt li {
    display: inline-block;
	margin-left: 7px;
	text-decoration: none;
	list-style-type: none;
	color: #FFFFFF;
	display: inline-block;
}

.rt_ul_img {
	float: left;
	margin: 20px 10px 20px 5px;
	list-style-type: none;
	width: 136px;
	height: 185px;
	clear: both;
}

.rt_ul {
	float: left;
	color: #FFF;
	list-style-type: none;
	width: 130px;
	margin-top: 40px;
	margin-left: 10px;
}

.rt_ul li:first-child { font-weight: bold; }

/* --------------------------------------- */



/*------ MEDIA QUERIES ------*/

@media screen and (max-width: 1180px) {
    
    /* right sidebar */
    div.cs_article { 
        display: flex; 
        flex-flow: column;
        padding: 10px;
    }
    
    ul.rt_ul_img {
        float: none;
        margin: 10px auto;
        width: 60%
    }
    ul.rt_ul {
        float: none;
        margin: 40px 10px 0px 10px;
        /*padding-top: 10px;*/
        padding-left: 20px;
        width: 95%;
        text-align: center;
    }
    
}

@media screen and (max-width: 1120px) {
    
    /* right sidebar */
    #header_greatest_romantic_comedies { height: 60px; }
    
    ul.rt_ul { margin-top: 20px;}
    
}

@media screen and (max-width: 1100px) {
    
    /* right sidebar */
    #header_most_popular_animations { height: 60px; }
    
    ul.rt_ul_img { width: 70%}
    
    ul.rt_ul { margin-top: 30px;}
    
}

@media screen and (max-width: 1085px) {
    
    /* right sidebar */
    ul.rt_ul_img {
        margin-left: 20px;
        width: 70%
    }
    
    ul.rt_ul { margin: 20px 10px 0px 0px; }
    
    div#us_flag_icon_rt { 
        margin: 0px;
        width: 95%;
    }
    
    div#us_flag_icon_rt h6 { 
        font-size: .75em;
        font-weight: 400; 
    }
    
}

@media screen and (max-width: 1070px) {

    /* right sidebar */
    ul.rt_ul_img {
        margin-left: 0px;
        width: 80%
    }
    
    ul.rt_ul { 
        margin: 25px 10px 0px 0px;
        padding-left: 10px;
    }

}

@media screen and (max-width: 1050px) {

    /* right sidebar */
    div#rgt_sidebar { min-width: 175px; }
    
    ul.rt_ul { margin-top: 0px; }
    
    div#us_flag_icon_rt { 
        padding-bottom: 0px;
        margin-bottom: -50px;
    }
    
}

@media screen and (max-width: 1025px) {
	
	/* Header */
	header#main_header {
		background: url(../_images/index/home_background_header_ps_1117.png) no-repeat left top;
	}

    /* left sidebar */
    #header_most_popular_movies h4, #header_most_popular_documentaries h4 { font-size: .85em; }
    
    div.us_flag_icon ul li { font-size: .75em; }
    
    div.most_popular_movies { 
        flex-flow: column;
        width: 90%;
    }
    
    ul.left_ul_img { width: 100%; }
    
    ul.left_ul_img li a img { 
        width: 45%;
        margin-left: 20px;
    }
    
    ul.left_ul li { 
        width: 100%; 
        text-align: left;
        margin: -10px 0px 10px 45px;
    }
    
     /* right sidebar */
    #header_greatest_romantic_comedies h6, #header_most_popular_animations h6 { 
        font-weight: 400;
        font-size: .85em; 
    }
    
}

@media screen and (max-width: 950px) {
    
    /* Header */
	header#main_header { background: url(../_images/index/home_background_header_ps_1020_no_tagline.png) no-repeat; }
    
    /* Navigation */
    section#nav-container { display: none; }
    
    nav.topnav {
        display: block;
        margin-top: -80px;
        background-color: #1E1012;
        overflow: hidden;
    }

    nav.topnav a {
        float: left;
        display: block;
        color: #F49321;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    nav.topnav a:hover {
        background-color: #F2B81C;
        color: black;
    }
    
    /* Nav: dropdown container */
    nav.topnav div.dropdown {
      float: left;
      overflow: hidden;
    }

    /* Dropdown button */
    nav.topnav div.dropdown button.dropbtn {
      font-size: 16px; 
      border: none;
      outline: none;
      color: #F49321;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit; /* Important for vertical align on mobile phones */
      margin: 0; /* Important for vertical align on mobile phones */
    }

    /* Add a background color to navbar links on hover */
    nav.topnav a:hover, div.dropdown:hover button.dropbtn:hover {
        background-color: #F49321;
        color: black;
    }

    /* Dropdown content (hidden by default) */
    nav.topnav div.dropdown div.dropdown-content {
      display: none;
      position: absolute;
      background-color: #20212A;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    /* Links inside the dropdown */
    nav.topnav div.dropdown div.dropdown-content a {
      float: none;
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    /* Add a background color to dropdown links on hover */
    nav.topnav div.dropdown .dropdown-content a:hover {
      background-color: #F49321; opacity: 0.8;
      color: black;
    }

    nav.topnav a.active {
        background-color: #F49321;
        color: white;
    }

    /* Show the dropdown menu on hover */
    nav.topnav div.dropdown:hover .dropdown-content { display: block; }
    
    div#wrapper { margin-top: 0px; }

    /* left sidebar */
    .us_flag_icon { margin-left: 10px;}
    
    #header_most_popular_documentaries { height: 90px; }
    
    ul.left_ul_img li a img { 
        width: 124px;
        margin-left: 10px;
    }
    
    ul.left_ul ( width: 100%; )
    
    /* main content */
    .tab_content h4 { 
        left: -100px;
        width: 100%; 
    }
    
}

@media screen and (max-width: 900px) {
    

    /* left sidebar */
    #header_most_popular_documentaries { height: 80px; }
    
    /* main content */
    .tab_content h4 { 
        margin-top: 35px;
        left: 0;
        width: 90%;
    }
    
    .main_ul {
        width: 50%;
        margin-left: 50px;
        padding-bottom: 50px;
    }
    
}

@media screen and (max-width: 800px) {
    

    /* left sidebar */
    div.most_popular_movies ul.left_ul li { font-size: .85em; }
    
    /* right sidebar */
    div.cs_article ul.rt_ul li { font-size: .85em; }
      
}

@media screen and (max-width: 760px) {
    
    
    /* left sidebar */
    div#lft_sidebar { min-width: 175px; }
    
    
    /* main content */
    div#header_the_greatest_movies_of_all_time h3 { font-size: 1em; }
    div#tabs ul#tabs_ul li a { font-size: .9em; }
    
}

@media screen and (max-width: 675px) {
    
    /* main content */
    div#header_the_greatest_movies_of_all_time h3 { font-size: .9em; }
    
    div#tabs ul#tabs_ul li a { font-size: .85em; }
    
    div#tabs { margin-top: 40px; }
    
    ul#tabs_ul { margin-left: -60px; }
    
    div.tab_content { margin-top: -40px; }
    
    div.tab_content h4 { font-size: .8em; }
    
    div.tab_content ul.main_ul li { font-size: .9em; }
    
}

@media screen and (max-width: 640px) {
    
    /* main content */
    div#header_the_greatest_movies_of_all_time { height: 90px; }
    
    div#header_the_greatest_movies_of_all_time h3 { 
        padding-right: 10px; 
        text-align: center;
    }
    
    div.tab_content ul.main_ul_img li a img { width: 180%;  }
    
    div.tab_content ul.main_ul li { font-size: .85em; }
    
}

@media screen and (max-width: 620px) {
    
    /* main content */
    ul#tabs_ul { margin-left: -80px; }
      
}

@media screen and (max-width: 600px) {
    
    /* main content */
    ul#tabs_ul { margin-left: -100px; }
      
}

@media screen and (max-width: 560px) {
    
    /* main content */
    div#tabs ul#tabs_ul li a { font-size: .75em; }
      
}

@media screen and (max-width: 540px) {
    
    /* main content */
    div#header_the_greatest_movies_of_all_time h3 { font-size: .85em; }
    
    div#tabs ul#tabs_ul li a { font-size: .70em; }
      
}

@media screen and (max-width: 530px) {
    
    /* main content */
    div#tabs ul#tabs_ul li a { font-size: .6em; }
    
    div.tab_content h4 { 
        margin-top: 6px;
        margin-left: 0px;
        font-size: .7em;
        text-align: center; 
    }
    
    div.tab_content ul.main_ul_img { margin-left: 10px; }
    
    div.tab_content ul.main_ul { margin-left: 30px; }
    
    div.tab_content ul.main_ul li { font-size: .7em; }
      
}

@media screen and (max-width: 520px) {
    
    /* left sidebar */
    div#lft_sidebar { min-width: 170px; }
    
    /* main content */
    div#header_the_greatest_movies_of_all_time { height: 110px; }
    
    /* right sidebar */
    div#rgt_sidebar { min-width: 170px; }
    
}

@media screen and (max-width: 510px) {
    
    /* left sidebar */
    div#lft_sidebar { min-width: 165px; }
    
    /* right sidebar */
    div#rgt_sidebar { min-width: 165px; }
    
}