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

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

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    .top_links {
        background-color: #fff;
        border-radius: 0 0 10px 10px;
        display: none;
        margin-top: 94px;
        padding: 10px;
        position: absolute;
        vertical-align: middle;
        width: 100%;
        z-index: 999;
        -webkit-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow:    0px 4px 4px 0px rgba(50, 50, 50, 0.2);
        box-shadow:         0px 4px 4px 0px rgba(50, 50, 50, 0.2);
    }
    
    .top_links a {
        display: block;
        text-align: center;
        margin-bottom: 10px;
    }
    
    .main-left {
        text-align: center;
    }
    
    .countbox {
        margin-left: auto;
        margin-right: auto;
    }
    
    .main_right {
        margin-top: 60px;
    }
    
    .main_right .items {
        text-align: center;
    }
    
    .good-card {
        margin-bottom: 25px;
    }
    
    .help-form input {
        margin-bottom: 10px;
    }
    
    .compatibility img {
        width: 120%;
        height: auto;
    }
    
    .how-item {
        margin-top: 50px;
        width: 230px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .pay-info {
        margin-top: 30px;
    }
    
    .feedback_item .image_wrap, .text {
        max-width: 40%;
    }

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	
	/*Disable Animation on Mobile Devices*/
	.animated {
		/*CSS transitions*/
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;
		/*CSS transforms*/
		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		/*CSS animations*/
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
	}
    
    .problem_item {
        display: block;
        margin: 0 auto;
        padding: 0;
    }
    
    .help-form input {
        display: block;
        margin-bottom: 10px;
        margin-right: auto;
        margin-left: auto;
        width: 60%;
    }
    
    .delivery img {
        display: block;
        float: none;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    
    footer .logo, footer .phone {
        float: none;
        text-align: center;
    }
    
    .footer-links {
        margin: 30px 0;
    }

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    .main .social {
        margin-top: 60px;
    }
    
    .mibank img {
        max-width: 355px;
        height: auto;
        margin-top: -340px;
    }
    
    .help-form input {
        width: 100%;
    }
}

/* 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) {
    .top_links {
        display: block !important;
        line-height: 4.5;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .how-item {
        width: 230px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    h1 {
        font-size: 32px;
    }
    
    .main-left h2 {
        font-size: 26px;
    }
    
    .main_right .item {
        max-width: 140px;
    }
    
    .problem_item img {
        max-width: 470px;
    }
    
    .about .item {
        display: block;
        margin-top: 20px;
    }
  
}

@media (min-width: 768px) and (max-width: 992px) {
    .problem_item img {
        max-width: 360px;
    }
  
}
    
@media (min-width: 480px) and (max-width: 768px) {
    .mibank img {
        max-width: 250px;
        height: auto;
        margin-top: -260px;
    }
        
}