/*full view contact table*/
    
.mobile_contact_table* {
	  box-sizing: border-box;
   }
.mobile_contact_table{
	  border: solid 1px #DDDDDD;
	  display: grid;
	  clear: both;
	  grid-template-columns: repeat(2, 1fr);
	  width: 100%;
	}
.mobile_contact_column
	{
	  border: solid;
	  float: left;
          width: 100%;
	}
.mobile_contact_table h2{
	font-size: 1.1rem;
	background: #F5F5F5;
	color: #222222;
	border: solid 1px #fff;
	margin: 0;
	font-weight: bold;
	padding: 0.5rem 0.625rem 0.625rem;

}
.mobile_contact_table p{
	font-size: 1.1rem;
	padding: 0.75rem 1rem;
}
.mobile_contact_table a{
	font-weight: bold;
	color: #f47321;
}

/*
 * 	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
  		*/

	@media
	only screen 
	and (max-width: 760px), (min-device-width: 768px) 
	and (max-device-width: 1024px)  {
.mobile_aok_table table,
.mobile_aok_table thead, 
.mobile_aok_table tbody, 
.mobile_aok_table th,
.mobile_aok_table td,
.mobile_aok_table tr,
.mobile_rep_table table,
.mobile_rep_table thead,
.mobile_rep_table tbody,
.mobile_rep_table th,
.mobile_rep_table td,
.mobile_rep_table tr
{
	/* Force table to not be like tables anymore */
	display: block;
}

/*Contact Page Table*/
.mobile_contact_table{
  display: grid;
  clear: both;
  grid-template-columns: repeat(1, 100%);
  border: solid 1px #DDDDDD;
}
.mobile_contact_column
{
  float: left;
  position: relative;
  white-space: nowrap;
  padding: 0.5rem 0.625rem 0.625rem;

}
.mobile_contact_table h2{
	line-height: 1.125rem;
	padding: 0.5rem 0.625rem 0.625rem;
	background: #F5F5F5;
	font-size: 1.0rem;
	font-weight: bold;
	white-space: nowrap;
}
.mobile_contact_table p{
	font-size: 1.1em;
        line-height: 150%;
	width:100%;
	white-space: wrap;
	font-family: inherit;
	font-weight: normal;
	margin-bottom: 1.25rem;
	text-rendering: optimizeLegibility;
	text-align: left;
	padding: 0.75rem 1rem;
}
.mobile_contact_table a{
  color: #f47321;
}
/*contact table css end*/


.mobile_aok_table thead tr,
.mobile_rep_table thead tr{
	/* Hide table headers (but not display: none;, for accessibility) */
	position: absolute;
	top: -9999px;
	left: -9999px;	
}
.mobile_aok_table tr,
.mobile_rep_table tr{																			    
	margin: 0 0 1rem 0;	   
	}
																												            
.mobile_aok_table tr:nth-child(odd),
.mobile_rep_table tr:nth-child(odd){
	background: #F5F5F5;
																														}
.mobile_aok_table td,
.mobile_rep_table td{
/* Behave  like a "row" */
	border: none;
	border-bottom: 1px solid #eee;																										     position: relative;
	padding-left: 50%;
	}

.mobile_aok_table td:before{

/* Now like a table header */

	 position: absolute;

/* Top/left values mimic padding */
	top: 0;
	left: 6px;
	width: 45%;
	padding-right: 10px;
}
																													    .mobile_rep_table td:before{
																														/* Now like a table header */
																															position: absolute;
																														/* Top/left values mimic padding */								
	top: 0;	
	left: 6px;	
	width: 45%;
	padding-right: 10px;
}

																														/*
																														* Label the data
																														* You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync.																																										 * 		    		*/
    .mobile_aok_table td:nth-of-type(1):before { content: "Degree Description";
    	position: absolute;
	top: 50%;
	transform: translateY(-50%);
    }
    .mobile_aok_table td:nth-of-type(2):before { content: "Degree"; 
    	position: absolute;
	top: 50%;
	transform: translateY(-50%);
    }
    .mobile_aok_table td:nth-of-type(3):before { content: "Major or Minor";
	position: absolute;
        top: 50%;
	transform: translateY(-50%);	
    	}
    .mobile_aok_table td:nth-of-type(4):before { 
    	content: "Academic Plan Code";
        position: absolute;
	top: 50%;
 	transform: translateY(-50%);	
   	}
    
    .mobile_aok_table td:nth-of-type(5):before { 
      	content: "Area of Knowledge Designation";   
      	position: absolute;
      	top: 50%; 
      	transform: translateY(-50%); 
	}

	/*Representative Page*/
     .mobile_rep_table td:nth-of-type(1):before { content: "Academic Organization";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	}
     .mobile_rep_table td:nth-of-type(2):before { content: "Representative(s)";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	}
     .mobile_rep_table td:nth-of-type(3):before { content: "Email";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	}
     .mobile_rep_table td:nth-of-type(4):before {
	content: "Phone";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	}

     .mobile_rep_table td:nth-of-type(5):before {
	content: "Office";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	}
  }
  
    @media
 	only screen
	and (max-width: 400px), (min-device-width: 367px)
	and (max-device-width: 400px)
	{
	/*Contact Page Table*/
	.mobile_contact_table{
		display: grid;
		clear: both;
		width:100%;
		grid-template-columns: repeat(1, 100%);
		border: solid 1px #DDDDDD;
	}
	.mobile_contact_column
	{
		float: left;
		position: relative;
		white-space: nowrap;
		padding: 0.5rem 0.625rem 0.625rem;

	}
	.mobile_contact_table h2{
		line-height: 1.125rem;
		padding: 0.5rem 0.625rem 0.625rem;
		background: #F5F5F5;
		font-size: .75rem;
		font-weight: bold;
		white-space: nowrap;
	}
	.mobile_contact_table p{
		font-size: .9em;
		line-height: 150%;
		width:100%;
		white-space: wrap;
		font-family: inherit;
		font-weight: normal;
		margin-bottom: 1.25rem;
		text-rendering: optimizeLegibility;
		text-align: left;
		padding: 0.75rem 1rem;
	}
	.mobile_contact_table a{
		color: #f47321;
	}
	/*contact table css end*/
	
	
	
}

 @media
 only screen
 and (max-width: 500px),(min-device-width: 401px)
 and (max-device-width: 500px)
 {
	 /*Contact Page Table*/
	 .mobile_contact_table{
	        display: grid;
		clear: both;
		width:100%;
		grid-template-columns: repeat(1, 100%);
		border: solid 1px #DDDDDD;
		}
	.mobile_contact_column{
		float: left;
		position: relative;																										             white-space: nowrap;
		padding: 0.45rem 0.55rem 0.55rem;
		}

	.mobile_contact_table h2{
																															    line-height: 1.0rem;
	       padding: 0.2rem 0.3rem 0.3rem;
       	       background: #F5F5F5;
               font-size: .85rem;
               font-weight: bold;
               white-space: nowrap;
       }
        
         .mobile_contact_table p{                                                                                                                                                                                                                           font-size: .85rem;
	       line-height: 100%;
	       width:100%;
               white-space: wrap;
	       font-family: inherit;
	       font-weight: normal;
	       margin-bottom: 1.25rem;
	       text-rendering: optimizeLegibility;
	       text-align: left;																										            padding: 0.75rem 1rem;
																														       }
																														      .mobile_contact_table a{
																															color: #f47321;
																															}
																														}

@media
only screen
and (max-width: 399px),(min-device-width: 341px)
and (max-device-width: 399px)
{
/*Contact Page Table*/
	.mobile_contact_table{
			display: grid;
			clear: both;
			width:100%;
			grid-template-columns: repeat(1, 100%);
			border: solid 1px #DDDDDD;
			}
	.mobile_contact_column{
			float: left;
			position: relative;
			white-space: nowrap;
			padding: 0.45rem 0.55rem 0.55rem;
			}
																														     .mobile_contact_table h2{
			line-height: 1.0rem;
			padding: 0.2rem 0.3rem 0.3rem;
			background: #F5F5F5;
		        font-size: .8rem;
			font-weight: bold;
			white-space: nowrap;
																																}
																														      .mobile_contact_table p{																													  font-size: .75rem;
			line-height: 100%;
			width:100%;
			white-space: wrap;
			font-family: inherit;
			font-weight: normal;
			margin-bottom: 1.25rem;
			text-rendering: optimizeLegibility;
			text-align: left;
			padding: 0.75rem 1rem;
			}
	.mobile_contact_table a{
			color: #f47321;
			}

																																																																																																																					        }
	@media
		only screen
		and (max-width: 340px)
	{
		/*Contact Page Table*/
		.mobile_contact_table{
			overflow:auto;
			display: grid;
			clear: both;
			width:100%;
			grid-template-columns: repeat(1, 100%);
			border: solid 1px #DDDDDD;
		}
		.mobile_contact_column
		{
			float: left;
			position: relative;
			padding: 0.4rem 0.5rem 0.5rem;
			width:100%;
		}
		.mobile_contact_table h2{
			width:100%;
			line-height: 1.0rem;
			padding: 0.2rem 0.3rem 0.3rem;
			background: #F5F5F5;;
			font-size: .65rem;
			font-weight: bold;
			white-space: nowrap;
		}
		.mobile_contact_table p{
			font-size: .64rem;
			line-height: 100%;
			width:100%;
			white-space: wrap;
			font-family: inherit;
			font-weight: normal;
			margin-bottom: 1.25rem;
			text-rendering: optimizeLegibility;
			text-align: left;
			padding: 0.75rem 1rem;
		}
		.mobile_contact_table a{
			color: #f47321;
	
		}

	}