/* ================
	MOBILE STYLING
   ================ */

/* ----- WIDTH 1575px ----- */
@media (max-width: 1575px) {
	.navbar-default .navbar-nav > li > a {
		padding: 31px 18px;
	}
}

/* ----- WIDTH 1480px ----- */
@media (max-width: 1480px) {
	#block-novalde-main-menu {
		display: none;
	}

	.hpser .hpsitm {
		width: 100%;
	}

	.op-elements {
		width: 80%;
	}

	.ucmc {
		width: 95%;
	}

	.view-my-pets.view-display-id-block_2 .prow {
		flex-flow: row wrap;
	}

	.view-my-pets.view-display-id-block_2 .pbod {
		text-align: center;
		width: 100%;
		margin-left: 0px;
	}

	.view-my-pets.view-display-id-block_2 .ptxt h2 {
		text-align: center;
	}

	.sphcnt {
		width: 95%;
	}

	.sph-pp {
		margin-left: 0px;
	}

	#block-pm {
		width: 59%;
	}

	.ucmc .field--name-field-sidebar {
		width: 40%;
	}

	.ucmc .field--name-field-main-content {
		width: 58%;
	}
}


/* ----- WIDTH 1250PX ----- */
@media (max-width: 1250px) {
	.hpsi-img {
		width: 100%;
	}

	.hpsi-img img {
		width: 100%;
		height: 400px;
		border-radius: 20px 20px 0px 0px;
	}

	.hpser .hpsitm:nth-of-type(odd),
	.hpser .hpsitm:nth-of-type(even) {
		align-items: center;
	}

	.hpser .hpsitm:nth-of-type(odd) .hpsi-wu {
		top: -125px;
		right: 0px;
		padding-top: 80px;
	}

	.hpser .hpsitm:nth-of-type(even) .hpsi-wu {
		top: -125px;
		left: 0px;
		padding-top: 80px;
	}

	.hpser .hpsitm:nth-of-type(odd) .hpsi-icn,
	.hpser .hpsitm:nth-of-type(even) .hpsi-icn {
		position: relative;
		top: -70px;
		right: 0px;
		left: 0px;
	}

	.hpsi-wu {
		width: 100%;
		border-radius: 0px 0px 20px 20px;
	}

	.hpser .hpsitm {
		margin-top: -60px;
		overflow: revert;
	}

	.hpser {
		margin-bottom: -40px;
	}
}


/*------WIDTH 1024px------*/
@media (max-width: 1024px) {
	
	body.user-logged-in.navbar-is-fixed-top {
		margin-top: 106px !important;
	}

	#sidrmm {
		display: unset;
	}
	
	.navbar-nav {
		display: none;
	}

	#block-logo-light {
 	display: inline-block;
 	vertical-align: middle;
 	}

 	.navbar .container-fluid,
 	#block-migration .mignotice {
 		width: 90%;
 	}

 	.col2 {
 		width: 90%;
 		flex-flow: row wrap;
 	}

 	.col2 > .field {
 		width: 100%;
 	}

 	.hpimg {
 		text-align: center;
 		margin-bottom: 100px;
 	}

 	.hpbtn a {
 		margin: 10px 5px;
 	}
 }


/*------WIDTH 768px------*/
@media (max-width: 768px) {

	:root {
		font-size: 16px !important;
	}
	
	.collapse {
		display: block;
	}

	.navbar .container-fluid,
 	#block-migration .mignotice {
		width: 95%;
	}

	.hbod .field--name-field-ptitle {
		font-size: 3rem;
	}

	.hpbtn {
		margin-top: 40px;
	}

	.hpbtn a {
		margin: 10px 40px;
	}

	.op-elements {
		width: 100%;
	}

	.view-my-pets.view-display-id-block_2 .views-row {
		width: 100%;
	}

	.ucmc .field--name-field-sidebar {
		width: 55%;
	}

	.ucmc .field--name-field-main-content {
		width: 43%;
	}

	.sph-td {
		margin-left: 40px;
	}

	#block-pm {
    	width: 95%;
    	left: 2.5%;
    	top: 35vh;
	}

	.sec-ph {
		margin-bottom: 135px;
	}
 }


/* ----- WIDTH 600PX ---- */
@media (max-width: 600px) {
	.sph-pp img {
		width: 100px;
		height: 100px;
		border-width: 5px;
	}

	.sphcnt {
    	width: 100%;
   		margin-top: 0px;
    	background-color: var(--cp);
    	padding: 25px;
    	margin-bottom: 50px;
    }

    #block-pm {
    	position: static;
    	padding: 25px;
    	width: 100%;
    }

    .sec-ph {
    	margin-bottom: 25px;
    }

    .sph-cb {
    	display: none;
    }

    .sph-td {
    	margin-top: 0px;
    }

    .ucmc {
    	flex-flow: row wrap;
    }

    .ucmc .field--name-field-sidebar {
    	width: 100%;
    	order: 2;
    }

    .ucmc .field--name-field-main-content {
    	width: 100%;
    	order: 1;
    	margin-left: 0px;
    }

    .menu--profile-menu {
    	flex-flow: row wrap;
    	justify-content: center;
    }

    .menu--profile-menu > li > a {
    	margin-bottom: 10px;
    }

    .sph-ns {
    	font-size: 2.4rem;
    }

}



/* ----- WIDTH 500PX ----- */
@media (max-width: 500px) {
	.vcard .vccont {
	  width: 320px;
	  margin: 40px auto;
	}

	.vcard .field--name-field-ppic img {
	  width: 280px;
	  height: 280px;
	}

	.vcard .field--name-field-name {
	  font-size: 2.5rem;
	}

	#block-accountmenu {
		display: none;
	}

	.op-elements {
		padding: 25px;
	}

	.op-elements h1 {
		font-size: 2.5rem;
	}

	.ope-subhead {
		width: 100%;
	}

	.ope-support {
		flex-flow: row wrap;
	}

	.sphcnt {
		flex-flow: column;
		justify-content: center;
	}

	.sph-td {
		margin: 25px 0px 0px 0px;
		text-align: center;
	}

	.sph-ns {
		text-align: center;
	}
}