/**********************************************

Template Name:  Alo - Personal Portfolio Template
Author: ThemeFusionBD
Version: 1.0
Design and Developed by: ThemeFusionBD

NOTE: This is responsive stylesheet of the template, This file contains the styling for various devices like mobile phone, tablet, laptop etc.

*************************************************/

/* Medium Layout: 1280px. */
@media only screen and (min-width: 992px) and (max-width: 1200px) { 
  
    .dj-megamenu-override li.dj-up {padding: 0 3px 0 15px !important;}
}
/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) { 
 	.sp-page-builder .page-content #section-id-1545848454483 {margin-top: -41px !important;}
 	.goals span {font-size: 10px !important;}
	.goals i {font-size: 40px !important;}
	.goals .goal-1, .goal-2, .goal-3, .goal-4, .goal-5, .goal-6 {padding: 12px 0 !important;}
	#sp-footer .footer-b ul {margin: 0 0 0 0 !important;}
	#sp-footer ul {margin: 0 !important;}
	#sp-footer {text-align: left !important;}


	.banking-section {
	    margin-top: -39px;
	    border-radius: 0 !important;
	    padding: 5px 0;
	}

	#dj-megamenu104mobile {
        display: inline-block;
        float: left;
        margin-top: 4px;
        margin-left: -38px;
    }
  .search-icon {
    position: relative;
    top: 6px;
}
  .banking-area {
    text-align: center;
    width: 100%;
}
  .dj-megamenu-select-dark .dj-mobile-open-btn, .dj-megamenu-offcanvas-dark .dj-mobile-open-btn, .dj-megamenu-accordion-dark .dj-mobile-open-btn{font-size:28px !important;}
    
}
/* Mobile Layout lower than: 320px. */
@media only screen and (max-width: 767px) { 
   .sp-page-builder .page-content #section-id-1545848454483 {margin-top: -41px !important;}
 	.goals span {font-size: 10px !important;}
	.goals i {font-size: 40px !important;}
	.goals .goal-1, .goal-2, .goal-3, .goal-4, .goal-5, .goal-6 {padding: 12px 0 !important;}
	#sp-footer .footer-b ul {margin: 0 0 0 0 !important;}
	#sp-footer ul {margin: 0 !important;}
	#sp-footer {text-align: left !important;}
	.banking-section {margin-top: -30px; border-radius: 0 !important;}
  .banking-area {
    text-align: center;
    width: 100%;
}
.bottom-menu .bottom-menu-3 ul{left: 0;}
.bottom-menu .bottom-menu-3{text-align: left;}
.search-icon i{
    top: 14px;
    left: 25px;
  }
}


/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) { 
	.sp-page-builder .page-content #section-id-1545848454483 {margin-top: -40px !important;}
 	.goals span {font-size: 10px !important;}
	  .goals i {font-size: 40px !important;}
	  .goals .goal-1, .goal-2, .goal-3, .goal-4, .goal-5, .goal-6 {padding: 12px 0 !important;}
	  #sp-footer .footer-b ul {margin: 0 0 0 0 !important;}
	  #sp-footer ul {margin: 0 !important;}
	  #sp-footer {text-align: left !important;}
  .banking-area {
	    text-align: center;
      width: 100%;
	}
  .service .service-item-wrap{width: 100%;}
  .bottom-menu .bottom-menu-3 ul{left: 0;}
  .search-icon i{
      top: 14px;
      left: 25px;
  }
  
  .modal-dialog {
    margin: 0 !important;
}
  .bottom-menu .bottom-menu-3{text-align: left;}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	.sp-page-builder .page-content #section-id-1545848454483 {margin-top: -41px !important;}
 	.goals span {font-size: 10px !important;}
	.goals i {font-size: 40px !important;}
	.goals .goal-1, .goal-2, .goal-3, .goal-4, .goal-5, .goal-6 {padding: 12px 0 !important;}
	#sp-footer .footer-b ul {margin: 0 0 0 0 !important;}
	#sp-footer ul {margin: 0 !important;}
	#sp-footer {text-align: left !important;}
  .service .service-item-wrap{width: 100%;}
  .search-icon i{
      top: 14px;
      left: 25px;
  }

  .top-header-info {
      display: block;
      top: 0;
      text-align: center;
      position: static;
      left: 0;
      right: 0;
      padding: 20px 0 10px 0;
  }
  .logo-area p {
    margin: 0;
    text-align: center;
}
  .bottom-menu .bottom-menu-3{text-align: left;}
}

@media only screen and (max-width:480px) {
	.sp-page-builder .page-content #section-id-1545848454483 {margin-top: -41px !important;}
	.goals span {font-size: 10px !important;}
  	.goals i {font-size: 40px !important;}
  	.goals .goal-1, .goal-2, .goal-3, .goal-4, .goal-5, .goal-6 {padding: 12px 0 !important;}
  	#sp-footer .footer-b ul {margin: 0 0 0 0 !important;}
  	#sp-footer ul {margin: 0 !important;}
  	#sp-footer {text-align: left !important;}

  	#dj-megamenu104mobile {
	    display: inline-block;
	    float: left;
	    margin-top: -179px;
	    margin-left: -12px;
	}
  .login-menu ul li span a {
      font-size: 10px;
  }
  .container-2 .icon {
    position: relative;
    z-index: 1;
    left: 100%;
}
  .top-header-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
	.banking-section {margin-top: 0px !important;}
	 #sp-footer-2 img{max-width: 40%;}
  .banking-area {
	    text-align: center;
      width: 100%;
	}

  .top-header-info {
      display: block;
      top: 0;
      text-align: center;
      position: static;
      left: 0;
      right: 0;
      padding: 20px 0 10px 0;
  }
   .service .service-item-wrap{width: 100%;}
   .bottom-menu .bottom-menu-3 ul{left: 0;}
   .bottom-menu .bottom-menu-3{text-align: left;}
   .search-icon i{
    top: 14px;
    left: 25px;
   }
}

@media only screen and (max-width:414px) {

	.sp-page-builder .page-content #section-id-1545848454483 {margin-top: -40px !important;}
	.goals span {font-size: 10px !important;}
  	.goals i {font-size: 40px !important;}
  	.goals .goal-1, .goal-2, .goal-3, .goal-4, .goal-5, .goal-6 {padding: 12px 0 !important;}
  	#sp-footer .footer-b ul {margin: 0 0 0 0 !important;}
  	#sp-footer ul {margin: 0 !important;}
  	#sp-footer {text-align: left !important;}

  	#dj-megamenu104mobile {
  	 display: inline-block;
      float: left;
      position: relative;
      top: 180px;
      z-index: 9999999999;
  	}
  .container-2 .icon {
    position: absolute;
    z-index: 1;
    left: 100%;
}
	.banking-section {margin-top: 0px !important;}
	 #sp-footer-2 img{max-width: 40%;}
	div.k2SearchBlock .k2SearchBlockForm {
    	top: 0px;
    	position: relative;
	}
	.logo-area{display: block;text-align: center;}
	.logo-area .moduletable{
		display: inline-block;
		text-align: center;
	}
  .banking-area {
	    text-align: center;
      width: 100%;
	}
  .dj-megamenu-select-dark .dj-mobile-open-btn, .dj-megamenu-offcanvas-dark .dj-mobile-open-btn, .dj-megamenu-accordion-dark .dj-mobile-open-btn{font-size:37px !important;}
  
  .search-icon {
      top: 7px;
  }

  .top-header-info {
      display: block;
      top: 0;
      text-align: center;
      position: static;
      left: 0;
      right: 0;
      padding: 20px 0 10px 0;
  }
  .search-icon .serach-box {
    left: -18px !important;
}
	  .service .service-item-wrap{width: 100%;}
    .bottom-menu .bottom-menu-3{text-align: left;}
    .bottom-menu .bottom-menu-3 ul{left: 0;}
    .search-icon i{
      top: 2px;
      left: 0;
    }
    .search-wrap {
        height: 126px;
        text-align: center;
    }
}

@media only screen and (max-width:375px) {
    .search-wrap .inputbox{width: 80%;}
    .logo-area {text-align: center;}
    .logo-area img{display: inline-block;}
    .banking-section{text-align: center;background: transparent;color: #666;padding-bottom: 20px;}
    .banking-section strong,
    .banking-section a span{color: #666;}
    .logo-area p {
        margin: 0;
        text-align: center;
    }
  
  .container-2 .icon {
    	position: relative;
	}

    .top-header-info {
        display: block;
        top: 0;
        text-align: center;
        position: static;
        left: 0;
        right: 0;
        padding: 20px 0 10px 0;
    }

  .main-menu-button ul li{top: -25px;}
	.sp-page-builder .page-content #section-id-1545848454483 {margin-top: -41px !important;}
	.goals span {font-size: 10px !important;}
  	.goals i {font-size: 40px !important;}
  	.goals .goal-1, .goal-2, .goal-3, .goal-4, .goal-5, .goal-6 {padding: 12px 0 !important;}
  	#sp-footer .footer-b ul {margin: 0 0 0 0 !important;}
  	#sp-footer ul {margin: 0 !important;}
  	#sp-footer {text-align: left !important;}
  	.banking-section {margin-top: 0px !important;}

  	#dj-megamenu104mobile {
	    display: inline-block;
	    float: left;
	    margin-top: 0;
	    margin-left: -12px;
      position: relative;
      top: 0px;
	 }
	#dj-megamenu104mobile .dj-mobile-open-btn{background: transparent;}
	#dj-megamenu104mobile .dj-mobile-open-btn:hover{color: #fff;}
	#home-1 .white-box{
		margin-left: 10px;
	    padding: 10px;
	    margin-right: 10px;
	}
	.sp-page-builder .page-content #services,
	#service-header,
	#home-1-product .sppb-row,
	#goal-header .sppb-row {margin-left: 10px !important;margin-right: 10px !important;}

     #sp-footer-2 img{max-width: 40%;}
     div.k2SearchBlock .k2SearchBlockForm {
        top: -40px;
	    position: relative;
	    display: inline;
	}

	.banking-area {
	    text-align: center;
      width: 100%;
	}

	.login-area .username, .login-area .password, .login-area .login { width: 26%;}
	.login-area #UserName, .login-area #Password {width: 100%;}
	.login-menu ul {text-align: center;}
  .search-icon{
   float: right;
    position: relative;
    top: -3px;
  }
  div.k2SearchBlock form input.inputbox {
    outline: none;
    border: 1px solid transparent;
    padding: 2px 0px 0 5px;
    
    color: #777;
    top: 40px;
    position: relative;
    width: 100%;
}
  #oblogin {
    float: right;
    display: inline-block;
    margin-left:0;
    text-align:center;
}
  .service .service-item-wrap{width: 100%;}
  .search-icon i{
    top: 14px;
    left: 25px;
  }

  .top-header-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
  .bottom-menu .bottom-menu-3 ul{left: 0;}
  .bottom-menu .bottom-menu-3{text-align: left;}
  .search-icon i{
    top: 14px;
    left: 25px;
  }
}

@media only screen and (max-width:360px) {
  .footer .copyright .footer-menu{padding: 0px !important; display: block !important;}
  .sp-page-builder .page-content #services {padding-bottom: 0px !important;}
  .sp-page-builder .page-content #section-id-1545848454483 {margin-top: -41px !important;}

  .goals span {font-size: 10px !important;}
  .goals i {font-size: 40px !important;}
  .goals .goal-1, .goal-2, .goal-3, .goal-4, .goal-5, .goal-6 {padding: 12px 0 !important;}
  #sp-footer .footer-b ul {margin: 0 0 0 0 !important;}
  #sp-footer ul {margin: 0 !important;}
  #sp-footer {text-align: left !important;}

  #sp-page-builder .page-content .sppb-section, #sp-page-builder .sppb-section {will-change: auto !important;}

  .login-area #UserName, .login-area #Password {
  	width: 100%;
    display: inline-block;
    border: none;
  }
  .logo-area p {
    margin: 0;
      text-align: center;
  }

  .top-header-info {
    display: block;
    top: 0;
    text-align: center;
    position: static;
    left: 0;
    right: 0;
    padding: 20px 0 10px 0;
}

.top-header-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

  .login-area .username, .login-area .password {width: 32%;}
  .login-area .login {display: inline-block;}

   #sp-footer-2 img{max-width: 40%;}
  .banking-area {
	    text-align: center;
      width: 100%;
	}
  #dj-megamenu104mobile {
    display: inline-block;
    float: left;
    margin-top: 0;
    margin-left: 6px;
    position: relative;
    top: 0px;
}
  .service .service-item-wrap{width: 100%;}
  .bottom-menu .bottom-menu-3{text-align: left;}
  .bottom-menu .bottom-menu-3 ul{left: 0;}
  .search-icon i{
    top: 14px;
    left: 25px;
  }
}

@media only screen and (max-width:320px) {
  .main-menu-button ul li a{padding: 6px 10px;margin-bottom: 5px;}
  .footer .copyright .footer-menu{padding: 0px !important; display: block !important;}
  #sp-footer-2 img{max-width: 40%;}
  .banking-area {
	    text-align: center;
      width: 100%;
	}
  
  .container-2 .icon {
    position: relative;
    z-index: 1;
    left: 100%;
}
  
  .login-area #bp-login {
    font-size: 8px;
}
  .service .service-item-wrap{width: 100%;}
  .bottom-menu .bottom-menu-3{text-align: left;}
  .bottom-menu .bottom-menu-3 ul{left: 0;}
  .search-icon i{
    top: 14px;
    left: 25px;
  }
  .logo-area p {
      margin: 0;
      text-align: center;
  }
  
}