/* DEFAULTS
----------------------------------------------------------*/


/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {}


/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {}


/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {}


/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}


/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {}


/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media only screen and (min-width: 320px) and (max-width: 480px) {
	.hideSkiplink {
		display: block;
	}
	.hideSkiplink.responsive {
		position: relative;
	}
	.hideSkiplink.responsive .icon {
		/*position: absolute;*/
		left: 0;
		top: 0;
	}
	.hideSkiplink.responsive a {
		float: none;
		display: block;
		text-align: left;
		color: white;
	}
	.hideSkiplink.responsive .mobile-menu {
		display: block;
		width: 80%;
		z-index: 999;
		background-color: #3a4f63;
		padding-left: 25px;
		position: absolute;
		overflow: auto;
		height: 500px;
	}
	.hideSkiplink.responsive .mobile-menu a {
		padding: 5px 10px 2px 15px;
	}
	.hideSkiplink.responsive .fa {
		margin-left: -10px;
	}
	.hideSkiplink .mobile-menu {
		display: none;
	}
	.hideSkiplink .mobile-menu a {
		padding: 5px 10px 2px 15px;
	}
	#tdMainMenu {
		display: none;
	}
	.mobile-hide {
		display: none;
	}
	.page {
		width: 95%;
		overflow: hidden;
		height: auto;
	}
	.main {
		min-height: 92vh;
		overflow: hidden;
	}
	.loginmain {
		min-height: 0;
		overflow: hidden;
	}
	.header {
		background-position: center;
		overflow: hidden;
	}
	.login-area {
		width: 90%;
		padding: 10px 2px;
	}
	#mixedContent {
		width: 95% !important;
	}
	#divMembers {
		width: 100% !important;
	}
	.title {
		width: 100%;
	}
	#tdNotifications {
		display: none;
	}
	.portfolio {
		width: 100%;
	}
	.search td {
		display: inline-block !important;
	}
	.loginDisplay {
		top: -35px;
	}
	.h2 {
		font-size: 35px;
	}
	#linkdown {
		display: inline-block;
	}
	#divNotificationMobile {
		display: inline;
	}
	.notification {
		display: none;
	}
	.notification.visible {
		display: block;
		width: 95%;
		z-index: 999;
		background-color: white;
		padding-right: 15px;
		position: absolute;
		overflow: auto;
		height: 90vh !important;
	}
	/*Registration*/
	.sidebar {
		display: none;
	}
	#titleSignUp h3 {
		font-size: 20px;
		line-height: 22px;
		text-align: center;
		margin: 0px;
	}
	/*End Registration*/
	/*Table formation*/
	.fieldset table,
	.fieldset thead,
	.fieldset tbody,
	.fieldset th,
	.fieldset td,
	.fieldset tr {
		display: block;
		text-align: left;
	}
	.fieldset td {
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 1%;
	}
	.fieldset td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
	/*End: Table formation*/
	/* Icon 3 */
	#nav-icon3 {
		width: 35px;
		height: 32px;
		position: relative;
		margin: 0px auto;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
		z-index: 9999;
	}
	#nav-icon3 span {
		display: block;
		position: absolute;
		height: 3px;
		width: 100%;
		background: darkgoldenrod;
		border-radius: 9px;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}
	#nav-icon3 span:nth-child(1) {
		top: 0px;
	}
	#nav-icon3 span:nth-child(2),
	#nav-icon3 span:nth-child(3) {
		top: 12px;
	}
	#nav-icon3 span:nth-child(4) {
		top: 24px;
	}
	#nav-icon3.open span {
		/*left: -12px;*/
		margin: 0;
		padding: 0;
		margin-top: 10px;
	}
	#nav-icon3.open span:nth-child(1) {
		top: 18px;
		width: 0%;
		/*left: 50%;*/
	}
	#nav-icon3.open span:nth-child(2) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#nav-icon3.open span:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	#nav-icon3.open span:nth-child(4) {
		top: 18px;
		width: 0%;
		/*left: 50%;*/
	}
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
	.hideSkiplink a.icon {
		float: left;
		display: block;
	}
	#tdMainMenu {
		display: none;
	}
	.mobile-hide {
		display: none;
	}
	.page {
		width: 95%;
		overflow: hidden;
		height: auto;
	}
	.main {
		min-height: 92vh;
		overflow: hidden;
	}
	.loginmain {
		min-height: 0;
		overflow: hidden;
	}
	.header {
		background-position: center;
		overflow: hidden;
	}
	.login-area {
		width: 90%;
		padding: 10px 2px;
	}
	#mixedContent {
		width: 95% !important;
	}
	#divMembers {
		width: 100% !important;
	}
	.title {
		width: 100%;
	}
	#tdNotifications {
		display: none;
	}
	.portfolio {
		width: 100%;
	}
	.search td {
		display: inline-block !important;
	}
	.loginDisplay {
		margin-top: -35px;
	}
	.h2 {
		font-size: 35px;
	}
	#linkdown {
		display: inline-block;
	}
	#divNotificationMobile {
		display: inline;
	}
	.notification {
		display: none;
	}
	.notification.visible {
		display: block;
		width: 95%;
		z-index: 999;
		background-color: white;
		padding-right: 15px;
		position: absolute;
		overflow: auto;
		height: 90vh !important;
	}
	/*Registration*/
	.sidebar {
		display: none;
	}
	#titleSignUp h3 {
		font-size: 20px;
		line-height: 22px;
		text-align: center;
		margin: 0px;
	}
	/*End Registration*/
	/*Table formation*/
	.fieldset table,
	.fieldset thead,
	.fieldset tbody,
	.fieldset th,
	.fieldset td,
	.fieldset tr {
		display: block;
		text-align: left;
	}
	.fieldset td {
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 1%;
	}
	.fieldset td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
	/*End: Table formation*/
	/* Icon 3 */
	#nav-icon3 {
		width: 35px;
		height: 32px;
		position: relative;
		margin: 0px auto;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
		z-index: 9999;
	}
	#nav-icon3 span {
		display: block;
		position: absolute;
		height: 3px;
		width: 100%;
		background: darkgoldenrod;
		border-radius: 9px;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}
	#nav-icon3 span:nth-child(1) {
		top: 0px;
	}
	#nav-icon3 span:nth-child(2),
	#nav-icon3 span:nth-child(3) {
		top: 12px;
	}
	#nav-icon3 span:nth-child(4) {
		top: 24px;
	}
	#nav-icon3.open span {
		/*left: -12px;*/
		margin: 0;
		padding: 0;
		margin-top: 10px;
	}
	#nav-icon3.open span:nth-child(1) {
		top: 18px;
		width: 0%;
		/*left: 50%;*/
	}
	#nav-icon3.open span:nth-child(2) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#nav-icon3.open span:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	#nav-icon3.open span:nth-child(4) {
		top: 18px;
		width: 0%;
		/*left: 50%;*/
	}
}


/* https://codepen.io/designcouch/pen/Atyop */