/*
-----------------------------------------------------------------------
* Template Name    : MovieLand, Free Landing Page Template for CPA Marketers * 
* Author           : LandingPager.rocks                               *
* Version          : 1.0.0                                            *
* Created          : Sept 2018                                        *
* File Description : Main Css file of the template                    * 
*----------------------------------------------------------------------
*/

/***********************
    1.BASIC           
    2.HELPER & MISC
    3.HEADER
    4.FILM INFORMATION
	5.FAKE MOVIE PLAYER
	6.FILM ACTORS
	7.FOOTER
	8.MODALS
	9.RESPONSIVE
************************/
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700|Roboto:100,300,400,600,700');

/*======================
        1.BASIC
========================*/
html,
body {
    font-family: 'Roboto', sans-serif;
    
	font-size: 1rem;
	line-height:1.5;
	font-weight: 400;
	color:#9a9a9a;
	padding-right: 0 !important ;
	background: #f3f5f7;
}

body {
	overflow-x: hidden;
	overflow-y: auto;
	-ms-word-break: break-all;
		word-break: break-all;
		word-break: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', sans-serif;
	color:#212529;
	font-weight: 300;
	text-transform: capitalize;
}
a {
	color:#e50914;
}
a:hover,
a:focus,
button:focus {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
	transition: all 0.3s ease-in-out;
	color:#B60009;
}

::selection {
    background: rgba(166, 175, 189, 0.3);
}

::-moz-selection {
    background: rgba(166, 175, 189, 0.3);
}

.btn {
	padding: 10px 22px;
}
b, strong {
	font-weight: bold;
}
/*==========================
        2.HELPER
============================*/
.btn {
	white-space: normal;
}
.mb-0 p {
	margin-bottom: 0;
}
.section:first-child {
	padding: 80px 0px 40px 0px;
}

.section {
	padding: 40px 0px;
	position: relative;
    background-color: #f3f5f7;
}

.main-color-theme {
	color:#e50914;
}

a.main-color-theme:hover {
	color:#B60009;
}

.main-bg-theme {
	background-color:#e50914;
}

a.main-bg-theme:hover {
	background-color:#B60009;
	transition: all 0.5s ease-in-out;
}

a.dark-bg-theme:hover {
	background-color:#191E28;
	transition: all 0.5s ease-in-out;
}


.dark-bg-theme {
	background-color:#101010;
}

.white-bg-theme {
	background-color:#fff;
}

.bg-overlay {
	background: rgba(25, 30, 40, 0.88);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.heading-section {
	margin-bottom: 60px;
}

.heading-section-icon {
	display: flex;
	align-items:center;
	justify-content: center;
}

.heading-section-icon i {
	font-size: 24px;
	color:#fec42d;
}

i.sicon {
	font-size: 14px;
}
i.micon {
	font-size: 16px;
}

.heading-section p {
	font-size: 18px;
}

.icon-head i {
	font-size: 24px;
    height: 70px;
    line-height: 70px;
    width: 70px;
    background-color: #e50914;
    display: inline-block;
    border-radius: 50%;
	color:#fff;
	margin-top: -35px;
	margin-bottom: 25px;
}

.section hr {
	margin-top: 80px;
	margin-bottom: 80px;
}

/*==========================
        3. HEADER
============================*/
.header_wrapper {
	background-image:url(../img/bg-image-01.jpg);
	background-size: cover;
    background-position: center center;
	position:relative;
	width: 100%;
}

.bg_header_overlay {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(2, 2, 2, 0.7);
}

.logo_wrapper {
	padding: 30px 0px;
	width:100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	position: relative;
	background: rbga (0, 0, 0, 0.46)
}

.logo_wrapper img {
	max-height: 50px;
	width: auto;
}

.navbar-brand {
	margin: 0 auto;
}

.heading_title {
	padding: 10px 0px;
	position:relative;
	background: linear-gradient(90deg, #e50914 92%, rgba(255, 255, 255, 0) 8%);
}

.heading_title h1 {
	color:#fff;
}

.featured_area {
	color:#fff;
	padding: 80px 0px;
	position: relative;
}

.movie_poster img {
	width:100%;
}

.movie_rating_score p {
	font-size: 13px;
	display: inline-flex;
}

.movie_rating_score span {
	display:inherit;
	align-items: center;
}

.movie_rating_score .rating_icons i {
	font-size: 20px;
	display:inline-block;
	color:#fec42d;
}

.rating_icons {
	margin-right: 10px;
	word-spacing: -6px;
}

.movie_desc h2 {
	line-height: 150%;
}

.d-block .subtext:nth-child(2) {
	margin: 0px 20px;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	padding: 0px 20px;
}

.subtext {
	line-height: 100%;
}

.movie_cta_btn {
	margin-top: 35px;
}

.movie_cta_btn i {
	font-size: 30px;
	line-height: 100%;
	vertical-align: middle;
}

.movie_cta_btn .btn {
	padding: 15px 35px;
	text-transform: uppercase;
	border-radius: 30px;
	font-size: 14px;
}

.movie_cta_btn .btn:last-child {
	margin-left: 20px;
}

.movie_cta_btn .btn-outline-light {
	border: 2px solid #fff;
	padding: 14px 34px;
}

.movie_cta_btn .main-bg-theme,
.movie_cta_btn .main-bg-theme:hover{
	color:#fff;
}
.movie_cta_btn .btn-outline-light:hover {
	color:#e50914;
}

.crew_avatar {
	width: 50px;
	margin-right: 15px;
}

.crew_avatar img {
	width:100%;
}

.crew_role {
	font-size: 13px;
	
}

.crew_name {
	font-weight: 500;
}

/*==========================
        4.FILM INFORMATION
============================*/

.boxed_content {
	padding: 60px;
	box-shadow: 0 0 40px rgba(39, 42, 51, .15);
	-webkit-box-shadow: 0 0 40px rgba(39, 42, 51, .15);
	-moz-box-shadow: 0 0 40px rgba(39, 42, 51, .15);
	border-radius: 6px;
}

.section_heading {
	margin-left: -60px;
	padding: 10px;
}

.section_heading h3 {
	padding: 0px 60px;
	color:#fff;
}

.movie_info_list .table {
	background:#f1f3f5;
	margin-bottom:0;
}

.movie_info_list .table th {
	padding: 10px 20px;
	width:30%;
	text-transform: capitalize;
	vertical-align: middle;
}

.movie_info_list .table tr {
	border-bottom: 1px solid #dedede;
}

.table td, .table th {
	padding: 15px 20px;
}
.table td, .table th {
	border-top: none;
}

.movie_info_list .table tr {
	padding: 10px 20px;
}

.movie_info_list .table i {
	color:#e50914;
	font-size:18px;
	margin-right: 10px;
}
/*==========================
        5.MOVIE PLAYER
============================*/
.video_wrapper {
	height: 100%;
    width: 100%;
	cursor: pointer;
}

.video_wrapper:hover {
	cursor: pointer;
}

.video_wrapper2 {
	height: 100%;
    width: 100%;
	cursor: pointer;
}

.video_wrapper2:hover {
	cursor: pointer;
}

#my_movie {
	width: 100%;
	height: auto;
	position: relative;
	display: block;
	background:url(../img/video_poster.jpg) no-repeat center center;
	background-size: cover;
}

#video_controls {
	height: 40px;
	background:#000;
	display: flex;
	align-items: center;
	padding: 0px 20px;
	position: relative;
	margin-top: -40px;
}

.buttons_ctrl {
	display: flex;
	align-items: center;
}

.pause_movie_btn {
	display:none;
}

.play_movie_btn i , .pause_movie_btn i {
	color:#cecece;
	font-size: 24px;
}

.volume_movie_btn i, .volume_muted i {
	color:#cecece;
	font-size: 18px;
}

.volume_movie_btn, .volume_muted {
	margin-top: 3px;
	margin-left: 10px;
}

.setting_movie_btn i {
	color:#cecece;
	font-size: 18px;
}

.setting_movie_btn {
	right: 42px;
	position: absolute;
	background:#000;
	padding-left: 20px;
	padding-right: 10px;
	z-index: 15;
	
}

.full_movie_btn i{
	color:#cecece;
	font-size: 22px;
}

.full_movie_btn {
	right: 25px;
	position: absolute;
	z-index: 16;
}

.movie_time {
	margin-left: 30px;
	font-size: 14px;
}


.movie_time_bar{
	width:68%;
	padding:0;
	background:#cecece;
	z-index:7;
	height:4px;
	display: flex;
	margin-left: 30px;
}
.progress_time{
	width:0;
	background:red;
	z-index:13;
}
.buffer_time{
	width:0;
	background:#878687;
	z-index:10;
}

.tooltip-inner {
	border-radius: .15rem;
	background-color:#c6aa28 !important;
	font-family: 'Roboto',sans-serif;
	font-size: 14px;
}

/*==========================
        6.MOVIE ACTORS
============================*/

.actor_area {
	margin: 20px 0px;
}
.actor_area img {
	display:block;
	width: 80px;
	height: auto;
	margin: 0 auto;
	margin-bottom: 15px;
}

.actor_name {
	font-weight: bold;
	margin-bottom: 10px;
}

.actor_role {
	
}

.movie_cta_btn .dark-bg-theme {
	color:#fff;
}

.movie_cta_btn .dark-bg-theme:hover {
	background:#000;
}

/*==========================
        7.FOOTER
============================*/
.footer {
	background:#000;
	color:#a3a5a7;
	padding: 60px 0px;
	margin-top: 40px;
}

.footer_text {
	font-size: 14px;
}

.footer_text p:last-child {
	margin-bottom: 0;
}

.footer_links a{
	margin: 0px 20px;
	text-transform: capitalize;
}

.dmca_logo {
	max-height: 40px;
	margin-bottom: 20px;
}

/*==========================
        9.MODALS
============================*/

.modal-header h5 {
	color:#fff !important;
	padding: auto 30px;
}

#terms_modal .close, #priv_polmodal .close, #dmca_modal .close, #contact_modal .close {
	color:#B60009;
	font-weight: normal;
}

.modal-header {
	padding: 15px 30px;
}

.modal-body {
	padding: 30px;
}

#cta_modal .modal-header h5{
	margin: 0 auto;
}

/*==========================
        9.RESPONSIVE
============================*/
@media (max-width: 576px) {
	.movie_cta_btn {
		text-align: center;
	}
	
	.movie_cta_btn a:last-child {
		margin-left: 0 !important;
		margin-top: 20px !important;
	}
	
	.boxed_content {
		padding: 30px;
	}
	
	.section_heading {
		margin-left: -30px;
	}
	
	table.table tr {
		max-width:100%;
		float:left;
	}
	
	table.table td {
		max-width: 100%;
		float: left;
		-ms-word-break: break-all;
		word-break: break-all;
		word-break: break-word;
	}
	
	.hide_xtra_small {
		display: none;
	}
}

@media (max-width: 640px) {
	table.table tr {
		max-width:100%;
		float:left;
	}
	
	table.table td {
		
		-ms-word-break: break-all;
		word-break: break-all;
		word-break: break-word;
	}
	
	.hide_xtra_small {
		display: none;
	}
	
}

@media (max-width: 720px) {
	.section {
		padding: 0px 20px !important;
		margin: 40px 0px;
	}
	
	
}

@media (max-width: 992px) {
	.hide_xtra_small {
		display: none;
	}
	.row .featured_crew {
		margin: 10px 0px;
	}
}