.blogNav { margin: 5px 0 10px; padding: 8px; color: #333; background-color: #f8f4e5 } .blogNav .navbar { min-height: 10px; margin-bottom: 0 } .blogNav .navbar-default { margin-top: 0; padding: 0; background-color: #f8f4e5; border: 0 } .navbar-default .navbar-collapse { padding: 0 } .blogNav .nav>li+li:before { content: "|"; float: left; padding-top: 2px; color: #fff } .blogNav .nav>li>a { padding: 4px 14px 2px; color: #333; margin-left: 4px } .blogNav .dropdown-menu>li>a:hover, .blogNav .dropdown-menu>li>a:focus { color: #000 } .blogNav .navbar-nav>.active>a, .blogNav .navbar-nav>.active>a:hover, .blogNav .navbar-nav>.active>a:focus { color: #fff; background-color: #5D5D5D } .blogNav .dropdown-menu { background-color: #5D5D5D } .blogNav .dropdown-menu li a { color: #fff } .blogNav .form-control { height: auto; padding: 8px 7px; font-size: 12px } .blogNav .form-inline { text-align: right } .blogPage { color: #3f3f3f } .blogPage .breadcum { padding: 8px; margin-bottom: 15px } .blogPage .commonHeading * { margin: 0 } .blogPage .commonHeading { margin: 10px 0 } .blogPage .blogBanner { margin-top: 10px } .blogPage .blogBanner img, .staticBanner img { width: 100% } .staticBanner { margin: 10px 0 } .blogPage .mainSection { margin-bottom: 10px } .blogPage .mainSection .product { background-color: #fff; border: 1px solid #eee; padding: 10px; margin-bottom: 10px; text-align: center } .blogPage .mainSection .product .title { font-size: 14px; text-transform: uppercase; margin-top: 5px; height: 36px; overflow: hidden } .blogPage .mainSection .product .info { font-size: 13px; height: 55px; overflow: hidden; margin-top: 5px } .blogPage .mainSection .product p { margin-bottom: 5px } .blogPage .mainSection .product>span { font-size: 13px; text-transform: uppercase; border: 1px solid #eee; display: inline-block; padding: 6px 15px; line-height: 25px; margin-top: 3px; background-color: #000; color: #fff } .blogPage .mainSection .product>span b { top: 4px; font-size: 17px } .blogPage .mainSection .product>span:hover { background-color: #c81630; color: #fff } .blogPage .sideBlock .block { border: 1px solid #eee; background-color: #fff; padding: 20px; margin-top: 10px } .blogPage .sideBlock h3 { font-size: 25px; color: #484848; margin: 0 }  @media only screen and (min-width: 768px) { .blogPage .sideBlock ul { display: block } } .blogPage .sideBlock ul { margin-bottom: 0 } .blogPage .sideBlock li { padding: 10px 0 } .blogPage .sideBlock li+li { border-top: 1px solid #b6c6cf } .blogPage .sideBlock li a { color: #3f3f3f; display: block } .blogPage .mainSection .categoryTitle a { color: #c81630; display: inline-block } .blogPage .mainSection .title h2, .blogPage .mainSection .title h1 { font-size: 22px; color: #969599; margin: 0 0 5px } .blogPage .mainSection .title h2, .blogPage .mainSection .title h1 a { color: #969599 } .blogPage .mainSection .title .xtraInfo { font-size: 12px; margin-bottom: 10px } .blogPage .mainSection .title .xtraInfo p, .blogPage .mainSection .title .xtraInfo a { margin-bottom: 0; display: inline-block; margin-right: 8px } .blogPage .mainSection .block { border: 1px solid #eee; padding: 20px; margin-top: 10px } .blogPage .mainSection .block>p.bold { margin-bottom: 0; margin-top: 10px } .blogPage .mainSection .block .imagesBlock img { margin-bottom: 10px } .blogPage .mainSection .block img { max-width: 100% } .blogPage .rightSection { margin-top: 45px; margin-bottom: 10px } .blogPage .rightSection .form-control { height: 39px } .blogPage .rightSection>.input-group .btn { padding: 10px 16px 6px } .blogPage .rightSection .input-group-btn .btn b { font-size: 16px } .blogPage .rightSection .newsletterBlock .btn { font-size: 21px; line-height: 1 } .blogPage .rightSection .newsletterBlock .form-control { height: 35px } .blogPage .rightSection .newsletterBlock { background-color: #fff; margin-top: 10px; padding: 20px 15px } .blogPage .rightSection .newsletterBlock h4 { font-size: 21px; margin: 0 0 5px; text-transform: uppercase } .blogPage .rightSection .newsletterBlock p { margin: 10px 0 0 } .blogPage .sideBlock .social { margin-top: 10px; border: 1px solid #eee; padding: 6px } .blogPage .sideBlock .social p { font-size: 21px; float: left; margin: 2px 0 0 } .blogPage .sideBlock .social ul { margin: 0 0 0 5px; float: left } .blogPage .sideBlock .social ul li { padding: 0 2px } .blogPage .sideBlock .social li+li { border: 0 } .blogPagination { text-transform: uppercase; font-size: 14px } .blogPagination ul { margin: 0; padding: 11px 15px 4px } .blogPagination a.btn { margin: 0; padding: 8px 20px 4px } .blogPagination li { color: #777; display: inline-block } .blogPagination .block-2 { text-align: center } .blogPagination .block-3 { text-align: right } .blogDetailsPage .mainSection .block { margin-bottom: 10px; background-color: #fff } .blogDetailsPage .mainSection .title .xtraInfo, .blogDetailsPage .mainSection .title h2 { float: none } .blogDetailsPage h3, .blogDetailsPage .postedComment h3 { margin: 0 0 10px } .blogDetailsPage .postedComment { margin-top: 25px } .blogDetailsPage .commentBlock { background: #F5F5F5; border: 1px solid #E7E7E7; padding: 10px; margin-bottom: 10px } .postedComment img { max-width: 40px; float: left } .postedComment .commentDetails p { display: inline-block; font-size: 20px; color: #333; float: left; margin: 15px 0 0 10px; line-height: 20px } .postedComment .commentDetails p.date { display: inline-block; font-size: 12px; color: #999; margin-top: 18px } .postedComment .commentBlock { padding: 5px 10px } .postedComment .commentBlock>p { margin: 6px 0 0; color: #777; font-size: 16px } .blogPage .nextBackBlock { border: 1px solid #eee; padding: 10px 15px; margin-bottom: 10px } .blogPage .nextBackBlock .titleBlock { padding-bottom: 15px; position: relative; display: inline-block } .blogPage .nextBackBlock .titleBlock h4 { font-size: 21px; margin: 0 0 10px } .blogPage .nextBackBlock .titleBlock img { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg) } .blogPage .nextBackBlock .nextBack p { margin-bottom: 4px; color: #e10f32 } .blogPage .nextBackBlock .nextBack p:first-child { margin-left: 15px } .blogPage .nextBackBlock .nextBack p a { color: #484848 } .infographicsPg .mainSection h2 { margin: 0 } .infographicsPg .mainSection h2 span { font-size: 15px } .infographicsPg .mainSection .product { text-align: left; background-color: #fff } .blogPage .mainSection .product .image { max-width: none; height: 180px; overflow: hidden } .infographicsPg .mainSection .product h3 { font-size: 26px; margin: 0 } .infographicsPg .mainSection .product h5 { font-size: 20px; margin: 0 0 15px } .infographicsPg .mainSection .product .btn-info { margin-top: 25px } .infographicsDetailsPg .rightSection .newsletterBlock { margin-bottom: 10px } .infographicsDetailsPg .mainSection .block { margin-top: 0 }  @media only screen and (min-width: 1200px) { .blogPage .nextBackBlock .titleBlock { padding: 5px 20px 5px 0; float: left } .blogPage .nextBackBlock .titleBlock img { position: absolute; left: auto; right: 0; top: 0; bottom: 0; margin: auto 0; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg) } .blogPage .nextBackBlock .nextBack { float: left; padding-left: 15px } }  @media only screen and (min-width: 960px) and (max-width: 1199px) { .blogPage .sideBlock h3 { font-size: 22px } .blogNav .nav>li>a { padding: 2px 8px; font-size: 14px } .blogPage .sideBlock .social p, .blogPage .rightSection .newsletterBlock h4 { font-size: 18px } .blogPage .sideBlock .social li img { width: 25px } .blogPage .mainSection .product .title { height: 59px } .blogPage .mainSection .product .info { height: 85px } }  @media only screen and (min-width: 768px) and (max-width: 959px) { .blogPage .sideBlock h3 { font-size: 24px } .blogPage .sideBlock .social p, .blogPage .rightSection .newsletterBlock h4 { font-size: 18px } .blogPage .sideBlock .social li img { width: 25px } .blogNav .form-inline { border-top: 1px solid #fff; padding-top: 5px; margin-top: 5px } .blogPage .mainSection .product .title { height: 59px } .blogPage .mainSection .product .info { height: 65px } .blogNav .nav>li>a { padding: 2px 10px } .blogPage .commonHeading { padding: 5px 10px } .blogPage .commonHeading h3, .blogPage .commonHeading h1, .blogPage .commonHeading p { font-size: 20px } }  @media only screen and (max-width: 767px) { .blogNav .navbar-nav { margin: 0 } .blogNav .navbar-default .navbar-toggle:hover, .blogNav .navbar-default .navbar-toggle:focus { background-color: transparent } .blogNav .navbar-default .navbar-nav .open .dropdown-menu>li>a { color: #fff } .blogPage .sideBlock .block { padding: 5px 20px; margin-top: 5px } .blogPage .mainSection .title h2, .blogPage .mainSection .title h1 { font-size: 20px; margin: 0 0 5px; float: none } .blogPage .mainSection .title .xtraInfo { float: none } .blogPage .mainSection .title .xtraInfo p, .blogPage .mainSection .title .xtraInfo a { display: inline-block; margin-right: 5px } .blogPage .mainSection .block { padding: 10px } .blogPage .sideBlock h3 { font-size: 20px } .blogNav .navbar-default .navbar-toggle { border: 1px solid #fff; margin: 0 } .blogNav .navbar-default .navbar-toggle .icon-bar { background-color: #fff } .blogNav .nav>li>a { margin-left: 0 } .blogNav .nav>li+li:before { display: none } .blogNav .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle } .blogNav .form-group { margin: 5px 0 0 } .blogNav .navbar-default .navbar-collapse { margin-top: 10px } .blogPage .mainSection .product .image img { margin: auto } .blogPagination { font-size: 12px; padding: 10px } .postedComment .commentDetails p { margin: 0 0 0 10px } .postedComment .commentDetails p.date { margin-top: 0 } .infographicsPg .mainSection { margin-top: 0 } }  .blogPage .navbar-default .navbar-collapse{background-color: transparent;} .blogPage .blogNav .nav>li+li:before{color: #333;}  .blogPage .blogpagerow {display: flex;align-items: center;}