/* This is a common css file for standard pages and AMP pages.
DO NOT use in this file !important.

https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/
'Use and reference to !important is not allowed.
This is a necessary requirement to enable AMP to enforce its element sizing rules.'

DO NOT use i-amphtml- class and i-amphtml- tag names.

'The validator disallows class and tags names with the following regex (^|\W)i-amphtml-.
These are reserved for internal use by the AMP framework. It follows, that the user's
stylesheet may not reference CSS selectors for i-amphtml- classes and tags.'*/

body {padding-top: 102px; font-family: 'Roboto Slab', serif; color: #656667}

h1 {font-size: 40px; color:#7ec04b; font-weight: 700;}
h2 {font-size: 30px; color:#7ec04b; font-weight: 700;}
h3 {font-size: 15px; color:#656667; font-weight: 700;}

.btn-default {color:#4984c0; border: none; font-size: 13px; font-weight: 700; margin: 5px 0; padding: 2px 12px; background: #e5e5e5;
background: -moz-linear-gradient(top, #e5e5e5 0%, #cdcdcd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#cdcdcd));
background: -webkit-linear-gradient(top, #e5e5e5 0%,#cdcdcd 100%);
background: -o-linear-gradient(top, #e5e5e5 0%,#cdcdcd 100%);
background: -ms-linear-gradient(top, #e5e5e5 0%,#cdcdcd 100%);
background: linear-gradient(to bottom, #e5e5e5 0%,#cdcdcd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#cdcdcd',GradientType=0 ); box-shadow: 0 1px 0 rgba(0,0,0,0.3)}

.navbar {background:#4984c0; border: none; box-shadow: 0 2px 0 rgba(0,0,0,0.2);}
.navbar .bkg {position: absolute; left: 0; top: 0; background:#5095bf; height: 100px; width: 50%; margin-left: 0; z-index: 0}
.navbar .bkg:after {content:''; width: 0; height: 0; border-top: 50px solid rgba(0,0,0,0); border-bottom: 50px solid rgba(0,0,0,0); border-left: 30px solid #5095bf; position:absolute; right:-30px;}
.navbar > .container .navbar-brand {margin: 30px 0 0 0; z-index: 1; padding: 0}
.navbar-header {height: 100px}
.navbar-collapse {border: 0}

.breadcrumbs-wrapper {background:#36393c; margin-top:-2px;}
.breadcrumbs-wrapper .breadcrumb {margin: 0; background: none; padding: 8px 0; color:#b9b9ba; font-size: 12px}
.breadcrumbs-wrapper .breadcrumb li a {color:#b9b9ba; font-weight: 400;}

.footer {background:#4984c0;}
.footer h3 {color:#fff}
.footer .social {width: 44px; height: 44px; margin: 10px 10px 0 0; display: inline-block;}
.footer .social.fb {background-position: 0 0;}
.footer .social.fb:hover {background-position: 0 -44px;}
.footer .social.youtube {background-position: -88px 0;}
.footer .social.youtube:hover {background-position: -88px -44px;}
.footer .social.twitter {background-position: -132px 0;}
.footer .social.twitter:hover {background-position: -132px -44px;}
.footer .social.instagram {background-position: -44px 0;}
.footer .social.instagram:hover {background-position: -44px -44px;}
.footer .footer-bottom {color:#fff; font-size: 12px; border-top: 1px solid #6d9dcd; padding: 15px 0 100px;}
.footer .footer-bottom div:last-child {text-align: right}
.footer .footer-bottom a {color:#fff}
.footer .contact {text-align: center; border-top: 1px solid #6D9DCD; margin-bottom: 30px}
.media {margin: 20px 0}
.media .pic {border-radius: 4px; overflow: hidden}
#last-added {height: 98px;}
.footer .media .pic {width: 98px; height: 100%; background: white; margin-right: 20px; display: flex; vertical-align: middle;}
.media h4 {color:#fff;}

.footer .facebook {width: 224px; min-height: 200px; background:#5c91c6; border-radius: 10px; display: block; margin: 20px 0;}
.fb-like-box {border-radius: 7px; background: white;}
.fb-like-box.fb_base {margin: 12px;}

.footer .apps-tutorials {margin-top: 0px; text-align: center;}
.footer .apps-tutorials a {color:#fff; font-size: 15px; font-weight: 700;}
@media (min-width:991px) {
    .footer .apps-tutorials {margin-top: -15px; width: 224px;}
}

#navbar {transition: top 0.5s;}

@media (min-width: 992px) {
	.navbar > .container .navbar-brand {margin-left: 0;}
	.navbar .bkg {margin-left: -300px;}
    .footer .contact {text-align: left; border-top: 0; margin-bottom: 0;}
    #last-added {margin-bottom: 35px;}
}

#comments {
	margin: 20px 0;
}
#comments ul {
	padding: 0;
	list-style: none;
}
#comments ul li {
	margin: 5px;
	padding: 8px;
	border-radius: 4px;
}
#comments ul li.odd {
	background-color: rgba(0,0,0, .1);
}
#comments li span {
    display: block;
}
#comments li span.sign {
    font-size: 90%;
    color: rgba(0,0,0,.4);
    text-align: right;
}

@media (min-width: 1400px) {
    .container {width: 1370px;}
}
@media (max-width: 991px) {
    .navbar {min-height: 60px;}
    .navbar .bkg, .navbar-header {height: 60px;}
    .navbar .bkg:after {
        border-top-width: 30px;
        border-bottom-width: 30px;
    }
}
@media (max-width: 730px) {
    .footer {padding-bottom: 60px;}
}

.article #art-answer {
    margin-top: 20px;
    margin-bottom: 30px;
}
.article #art-answer .art_signature {
    margin-top: 20px;
    text-align: right;
    color: #dadada;
}
#other-articles {
    margin-bottom: 30px;
    display: inline-block;
}
#btn-articles-list {
    padding: 5px 30px;
    font-size: 18px;
    margin: 0 0 30px;
}

strong {word-wrap: break-word;}

/* download files */
.news {border: 1px solid #eee; text-decoration: none; z-index: 10}
.news:hover {border: 1px solid #eee; background: #f1f1f1; text-decoration: none; color:#141414; z-index: 10}
.news:hover:before {opacity: 1}

.news-content {
  max-height: 130px;
  min-height: 130px;
  overflow-y: hidden;
}
/* download files end */

/* articles start*/
.smallpad {padding: 10px;}
.news-content a:hover {text-decoration: none;}
.art-h2 {margin-top: 0; font-size: 18px; color:#428bca;}
.art-h2:hover {color: #2a6496;}
.news {border: 1px solid #eee; text-decoration: none; z-index: 10}
.news:hover {border: 1px solid #eee; background: #f1f1f1; text-decoration: none; color:#141414; z-index: 10}
.news:hover:before {opacity: 1}

.news .news-content {display: inline-block; margin: 12px 15px 20px 15px;}
.news {display: inline-block;  background:#fff; padding: 0; color:#141414; border: 1px solid #ddd; margin: 15px 0; position: relative; border-radius: 5px;
-webkit-transition: all .3s cubic-bezier(.17,.67,.83,.67);
-moz-transition: all .3s cubic-bezier(.17,.67,.83,.67);
-o-transition: all .3s cubic-bezier(.17,.67,.83,.67);
transition: all .3s cubic-bezier(.17,.67,.83,.67);}

.newsa {display: block;  background: transparent; padding: 0; color:#141414; border: 0; position: relative;
-webkit-transition: all .3s cubic-bezier(.17,.67,.83,.67);
-moz-transition: all .3s cubic-bezier(.17,.67,.83,.67);
-o-transition: all .3s cubic-bezier(.17,.67,.83,.67);
transition: all .3s cubic-bezier(.17,.67,.83,.67);}
.newsa:hover {text-decoration: none;}
.news .imgwrap {display: inline-block; width: 100%; height: 190px; overflow: hidden; margin: 0; border-bottom: 5px solid #2a6496; border-radius: 5px 5px 0 0; text-align: center;}
.img-responsive {display: inline-block;}
.news-container button {margin: 5px 15px 15px 15px; float: right;}

@media (min-width: 992px) and (max-width: 1199px) {
    .footer .social {margin: 10px 5px 0 0}
    .navbar .bkg {margin-left: -200px;}
}
@media (min-width: 768px) {
    .news-content {
        max-height: 330px;
        min-height: 330px;
        overflow-y: hidden;
    }
}
/* articles end*/

.latest_videos {
    margin-bottom: 20px;
}
.latest_video {
    margin-top: 20px;
}
.latest_video h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 170px;
}
.latest_video h4 a, .last_added_resets h4 a {
    color: #fff;
}
.last_added_resets .media-body {
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* FIX for the fixed navbar overlapping anchors (targets) */
:target {
    display: inline-block;
    position: relative;
    visibility: hidden;
}
@media (min-width: 992px) {
    :target {
        top: -70px;  /* Navbar height (shrinked) 50 px + bottom margin 20 px */
    }
}
@media (max-width: 991px) {
    :target {
        top: -80px;  /* Navbar height 60 px + bottom margin 20 px */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .nav>li>a {padding-left: 10px; padding-right: 10px;}
}

/* NAVBAR SHRINKS */
@media (min-width: 992px) {
    #navbar, #navbar #logo {transition: 0.4s;}
    #navbar .bkg, #navbar .bkg:after {transition: 0.4s;}
    #navbar {height: 100px;}
}
/* NAVBAR SHRINKS ENDS */

/* BREADCRUMBS sticked to navbar on mobile */
@media (max-width: 991px) {
    body {padding-top: 62px;}
}

/* MENU DROPDOWN */
@media (max-width: 767px) {
    #dev-desktop, .dropdown-menu .divider {display: none;}
}
@media (min-width: 768px) {
    #dev-mobile {display: none;}
    .dropdown-menu .divider {margin: 5px 0;}
    .dropdown-menu>li>a {color:#fff; text-transform: uppercase;}
}
@media (min-width: 768px) and (max-width: 991px) {
    #dev-desktop.dev-drop {padding-bottom: 20px;}
}
@media (min-width: 992px)  {
    #dev-desktop.dev-drop {padding-bottom: 40px;}
}
/* MENU DROPDOWN END*/

.ytvideo {
  margin: 10px 0;
  position: relative;
  overflow: hidden;
}

/* IMEI redirect forms */
form.imei-redirect-form input.imei-input {
    border-width: 3px;
    border-color: #77c049;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    max-width: 200px;
    padding: 1px 10px;
}
form.imei-redirect-form button,
form.imei-redirect-form input.imei-submit {
    border-width: 3px;
    border-color: #77c049;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #77c049;
    color: white;
    margin-left: -5px;
    padding: 1px 10px;
}
form.imei-redirect-form input.imei-input:valid {
    background-color: white;
}
form.imei-redirect-form input.imei-input:invalid {
    background-color: lightpink;
    border-color: #a94442;
}
form.imei-redirect-form p.imei-error {
    display: none;
    color: #a94442;
    font-size: 12px;
    margin: 15px 0;
}
form.imei-redirect-form p.imei-error.visible {
    display: block;
}

/* HR-162 rating */
#ratings_form {position: relative;}

.share_links {margin-right: 15px;}
.hreview-aggregate {height: 28px; line-height: 28px;}

@media (min-width: 590px) {
    .share_links {float: left;}
}
@media (max-width: 589px) {
    .share_links {margin-bottom: 10px;}
}
/* HR-162 rating end */

/* HR-308 */
#art-title {position: relative; margin: 0; color: #ffffff; line-height: inherit;}
.hero-image {
    height: 230px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.hero-date {
    background-color: rgba(146, 152, 157, 0.8);
    display: inline-block;
    position: relative;
    top: 20px;
    padding: 6px 10px;
    border-radius: 4px;
}
.art-date {color:#ffffff; margin: 0;}
.hero-text {
    /* text-align: left; */
    position: relative;
    top: 50%;
    transform: translate(0%, -50%);
    color: white;
    overflow: hidden;
     text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/* HR-308 END */

/* HR-320 */
@media (max-width: 767px) {
    .navbar-collapse {
        border: 0;
        width: 256px;
        top: 60px;
        right: 15px;
        text-align: right;
        z-index: 101;
    }
    .navbar-toggle.hamburger {margin-right: 0;}
    .navbar-collapse .nav.navbar-nav.navbar-right {margin-bottom: 59px;}
    .animated-hamburger {
    width: 36px;
    height: 20px;
    position: relative;
    margin: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    }
    .animated-hamburger span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    }
    .animated-hamburger span:nth-child(1) {top: 0;}
    .animated-hamburger span:nth-child(2) {top: 10px;}
    .animated-hamburger span:nth-child(3) {top: 20px;}
    .animated-hamburger.open span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    }
    .animated-hamburger.open span:nth-child(2) {opacity: 0; left: -60px;}
    .animated-hamburger.open span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    }
    .animated-hamburger span {background: #ffffff;}
    .navbar-toggle {border-width: 0;}
    #bkg-shadow {position: fixed; top: 52px; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 99;}
}
/* HR-320 END */