html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    text-size-adjust: auto;
    
}	
body {
	
    background: #F2F3F4  !important;
}
@font-face {
  font-family: "OpenSans600";
  src: url('../fonts/OpenSans-SemiBold.ttf');
}
@font-face {
  font-family: "OpenSans700";
  src: url('../fonts/OpenSans-Bold.ttf');
}
@font-face {
  font-family: "OpenSans400";
  src: url('../fonts/OpenSans-Regular.ttf');
}

@font-face {
	font-family: "OpenSansItalic400";
	src: url('../fonts/OpenSans-Italic.ttf')
}


div#headermain{
	background-color:#222222;
	flex: none;
	max-height: 5vh;
	display:flex;
	
		min-height: 5vh;
    }
    
    div#headermainindex{
	background-color:#222222;
	flex: none;
	max-height: 5vh;
	display:inline-table;
		min-height: 5vh;
	
	
    }
    
div#headermaindashboard{
	background-color:#222222;
	display: flex;
	flex-direction:row;
	min-height: 6vh;
	max-height:6vh;
    }
.linksBox{
	display:flex;
	flex-direction:row;
	font-family: "OpenSans600";
	font-size: 14px;
    
   
    color: white;
    font-weight: 500;
  
}
#prettyModal{
	 font-family: OpenSans400;
    font-size: 15px;
	
	
}
#nbislogomaindashboard{
	background: url(../images/dcsalogo.png) no-repeat;
    background-size: contain;
    color: white;
    font-family: OpenSans700;
    font-weight: 700;
    font-size: 20px;
    text-align: left;
    padding-left: 60px;
     text-decoration: unset;
}

#nbislogomaindashboardframe{
	background: url(../images/dcsalogo.png) no-repeat;
    background-size: contain;
    color: white;
    font-family: OpenSans700;
    font-weight: 700;
    font-size: 20px;
    text-align: left;
    padding-left: 60px;
     text-decoration: unset;
     margin-left: 10px;
}
#navlinkframe{
	color:white;
	font-weight:600;
	text-decoration:underline;
}
#nbislogomain{
	background: url(../images/dcsalogo.png) no-repeat;
    height: 100%;
   
    background-size: contain;
    color: white;
    font-family: OpenSans700;
    font-weight: 700;
    font-size: 20px;
    text-align: left;
    padding-left: 60px;
    text-decoration: unset;
}

.iframe-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  height: 90%;
zoom:110%;
  max-height: 800px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 9999;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: #777;
  cursor: pointer;
}

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

iframe {
  width: 100%;
  height: 100%;
    zoom:120%;
  border: none;
  border-radius: 10px;
}



.pageHelp{
	  color: white;
    font-family: OpenSans400;
    font-size: 15px;
   
}
.pageHelpWithHelp{
	  color: white;
    font-family: OpenSans400;
    font-size: 15px;
   padding:25px;
   text-decoration: none;
}
.pageHelp:Hover{
	  color: white;
	  opacity: 75%;
    cursor: pointer;
    
}
.pageHelpWithHelp:Hover{
	  color: white;
	  opacity: 75%;
    cursor: pointer;
    
}


#img-fluid-custom {
    max-width: 75%;
    height: auto;
    padding-left: 25%;
}

.mainContainer{
	flex: auto;
    margin: 25px 25px 25px 25px;
    background-color: #FFFFFF;
}
.mainContainerDashboard{
	flex: auto;
    margin: 25px 25px 0px 25px;
    background-color: #FFFFFF;
}

div#mainContainerIndex {
	margin: 0;
	
}

div#contentContainerIndex {
    background-color: #264253;
    color: white;
    padding-bottom:25px;
    padding-left: 25px;
    padding-right: 25px;
    max-height: 40vh;
}

.errorBanner {
	display:flex;
	flex-direction: row;
	height: 40px;
	padding: 11px 0px 11px 0px;
	background-color:#F5C5C8;
	border: 1px solid #A6020D;
	font-family: OpenSans700;
	font-size: 13px;
	color: #A6020D;
	align-items: center;
	justify-content: center;
	
	
}

span#errorBannerText {
   padding-left: 10px;
   font-family: OpenSans400;
}

.successBanner {
	display:flex;
	flex-direction: row;
	height: 40px;
	padding: 11px 0px 11px 0px;
	background-color:#D4EBD9;
	border: 1px solid #D4EBD9;
	font-family: OpenSans700;
	font-size: 13px;
	color: #246534;
	align-items: center;
	justify-content: center;
	
	
}

span#successBannerText {
   padding-left: 10px;
   font-family: OpenSans400;
}

.infoBanner {
	display:flex;
	flex-direction: row;
	height: 40px;
	padding: 11px 0px 11px 0px;
	background-color:#C9E1E8;
	border: 1px solid #C9E1E8;
	font-family: OpenSans700;
	font-size: 13px;
	color: #246253;
	align-items: center;
	justify-content: center;
	
	
}
a#profileLink.nav-link{
	color: #FFFFFF;
	font-size: 14px;
	font-family: OpenSans400;
	font-weight: 400;
	  text-decoration: underline;
}
a#logoutLink.nav-link{
	color: #FFFFFF;
	font-size: 16px;
	font-family: OpenSans400;
	font-weight: 400;
	  text-decoration: underline;
}

a#releaseNotesLink{
	color: #222222;
	font-size: 14px;
	font-family: OpenSans400;
	font-weight: 400;
	  text-decoration: underline;
	  margin-right:auto;
}
a#usernameLink.nav-link{
	color: #FFFFFF;
	font-size: 14px;
	font-family: OpenSans400;
	font-weight: 400;
	text-decoration: none!important;
	
}


span#infoBannerText {
   padding-left: 10px;
   font-family: OpenSans400;
}

.headerBannerText {
	 font-family: OpenSans400;
	 font-size: 24px;
	 padding-bottom: 10px;
}
.headerBannerTextMedium{
	font-family: OpenSans700;
	font-size: 19px;
	padding-bottom: 10px;
}
.headerBannerTextSmall{
	font-family: OpenSans700;
	font-size: 14px;
}

.contentContainer{
	display: flex;
	flex-direction: column;
  align-items: center;
  justify-content: center;
  
}

.contentContainerDashboard{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 5px 0px 10px 0px;
}

#dashboardWelcomeText{
	padding: 10px;
}

.contentContainerTwo{
	background-color:#FFFFFF;
	display: flex;
	flex-direction: column;
	align-items:left;
	font-family:OpenSans600;
	font-size: 16px;
	color: #222222;
	padding-top:75px;
	padding-left: 400px;
	padding-right: 400px;
	overflow-y:scroll;
	max-height: 400px;
	line-height: 2 ;
	
}

.tosContainer{
	display: flex;
	flex-direction: column;
	max-height:50vh;
	font-size: 15px;
}

div#tos{
	
	width: 80vw;
	
	max-width: -webkit-fill-available;
	
    margin-top: 2em;
    padding-left: 20vw;
    line-height: 2;
    
    overflow-y: auto;
    font-family: 'OpenSans600';
    max-height: 35vh;
}
#indentText{
	
}

.contentContainerThree{
	display:flex;
	flex-direction: column;
	align-items:center;
	padding-bottom: 50px;
}

.nbislogolarge{
	background: url(../images/dcsalogo.png) no-repeat;
	background-size: contain;
	height: 175px;
	width: 175px;
	margin-top: 5vh;
	
}

.nbislogolargeprocess{
	background: url(../images/dcsalogo.png) no-repeat;
	background-size: contain;
	height: 175px;
	width: 175px;
	margin-top: 5vh;
	
}
.pageBodyText{
	color: #222222;
	font-family: "OpenSans400";
	font-size: 24px;
	margin-top: 15px;
	
}
.pageBodyTextDashboard{
	color: #222222;
	font-family: "OpenSans400";
	font-size: 24px;
	
	
}

.col{
	font-family: OpenSans700;
	font-weight: 700;
	font-size: 13px;
	color: #555555;
	
}

div.cardContainer{

	cursor: pointer;
    background-color: cadetblue;
    border-radius: 4px;
    padding: 7px 0px 0px 7px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
    width: 100%;
    min-height: 60px;
     margin-bottom: 10px;
       	overflow-x:auto;
}

div.cardContainerNonOwned{

	pointer-events: none;
    background-color: #FFFFFF;
    border-radius: 4px;
    padding: 7px 0px 0px 7px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
    width: 100%;
    min-height: 60px;
     margin-bottom: 10px;
       	overflow-x:auto;
       	
}

#userProfileCard{
	 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
	 padding-bottom:50px;
	 border-radius: 4px;
	 margin-top: 25px;
	 padding-left: 50px;
	 padding-top: 25px;
	
}
div.cardContainer:hover{


    background-color: darkcyan;
    border-radius: 4px;
    padding: 7px 0px 0px 7px;
   box-shadow: 0px 2px 4px 0px black;
    width: 100%;
    min-height: 60px;
    
}




div#pageBodyTextItalics{
	font-family: "OpenSansItalic400";
	font-size: 13px;
	padding: 10px;
}
div#pageBodyTextItalicsCertEnroll{
	font-family: "OpenSansItalic400";
	font-size: 13px;
	
}
div#pageBodyTextItalicsForgot{
	font-family: "OpenSansItalic400";
	font-size: 13px;
	
	text-align-last: center;
}
div#pageBodyTextItalicsDashboard{
	font-family: "OpenSansItalic400";
	font-size: 13px;
	margin-bottom: 15px;
	
}

div#footermain{
	background-color: #FFFFFF;
	flex: none;
	padding-top: 15px;
	padding-bottom: 20px;
    
}

div#footermainprofile{
	background-color: #FFFFFF;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	padding-top: 15px;
	padding-bottom: 20px;
    
}

button.primaryButton{
	min-width: 60px;
    height: 38px;
    border:none;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
    background-color:#357698;
    font-family: OpenSans600;
    font-size: 14px;
    font-weight: 600;
    color:#FFFFFF;
    
    
}
button.primaryButton:hover{
	
    background-color:#264253;
    
}
button.primaryButton:disabled{
	
    background-color:#757575;
    
}

input.secondaryButton{

	border: solid;
    border-width: 2px;
    border-radius: 4px;
    border-color: #357698;
    min-width: 60px;
    height: 38px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #FFFFFF;
    font-family: OpenSans600;
    font-size: 14px;
    font-weight: 600;
    color: #3D4C5F;
    

}

button.secondaryButton{
	border: solid;
    border-width: 2px;
    border-radius: 4px;
    border-color: #357698;
    min-width: 60px;
    height: 38px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #FFFFFF;
    font-family: OpenSans600;
    font-size: 14px;
    font-weight: 600;
    color: #3D4C5F;
    
}

button.secondaryButton:hover{

	border-color:#264253;
	color:#207988;

}

button.secondaryButton:disabled{

	border-color:#757575;
	color:#757575;

}

button#selectButtonPrimary{
	margin-top: 35px;
}

button#backButton {
    margin-left: 10px;
    
}

button#continueButton {
    margin-right: 10px;
}

button#loginButton{
	margin-top: 2rem;
	
	min-width: 10vw;
}

button#removeSession{
	margin-top: 50px;
	margin-left: 125px;
}

div#customFormCheck {
    line-height: normal;
    align-self: center;
    padding-top: 2vh;
}

form#tosForm{
	align-self: center;
}

input#indexCheckBox {
    width: 21px;
    height: 21px;
    margin-right: 7px;
    padding-right: 10px;
    background-color: #FFFFFF;
    border: 1px solid #9194A1;
    border-radius: 2px;
}
input#indexCheckBox:checked {
    width: 21px;
    height: 21px;
    margin-right: 7px;
    background-color: #357698;
    
}

label#indexCheckBoxLabel {
    padding-left: 10px;
    padding-top:6px;
}

.userInputTextBox{
	margin-top: 0px;
	border: 1px solid #9194A1;
	border-radius: 4px;
	font-size: 14px;
	font-family: "OpenSans400";
	color: #222222;
	padding: 0px 7px;
	line-height: 38px;
	width: 400px;
}

.userInputTextBoxProfile{
	margin-top: 0px;
	border: 1px solid #9194A1;
	border-radius: 4px;
	font-size: 14px;
	font-family: "OpenSans400";
	color: #222222;
	padding: 0px 7px;
	line-height: 38px;
	width: 400px;
	
}
.userInputTextBoxReadOnly{
	border: 0;
	margin-top: 0px;
	font-size: 14px;
	font-family: "OpenSans400";
	color: #222222;
	padding: 0px 7px;
	line-height: 38px;
	width: 400px;
}

.userInputBox{
	display:flex;
	flex-direction:column;
}
label#userInputTextBoxLabel {
	font-size: 13px;
	font-family: "OpenSans700";
	color: #555555;
    margin-top: 25px;
    flex:auto;
    font-weight: normal;
}

label#userProfileDatatextBoxLabel {
	font-size: 13px;
	font-family: "OpenSans700";
	color: #555555;
    margin-top: 25px;
    
}


label#passwordInputTextBoxLabel {
	font-size: 13px;
	font-family: "OpenSans700";
	color: #555555;
	font-weight: normal;
    
}

.userInputTextBox:focus{
	border: 1px solid #03293F;
}
.userInputTextBox:hover{

	border:1px solid #357698;
}
.userInputTextBox:disabled{
	border: 1px solid #9194A1;
}

label#userInputTextBoxReadOnlyLabel {
	margin-top:15px;
	font-size: 13px;
	font-family: "OpenSans700";
	
	color: #555555;
}
input#userInputTextBoxReadOnly {
	border: 0;
	pointer-events:none;
	user-select: none;
	font-size: 14px;
	font-family: "OpenSans400";
	font-weight: 400;
	color: #222222;
}

.linkBox{
	display:flex;
	flex-direction: row-reverse;
	
	width:400px;
}
.linkBoxSelfServices{
	display:flex;
	flex-direction: row-reverse;
	
	width:400px;
	padding-top:25px;
}
.linkBoxCert{

	padding-top: 20px;
	width:200px;
}
.linkBoxCertSelf{

	padding-top: 10px;
	width:250px;
}




a#link {
	font-family: "OpenSans600";
	font-size: 14px;
    
    line-height: 4;
    color: #357698;
    font-weight: 500;
    text-decoration: underline;
    
}
a#linkselfservice {
	font-family: "OpenSans600";
	font-size: 14px;
    
    line-height: 3;
    color: #357698;
    font-weight: 500;
    text-decoration: underline;
    
}

a#link:hover {
	font-family: "OpenSans600";
	font-size: 14px;
  
    line-height: 4;
    color: #357698;
    font-weight: 500;
    text-decoration: underline;
    
}
a#link:disabled {
	font-family: "OpenSans600";
	font-size: 14px;
    margin-left: 250px;
    line-height: 4;
    color: #757575;
    opacity: 1;
    font-weight: 500;
    text-decoration: underline;
    
}

#toolTipText{
	color: #A6020D;
	font-family: "OpenSans400";
	font-weight: 400;
	font-size:11px;
	margin-left:3px;
	padding-top:5px;
	max-width: 400px;
}
#toolTipText1{
	color: #A6020D;
	font-family: "OpenSans400";
	font-weight: 400;
	font-size:11px;
	margin-left:3px;
	padding-top:5px;
	max-width: 400px;
}
#toolTipText2{
	color: #A6020D;
	font-family: "OpenSans400";
	font-weight: 400;
	font-size:11px;
	margin-left:3px;
	padding-top:5px;
	max-width: 400px;
}
.passwordPolicyTextBox{
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	font-size: 14px;
	font-family: "OpenSans400";
	font-weight: 400;
	color: #222222;
}
.passwordPolicyTextBoxText{
	font-size: 14px;
	font-family: "OpenSans400";
	font-weight: 400;
	color: #222222;
	max-width: 400px;
}

.headerContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 90px;
    background-color: white;
    padding-left: 20px;
    padding-right: 25px;
    padding-top: 25px;
   
}

h1#headerContainerText{
	font-size: 24px;
	font-family: OpenSans400;
	font-weight: 400;
	color: #222222;
	
}

h2{
	font-size: 20px;
	font-family: OpenSans400;
	font-weight: 400;
	color: #222222;
	
}

h3{
	
	font-size: 18px;
	font-family: OpenSans400;
	font-weight: 400;
	color: #222222;
	
	
}
h3#myForms {
	margin-bottom:-10px;
    margin-top: 35px;
}

hr#greyLine {
    margin-top: 1rem;
    width: 100%;
    margin-bottom: 1rem;
    border: 0;
    z-index: 1;
    border-top: 2px solid #CED4DB;
    margin-left: 0;
    margin-right: 0;
}


.toolTipBox{
	display:flex;
	flex-direction: row;
}
i#iconTip {

    padding-top: 25px;
}
.tooltip{
   font-size: 6rem;
}
form#submitEntitlementForm {
	width: 100%;
	min-width: 700px;
	max-height:350px;
	overflow-y:scroll;
}
form#submitEntitlementFormDashboard {
	width: 100%;
	min-width: 700px;
	    max-height: 350px;
    overflow-y: auto;
	

}

div#nonOwnedEntitlementsDashboard {
	width: 100%;
	min-width: 700px;
	    max-height: 350px;
    overflow-y: auto;
	

}

form#submitEntitlementFormMultiPersona {
	
	min-width: 400px;
	min-height:250px;
	overflow-y:scroll;
	max-height: 350px;
}

.content-table {
	background-color: #FFFFFF;
    padding: 15px 0px 0px 15px;
  	border-collapse: collapse;
    border-radius: 4px;
   	min-width: 400px;
    width: 100%;
    
    min-height: 60px;
 
     
}

.content-table-agency {
	background-color: #FFFFFF;
    padding: 15px 0px 0px 15px;
  	border-collapse: collapse;
    border-radius: 4px;
   	min-width: 400px;
    width: 100%;
    
    min-height: 60px;
 
     
}

.content-table-agency thead tr {
 
  color: #555555;
  text-align: left;
  font-weight: 700;
  font-family: OpenSans700;
  font-size: 13px;
  padding-left: 10px;
  padding-right:10px;
}


.content-table thead tr {
 
  color: #555555;
  text-align: left;
  font-weight: 700;
  font-family: OpenSans700;
  font-size: 13px;
  padding-left: 10px;
  padding-right:10px;
}

.content-table tr td {
 
  color: #222222;
  text-align: left;
  font-weight: 400;
  font-family: OpenSans400;
  font-size: 14px;

}

.content-table-agency tr td {
 
  color: #222222;
  text-align: left;
  font-weight: 400;
  font-family: OpenSans400;
  font-size: 14px;
 padding: 5px;
}

.content-table-agency th {
 
 
 padding: 5px;
}

.formNameHead{
	width:30%;
}

.content-table td:not(.formName){
	width:30%;
	
	word-break: break-word;
	padding-right: 20px;
}

.content-table-agency td:not(.formName){
	width:20%;
	
	word-break: keep-all;
	
}

.content-table tr td.formName{
	width: 30%;
	font-family: OpenSans400;
	font-weight:500;
	color: #357698;
	text-decoration: underline;
}

.content-table-agency tr td.formName{
	width: 20%;
	font-family: OpenSans400;
	font-weight:500;
	color: #357698;
	text-decoration: underline;
}

.content-table th.hiddenTableHeader {
    display:none;    
}
.content-table tr td.entitlementSelectionHidden{
	display:none;   
}

.content-table-agency th.hiddenTableHeader {
    display:none;    
}
.content-table-agency tr td.entitlementSelectionHidden{
	display:none;   
}


form#helpModal{
	padding-top: 25px;
	
}

.userProfileDataContainer{
	display:flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-evenly;
}


.passwordPolicyList{
	font-family: OpenSans400;
	font-weight: 400;
	font-size: 15px;
	padding-inline-start:0px;
	margin-top:10px;
}

.passwordPolicyListPage{
	font-family: OpenSans400;
	font-weight: 400;
	font-size: 15px;
	padding-inline-start:40px;
	margin-top:10px;
}

.passwordPolicyListItem{
	padding-top:25px;
}


@media screen and (max-width: 768px){
	#nbislogomain{font-size:14px;}
	#nbislogomaindashboard{font-size:14px;}
	h1#headerContainerText{font-size: 17px;}
	#lastLoginDate{font-size: 13px;}
	.contentContainerDashboard{padding:5px;}
	.userInputTextBoxProfile{width:300px;}
	.passwordPolicyList{padding-inline-start:15px;}
	#h4header{margin-top: 20px;}
	#colShrink{display:none;}
	form#submitEntitlementForm {min-width:300px;}
	form#submitEntitlementFormDashboard {min-width:300px;}
	.errorBanner {padding: 30px;}
	.successBanner{padding: 30px;}
	.infoBanner {padding: 30px;}
	.pageHelpWithHelp{padding-left:20px; font-size:12px;}
	
}
@media screen and (max-height: 1000px){
	.tosContainer{font-size:14px;}
	#processPBT{padding-bottom:10px;}
	.nbislogolarge{margin-top: 3vh;}
		.nbislogolargeprocess{margin-top: 3vh;}
	form#submitEntitlementForm {max-height:150px};
	form#submitEntitlementFormDashboard {max-height:150px};
	
}


@media screen and (max-height: 800px){
	.nbislogolargeprocess{display:none;}
	
	.pageBodyText{font-size:20px;}
		.pageBodyText{font-weight:bold;}
	div#tos {width: 99vw;}
	div#tos {padding-left: 5vw;}
	div#tos {max-height: 100vh;}
	
	}

	@media screen and (min-width: 2440px){
		#nbislogomain{padding-left:100px; padding-top:15px;}
		}
	
	
	


/* iPhone 6 in portrait & landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {
  
}

/* iPhone 6 in landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {
  
}

/* iPhone 6 in portrait */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) {
  
}

/* iPhone 6 Plus in portrait & landscape */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) {
  
}

/* iPhone 6 Plus in landscape */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) {
  
}

/* iPhone 6 Plus in portrait */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) {
  
}

/* iPhone 5 & 5S in portrait & landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
  
}

/* iPhone 5 & 5S in landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
  
}

/* iPhone 5 & 5S in portrait */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
  
}

/* 
  iPhone 2G, 3G, 4, 4S Media Queries
  It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.
*/

/* iPhone 2G-4S in portrait & landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  
}

/* iPhone 2G-4S in landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) {
  
}

/* iPhone 2G-4S in portrait */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) {
  
}

/* iPad in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
  
}

/* iPad in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  
}

/* iPad in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  
}

/* Galaxy S3 portrait and landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Galaxy S3 portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Galaxy S3 landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* Galaxy S4 portrait and landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Galaxy S4 portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Galaxy S4 landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* Galaxy S5 portrait and landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Galaxy S5 portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Galaxy S5 landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* HTC One portrait and landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* HTC One portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* HTC One landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/*
  iPad 3 & 4 Media Queries
  If you're looking to target only 3rd and 4th generation Retina iPads 
  (or tablets with similar resolution) to add @2x graphics,
  or other features for the tablet's Retina display, use the following media queries.
*/

/* Retina iPad in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
  
}

/* Retina iPad in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
  
}

/* Retina iPad in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
  
}

/*
  iPad 1 & 2 Media Queries
  If you're looking to supply different graphics or choose different typography 
  for the lower resolution iPad display, the media queries below will work 
  like a charm in your responsive design!
*/

/* iPad 1 & 2 in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* iPad 1 & 2 in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* iPad 1 & 2 in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* iPad mini in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* iPad mini in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad mini in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* Galaxy Tab 10.1 portrait and landscape */
@media
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {

}

/* Galaxy Tab 10.1 portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 

}

/* Galaxy Tab 10.1 landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape) { 

}

/* Asus Nexus 7 portrait and landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Asus Nexus 7 portrait */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Asus Nexus 7 landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}

/* Kindle Fire HD 7" portrait and landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Kindle Fire HD 7" portrait */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
    
}

/* Kindle Fire HD 7" landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* Kindle Fire HD 8.9" portrait and landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Kindle Fire HD 8.9" portrait */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
    
}

/* Kindle Fire HD 8.9" landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* Laptops non-retina screens */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    
}

/* Laptops retina screens */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) {
    
}

/* Apple Watch */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) { 

}

/* Moto 360 Watch */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}