body {
	background: url(../images/roz-background1909x1161.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position-y: 0;
	-o-background-size: cover;
	background-position-x: -20px;
}


.navbar-dark .navbar-brand{
	font-weight: 700;
}
.navbar-dark .navbar-nav .nav-link {
	color: rgb(255, 255, 255);
	font-size: 15px;
	text-transform: uppercase;
	font-weight: 500;
}
.masterhead{
	margin-top: 0px;
}

/*----- Social Links -----*/
.social-nav {
	padding: 0;
	list-style: none; 
	margin-left: -10px;
}
.social-nav li {
	margin: 10px 0 0 10px;
	list-style: none;
	display: -webkit-inline-box;
}
.social-nav a {
	overflow: hidden;
	font-size: 22px;
	border-radius: 4px;
}
.social-nav a {
	display: inline-block;
	float: left;
	width: 34px;
	height: 34px;
	font-size: 18px;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	line-height: 33px;
	background: #000;
	position: relative;
	transition: all 0.5s;
	-ms-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}
.social-nav a:hover {
	background: #fff;
	text-shadow: 0px 0px #d4d4d4, 1px 1px #d4d4d4, 2px 2px #d4d4d4, 3px 3px #d4d4d4, 4px 4px #d4d4d4, 5px 5px #d4d4d4, 6px 6px #d4d4d4, 7px 7px #d4d4d4, 8px 8px #d4d4d4, 9px 9px #d4d4d4, 10px 10px #d4d4d4, 11px 11px #d4d4d4, 12px 12px #d4d4d4, 13px 13px #d4d4d4, 14px 14px #d4d4d4, 15px 15px #d4d4d4, 16px 16px #d4d4d4, 17px 17px #d4d4d4, 18px 18px #d4d4d4, 19px 19px #d4d4d4, 20px 20px #d4d4d4, 21px 21px #d4d4d4, 22px 22px #d4d4d4, 23px 23px #d4d4d4, 24px 24px #d4d4d4, 25px 25px #d4d4d4, 26px 26px #d4d4d4, 27px 27px #d4d4d4, 28px 28px #d4d4d4, 29px 29px #d4d4d4, 30px 30px #d4d4d4;
}
.social-nav .twitter {
	background: #00ACED;
	text-shadow: 0px 0px #0087ba, 1px 1px #0087ba, 2px 2px #0087ba, 3px 3px #0087ba, 4px 4px #0087ba, 5px 5px #0087ba, 6px 6px #0087ba, 7px 7px #0087ba, 8px 8px #0087ba, 9px 9px #0087ba, 10px 10px #0087ba, 11px 11px #0087ba, 12px 12px #0087ba, 13px 13px #0087ba, 14px 14px #0087ba, 15px 15px #0087ba, 16px 16px #0087ba, 17px 17px #0087ba, 18px 18px #0087ba, 19px 19px #0087ba, 20px 20px #0087ba, 21px 21px #0087ba, 22px 22px #0087ba, 23px 23px #0087ba, 24px 24px #0087ba, 25px 25px #0087ba, 26px 26px #0087ba, 27px 27px #0087ba, 28px 28px #0087ba, 29px 29px #0087ba, 30px 30px #0087ba;
}
.social-nav .twitter:hover {
	color: #00ACED;
}
.social-nav .facebook {
	background: #3B579D;
	text-shadow: 0px 0px #2d4278, 1px 1px #2d4278, 2px 2px #2d4278, 3px 3px #2d4278, 4px 4px #2d4278, 5px 5px #2d4278, 6px 6px #2d4278, 7px 7px #2d4278, 8px 8px #2d4278, 9px 9px #2d4278, 10px 10px #2d4278, 11px 11px #2d4278, 12px 12px #2d4278, 13px 13px #2d4278, 14px 14px #2d4278, 15px 15px #2d4278, 16px 16px #2d4278, 17px 17px #2d4278, 18px 18px #2d4278, 19px 19px #2d4278, 20px 20px #2d4278, 21px 21px #2d4278, 22px 22px #2d4278, 23px 23px #2d4278, 24px 24px #2d4278, 25px 25px #2d4278, 26px 26px #2d4278, 27px 27px #2d4278, 28px 28px #2d4278, 29px 29px #2d4278, 30px 30px #2d4278;
}
.social-nav .facebook:hover {
	color: #3B579D;
}
.social-nav .google {
	background: #DD4A3A;
	text-shadow: 0px 0px #c23122, 1px 1px #c23122, 2px 2px #c23122, 3px 3px #c23122, 4px 4px #c23122, 5px 5px #c23122, 6px 6px #c23122, 7px 7px #c23122, 8px 8px #c23122, 9px 9px #c23122, 10px 10px #c23122, 11px 11px #c23122, 12px 12px #c23122, 13px 13px #c23122, 14px 14px #c23122, 15px 15px #c23122, 16px 16px #c23122, 17px 17px #c23122, 18px 18px #c23122, 19px 19px #c23122, 20px 20px #c23122, 21px 21px #c23122, 22px 22px #c23122, 23px 23px #c23122, 24px 24px #c23122, 25px 25px #c23122, 26px 26px #c23122, 27px 27px #c23122, 28px 28px #c23122, 29px 29px #c23122, 30px 30px #c23122;
}
.social-nav .google:hover {
	color: #DD4A3A;
}
.social-nav .linkedin {
	background: #ff6800;
	text-shadow: 0px 0px #c23122, 1px 1px #c23122, 2px 2px #c23122, 3px 3px #c23122, 4px 4px #c23122, 5px 5px #c23122, 6px 6px #c23122, 7px 7px #c23122, 8px 8px #c23122, 9px 9px #c23122, 10px 10px #c23122, 11px 11px #c23122, 12px 12px #c23122, 13px 13px #c23122, 14px 14px #c23122, 15px 15px #c23122, 16px 16px #c23122, 17px 17px #c23122, 18px 18px #c23122, 19px 19px #c23122, 20px 20px #c23122, 21px 21px #c23122, 22px 22px #c23122, 23px 23px #c23122, 24px 24px #c23122, 25px 25px #c23122, 26px 26px #c23122, 27px 27px #c23122, 28px 28px #c23122, 29px 29px #c23122, 30px 30px #c23122;
}
.social-nav .linkedin:hover {
	color: #007BB6;
}
.social-nav .instagram {
	background: #1390c8;
	text-shadow: 0px 0px #0087ba, 1px 1px #0087ba, 2px 2px #0087ba, 3px 3px #0087ba, 4px 4px #0087ba, 5px 5px #0087ba, 6px 6px #0087ba, 7px 7px #0087ba, 8px 8px #0087ba, 9px 9px #0087ba, 10px 10px #0087ba, 11px 11px #0087ba, 12px 12px #0087ba, 13px 13px #0087ba, 14px 14px #0087ba, 15px 15px #0087ba, 16px 16px #0087ba, 17px 17px #0087ba, 18px 18px #0087ba, 19px 19px #0087ba, 20px 20px #0087ba, 21px 21px #0087ba, 22px 22px #0087ba, 23px 23px #0087ba, 24px 24px #0087ba, 25px 25px #0087ba, 26px 26px #0087ba, 27px 27px #0087ba, 28px 28px #0087ba, 29px 29px #0087ba, 30px 30px #0087ba; 
}
.social-nav .instagram:hover {
	color: #CB2026;
}



@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { 
	.ml-auto, .mx-auto {
		margin-left: auto!important;
		background: rgba(82, 82, 82, 0.84);
		padding: 10px;
	}
	.navbar-dark .navbar-toggler {
		color: rgb(255, 255, 255);
		border-color: rgba(255,255,255,.1);
		font-size: 14px;
		font-weight: 700;
	}
	.navbar-dark .navbar-toggler-icon {
		background: #f0f0f0;
		margin-left: 12px;
	}

}

/* ------- START ---------------------------------------------------------------
------------------------------- iPad Vertical Only -----------------------------
----------------------------------------------------------------------------- */
/*
@media screen and (min-device-width: 767px) and (max-device-width: 770px) (orientation: portrait) {
	body {
		background: url(../images/ChangeThisFileName.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		background-position-y: 0;
		-o-background-size: cover;
		background-position-x: 0px;
	}
}
/* ------- END -----------------------------------------------------------------
------------------------------- iPad Vertical Only -----------------------------
----------------------------------------------------------------------------- */


/* iPad */

@media screen and (max-device-width: 768px) and (orientation: landscape) {
/*	body {
		background: url(../images/roz-background1161x1281.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		background-position-y: 0;
		-o-background-size: cover;
		background-position-x: 0px;
	} */
	.social-nav {
		padding: 0;
		list-style: none;
		margin-top: 0px;
	}
	.navbar-dark .navbar-nav .nav-link{
		padding-right: 31px !important;
	}
} 
.list-inline li a{
	font-size: 15px;
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
}
.navbar-brand {
	float:none !important;
}


/* iPad only portrait orientation*/
 
@media screen and (min-device-width : 767px) and (max-device-width : 770px) and (orientation: portrait) {

.navbar-dark .navbar-nav .nav-link{
		padding-right: 31px !important;
	}
	.ml-auto, .mx-auto {
		margin-left: auto!important;
		background: rgba(82, 82, 82, 0);
		padding: 10px;
	}
	.navbar-dark .navbar-toggler {
		color: rgb(255, 255, 255);
		border-color: rgba(255,255,255,.1);
		font-size: 14px;
		font-weight: 700;
	}
	.navbar-dark .navbar-toggler-icon {

		background: #f0f0f0;
		margin-left: 12px;
	}
	
	.masterhead{
	margin-top: 100px;
}
	.social-nav {
		padding: 0;
		list-style: none;
		margin-top: 210px;
	}
	body {
		background: url(../images/mobile-4u.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		-o-background-size: cover;
		background-position-x: -100px; /* -52 */
		background-position-y: 0;   /*  orig= 5px. using mobile-back, need neg 20px BUT it shows white space when user scrolls down. cropped image */
	}

}



.navbar { 
	padding-top: 20px; 
}
.c { text-align: center; }

.masterhead p { color: white; }



/* Phone landscape orientation*/
@media screen and (min-width: 1px) and (max-width: 667px) { 
	.masterhead .container .row { float: right; } 
	.masterhead { margin-bottom: 60px; }
	
	.navbar .container .col-xs-12 { padding-left: 0; padding-right: 0; }
	.navbar .container .col-xs-12:nth-of-type(1) { padding-left: 0; padding-right: 0; padding-bottom: 10px; }
body {
background-position-x: -65px; 
}
} 


/* Phone Portrait */
@media only screen and (max-width: 400px) {

	.navbar-dark .navbar-nav .nav-link{
		padding-right: 31px !important;
	}
	.ml-auto, .mx-auto {
		margin-left: auto!important;
		background: rgba(82, 82, 82, 0);
		padding: 10px;
	}
	.navbar-dark .navbar-toggler {
		color: rgb(255, 255, 255);
		border-color: rgba(255,255,255,.1);
		font-size: 14px;
		font-weight: 700;
	}.navbar-dark .navbar-toggler-icon {

		background: #f0f0f0;
		margin-left: 12px;
	}
	.social-nav {
		padding: 0;
		list-style: none;
		margin-top: 210px;
	}
	body {
		background: url(../images/mobile-4u.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;

		-o-background-size: cover;
		background-position-x: -80px; /* -52 */
		background-position-y: 0;   /*  orig= 5px. using mobile-back, need neg 20px BUT it shows white space when user scrolls down. cropped image */
	}
}



/* Phone portrait orientation*/

@media screen and (min-device-width: 1px) and (max-device-width: 380px) { 

	.masterhead { margin-bottom: 20px; }
	.navbar { padding: 20px 0 0 0; }
	.navbar .container .col-xs-12 { padding-left: 0; padding-right: 0; }
	.navbar .container .col-xs-12:nth-of-type(1) { padding-left: 0; padding-right: 0; padding-bottom: 10px; }

}



/* Phone portrait orientation*/
@media screen and (min-device-width: 1px) and (max-device-width: 350px) { ul.social-nav li { margin-left: 9px; } }
a.navbar-brand { 
	color: #FEFEFE; font-weight: bold; 
}
.navbar-brand:hover {
    text-decoration: none;
}
.navbar-brand {
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}
	.masterhead { margin-bottom: 20px; }