/*Responsive features stylesheet for jwallwork.co.uk

/*Responsive delivery of background images*/

/*.background-image {
	display: none;
}*/

@media screen and (min-width: 1920px) and (orientation: landscape) {
	.bg-2560 {
		display: inline;
	}
	
	.bg-1024, .bg-1920 {
		display: none;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1920px) and (orientation: landscape) {
	.bg-1920 {
		display: inline;
	}
	
	.bg-1024, .bg-2560 {
		display: none;
	}
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
	.bg-1024 {
		display: inline;
	}
	
	.bg-1920, .bg-2560 {
		display: none;
	}
}

@media screen and (orientation: portrait) {
	.bg-1920 {
		display: inline;
	}
	
	.bg-1024, .bg-2560 {
		display: none;
	}
	
	.bg-portraitcenterbodge {
		transform: translate(-30%);
	}
}

/*above 1366px wide viewport: (Appears to be unused)*/

/*1000px wide viewport:*/

@media screen and (max-width: 1000px){
	.headerphone:first-child {
		display: none;
	}
	.topcontact > span {
		display: none;
	}
	
	.whyus section {
		width: 30vw;
	}
	
	.expandablewhyus {
		width: 30vw;
	}
}

/*850px wide viewport - for navbar smoothness*/

@media screen and (max-width: 850px){
	
	.headersocial:last-child {
		display: none;
	}
	
	.servicescontainer {
		width: 96%;
	}
	
	.servicescontainer .threecolumn {
		width: 100%;
	}
}

/*962px wide viewport:*/

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

/*810px wide viewport:*/

@media screen and (max-width: 810px){
	.headersocial {
		display: none;
	}
}

/*768px wide viewport:*/

@media screen and (max-width: 768px){
	
	.header .phone {
		display: none;
	}
	
	.header:after{
	  content: "";
	  display: table;
	  clear: both;
	}
	
	.navbar{
	  height: fit-content;
	}
	
    .menu{
	  text-align: center;
	  float: none;
	}
	
	.menu1 a:not(:first-child):not(.icon){
		display: none;
	}
	
	.menu2 a:not(:nth-child(2)):not(.icon){
		display: none;
	}
	
	.menu3 a:not(:nth-child(3)):not(.icon){
		display: none;
	}
	
	.menu4 a:not(:nth-child(4)):not(.icon){
		display: none;
	}
	
	.menu5 a:not(:nth-child(5)):not(.icon){
		display: none;
	}
	
	.menu a.icon{
	  float: right;
	  display: block;
	}
	
	.menu.hamburgertime {
		position: relative;
		background-color: black;
	}
	
	.menu.hamburgertime .icon{
	  position: absolute;
	  right: 0;
	  top: 0;
	}
	
	.menu.hamburgertime a:nth-child(n){
	  float: none;
	  display: block;
	  text-align: center;
	}

	.menu a{
	  float: left;
	  text-align: center;
	  height: auto;
	}

	.sc-odd-even{
		font-size: 100%;
		flex-direction: column;
	}

	.sc-odd-even > div{
		width: 90vw;
	}

	.sc-odd-even > div > img{
		width: 100%;
		padding: 10px;
		margin: 0;
	}

	.sc-odd div:nth-child(odd){
		text-align: center;
	}

	.sc-odd div:nth-child(odd) img{
		float: none;
	}

	.sc-even div:nth-child(even){
		text-align: center;
	}

	.sc-even div:nth-child(even) img{
		float: none;
	}
	
	.slidercontainer {
		margin-top: max(145vh, 1088px);/*px=7.5*vh*/
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
	
	.plx-index1 {
		height: max(150vh, 1125px);/*px=7.5*vh*/
	}
	
	.plx-index1 .plx-layer_superfore {
		top: max(185vh, 1388px);/*px=7.5*vh*/
	}
	
	.footer {
		height: fit-content;
	}
	
	.footer > .contact {
		float: left;
	}
	
}

/*601px wide viewport:*/

@media screen and (max-width: 601px){
	
	body {/*This font size can be adjusted or removed.*/
		font-size: calc(1.5vw + 1vh);
	}
	
	.whatsappcontainer{
		position: fixed;
		display: block;
		right: -185px;
		
		bottom: 0;
		margin: 25px;
		-webkit-animation-name: whatsapp-slide;
		-webkit-animation-duration: 3s;
		-webkit-animation-delay: 5s;
		-webkit-animation-fill-mode: forwards;
		animation-name: whatsapp-slide;
		animation-duration: 3s;
		animation-delay: 5s;
		animation-fill-mode: forwards;
		z-index: 100;
	}
		
	@keyframes whatsapp-slide{
	
			100%{
			right: 0;
		}
	}

	@-webkit-keyframes whatsapp-slide{
	
			100%{
			right: 0;
		}
	}

	.whatsappcontainer a {
		color: white;
		padding-top: 10px;
		padding-left: 12px;
		padding-bottom: 10px;
		text-decoration: none;
		font-size: 18px;
		background-color: lightgreen;
		border-radius: 50px;
		box-shadow: 2px 2px 3px #999
	}

	.whatsappcontainer a i {
		vertical-align: middle;
		font-size: 30px;
		padding: 15px;
		padding-top: 12px;
		padding-bottom: 12px;
		margin-top: -2px;
		border-radius: 50px;
		background-color: #25d366;
	}
	
	.navbar .contact {
		position: absolute;
		float: none;
		padding: 0;
		left: 50%;
		transform: translate(-50%, 0);
	}
	
	.navbar .phonebutton {
		display: block;
		margin-left: 16vw;
		padding-top: 8px;
		padding-bottom: 6px;
		white-space: nowrap;
	}
	
	.phonemobile icon {
		
	}
	
	.herobuttoncontainer * {
		display: block;
		float: none;
	}
	
	.herobuttonleft {
		margin-bottom: 0.75em;
	}
	
	.servicescontainer {
		top: max(135vh, 1013px);/*px=7.5*vh*/
	}
	
	.slidercontainer {
		display: flex;
		flex-direction: column;
		margin-top: max(175vh, 1313px);/*px=7.5*vh*/
	}
	
	.slidertext {
		float: none;
		width: 100%;
		margin: 0;
		margin-bottom: 1.5em;
	}
	
	.slidertext .h1 {
		margin-bottom: 0.2em;
	}
	
	.slidertextinner {
		float: left;
		width: 52%
	}
	
	.slidertextinner br {
		display: none;
	}
	
	.slidertextmore {
		float: right;
		width: 42%;
	}
	
	.sliderlinks {
		display: inline-block;
		margin-top: 1.25em;
	}
	
	.sliderlinks img {
		height: 59px;
		width: 59px;
		margin-right: 5px;
	}
	
	.sliderlinks:first-child {
		float: left;
	}
	
	.sliderlinks:last-child {
		float: right;
	}
	
	.carousel, .carousel-image {
		width: 100%;
		max-width: 100%;
	}
	
	.plx-index1 {
		height: max(180vh, 1350px);/*px=7.5*vh*/
	}
	
	.plx-index1 .plx-layer_superfore {
		top: max(215vh, 1613px);/*px=7.5*vh*/
	}
	
	.mapcontainer {
		width: 90%;
	}
	
	.copyright {
		font-size: calc(1.5vw + 1vh);
	}
}

/*450px wide viewport for services granularity*/

@media screen and (max-width: 450px){
	.servicescontainer {
		top: max(150vh, 1125px);/*px=7.5*vh*/
	}
	
	.slidercontainer {
		margin-top: max(190vh, 1425px);/*px=7.5*vh*/
	}
	
	.plx-index1 {
		height: max(195vh, 1463px);/*px=7.5*vh*/
	}
	
	.plx-index1 .plx-layer_superfore {
		top: max(230vh, 1725px);/*px=7.5*vh*/
	}
	
	.contactformcontainer {
		display: none;
	}
	
	.contactbuttonscontainer {
		display: block;
		width: 55%;
	}
	
	.contactbuttonscontainer .h1 {
	filter: drop-shadow(0 0 0.75rem #003B00);
	}
	
	.contactbuttonscontainer a {
		font-size: 20px;
		font-weight: bold;
		margin-top: 0.75em;
		width: 100%;
	}
	
	.contactbuttonscontainer a i {
		vertical-align: sub;
		font-size: 30px;
		margin-right: 0.25em;
	}
	
	.contactbuttonscontainer .phonebutton {
		display: block;
	}
	
	.mapcontainer {
		width: 100%;
	}
}

/*414px wide viewport:*/

@media screen and (max-width: 414px){
	
	body {
		font-size: calc(2vw + 1vh);
	}
	
	.navbar .phonebutton {
		margin-left: 22vw;
	}
	
	.slidertextinner {
		width: 100%;
	}
	
	.slidertextmore {
		display: none;
	}
	
	.footer > .contact {
		padding: 5px;
	}
	
}

/*375px wide viewport:*/

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

/*360px wide viewport:*/

@media screen and (max-width: 360px){
	
	.contactbuttonscontainer {
		width: 60vw;
	}
	
}