/* ====================================================== Description: This File is Extending For ((style.css)) For Responsive Purposes ====================================================== #LastEdit by Youssef Ragab on 4/3/2018 ========== Table of Contents ========================= 1. Body Direction 2. Media Quries ====================================================== */ body { direction: ltr; } .shows-panel .row { direction: rtl; } .shows-panel .row .show { direction: ltr; } @media screen and (max-width:1275px) and (min-width:1099px) { .s-btn { width: 24%; } } @media screen and (max-width:1099px) and (min-width:992px) { .s-btn { width: 23%; } } @media screen and (max-width:2000px) and (min-width:1350px) { .s-btn { width: 25%; } } @media screen and (max-width:768px) { .server { height:auto; } .server-container { padding:0px; } .server iframe { height:250px; } .sec { width: 47%; margin-left: 10px; margin-right: 10px; } .sections { padding-right: 0px; padding-bottom: 0px; } .sec-items { padding: 0; float: right; position: relative; left: 50%; transform: translateX(-50%); width: 100%; min-height: 120px; overflow: auto; } .sec-items .btn i { font-size: auto; } } @media screen and (max-width: 992px) { .mobile-search-btn { display:block; } .user-opinion .link-report .report { display:none; } .mobile-rep { display:block; } nav .nav-wrapper { padding: 0; } nav .nav-wrapper .mob-men { top: 1px; } .logo-container { position: absolute; right: 0px; padding-right: 10px; } .menu { display: none; } .side-nav .menu { display: block; } } @media screen and (max-width:666px) { .sec { width: 45%; } } @media screen and (max-width: 500px) { .sec { font-size: 14pt; } } @media screen and (max-width: 399px) { .sec { width: 43%; font-size: 12pt; margin-left: 5px; margin-right: 15px } } @media screen and (max-width: 348px ) { .sec { font-size: 11pt; } } @media screen and (max-width:560px) { .week-show-icon { height: 50px; text-align: center; padding: 12px 25px 10px 25px; background-color: #222630; z-index: 10; } } @media screen and (max-width:561px) { .show-play { width: 100%; } .week-show-desc p { font-size: 11pt; } .week-show-icon h3 { font-size: 14pt; } .show-play i img { right:45px; } } @media screen and (max-width:426px) { .week-show-desc p { font-size: 10pt; } } @media screen and (max-width:850px) and (min-width:768px) { .week-show-desc { right: 210px; } } @media screen and (max-width:400px) { .week-show-name h3 { font-size: 14pt; } .shows-panel { padding-right: 40px; padding-left: 40px; } .next-page { padding: 10px 20px 10px 20px } } @media screen and (max-width:380px) { .week-show-desc { left: 0; right: 0; margin-left: auto; margin-right: auto; min-width: 10px; } .edit { width: 200px; } .edit i img { right:25px; } } @media screen and (max-width:1097px) { .pagination { padding-right: 175px; padding-left: 125px; } } @media screen and (max-width:996px) { .pagination { padding-right: 0px; padding-left: 0px; } } @media screen and (max-width:500px) { .pagination { padding-right: 30px; padding-left: 30px; } .keyword { font-size:12pt; } } @media screen and (max-width:412px) { .pagination { padding-right: 25px; padding-left: 25px; } .keyword { font-size:10pt; } } @media screen and (max-width:825px) { .footer h2 { display:block; text-align:center; margin-bottom:10px; } .left-footer { display:block; position:static; margin-bottom:0px; } .footer-info .meta-footer li { float:none; display:inline-block; } .footer-info .meta-footer { float: right; width: 100%; text-align: center; direction:rtl; } .social-media-footer { margin-top:15px; } } @media screen and (max-width:1230px) and (min-width:1050px) { .soon-shows i img { right:30px; } } @media screen and (max-width:1050px) and (min-width:976px) { .soon-shows i img { right:20px; } } @media screen and (max-width:1040px) and (min-width:976px) { .show-play i img { right:25px; } } @media screen and (max-width:759px) and (min-width:730px) { .show-play i img { right:70px; } } @media screen and (max-width:700px) and (min-width:450px) { .alarm { max-width:400px; min-height:450px; } .alarm button { width:25%; margin-top:11px; } } @media screen and (max-width:449px) and (min-width:350px) { .alarm { max-width:350px; min-height:480px; } .alarm input { width:50%; font-size:10pt; } .alarm button { width:25%; font-size:8pt; padding:13px; margin-top:12px; } } @media screen and (max-width:360px) { .alarm input { width:90%; margin:0 auto; margin-right:5px; } .alarm { height:500px; width:300px; } .alarm button { width:50%; margin-right:100px; margin-left:70px; } } @media screen and (max-width:299px) { .alarm { height:550px; width:200px; } } @media screen and (max-width:1161px) { .bar { overflow: auto; } } @media screen and (max-width:630px) and (min-width:540px) { .bar-item-inner h5 { font-size:12pt; position: relative; top: -3px; } } @media screen and (max-width:560px) { .bar { padding: 0; } .bar-item { width: 50%; margin-bottom: 10px; float: right; text-align: center; } .bar-item-inner h5 { font-size:12pt; position: relative; top: -3px; } } @media screen and (max-width:1248px) and (min-width:1170px) { .single-show-info { padding:10px 30px 10px 10px; } .single-show-info-left { width: 74%; } } @media screen and (max-width:1169px) and (min-width:1000px) { .single-show-info-left { width:75%; } .single-show-info-right { width: 25%; } .single-show-img { width: auto; } .user-opinion { width: auto; } .single-show-info { padding-right:10px; } } @media screen and (max-width:999px) and (min-width:800px) { .single-show-info-right { width: 30%; } .single-show-info-left { width: 70%; } .single-show-img { width: auto; } .user-opinion { width: auto; } .single-show-info { padding-right:10px; } } @media screen and (max-width:799px) and (min-width:671px) { .single-show-info-right { width: 40%; } .single-show-info-left { width: 60%; } .single-show-img { width: auto; } .user-opinion { width: auto; } .single-show-info { padding-right:10px; } } @media screen and (max-width:670px) and (min-width:450px) { .single-show-info-right { width: 100%; } .single-show-info-left { width: 100%; } .single-show-img { width: auto; } .user-opinion { width: auto; } .single-show-info { padding: 20px 70px; } .user-opinion { display: none; } .single-show-info-left { padding: 0; } .mobile { display:block; } } @media screen and (max-width:450px) { .single-show-info-right { width: 100%; } .single-show-info-left { width: 100%; } .single-show-img { width: auto; } .user-opinion { width: auto; } .single-show-info { padding: 20px 20px; } .single-show-name h3 { font-size: 12pt; } .single-show-info-left { padding: 0; } .user-opinion { display: none; } .mobile { display:block; } .shows-panel { padding-right: 50px; padding-left: 50px; } } @media screen and (max-width:450px) { .single-show-story-content { font-size: 12pt; } .social-media-footer { width: 100%; text-align: center; } .social-media-footer li { float: none; display: inline-block; text-align: center; } } @media screen and (max-width:450px) { .value, .item { font-size: 12pt; } .items-2 .value { padding-top: 3px; padding-bottom: 4px; font-size: 12pt; } .items-2 .value div { padding: 3.5px 10px 3.5px 10px; margin-bottom: 3px; height:auto; } } @media screen and (max-width:400px) { .bar { padding-right: 0; } .bar-item { margin-right: 0; } } @media screen and (max-width:400px) { .comment-content h4 { font-size: 12pt; } .commenter-name h4 { font-size: 12pt; } .comment-date h4 { font-size: 11pt; } } @media screen and (max-width:1120px) and (min-width:1101px) { .simillar-show .col.m2 { width: 22%; height: 250px; } .simillar-panel { padding-right: 20px; } } @media screen and (max-width:1100px) { .simillar-show .col.m2 { width: 29%; } .simillar-panel { padding-right: 0px; padding-left: 0px; } } @media screen and (max-width:975px) and (min-width:780px) { .simillar-show .col.m2 { width: 45%; } } @media screen and (max-width:779px) and (min-width:400px) { .simillar-show-container { padding-right: 95px; } .simillar-show .col.m2 { width: 65%; } } @media screen and (max-width:670px) and (min-width:551px) { .simillar-show-container { padding-right: 100px; padding-left: 100px; } .simillar-show .col.m2 { width: 100%; } } @media screen and (max-width:550px) { .simillar-show-container { padding-right: 50px; padding-left: 50px; } .simillar-show .col.m2 { width: 100%; } } @media screen and (max-width:400px) { .simillar-show-container { padding-right:25px; padding-left: 30px; } .simillar-show .col.m2 { width: 100%; } .single-show-name { margin-bottom: 20px; } .story-logan h5 { font-size: 12pt; } } @media screen and (max-width:1248px) { .download { width: 48%; } } @media screen and (max-width:872px) and (min-width:781px) { .download { width: 46%; } .download-container { padding-right: 35px; } } @media screen and (max-width:780px) { .download { width: 100%; } .download-container { padding-right: 25px; } } @media screen and (max-width:400px) { .download h4 { font-size: 12pt; } } @media screen and (max-width:1161px) and (min-width:993px) { .bar { margin-bottom: 15px; } .movie-page-single-show-info { position: relative; bottom: 13px; } } @media screen and (max-width:450px) { .opinion-logo h3 { font-size: 12pt; } } @media screen and (max-width:1440px) and (min-width:1366px) { .single-show-info-left { width: 78%; } } @media screen and (max-width:1365px) and (min-width:1300px) { .single-show-info-left { width: 76%; } } @media screen and (max-width:973px) { .editing img { width: 65px; height: 65px; } .movie-page-single-show-info { padding-top: 15px; } } @media screen and (max-width:999px) { .edit-something img { width: 65px; height: 65px; } } @media screen and (max-width:768px) { .trailer-container { padding:49px 10px 15px 10px; } .footer a h3 { position: static; margin-top: 0px; } .footer { padding-right: 15px; padding-left: 15px; } } @media screen and (max-width:1199px) { .contact-inputs-container form textarea { width: 100%; } .contact-inputs-container form input { width: 100%; margin-left: 0px; padding: 5px 0px 5px 0px; } } @media screen and (max-width:550px) { .contact-inputs-container { padding-right: 50px; padding-left: 50px; } } @media screen and (max-width:992px) { .contact-us-logan-container { padding-top: 60px; } } @media screen and (max-width: 600px) { nav .nav-wrapper .mob-men { top: -3px; } .logo-container h1 { font-size: 14pt; top: -5px; position: relative; } .logo-container { padding-top: 0px; padding-right: 5px } } @media screen and (max-width: 939px) { .bar { padding-right: 0px; } .bar-item-inner h5 { margin-right: 0px; position: absolute; top: 56px; width: 100%; left: 0; font-size: 11pt; } .bar-item-inner img { display: block; left: 45%; margin-top: 5px; top: 6px; position: absolute; } .bar-item-inner { padding-right: 0px; height: 60px; } .bar-item { width: 50%; height: 85px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; float: right; } } @media screen and (max-width: 700px) { .bar-item-inner img { left: 43%; } } @media screen and (max-width: 550px) { .bar-item-inner img { left: 41%; } } @media screen and (max-width: 450px) { .bar-item-inner img { left: 39%; } } @media screen and (max-width: 360px) { .bar-item-inner img { left: 37%; } } @media screen and (max-width: 670px) { .movie-page-single-show-info { padding: 20px 20px; } .week-show-icon h3 { top: 1px } } @media screen and (max-width: 767px) { .report-form-container { padding: 10px 40px; } .word-box h2 { font-size: 16pt; } .pagination { padding-right: 20px; padding-left: 20px; } .page-number h4 { font-size: 12pt; } .next-page h4 { font-size: 12pt; } .single-show-name-movie-page { padding-top: 11px; } } @media screen and (max-width:768px) { .page-not-found button { font-size:12pt; } .page-not-found h2 { font-size:14pt; } .page-not-found h1 { font-size: 98pt; margin-top: 0px; } } @media screen and (max-width: 768px) { .week-show-desc-container { left: 0px; } .week-show-name-container { left: 0px; } .week-show-button-container { right: 0px; } .report-success .check-ic-container h5 { font-size: 16pt; } .keyword { padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px; } .item-mobile { border-radius: 5px; width: 100%; margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .items-2 .value-mobile { width: 100%; border-radius: 4px; margin-bottom: 10px; border-top-right-radius: 0; border-top-left-radius: 0; padding: 10px ; min-height: 65px } .items-2 { width: 100%; } } @media screen and (max-width: 427px) { .sec-items a.sec { font-size: 12pt; } } @media screen and (max-width: 395px) { .sec-items a.sec { font-size: 10pt; padding-top: 7px; padding-bottom: 11px; } .sec-items a.sec i { position: relative; top: 1px; } .sec-items { min-height: 125px } } @media screen and (max-width: 358px) { .sec-items a.sec { font-size: 10pt; padding-top: 8px; width: 42%; } .sec-items { min-height: 125px } .sec-items a i { margin-right: 3px; } .sec-items .btn i { font-size: 1rem } } @media screen and (max-width: 342px) { .sec-items a.sec i { display: none; } } @media screen and (max-width: 1050px) { .week-show-button-container { bottom: 15px; } } @media screen and (max-width: 800px) { body { background-attachment: scroll; background-size: auto auto; height: 100vh; background-repeat: repeat-y; } } @media screen and (max-width: 575px) { .server-name { margin-bottom: 10px; } } @media screen and (max-width: 1100px) { .input-field input[type=search] ~ .material-icons { left: 19rem } nav .input-field label.active i { margin-right: 29px; } .week-show-name-container { right: 100px; } .week-show-desc-container { right: 250px; } .week-show-button-container { left: 100px; } } @media screen and (max-width: 1050px) { .input-field input[type=search] ~ .material-icons { left: 18rem } } @media screen and (max-width: 1000px) { .input-field input[type=search] ~ .material-icons { left: 17rem; } } @media screen and (max-width: 1280px) and (min-width: 1276px) { nav .input-field label.active i { margin-right: 50px; } } @media screen and (max-width: 950px) { .week-show-name-container { right: 75px; } .week-show-desc-container { right: 225px; } .week-show-button-container { left: 50px; } } @media screen and (max-width: 850px) { .week-show-desc-container { right: 175px } .week-show-name-container { right: 50px; } } @media screen and (max-width:768px) { .watch-now { width: 100%; margin-bottom: 10px; } .week-show-name-container { width: 100%; right: 0px; } .week-show-desc { width: 100%; min-height: auto } .week-show-desc-container { width: 100%; right: 0px; padding-left: 15px; padding-right: 15px; } .week-show-button-container { width: 100%; left: 0px; padding-left: 15px; padding-right: 15px; } .edit { width: 100%; } .shows-panel { padding-right: 30px; padding-left: 30px; } .week-show-name h3 { font-size: 14pt; } } @media screen and (max-width: 500px) { .week-show-name h3 { font-size: 12pt; } .week-show-name { padding-top: 16px; padding-right: 0; padding-left: 0; } .shows-panel { padding-right: 40px; padding-left: 40px; } } @media screen and (max-width:830px) { .social-media-footer { width: 100%; text-align: center; } .social-media-footer li { float: none; display: inline-block; text-align: center; } }