@media (max-width: 1399px){

	#hero{background-size: cover;}
	#gallery{background-size: cover;}
}

@media (max-width:1199px){


	.offcanvas.offcanvas-end {width: 35%;}

	section {
		width: 66% !important;
		height: 100% !important;
		padding: 100px 0;
	}

	#work .one{margin-top: 30px;}
	#work .two{margin-top: 30px;}

}

@media (max-width: 991px){

	.navbar.bg-body-tertiary{background-color: transparent !important;}
	.navbar-toggler{display: block;}

	.navbar-toggler{
		border: none;
		background: #356ba2;
		font-size: 30px;
		border-radius: 0px;
		color: white;
	}

	.navbar-side {
    		padding: 10px 0 0 0;
	}

	section{width: 100% !important;}


	.offcanvas.offcanvas-end{
  	width: 50%;
  }

  .offcanvas-header {
    display: flex;
    justify-content: flex-end;
    color: white;
}


}

@media (max-width: 767px){
  .offcanvas.offcanvas-end{width: 65%;}
}

@media (max-width:535px){
 .offcanvas.offcanvas-end{width: 75%;}
 .container {padding-left: 15px;padding-right: 15px;}
  #hero .item{max-width: 100%;}
}