Current File : /home/tradevaly/demo.tradevaly.com.bd/content/Tradevaley Bootstrap project/css/responsive2.css

/* Normal desktop :1200px. XL */
@media (min-width: 1200px) and (max-width: 1920px) {
	.container {
		width: 1170px;
		margin: auto;
	}
}


/* Normal desktop :992px. LG */
@media (min-width: 992px) and (max-width: 1199px) {
	.container {
		width: 738px;
		margin: auto;
	}
	.col-md-12 {
		width: 100%;
	}
	.col-md-5 {
		width: 20%;
	}
	.col-md-6 {
		width: 50%;
	}
	.col-md-7 {
		width: 80%;
	}
	.top-nav ul li {
		margin-right: 10px;
	}
	.top-nav ul li a i {
		padding-right: 5px;
	}
	.login-btn a {
		padding-right: 10px;
		padding-left: 10px;
	}
	.menu ul li a {
		font-size: 14px;
		color: #333333;
		font-weight: normal;
		line-height: 40px;
	}
	.search-area {
		padding: 30px 0;
	}
	.search-bar {
		margin-bottom: 15px;
	}
	.slct-area {
		width: 20%;
		padding: 0 15px;
	}
	.search-opt {
		font-size: 14px;
		height: 35px;
		margin-top: 6px;
	}
	.input-fld {
		width: 55%;
	}
	.srch-btn {
		width: 20%;
	}
	.img-box {
		width: 90%;
		margin: auto;
	}
	.box {
		width: 97px;
		height: 100px;
		margin-top: 10px;
		margin-right: 13px;
	}
	.add-area {
		padding: 0;
	}
	.add-box {
		text-align: center;
		margin-top: 20px;
	}
	.top-add img {
		width: 100%;
		text-align: center;
	}
	.small-add {
		text-align: center;
		margin-top: 20px;
	}
	.add-box2 {
		max-height: 350px;
		overflow: hidden;
	}
	.add-box-02 img {
		width: 100%;
		text-align: center;
	}
	.hdng {
		margin-top: 20px;
		margin-bottom: 30px;
	}
	.cat-list {
		margin-bottom: 10px;
	}
	.toptrend-area {
		padding: 0 0 0 55px;
		margin-top: 20px;
	}
	.toptrend-area2 {
		padding: 0 0 0 55px;
		margin-top: 0;
	}
	.toptrend-active .owl-nav button.owl-next {
		right: 55px;
	}
	.toptrend-active .owl-nav button.owl-prev {
		left: -30px;
	}
	.slider-area {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.slider-active .owl-nav button {
		top: 40%;
	}
	.promo-video-area {
		padding: 25px;
	}
	.promo-video-area h2 {
		font-size: 24px;
		margin-bottom: 20px;
	}
	.video-box iframe {
		width: 500px;
		min-height: 260px;
	}
	.promo-video-area p {
		font-size: 16px;
		margin: 20px auto;
	}
	.service-area {
		padding: 0;
		margin-top: 0;
	}
	.service-box {
		text-align: center;
		width: 90%;
		margin: auto;
		margin-top: 20px;
	}
	.video-area2 {
		margin-top: 30px;
		margin-bottom: 0;
	}
	.video-details ul {
		margin-top: 30px;
		padding: 0 50px;
	}
	.pagination-area ul li {
		margin-top: 10px;
	}
	.hdng-08 b {
		font-size: 14px;
	}
	.offr-details2 li a {
		display: block;
		text-align: center;
		font-size: 13px;
		padding: 5px 10px;
	}
	#Trending ul li a {
		font-size: 13px;
	}
	.footer-nav, .social {
		min-height: 300px;
	}
}


/* Tablet :768px. md */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
		width: 738px;
		margin: auto;
	}
	.col-md-12 {
		width: 100%;
	}
	.col-md-5 {
		width: 20%;
	}
	.col-md-6 {
		width: 50%;
	}
	.col-md-7 {
		width: 80%;
	}
	.top-nav ul li {
		margin-right: 10px;
	}
	.top-nav ul li a i {
		padding-right: 5px;
	}
	.top-add img {
		width: 100%;
		text-align: center;
	}
	.login-btn a {
		padding-right: 10px;
		padding-left: 10px;
	}
	.menu {
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #000;
        transition: top 1s ease;
        display: none;
    }
	.menu ul li {
		display: block;
		margin-right: 0;
		text-align: left;
	}
	.menu ul li a {
		font-size: 18px;
		color: #fff;
		line-height: 40px;
	}
    .menu .closeMenu {
        display: block;
		color: #fff;
        position: absolute;
        top: 20px;
        right: 20px;
    }
    .openMenu {
        display: block;
    }
    .menu li a:hover {
        background: none;
        color: rgb(255, 123, 0);
        font-size: 1.6rem;
    }
	.search-area {
		padding: 30px 0;
	}
	.search-bar {
		margin-bottom: 15px;
	}
	.slct-area {
		width: 20%;
		padding: 0 15px;
	}
	.search-opt {
		font-size: 16px;
		height: 35px;
		margin-top: 6px;
	}
	.input-fld {
		width: 55%;
	}
	.srch-btn {
		width: 20%;
	}
	.img-box {
		width: 90%;
		margin: auto;
	}
	.box {
		width: 97px;
		height: 100px;
		margin-top: 10px;
		margin-right: 13px;
	}
	.add-area {
		padding: 0;
	}
	.add-box {
		text-align: center;
		margin-top: 20px;
	}
	.small-add {
		text-align: center;
		margin-top: 20px;
	}
	.add-box2 {
		max-height: 350px;
		overflow: hidden;
	}
	.add-box-02 img {
		width: 100%;
		text-align: center;
	}
	.hdng {
		margin-top: 20px;
		margin-bottom: 30px;
	}
	.cat-list {
		margin-bottom: 10px;
	}
	.toptrend-area {
		padding: 0 0 0 55px;
		margin-top: 20px;
	}
	.toptrend-area2 {
		padding: 0 0 0 55px;
		margin-top: 0;
	}
	.toptrend-active .owl-nav button.owl-next {
		right: 55px;
	}
	.toptrend-active .owl-nav button.owl-prev {
		left: -30px;
	}
	.slider-area {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.slider-active .owl-nav button {
		top: 40%;
	}
	.promo-video-area {
		padding: 25px;
	}
	.promo-video-area h2 {
		font-size: 24px;
		margin-bottom: 20px;
	}
	.video-box iframe {
		width: 500px;
		min-height: 260px;
	}
	.promo-video-area p {
		font-size: 16px;
		margin: 20px auto;
	}
	.service-area {
		padding: 0;
		margin-top: 0;
	}
	.service-box {
		text-align: center;
		width: 90%;
		margin: auto;
		margin-top: 20px;
	}
	.video-area2 {
		margin-top: 30px;
		margin-bottom: 0;
	}
	.video-details ul {
		margin-top: 30px;
		padding: 0 50px;
	}
	.pagination-area ul li {
		margin-top: 10px;
	}
	.hdng-08 b {
		font-size: 14px;
	}
	.offr-details2 li a {
		display: block;
		text-align: center;
		font-size: 13px;
		padding: 5px 10px;
	}
	#Trending ul li a {
		font-size: 13px;
	}
	.footer-nav, .social {
		min-height: 300px;
	}
}


/* small mobile :320px. ex-sm */
@media (max-width: 464px) {
    .container {
		width: 100%;
		padding: 10px;
	}
	.col-sm-12 {
		width: 100%;
	}
	.col-sm-6 {
		width: 50%;
	}
	.col-esm-3 {
		width: 20%;
	}
	.col-esm-8 {
		width: 80%;
	}
	.top-bar {
		display: none;
	}
	
	.top-add img {
		width: 100%;
		text-align: center;
	}
	.logo a img {
		width: 80%;
	}
	.menu {
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #000;
        transition: top 1s ease;
        display: none;
    }
	.menu ul li {
		display: block;
		margin-right: 0;
		text-align: left;
	}
	.menu ul li a {
		font-size: 18px;
		color: #fff;
		line-height: 40px;
	}
    .menu .closeMenu {
        display: block;
		color: #fff;
        position: absolute;
        top: 20px;
        right: 20px;
    }
    .openMenu {
        display: block;
    }
    .menu li a:hover {
        background: none;
        color: rgb(255, 123, 0);
        font-size: 1.6rem;
    }
	.search-area {
		background: #1D262D;
		padding: 5px 0;
		margin-top: 5px;
	}
	.search-bar {
		height: 40px;
		margin-bottom: 5px;
	}
	.slct-area {
		width: 20%;
		height: 40px;
	}
	.search-opt {
		width: 20px;
		font-size: 12px;
		height: 20px;
	}
	.input-fld {
		width: 60%;
		float: left;
	}
	.inpt-01 {
		height: 30px;
		padding-left: 25px;
		font-size: 14px;
	}
	.srch-btn {
		width: 20%;
		height: 40px;
		font-size: 14px;
	}
	.img-box {
		width: 90%;
		margin: auto;
	}
	.box {
		width: 87px;
		height: 90px;
		margin-top: 10px;
		margin-left: 20px;
	}
	.add-area {
		padding: 0;
	}
	.add-box {
		text-align: center;
		margin-top: 20px;
	}
	.add-box img {
		width: 100%;
	}
	.small-add {
		text-align: center;
		margin-top: 20px;
	}
	.add-box-02 img {
		width: 100%;
		text-align: center;
	}
	.top-category-area {
		padding: 0 10px;
	}
	.hdng {
		margin-bottom: 20px;
	}
	.hdng b {
		font-size: 18px;
	}
	.cat-list {
		width: 100%;
		margin-bottom: 10px;
	}
	.cat-list img {
		left: 40%;
	}
	.add-box2 {
		margin-top: 0;
	}
	.toptrend-area {
		margin-top: 0;
		padding: 0;
	}
	.toptrend-area2 {
		margin-top: 0;
		padding: 0;
	}
	.hdng-04 {
		margin-bottom: 0;
		padding-bottom: 20px;
	}
	.hdng-04 b {
		font-size: 18px;
		border-bottom: 1px solid #CBCBCB;
		padding: 0 20px 10px 0;
	}
	.item-box {
		margin-left: 15px;
	}
	.toptrend-active .owl-nav button.owl-next {
		right: 10px;
	}
	.toptrend-active .owl-nav button.owl-prev {
		left: 10px;
	}
	.slider-area {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.slider-active .owl-nav button {
		top: 40%;
	}
	.promo-video-area {
		padding: 15px 10px;
	}
	.promo-video-area h2 {
		font-size: 18px;
		margin-bottom: 15px;
	}
	.video-box iframe {
		width: 100%;
		padding: 5px;
	}
	.promo-video-area p {
		width: 100%;
		font-size: 14px;
		margin: 10px auto;
	}
	.service-area {
		padding: 0;
		margin-top: 0;
	}
	.service-box {
		text-align: center;
		width: 90%;
		margin: auto;
		margin-top: 20px;
	}
	.open-area {
		background: #1D262D;
		width: 100%;
		height: auto;
		margin-top: 20px;
		padding: 25px 5px;
	}
	.open-hdng {
		max-width: 100%;
		font-size: 18px;
		color: #fff;
		padding-top: 0;
	}
	.open-area p {
		max-width: 100%;
		font-size: 14px;
		color: #fff;
		margin-top: 15px;
	}
	.video-area2 {
		margin-top: 30px;
		margin-bottom: 0;
	}
	.video-details ul {
		margin-top: 30px;
		padding: 0 50px;
	}
	.pagination-area ul li {
		margin-top: 10px;
	}
	.offr-details2 li {
		margin-top: 15px;
		float: left;
		margin-left: 20px;
		margin-bottom: 15px;
	}
	.post-inpt {
		margin-top: 15px;
	}
	.footer-nav, .social {
		text-align: center;
	}
	.info-hdng2 {
		text-align: center;
		padding: 10px;
	}
	.info-hdng2 b {
		border-bottom: none;
		padding: 0;
	}
	table, th, td {
		display: block;
		text-align: center;
		border: none;
	}
	tr {
		float: left;
		border: 1px solid #555;
	}
	.pkg-box th {
		display: none;
	}
}

/* Large Mobile :480px. sm */
@media only screen and (min-width: 465px) and (max-width: 767px) {
    .container {
		width: 100%;
		padding: 10px;
	}
	.col-sm-12 {
		width: 100%;
	}
	.col-sm-6 {
		width: 50%;
	}
	.top-bar {
		display: none;
	}
	.top-add img {
		width: 100%;
		text-align: center;
	}
	.menu {
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #000;
        transition: top 1s ease;
        display: none;
    }
	.menu ul li {
		display: block;
		margin-right: 0;
		text-align: left;
	}
	.menu ul li a {
		font-size: 18px;
		color: #fff;
		line-height: 40px;
	}
    .menu .closeMenu {
        display: block;
		color: #fff;
        position: absolute;
        top: 20px;
        right: 20px;
    }
    .openMenu {
        display: block;
    }
    .menu li a:hover {
        background: none;
        color: rgb(255, 123, 0);
        font-size: 1.6rem;
    }
	.search-area {
		padding: 5px 0;
		margin-top: 10px;
	}
	.search-bar {
		height: 40px;
		margin-bottom: 5px;
	}
	.slct-area {
		width: 20%;
		height: 40px;
		padding: 0 10px;
	}
	.search-opt {
		width: 50px;
		font-size: 14px;
		height: 25px;
		margin-top: 3px;
	}
	.input-fld {
		width: 60%;
		float: left;
	}
	.inpt-01 {
		height: 30px;
		padding-left: 25px;
		font-size: 20px;
	}
	.srch-btn {
		width: 20%;
		height: 40px;
		font-size: 15px;
	}
	.img-box {
		width: 90%;
		margin: auto;
	}
	.box {
		width: 87px;
		height: 90px;
		margin-top: 10px;
		margin-right: 13px;
	}
	.add-area {
		padding: 0;
	}
	.add-box {
		text-align: center;
		margin-top: 20px;
	}
	.small-add {
		text-align: center;
		margin-top: 20px;
	}
	.add-box-02 img {
		width: 100%;
		text-align: center;
	}
	.importer-list {
		padding: 10px;
	}
	.top-category-area {
		padding: 0 60px;
	}
	.hdng {
		margin-bottom: 20px;
	}
	.hdng b {
		font-size: 18px;
	}
	.cat-list {
		margin-bottom: 10px;
	}
	.cat-list img {
		left: 40%;
	}
	.add-box2 {
		margin-top: 0;
	}
	.toptrend-area {
		margin-top: 0;
		padding: 0;
	}
	.toptrend-area2 {
		margin-top: 0;
		padding: 0;
	}
	.hdng-04 {
		margin-bottom: 0;
		padding-bottom: 20px;
	}
	.hdng-04 b {
		font-size: 18px;
		border-bottom: 1px solid #CBCBCB;
		padding: 0 20px 10px 0;
	}
	.item-box {
		margin-left: 93px;
	}
	.toptrend-active .owl-nav button.owl-next {
		right: 55px;
	}
	.toptrend-active .owl-nav button.owl-prev {
		left: 50px;
	}
	.slider-area {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.slider-active .owl-nav button {
		top: 40%;
	}
	.promo-video-area {
		padding: 25px;
	}
	.promo-video-area h2 {
		font-size: 24px;
		margin-bottom: 20px;
	}
	.video-box iframe {
		width: 420px;
		min-height: 220px;
	}
	.promo-video-area p {
		width: 100%;
		font-size: 14px;
		margin: 10px auto;
	}
	.service-area {
		padding: 0;
		margin-top: 0;
	}
	.service-box {
		text-align: center;
		width: 90%;
		margin: auto;
		margin-top: 20px;
	}
	.open-area {
		background: #1D262D;
		width: 100%;
		height: auto;
		margin-top: 20px;
		padding: 25px 5px;
	}
	.open-hdng {
		max-width: 100%;
		font-size: 18px;
		color: #fff;
		padding-top: 0;
	}
	.open-area p {
		max-width: 100%;
		font-size: 14px;
		color: #fff;
		margin-top: 15px;
	}
	.video-area2 {
		margin-top: 30px;
		margin-bottom: 0;
	}
	.video-details ul {
		margin-top: 30px;
		padding: 0 50px;
	}
	.offr-details2 {
		text-align: center;
	}
	.offr-details2 li {
		margin-top: 15px;
		display: inline-block;
		margin-left: 20px;
		margin-bottom: 15px;
	}
	.post-inpt {
		margin-top: 15px;
	}
	.pagination-area ul li {
		margin-top: 10px;
	}
	.footer-nav, .social {
		text-align: center;
	}
	.info-hdng2 {
		text-align: center;
		padding: 10px;
	}
	.info-hdng2 b {
		border-bottom: none;
		padding: 0;
	}
	table, th, td {
		display: block;
		text-align: center;
		border: none;
	}
	tr {
		border: 1px solid #555;
		margin: 10px auto;
		float: left;
		margin-left: 10px;
	}
	.pkg-box th {
		display: none;
	}
}