/* ================================================== 
*	Version: 1.0.0
*	css code for responsive layout
*	To make Responsive
================================================== */

/* ==================================================
*	1 - media screen and (max-width: 1199px)
*	2 - media screen and (max-width: 991px)
*	3 - media screen and (max-width: 767px)
*	4 - media screen and (max-width: 680px)
*	5 - media screen and (max-width: 480px)
*	6 - media screen and (max-width: 320px)
================================================== */




/*  ====================================================================================================
1 - media screen and (max-width: 1199px) - start
==================================================================================================== */

@media screen and (max-width: 1199px) {
	.header-middle .contact-info li h4 {font-size: 10px;}
	.slider-section .slider-contant h1 {font-size: 42px;}
	.counttimer-section .countdown li {margin-right: 25px;}
	.howitwork-section .process-area li.process {margin-right: 48px;}
	.team-section .member-contant {padding: 10px;}
	.team-section .team-member {height: 290px;}
	.newsletter-section .newsletter-contant .title-xlarge {font-size: 30px;}

	.about-section .content .list-area li {font-size: 14px;}
	.about-section .content .list-area li i {margin-right: 5px;}

	.post-mate li {margin-right: 12px;}
	.team-details-section .team-sidebar .member-content {padding: 20px;}
}

/* ====================================================================================================
1 - media screen and (max-width: 1199px) - end
==================================================================================================== */





/* ====================================================================================================
2 - media screen and (max-width: 991px) - start --->>>for medium device
==================================================================================================== */

@media screen and (max-width: 991px) {
	body {padding-top: 88px;}
	.header-section {display: none;}
	.altranative-header {display: block;}
	.slider-section .slider-contant {
		margin: 0 auto;
		max-width: 500px;
	}
	.about-section .chart-img {margin-bottom: 30px;}
	.counttimer-section .countdown li {
		width: 30%;
		margin-right: 30px;
		margin-bottom: 30px;
	}
	.howitwork-section .process-area li.process {
		width: 370px;
		max-width: 370px;
		margin: 0 auto 30px;
	}
	.howitwork-section .process-area li.process .dot {
		top: 260px;
		width: 1px;
		height: 80px;
		right: 30px;
	}
	.howitwork-section .process-area li.process .dot:after {
		top: 65px;
		transform: rotate(85deg);
		-o-transform: rotate(85deg);
		-ms-transform: rotate(85deg);
		-moz-transform: rotate(85deg);
		-webkit-transform: rotate(85deg);
	}
	.team-section .team-member {height: auto;}
	.team-section .member-contant {padding: 30px;}
	.Requestform-section .peep-man-img {padding-top: 200px;}
	.blog-section .blog-item {margin-bottom: 30px;}
	.footer-top .ftr-brand-area,
	.footer-top .useful-links,
	.footer-top .recent-post {margin-bottom: 30px;}

	.about-section .img {margin-bottom: 30px;}

	.blog-section .comment-form {margin-bottom: 50px;}
	.team-sidebar,
	.sidebar-section {
		margin: 0 auto;
		max-width: 370px;
	}
	.team-sidebar,
	.team-testimonial,
	.team-contact-section .basic-contact-info {margin-bottom: 30px;}

	.product-details-section .blockquote {margin: 50px 0px;}
	#menu-container .cart-btn {font-size: 24px;}

	.register-section .signup-image {margin-bottom: 30px;}
	.register-section .signup-image img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.criptocurrency-price-section {overflow-x: scroll;}
	.howitwork-section .process-area ul {
		margin: 0 auto;
		max-width: 360px;
	}
	.howitwork-section .section-title {
		display: table;
		margin: 0 auto 80px;
	}
}

/* ====================================================================================================
2 - media screen and (max-width: 991px) - end --->>>for medium device
==================================================================================================== */





/* ====================================================================================================
3 - media screen and (max-width: 767px) - start --->>>For Mobile Device
==================================================================================================== */

@media screen and (max-width: 767px){
	.total-token .row .col-md-6:first-child .text-left {
		margin-bottom: 30px;
	}
	.slick-dots {
		left: 0;
		right: 0;
	}
}

/* ====================================================================================================
3 - media screen and (max-width: 767px) - end --->>>For Mobile Device
==================================================================================================== */





/* ====================================================================================================
4 - media screen and (max-width: 680px) - start
==================================================================================================== */

@media screen and (max-width: 680px){}

/* ====================================================================================================
4 - media screen and (max-width: 680px) - end
==================================================================================================== */





/* ====================================================================================================
5 - media screen and (max-width: 480px) - start
==================================================================================================== */

@media screen and (max-width: 480px){
	.header-top {height: auto;}
	.header-top .site-intro {
		text-align: center;
		margin-bottom: 5px;
		padding-bottom: 5px;
		border-bottom: 1px solid rgba(21,21,21,0.1);
	}
	.slider-section .overlay-black {padding: 130px 0px;}
	.slider-section .slider-contant {max-width: 300px;}
	.slider-section .slider-contant h1 {font-size: 24px;}
	.about-section .content .title-xlarge {font-size: 30px;}
	.section-title h2 {font-size: 30px;}
	.counttimer-section .countdown .number {font-size: 42px;}
	.counttimer-section .countdown li {
		float: left;
		width: 46.97%;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.howitwork-section .process-area li.process {width: 100%;}
	.howitwork-section .process-area li.process .dot {top: 285px;}
	.funfact-section .funfact-counter li {width: 50%;}
	.funfact-section .funfact-counter li span {font-size: 14px;}
	.funfact-section .funfact-counter li .count {font-size: 42px;}
	.team-section .member-img,
	.team-section .member-contant {
		width: 100%;
		float: none;
		display: table;
	}
	.team-section .member-name {margin-bottom: 20px;}
	.Requestform-section .peep-man-img {display: none;}
	.post-mate li {margin-right: 20px;}
	.newsletter-section .newsletter-contant .title-xlarge {font-size: 18px;}

	.about-section .content .custom-btn {
		width: 100%;
		margin-right: 0px;
	}

	.breadcrumb-list ul {padding: 0px 0;}
	.breadcrumb-list ul .breadcrumb-item a {
		padding: 0;
		border: none;
		background: none;
	}
	.breadcrumb-list .breadcrumb-item+.breadcrumb-item::after {display: none;}
	.breadcrumb-list .breadcrumb-item+.breadcrumb-item::before {
		top: 0;
		bottom: 0;
		left: -15px;
		content: '/';
		width: 0px;
		height: 0px;
		color: #ffc107;
	}
	.breadcrumb-list ul .breadcrumb-item.active {
		padding: 0px;
		border: none;
		background: none;
	}

	.blog-section .blog-details h4.blog-title {font-size: 20px;}
	.blog-section .blog-details .blockquote {padding: 15px 30px;}
	.blog-section .blog-details .share-links {padding: 15px;}
	.blog-section .blog-details .share-links ul {
		width: 100%;
		float: none;
		display: block;
		margin-top: 15px;
	}
	.comment-box .comment {padding: 15px;}
	.comment-box .post-mate {padding: 0px 0px 15px 15px;}

	.contact-section .basic-info li {padding: 15px;}
	.contact-section .basic-info li .icon {margin-right: 15px;}
	.contact-section .basic-info li .content {font-size: 14px;}

	.breadcrumb-section .page-title {font-size: 36px;}
	.error-section .error-content h2 {font-size: 150px;}
	.error-section .error-content h2>span {width: 124px;}
	.error-section .error-img {padding-top: 0px;}

	.calculator-section .equal,
	.calculator-section .currencyvalue1,
	.calculator-section .currencyvalue2,
	.calculator-section .currency-switcher {
		width: 100%;
		margin-right: 0px;
		margin-bottom: 15px;
	}
	.calculator-section .currency-switcher {margin-bottom: 30px;}
	.item-sorting .result-count,
	.item-sorting .sorting-form {
		width: 100%;
		float: none;
		display: block;
	}
	.item-sorting .result-count {margin-bottom: 15px;}

	.product-details-section .blockquote {padding: 30px;}
	.product-details-section .blockquote p {font-size: 16px;}
	.additional-information h2.title-large {font-size: 24px;}
	.comments-area .comment-author .rateing-start {
		float: none;
		width: 100%;
		display: table;
	}
	.comments-area .comment-list .comment-image {
		float: none;
		width: 100%;
		height: auto;
		margin-bottom: 30px;
	}
	.comments-area .comment-list .comment-info {
		width: 100%;
		text-align: center;
	}
	.shopping-cart-section {overflow-x: scroll;}
	.register-section .signup-form h3.title-medium {font-size: 18px;}

	.chart-section .overlay-black {overflow-x: scroll;}
	#chartdiv {width: 1000px;}

	.slider-section .slider-number {display: none;}
	.slider-section .slick-arrow {display: none !important;}
	.sec-ptb-100 {padding: 50px 0px;}

	.slick-dots {
		width: auto;
		right: 0;
		bottom: 50px;
		position: absolute;
		display: inline-block;
		left: 0;
	}
}

/* ====================================================================================================
5 - media screen and (max-width: 480px) - end
==================================================================================================== */





/* ====================================================================================================
6 - media screen and (max-width: 320px) - start
==================================================================================================== */

@media screen and (max-width: 320px){
	.header-top .criptofy-user-area li {padding: 0px 5px;}
	.slider-section .overlay-black {padding: 65px 0px;}
	.slider-section .slider-number {bottom: 40px;}
	.slick-dots {bottom: 20px;}
	.about-section .content .title-xlarge {font-size: 24px;}
	.section-title h2 {font-size: 24px;}
	.counttimer-section .countdown .number {font-size: 30px;}
	.counttimer-section .countdown li {padding: 20px;}
	.counttimer-section .countdown li {width: 46.555%;}

	.blog-section .blog-item .blog-contant {padding: 15px;}
	.post-mate li {margin-right: 15px;}

	.about-section .content .title-large {font-size: 24px;}
	.funfact-section .funfact-counter li span {font-size: 12px;}
	.funfact-section .funfact-counter li .count {font-size: 36px;}

	.error-section .error-content h2 {font-size: 126px;}
	.error-section .error-content h2>span {width: 100px;}
	.backtotop {
		width: 40px;
		height: 60px;
	}
	.backtotop a.scroll {
		font-size: 24px;
		line-height: 60px;
	}

	.service-section .servicev2 .service-title {font-size: 16px;}
	.team-details-section .team-sidebar .member-content {padding: 10px;}

	#menu-container .menu-list {
		width: 280px;
		overflow-y: scroll;
		padding-bottom: 200px;
	}
	.register-section .signup-form h3.title-medium {font-size: 14px;}

}

/* ====================================================================================================
6 - media screen and (max-width: 320px) - end
==================================================================================================== */