@media (min-width: 1350px){
	#tileSearchBox{
		width:405px;		
		margin:60px 0px 30px -200px;
	}
}

@media (max-width: 1220px){
	.closePlug{
		display: block; /* Only display the close plug button if it is obstructing the view*/
	}

	#tileSearchBoxInput.longSubjectLength{
		font-size: 18px;
	}

	#tileSearchBoxInput.reallyLongSubjectLength{
		font-size: 17px;
	}		
}

@media(max-width: 1000px){

	#tileSearchBoxInput{
		font-size: 17px;
	}

	#tileSearchBoxInput.longSubjectLength{
		font-size: 16px;
	}

	#tileSearchBoxInput.reallyLongSubjectLength{
		font-size: 15px;
	}		

	#tileSearchBoxIcon{
		top:calc(50% - 9px);;
	}
}

@media (max-width: 920px){
	#tileSearchBox{
		width:276px;		
		margin:20px 0px 20px -138px;
	}
}

@media (min-width: 871px){

	/* Show extra info on hover only on largest tile size */
	/* Make sure that this min-width media is 1 more pixel than the max-width below */ 
	.tileElement:hover .tileElementHiddenText{
		opacity: 1;
		/*top: 44%;*/ /*Change this to slide in the text*/
	}

	.professorTile .tileElementText{
		font-size: 28px;
	}
}

@media (max-width: 870px){

	#tileContainer{
		max-width: 660px;
	}

	.tileElement{
		height: 200px;
		width: 200px;
		margin: 10px;
	}

	.tileElementText{
		font-size: 28px;
		padding-left: 0px;
		padding-right: 0px;
	}

	.tileElementHiddenText{
		font-size: 16px;
	}

	.longSubjectNumber10{
		font-size: 26px;
	}

	.longSubjectNumber11,.longSubjectNumber12,.reallyLongSubjectNumber{
		font-size: 23px;
	}
	
}

@media (max-width: 660px){
	#tileContainer{
		max-width: 492px;
	}

	.tileElement{
		height: 150px;
		width: 150px;
		margin: 7px;
	}

	.tileElementText{
		font-size: 24px;
		font-weight: 500;
	}

	#noTileResults{
		font-size: 20px;
	}

	.tileElementHiddenText{
		font-size: 13px;
		top: 34%;
		line-height:1.2;
	}

	.tileElementTextWithSubtext{
		top: 39%;
	}

	.longSubjectNumber8{
		font-size: 22px;
	}

	.longSubjectNumber9{
		font-size: 21px;
	}

	.longSubjectNumber10{
		font-size: 20px;
	}

	.longSubjectNumber11,.longSubjectNumber12,.reallyLongSubjectNumber{
		font-size: 17px;
	}

	.longSubjectNumber12,.reallyLongSubjectNumber{
		padding-bottom: 1%;
	}

}

@media (max-width: 492px){

	#tileSearchBoxInput{
		height: 90%;
		font-size: 16px;
	}

	#tileSearchBoxIcon{
		right: 15px;
	}

	#tileContainer{
		max-width: 360px;
		margin-bottom: 30px;
	}

	.tileElement{
		height: 110px;
		width: 110px;
		margin: 5px;
	}

	.subjectName{
		font-size: 16px !important;
	}

	.tileElementText{
		font-size: 13px;
		font-weight: 500;
	}

	.tileElementHiddenText{
		font-size: 11px;
		top: 27%;
	}

	.tileElementTextWithSubtext{
		top: 33%;
		font-size: 18px;
	}

	.tileElementHiddenText.longTitle {
	    top: 24%;
	    line-height: 1.1;
	}

	.longSubjectNumber8{
		font-size: 17px;
	}

	.longSubjectNumber9{
		font-size: 16px;
	}

	.longSubjectNumber10{
		font-size: 15px;
	}

	.longSubjectNumber11,.longSubjectNumber12,.reallyLongSubjectNumber{
		font-size: 13px;
	}

	.longSubjectNumber11{
		padding-bottom: 1%;
	}

	.longSubjectNumber12,.reallyLongSubjectNumber{
		padding-bottom: 3%;
	}

	.reallyLongPageTitle{
		font-size: 3.2vw !important;	
	}

	.veryLongPageTitle{
		font-size: 3.2vw !important;
	}

}

@media (max-width: 374px){
	#tileContainer{
		max-width: 300px;
	}

	.tileElement{
		height: 90px;
		width: 90px;
		margin: 5px;
	}

	#tileSearchBoxInput{
		width: 83%;
	}

	#noTileResults{
		font-size: 18px;
		margin-top:40px;
	}

	.tileElementHiddenText{
		font-size: 10px;
	}

	.tileElementTextWithSubtext{
		font-size: 14px;
	}

	.longSubjectNumber9{
		font-size: 13px;
	}

	.longSubjectNumber10{
		font-size: 12px;
	}

	.longSubjectNumber11,.longSubjectNumber12,.reallyLongSubjectNumber{
		font-size: 11px;
	}

	.longSubjectNumber11{
		padding-bottom: 2%;
	}

	.reallyLongPageTitle, .veryLongPageTitle{
		font-size: 9px !important;
	}

	.longPageTitle{
		font-size: 10px !important;
	}

}

@media (max-width: 620px) {
	#coursicleLogo{
		font-size: 40px;
	}

	#pageInfo{
		font-size: 18px;
	}
}


@media (max-width: 500px) {
	#coursicleLogo{
		margin-left: 19px;
	}

	#pageInfo{
		right: 19px;
		top:40px;
		font-size: 3.8vw;
	}	
}


/** CSS specifically for the item pages **/
@media (max-width: 940px) {
	#itemViewHeader{
		font-size: 30px;
	}

	#subItemContainer{
		max-width: 792px;
	}

	.subItem{
		width: 296px;
	}
}

@media (max-width: 792px) {

	#subItemContainer{
		max-width: 752px;
	}

	#itemViewHeader{
		font-size: 28px;
	}

	.subItem{
		margin-left: 50px;
		margin-right: 30px;
	}
}

@media (max-width: 752px) {
	#subItemContainer{
		column-count: 1;
		/*This value is tied to the Javascript*/
	}	

	.subItem{
		width: 92%;
		margin-left: 4%;
		margin-right: 4%;
	}

	#itemViewHeader{
		margin-bottom:40px;
	}
}

@media (max-width: 600px) {
	#itemViewHeader{
		max-width: 350px;
		font-size: 24px;
		margin-top: 40px;
	}
}


@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
	/* iPhone 5 only */ /* Although this is applying to the iPhone 4 too */

}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
	/*iPhone 6 Portrait*/
	#tileSearchBoxInput{
		height: 83%;
		width: 83%;
	}

}