/*==========  Desktop First Method  ==========*/


/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
	.logo{
		width: 70%;
	}
	.toggle_mnu{
		width: 20px;
		height: 40px;
		right: 0;
		top: 5px;
	}
	.gradient-button{
		padding: 15px 20px;
	}
	.sandwich{
		width: 20px;
	}
	.sw-topper{
		top: 0;
		width: 20px;
		height: 3px;
		background: rgb(255, 255, 255);
		border: none;
		border-radius: 4px 4px 4px 4px;
		transition: transform 0.5s, top 0.2s;
		display: block;
	}
	.sw-bottom{
		position: relative;
		width: 20px;
		height: 3px;
		top: 6px;
		background: rgb(255, 255, 255);
		border: none;
		border-radius: 4px 4px 4px 4px;
		transition: transform 0.5s, top 0.2s;
		transition-delay: 0.2s, 0s;
	}
	.sw-footer{
		position: relative;
		width: 20px;
		height: 3px;
		top: 13px;
		background: rgb(255, 255, 255);
		border: none;
		border-radius: 4px 4px 4px 4px;
		transition: all 0.5s;
		transition-delay: 0.1s;
	}
	.sandwich.active .sw-topper{
		top: 9px;
		transform: rotate(-45deg)
	}
	.sandwich.active .sw-bottom{
		top: 6px;
		transform: rotate(45deg)
	}
	.sandwich.active .sw-footer{
		opacity: 0;
		top: 0;
		transform: rotate(180deg)
	}
	.top_text{
		padding-top: 10px;
		margin-left: 10px;
	}
	.top_text h1 {
		font-size: 20px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.top_text p{
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 10px;
	}
	.main_color_bg .main-text{
		font-size: 10px;
	}
	.main_color_bg .main-text p{
		padding: 0;
		font-size: 12px;
	}
	.calculate .calculate_text h1{
		font-size: 15px;
	}
	.range-wrap{
		width: 97%;	
	}
	.range-slider p{
		font-size: 12px;
	}
	
	.ccd .button_top{
		width: 100%;
		font-size: 12px;
		left: 0;
	}
	.s_about .personal_menu{
		width: 100%;
		padding: 50px 0 420px 40px;
		border-radius: 0;
	}
	.s_about .video{
		width: 100%;
		height: 250px;
	}
	.s_about .section_header {
		left: 0;
	}
	.s_about .block.active{
		padding: 0 10px;
		width: 100%;
		margin: 0;
	}
	.s_about .section_header .ccd .button_top{
		width: 100%;
		margin: 0;
		left: 0;
	}

	.resume_container .sale{
		padding: 0;
	}
	.s_resume .resume_container img{
		width: 100%;
		margin-bottom: 40px;
	}
	.s_portfolio .carousel-item {
		padding: 10px 0;
	}
	.owl-carousel .owl-nav {
		text-align: center;
		padding-left: 0;
		margin-top: 0;
		top: 0;
		left: 0;
	}
	.s_about_us .s_people {
		width: 95%;
		left: 3%;
	}
	.s_about_us .s_people .name{
		padding: 25px 0 10px 0;
		margin: 0;
	}
	.s_about_us .s_people p {
		margin: 0;
	}
	.s_about_us .s_people img{
		width: 130px;
		margin: 0;
		margin-top: 20px;
	}
	.s_sell .info{
		margin-bottom: 20px;
	}
	.s_creature .owl-carousel .owl-item .image_frame4{
		display: none;
	}
	.s_creature .item_creature .img2 {
		padding-left: 10px;
		padding-top: 0;
	}
	.s_creature .s_creature_info{
		padding: 0 15px;
	}
	.s_creature .item_creature{
		width: 100%;
	}
	.s_creature .item_creature .s_creature_wrap_1 .s_creature_wrap_flex {
		padding: 1px 0 5px 0;
	}
	.s_creature .item_creature_2 img{
		width: 110%;
		margin-left: 0;
		margin-bottom: 25px;
	}
	.s_creature .owl-carousel .owl-nav{
		padding-left: 0;
	}
	.main_footer {
		text-align: left;
	}
	.main_footer .social_wrap {
		float: left;
		margin-top: 20px;
		width: 100%;
	}
	.main_footer .social_wrap ul {
		padding-left: 0;
	}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	.logo{
		width: 70%;
		padding-top: 20px;
	}
	#button-up{
		bottom: 30px;
	}
	.button_top{
		width: 50%;
	}
	.section_header h2 {
    padding-top: 15px;
	}
	.top_text h1{
		width: 70%;
		font-size: 30px;
		padding-left: 10px;
		padding-right: 10px;
		background-color: rgba(0,0,0, 0);
		box-shadow: none;
	}
	.top_text p{
		width: 70%;
	}
	.resume_container .sale{
		padding: 0;
	}
	.s_about .personal_menu{
		padding: 50px 40px;
	}

	.s_resume .resume_container img{
		width: 100%;
		margin-bottom: 40px;
	}

	.s_about_us .s_people .name{
		padding: 40px 0 10px 0;
		margin: 0;
	}
	.s_about_us .s_people p{
		margin: 0;
	}
	.s_about_us .s_people .owl-dots{
		top: 70px;
	}
	.s_about_us .s_people img{
		width: 130px;
		margin: 0;
		margin-top: 20px;
	}
	.s_sell .info{
		margin-bottom: 20px;
	}
	.s_sell .info p {
		padding: 0 15px;
	}
	.s_creature .owl-carousel .owl-item .image_frame4{
		display: none;
	}
		.s_creature .item_creature_2 img{
		width: 100%;
		margin-left: 0;
		margin-bottom: 25px;
	}
	.s_creature .item_creature .img2{
		height: 250px;
		padding-top: 0;
		padding-left: 6px;
	}
	.s_creature .item_creature .img2 img{
		height: 200px;
		width: 9px;
		padding-top: 0;
	}
	.s_creature .item_creature img {
		height: 200px;
		width: 20px;
	}
	.s_creature .item_creature .img3{
		padding-top: 0;
		padding-left: 6px;
	}
	.s_creature .item_creature .img3 img{
		height: 100px;
		width: 8px;
	}
	.s_creature .item_creature .s_creature_wrap_last{
		margin-top: 0;
	}
	.s_creature .item_creature .s_creature_wrap_last .s_creature_wrap_3{
		padding: 30px 0 0 0;
	}
	.s_creature .item_creature .line5{
		height: 170px;
		width: 20px;
	}
	.s_creature .item_creature .s_creature_wrap_1 {
		margin-top: 23px;
		padding-left: 5px;
	}
	.s_creature .item_creature .s_creature_wrap{
		margin-top: 35px;
		padding-left: 5px;
	}
	.s_creature .item_creature .s_creature_wrap .s_creature_wrap_flex {
		padding: 4px 0;
	}
	.s_creature .item_creature .s_creature_wrap .s_creature_wrap_3{
		padding: 18px 0 0 0;
	}
	.s_creature .item_creature .s_creature_wrap .s_creature_wrap_flex .wrap_flex {
		margin: 2px 0;
	}
	.s_creature .item_creature .s_creature_wrap .s_creature_wrap_flex p, 
	.s_creature .item_creature .s_creature_wrap_1 .s_creature_wrap_flex p,
	.s_creature .item_creature .s_creature_wrap .s_creature_wrap_3 p,
	.s_creature .item_creature .s_creature_wrap_last .s_creature_wrap_3 p{
		font-size: 12px;
	}
	.s_creature .item_creature .s_creature_wrap svg,
	.s_creature .item_creature .s_creature_wrap_1 svg {
		width: 20px;
		height: 20px;
}
	.main_footer {
		text-align: left;
	}
	.main_footer .social_wrap {
		float: left;
		margin-top: 20px;
		width: 100%;
	}
	.main_footer .social_wrap ul {
		padding-left: 0;
	}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	.logo{
		width: 70%;
		padding-top: 20px;
	}
	.top_text h1{
		width: 70%;
		font-size: 30px;
		padding-left: 10px;
		padding-right: 10px;
		background-color: rgba(0,0,0, 0);
		box-shadow: none;
	}
	.top_text p{
		width: 70%;
	}
	.s_about .block.active{
		padding: 0 10px;
	}
	.s_about .ccd .button_top{
		width: 100%;
	}
	.resume_container .sale{
		padding: 0;
	}
	.s_resume .resume_container img{
		width: 100%;
		margin-bottom: 40px;
	}

	.s_sell .info{
		margin-bottom: 20px;
	}
	.s_sell .info p {
		padding: 0 15px;
	}
	.s_sell .s_button {
		margin-bottom: 100px;
		text-align: center;
	}
	.main_footer {
		text-align: left;
	}
	.main_footer .social_wrap {
		float: left;
		margin-top: 20px;
		width: 100%;
	}
	.main_footer .social_wrap ul {
		padding-left: 0;
	}
}
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}