body {
        background:#EEEEEE;
        font-family: 'Open Sans', sans-serif;
        color:#333333;
        margin:0;
}

p {
        margin:5px 0;
        line-height:25px;
}

a {
        text-decoration:none;
        color:inherit;
        transition: color .5s ease;
}

strong {
        font-weight:bold;
}



hr {
        background-color: #D6D0C1;
        border:0;
        height:1px;
        margin:20px 0;
}

.stdLink { 
		color: #1A6633;
    	text-decoration: underline dotted;
}
a.stdLink:link {
        transition: all .25s ease;
} 
a.stdLink:visited {  
} 
a.stdLink:hover {
        color:#1A6633
    	/* text-decoration: none;  to cancel "dotted" underline on link */
    	text-decoration: underline;
} 
a.stdLink:active {
        color:#1A6633;
    	text-decoration: underline;
} 

/* Show "Open in new window icon" alongside  a.stdlink target="_blank"  href links.  NOTE:  this only gets appended to class='stdlink' hrefs, no others (so not in the footer links for eg) */
a.stdLink[target="_blank"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0px 3px 0px 3px;
}



.stdWhtLink { 
		color: #ffffff;
    	text-decoration: underline dotted;
}
a.stdWhtLink:link {
        transition: all .25s ease;
} 
a.stdWhtLink:visited {  
} 
a.stdWhtLink:hover {
        color:#ffcc00;
    	/* text-decoration: none;  to cancel "dotted" underline on link */
    	text-decoration: underline;
} 
a.stdWhtLink:active {
        color:#ffffff;
    	text-decoration: underline;
} 

.stdYellLink { 
		color: #ffcc00;
    	text-decoration: underline dotted;
}
a.stdYellLink:link {
        transition: all .25s ease;
} 
a.stdYellLink:visited {  
} 
a.stdYellLink:hover {
        color:#ffcc00;
    	/* text-decoration: none;  to cancel "dotted" underline on link */
    	text-decoration: underline;
} 
a.stdYellLink:active {
        color:#ffcc00;
    	text-decoration: underline;
} 


/* ---------------  "RENTAL PAGES" -  IN-LINE CITY LINK SELECTION POP-UP ---------------  */
.city-dropdown {
  position: relative;
  display: inline-block;
}

/* The floating city links */
.city-menu {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  margin-bottom: 0;
  min-width: 170px;  
  
  display: flex;
  flex-direction: column;
  gap: 6px;

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.18s ease, transform 0.18s ease;
  
  background: #444444;
  color: #ffffff;
  font-size: small;
  align-items: left;
  padding: 6px 8px 14px 8px; /* extra bottom padding */
  border-radius: 4px;
  border: 1px solid #eeeeee;
  z-index: 1000;
}

/* City links */
.city-menu a {
  font-size: 13px;
  text-decoration: none;
  color: inherit;
  opacity: 0.9;
}

.city-menu a:hover {
  opacity: 1;
  color: #ffff00;
  text-decoration: underline;
}

/* Show on hover (desktop) */
.city-dropdown:hover .city-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nonActiveFakeLink {
  color: #1A6633;
  display: inline;  
  cursor: pointer; 
  text-decoration: underline dotted;
  white-space: normal;   /* allow line breaks */
}

/* Only on desktop hover, prevent main link click */
@media (hover: hover) and (pointer: fine) {
  .city-dropdown > .nonActiveFakeLink {
    pointer-events: none;  /* click goes to dropdown hover/focus instead of following main link's href url */
  }
}

/* Show on tap (mobile) */
/* Mobile tap */
.city-dropdown:focus-within .city-menu,
.city-dropdown:active .city-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}


/* --------------- END :  "RENTAL PAGES" -  IN-LINE CITY LINK SELECTION POP-UP ---------------  */



/* ADDITIONS */

.italic { font-style: italic;  }
.bold { font-weight: bold; }

.black { color: #000000;  }
.darkGrey { color: #333333;  }
.darkGreyBG { background-color: #333333; }
.red { color: #FF0000;  }

.white { color: #FFFFFF;  }
.whiteBG { background-color: #FFFFFF; }
.cream  { color: #CCCCCC; }
.creamBG  { background-color: #EEEEEE; }

.darkRedHeadline { color:#ab0303; font-size: 2.7em; line-height:130%; font-family: Prompt, Montserrat, 'Noto+Sans+TC', helvetica; }

.darkOrange { color: #eb653c; }

.fontplus25pc { font-size: 125%; }

.center {  text-align:center; }

.underline {
	text-decoration: underline;
}
.source {  font-size:10px; line-height:12px;  }


#back2Top {
  	z-index:10000;
    display: none;
    position: fixed;
    bottom: 25px;
    right: 10px;
    width: 50px;
    height: 50px;
    background-color: #222222;
    color: #dddddd;
    border: 1px solid #eeeeee;
    text-align: center;
    font-size: 45px;
    text-decoration: none;
    margin-left
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    cursor: pointer;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}
#back2Top.show {
  opacity: 1;
  visibility: visible;
}
#back2Top:visited {  
    background-color: #222222;
    color: #dddddd;
} 
#back2Top:hover {
    background-color: #333333;
    color: #279c4d;
}
#back2Top:active {
    background-color: #222222;
    color: #dddddd;
}


/* ---------------------------- HEADER ----------------------------- */
#HeaderAreaDiv {
  	position: fixed;
  	top:0;
	height:105px;
  	width:100vw; 
  	/* padding: 5px 30px 5px 110px; */
  	z-index:90;
  	opacity: 0.75; 
  	color:#ffffff;
}

header {
	height:95px;
  	position:relative;
  	width:auto;
   	margin: 5px 2px 0 102px;  /* Controls positioning of logotaglineMbl  (for Mbl view) */
}

#fixContentBelowfixedHdr {
	z-index: 1;
	padding-top:100vh;
	display:none; /* Is set visible in home page when slideshow is clicked to watch. Set independently for all other pages */
}

#azurbiz_dj_sound_light_rental_logo {
	position:fixed;
	top:5px;
	left:5px;
	height:95px;
	border:none;
	z-index: 100;
	display:block;
}

header h1 {
        margin:20px 0 0 0;
        font-size:18px;
        /* color:#e56038; */
        color:#222222;
        font-family: 'Baumans', cursive;
        text-align:center;
}

header p {
        font-family: 'Open Sans', sans-serif;
        font-size:16px;
        font-style: italic;
        color: #4A463B;
}

sup {
    vertical-align: super;
    font-size:75%;
}
		
.logotagline {
	font-family: 'Open Sans', sans-serif;
	font-size:11px;
	color:#dddddd;
	text-shadow: 1px 1px 1px #000000;
    font-weight: normal;
    margin:0 auto;
    padding:2px 70px 0 14px;
}


.logotaglineMbl {    /* Positioning of logotaglineMbl is set via 'header' above*/
	display: none;
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	color:#dddddd;
	text-shadow: 1px 1px 1px #000000;
}
#logotaglineMblDiv {
	display:none;
	padding-top:35px;
}

#navHomePage {
		margin-top:45px;
		text-align:center;
}

#navHomePage ul {
        list-style:none;
}

#navHomePage ul li {
		color:#ffffff;
		display: inline-block;
        padding:0 8px 0 8px;
        font-size:small;
        line-height:15px;
        font-weight:normal;
}

#navHomePage ul li a {
		color:#ffffff;
		text-shadow: 1px 1px 1px #000000;
        font-family: 'Open Sans', sans-serif;
        text-transform:uppercase;
        transition: all .25s ease;
}

#navHomePage ul li a:hover {
        color:#E56038;
        text-decoration: underline; 
        font-size:102%;
}

.activeMenuItem {
        font-weight:normal;
        /* text-decoration:overline; */
}



/* ---------------- MOBILE MENU  "X" TOGGLE  ----------------- */

.toggleMobile {
                display: block;
        		position:fixed;
        		right:16px; /* Changes to 2px for Mobiles (<500) as they don't have scroll bar */ 
        		top:3px;
                width: 40px;
                height: 36px;
                cursor: pointer;
                z-index: 999;
}

.toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3  {
                display: block;
                position: absolute;
                width: 40px;
                height: 8px;
                left: 0;
                background: #ffffff;
                border:1px solid #333333;
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}
.toggleMobile span.menu1  {
                top: 0;
}
.toggleMobile span.menu2  {
                top: 14px;
}
.toggleMobile span.menu3 {
                top: 28px;
}
.toggleMobile.active span.menu1 {
                top: 14px;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}
.toggleMobile.active span.menu2 {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}
.toggleMobile.active span.menu3 {
                opacity: 0;
                -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}

/* ---------------- MOBILE MENU "CONTENT"  ----------------- */

#mobileMenu {
	font-family: 'Open Sans', sans-serif;
    position: absolute;
    top: 36px;
    right:15px; /* Changes to 0 for Mobiles (<500) as they don't have scroll bar */ 
    width: 300px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
}

#mobileMenu.active {
    max-height: 2000px; /* must be larger than menu height */
}

#mobileMenu ul {
        display:block;
        margin: 0;
    	padding: 0;
        z-index: 999;
}

#mobileMenu ul li {
        display:block;
        font-size:small;
        font-weight:bold;
        /* padding: 8px 0; */
        /* letter-spacing: 0.1em; */
        text-align: center;
        text-transform: uppercase;
        border-left: 2px dotted #666666;
        border-bottom: 1px dotted  #666666;
        z-index: 999;
}

#mobileMenu ul li .makeEntireMenuItemClickable {
        background-color: #000000;
        color: #ffffff;
        display:block;
        line-height:35px;
        width:100%;
        height:100%;
        z-index: 999;
}
#mobileMenu ul li .makeEntireMenuItemClickable:hover {
        background-color: #555555;
        color:#ffcc00;
        font-weight:bold;
} 
#mobileMenu ul li .makeEntireMenuItemClickable:active {
        background-color: #555555;
        color:#ffcc00;
        font-weight:bold;
} 
.mblMenuIcons {
	
}

/* ----- max-height: 600px  -  Reduce "Scroll-down Menu" height to fit smaller-height screens  ------- */

@media (max-height: 600px) {

	#mobileMenu ul li {
		font-size:x-small;
	}
	#mobileMenu ul li .makeEntireMenuItemClickable {
        line-height:24px; 
	}
			
}


/* -------------------------------------------------- */ 


.bespokeDJSetImg {
	float:left;
	width:30%; 
	margin:20px 20px 20px 0;
}
              
.ImgRightOrFullWidthInMblView {
	float:right;
	width:30%; 
	margin:0 0 20px 20px;
}

.showInMblViewOnly {
	display:none;
	width:95%;
	margin: 10px 10px 20px 10px;
}

.showInSnglColViewOnly {
	display:none;
	width:95%;
	margin: 0;
}

/* ------  ONE  COLUMN  (dj_french_riviera_simon_hale)  -------  */

/* following is used to center the 3 video clips in DJ page + in the "Image Options" section in Home Page (entertainment services selection) */


.flexColumnsCentered {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
  	justify-content: center;
  	padding:30px 10px 30px 10px;
}
.flexColumnsCentered p {
        font-size:0.9em;  /* 1.3em = ~20px */
        color: #ffffff;
        line-height: 1.3em;
        font-weight:normal;
}
#one_column {
        line-height:25px;
        font-family: 'Open Sans', sans-serif;
        margin:0 auto;
        max-width: 1100px;
        padding:5px;
}

#one_column h2  {
        font-size:1.5em;  /* 1.5em = 24px */
        color: #eb653c;
        border-bottom: 1px solid #eb653c;
        padding: 20px 0 20px 0;
}

#one_column h3  {
        font-size:1.3em;  /* 1.3em = ~20px */
        color: #eb653c;
        padding: 20px 0 0 0;
}

/* used solely for "horizontal" Cannes Events List in Rentals page */
#one_column h4  {
        font-size:16px;
        color: #333333;
        font-weight:bold;
        padding: 20px 0 10px 0;
		display:inline;
		line-height:40px;
		margin-right: 15px;
		margin-left: 15px;
		margin-bottom:35px;
}

#one_column p  {
        margin-bottom: 25px;
}

#one_column article p  {
        margin-bottom: 15px;
}

.singlecolumn {
  		width: 100%;
        max-width: 1100px;
        font-size:14px;
}

/* --------- Home Page Content - Sections, Images & Hover Overlay  -------------*/

.entertainment-service {
        position:relative;
        clear:both;
        width:auto;
        background:#333333;
        background-image: url(rental_photos/sound_light_dj_band_equipment_rental_french_riviera.jpg);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: cover;
		background-attachment: fixed;
    	width: 100%;
    	height:100%;
}
.entertainment-service .wrapper {
        line-height:20px;
        margin: 0 auto;
        padding: 30px 5px 30px 5px;
        width:auto;
        max-width:1100px;
        font-size:14px;
        font-family: 'Open Sans', sans-serif;
}
.entertainment-service .wrapper h2 {
        font-family: 'Open Sans', sans-serif;
        font-size:26px;
        color: #ffffff;
        border-bottom: 1px solid #ffffff;
        padding: 10px 0 20px 0;
}

.bgImageOverlay {    /*  "height" changes to 100% at max-width: 915px  */ 
    width: 100%;
    height:100%
}

.serviceOption {
	width: 170px;
	height: 170px;
	border:1px solid #888888;
	border-radius:10px;
	box-shadow: 1px 3px 3px 1px #222222;
}
.underImgCaption {
	text-align:center;
	color:#ffffff;
	padding:0;
	font-size:1em;
	line-height:1.1em;
}
.serviceOptionHoverContainer {
    width: 170px;
    height: 170px;
    position: relative;
    display: inline-block;
    margin:20px 20px 70px 20px;
}
.serviceOptionHoverOverlay {
	border-radius:10px;
    position: absolute;
    opacity: 0;
    transition: .3s ease;
    top: 1px;
    left: 1px;
    width: 170px;
    height:170px;
    color:#ffffff;
    display: flex;
  	justify-content: center;
  	align-items: center;
  	font-weight:800;
}
.serviceOptionHoverContainer:hover .serviceOptionHoverOverlay {
    opacity: 0.7;
	background: #08848D;
}
.serviceOptionHoverOverlay p {
	padding:5px;
	text-align:center;
	font-size: 120%;
}

/* ----- For mobiles  ------ */

@media (max-width: 500px) {
	
	.serviceOption {
		width: 220px;
		height: 220px;
	}
	.serviceOptionHoverContainer {
    	width: 220px;
    	height: 220px;
    	margin:10px 20px 50px 10px;
	}
	.serviceOptionHoverOverlay {
    	width: 220px;
   		height:220px;
	}
	
}


/* -------- VIDEOS :   class ".white-popup" sets the look of the "Pop-Up" Inline "videos"  ------ */

.white-popup {
  position: relative;
  background: #111111;
  border: 2px solid #777777;
  border-radius: 10px;
  padding: 10px;
  width: auto;
  max-width: 900px;
  margin: 20px auto;
}

.youtubeiframeDims {
	width:750px;
	height:422px;
}
.VertyoutubeiframeDims {
	width:180px;
	height:320px;
}
.animGifDims {
	width:600px;
	height:338px;
}
.dj-popup-gallery {
     text-align:center;
}

.lighting-popup-gallery {
     text-align:center;
}


.gallerySpacing {
	 margin: 12px 8px 12px 8px;
	 height:110px;
	 line-height:140px;
	 border:1px solid #333333;
	 border-radius:8px;
	 background: #AAAAAA;   /* req'd for  grey placeholder 'image' (color) */ 
	 min-width:50px;   /* req'd to force bg grey placeholder color to be seen (otherwise placeholder is 0px wide */ 
}

.ambientGallerySpacing {
	 margin: 12px 10px 12px 10px;
	 height:120px;
	 border:1px solid #333333;
	 border-radius:8px;
}



/* ------  TWO COLUMNS (index, sound_and_light_equipment_rental, contact, marriage_wedding_services) -------  */

.rowContainer {
        max-width:2500px;
        margin:0 auto;
        padding:0;
		position: relative; 
        display: flex; 
        flex-flow: row wrap; 
		justify-content: center;  /* align horizontal */
		/* align-items: center; */  /* align vertical */
}
#leftCol1 {
	display:block;  /* used to swap image in Col.1 to "below" Col2 text when viewing in Single Column layout (< 915px) */
}
#RightCol1Sup {
	display:none; /* used to swap image in Col.1 to "below" Col2 text when viewing in "Single Column" layout (< 915px) */
}
.marginTop30px {
	margin-top:30px; /* Is then reduced for single column layout (< 915px) */ 
}
.text_columns  {
        font-family: 'Open Sans', sans-serif;
        margin:0 auto;
      	max-width: 1100px;
        max-height:100%;
        padding:10px;
}
.column1 {
  		width: 50%;
  		min-width:46%;
  		float: left;
        font-size:0.95em;
        line-height:1.5em;
        margin-top:0;
        padding:20px 10px 10px 0;
}
.column2 {
  		width: 46%;
  		min-width:46%;
  		float:left;
        font-size: 0.95em;
        line-height:1.5em;
        margin-top:0;
        padding:20px 0 10px 10px;
}
.column100pc {
  		width: 100%;
  		text-align: center;
        font-size:1.1em;
        line-height:125%;
        padding:0;  /* if this is set above '0', then with width: 100%, it causes page to overflow - noticable on Mobiles */
}

.floatRight {
		float:right;	
}
.imgPaddingTop {
        padding-top:50px;	
}
.text_columns h2  {
        font-size:1.5em;  /* 1.5em = 24px */
        color: #000000;
        border-bottom: 1px solid #000000;
        padding: 20px 0 15px 0;
}
.text_columns h3  {
        font-size:1.3em;  /* 1.3em = ~20px */
        color: #000000;
        padding: 20px 0 0 0;
}
.text_columns h4  {
        color: #000000;
}
.text_columns p  {
        margin-bottom: 20px;
}
.text_columns ul li  {
        padding: 0 0 9px 0;
}
.columnLeftContactForm {
		line-height:normal;
  		float: left;
  		width: 45%;
        margin: 20px 20px 0 5px;
        font-size: 0.9em;
}
.columnRightContactForm {
		line-height:normal;
  		width: 50%;
  		float: left;
        margin: 20px 5px 0 20px;
        font-size: 0.9em;
}



.stdImage {
	box-shadow: 1px 3px 3px 1px #555555;
	border-radius:8px;
}
.imageRndCorners {
	border-radius:8px;
}

.amb_light_photo {
	display: none;
	margin:10px 0 20px 0;
}

label {
	color:#cccccc;	
}
.inputBox {
        font-family: 'Open Sans', sans-serif;
        font-size:14px;
        font-weight:normal;
  		width: 85%;
        color:#333333;
        padding:6px;
        margin:0 30px 10px 0px;
        background-color:#ffffff;
        border-radius: 6px;
        border: 1px solid #888888;
}
.inputBoxHalf {
        font-family: 'Open Sans', sans-serif;
        font-size:12px;
        font-weight:normal;
  		width: 36%;
        color:#333333;
        padding:6px;
        margin:0 0 10px 0px;
        background-color:#ffffff;
        border-radius: 6px;
        border: 1px solid #888888;
}
.textinputbox {
        font-family: 'Open Sans', sans-serif;
        font-size:13px;
        font-weight:normal;
  		width: 85%;
        color:#333333;
        padding:6px;
        margin:0 30px 10px 0px;
        background-color:#ffffff;
        border-radius: 6px;
        border: 1px solid #888888;	
}
.questionReWhatsApp {
	color:#333333;
	font-weight:bold;
}
.spamGuardBox {
        font-family: 'Open Sans', sans-serif;
        font-size:1em;
        font-weight:normal;
  		width: 25%;
        color:#0000ff;
        padding:6px;
        margin:5px 0 10px 0px;
        background-color:#ffffff;
        border-radius: 6px;
        border: 1px solid #888888;
}

.col2hiddenTitle { 
	display:none;
    border-bottom: 1px solid #D6D0C1;
}


.row {
        position:relative;
        margin: 5px 0 10px 50px;
        float:right;
        width:350px;
}
.row img {
        float:left;
        margin: 40px 5px 5px 0;
}
.row p {
        margin-left: 120px;
}



/* PAST CLIENTS BAR */

#pastClients {
        position:relative;
        clear:both;
        width:auto;
        background:#FFFFFF;
}

#pastClients .wrapper {
        margin: 0 auto;
        padding:10px;
        width:auto;
        max-width:1100px;
        font-size:14px;
        font-family: 'Open Sans', sans-serif;
}

#pastClients h2  {
		font-weight:normal;
        font-size:24px;
        color: #eb653c;
        border-bottom: 1px solid #eb653c;
        padding: 20px 0 20px 0;
        margin-bottom: 15px;
        font-family: 'Open Sans', sans-serif;
}

#pastClients img  {
        padding: 0 18px 30px 18px;
        height:50px;
}





/* --------- CLIENT TESTIMONIALS  ------- */

#clientTestimonials {
        position:relative;
        clear:both;
        width:auto;
        background:#333333;
}
#clientTestimonials .wrapper {
        line-height:25px;
        margin: 0 auto;
        padding:30px 10px 0 10px;
        width:auto;
        max-width:1100px;
        font-size:14px;
        font-family: 'Open Sans', sans-serif;
}

#clientTestimonials .wrapper h2 {
        font-size:26px;
        color: #eb653c;
        border-bottom: 1px solid #eb653c;
        padding: 0 0 20px 0;
        margin-bottom: 15px;
        font-family: 'Open Sans', sans-serif;
}


/* Used solely for the row of 3 Testimonials */
#clientTestimonials .wrapper .column {
        font-family: 'Open Sans', sans-serif;
        color:#BBBBBB;
        float:left;
        width:30%;
        margin:0 15px 0 15px;
        position:relative;
}

#clientTestimonials .wrapper .column p {
        color: #DDDDDD;
        margin-bottom: 15px;
        font-style:italic;
}

#clientTestimonials .wrapper .column h4 {
        font-size: 18px;
        color: #FFFFFF;
        padding: 0 0 10px 0;
        margin-bottom: 10px;
        font-style:italic;
}

#clientTestimonials .wrapper .column img {
		margin:0 0 0 10px;
		width:50%;
		float:right;
}

#clientTestimonials .wrapper .column50pc {
        font-family: 'Open Sans', sans-serif;
        color:#BBBBBB;
        float:left;
        width:48%;
        padding-right:20px;
        text-align:center;
}






/* BUTTONS */

.button
{
        font-size:100%;
		font-weight:normal;
        padding:10px 45px;
        border: 1px solid #c3532e;
        background-image: linear-gradient(bottom, #E56038 0%, #ff8c66 100%);
        background-image: linear-gradient(to bottom, #ff8c66 0%, #E56038 100%);
        background-color: #eb653c;
        color: #EBE8DE;
        text-shadow: 1px 1px 0px #ff8155;
        text-decoration:none;
        border-radius:5px;
        box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
}

.button:hover
{
        text-shadow:none;
        color: #DAD8CD;
        font-weight:bold;
        font-size:120%;
        transition: font-size .5s ease;
}

.formError { 
	color: #eb653c; 
	background-color: #ffff00;
	font-style: italic;
}




/* SPACER */

#spacer {
        width:auto;
        height:70px;
        background-color:#e56038;
        position:relative;
        font-family: 'Open Sans', sans-serif;
        color:#fff;
        font-size:18px;
}

#spacer p
{
        margin-top:22px;
        width:auto;
        position:absolute;
        left:50%;
        margin-left:-450px;
}

#spacer .search
{
        margin-top:15px;
        width:auto;
        position:absolute;
        right:50%;
        margin-right:-480px;
}

.thumb_abs {
        position:absolute;
        top:0;
        left:0;
        width:100px;
        z-index:50;
        opacity: 1.0;
        transition: width .5s ease;
}
.thumb_abs:hover {
        opacity:0.95;
        width:280px;
}
.thumb_algnright {
        float: right;
        padding: 0 0 10px 10px;
        width:150px;
        z-index:50;
        opacity: 1.0;
        transition: width .5s ease;
}
.thumb_algnright:hover {
        opacity:0.95;
        width:280px;
}

.imageShrinkDiv {
        position:absolute;
        top:3px;
        left:280px;
        width:100%;
        height:40px;
        display:none;
        z-index:99;
}

.imageShrinkOverlay {
		position: absolute;
		top: 0;
		left: 0;
        width:100%;
        height:100%;
        display:none;
        z-index:99;
}



/* SKIPLINK */
.go-top {
        position: fixed;
        bottom: 2em;
        right: 2em;
        text-decoration: none;
        color: white;
        background-color: rgba(0, 0, 0, 0.3);
        font-size: 12px;
        padding: 1em;
        display: none;
}

.go-top:hover {
        background-color: rgba(0, 0, 0, 0.6);
}



/* MISC */
.clear {
        clear:both;
}
.hidden {
        position:absolute;
        clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
          clip: rect(1px, 1px, 1px, 1px);
}




/* MEDIA QUERIES FOR RESPONSIVE LAYOUT */

/* -----------------------------------------------------------------------  max-width: 1215px  ------------------------------------------------------------------------------------- */

@media (max-width: 1215px)  {
	
	.logotagline {
		font-size:10px;
	}		


@media (max-width: 1215px)  {

	.homePageMargins {
	 margin: 60px 20px 0 20px;
	}

.imgHoverContainer {
    margin:0 20px 30px 20px;
}



.columnLeftContactForm {
  		float: left;
  		width: 45%;
        margin: 20px 10px 0 5px;
}

.columnRightContactForm {
  		width: 50%;
  		float: left;
        margin: 20px 5px 0 10px;
}
		
		

}



/* -----------------------------------------------------------------------  max-width: 1055px  ------------------------------------------------------------------------------------- */

@media (max-width: 1055px)  {

/*		
	#text_columns  {
        max-width: 950px;
	}


	.column1 {
  		width:520px;
	}

	.column2 {
  		max-width:520px;
	}	
*/

	.flexBoxSpacing {
		padding: 40px 50px 40px 50px;
	}

}

/* -----------------------------------------------------------------------  max-width: 915px  (Swaps to Single Columns layout)  ------------------------------------------------------------------------------------- */

@media (max-width: 915px)
{

.logotagline {
	font-size:9px;
}	

nav {
		margin-top:35px;
}

nav ul li {
        font-size:12px;
        padding:0 0 0 16px;
}

/*
#text_columns  {
        margin:0 auto;
        padding:5px;
        max-width: 900px;
}
*/
.column1 {
		float: none;
  		width: 98%;
  		padding: 10px 5px 10px 5px;
}
.column2 {
		float: none;
  		width: 98%;
  		padding: 0px 5px 10px 5px;
}	
.imgPaddingTop {
        padding-top:0;
}
#leftCol1 {
	display:none;  /* used to swap image in Col.1 to "below" Col2 text when viewing in Single Column layout (< 915px) */
}
#RightCol1Sup {
	display:block; /* used to swap image in Col.1 to "below" Col2 text when viewing in "Single Column" layout (< 915px) */
	margin: 0 auto;
}
.marginTop30px {
	margin-top:0; /* Is then reduced for single column layout (< 915px) */ 
}
.showInSnglColViewOnly {
	display:inline;
	margin: 0;
}

.flexBoxSpacing {
		padding: 25px 30px 25px 30px;
}


.inputBox {
        font-size:12px;
  		width: 85%;
        color:#333333;
        padding:6px;
        margin:0 25px 10px 0;
}

.textinputbox {
        font-size:11px;
  		width: 85%;
        color:#333333;
        padding:6px;
        margin:0 25px 10px 0;
}


.col2hiddenTitle { 
	display: block;
	border-top: 1px solid #D6D0C1;
  		border-bottom: 1px solid #D6D0C1;
}

#clientTestimonials .wrapper {
        max-width:915px;
        font-size:13px;
}

#clientTestimonials .wrapper .column  {   /* For the 3 testimonial columns & footer Links */
        margin:10px 10px 30px 10px;
        float:none;
        font-size: 14px;
        width: 95%;
}

#clientTestimonials .wrapper .column p {
        color: #DDDDDD;
        margin-bottom: 15px;
        font-style:italic;
}

#clientTestimonials .wrapper .column h4 {
        font-size: 16px;
        color: #FFFFFF;
        padding: 0 0 10px 0;
        margin-bottom: 10px;
        font-style:italic;
}

		footer .wrapper .column50pc {
      	  	 width:90%;
      	  	 margin: 0 auto;
       		 padding:0 10px 0 10px;
       		 clear;
		}

        
		.row
		{
        		width:100%;
                margin-bottom: 25px;
		}
		
		
        #boxcontent article
        {
                float: none;
                margin: 30px auto 0 auto;
                width: 60%;
        }
        #spacer
        {
                font-size:15px;
        }
        #spacer .search
        {
                margin-top:19px;
                margin-right:-385px;
        }
        #spacer p
        {
                margin-left:-370px;
        }

		
		.youtubeiframeDims {
			width:765px;
			height:431px;
		}
  
       
}




/* -----------------------------------------------------------------------  max-width: 765px   ------------------------------------------------------------------------------------- */

@media (max-width: 765px) {

        header nav  {
           display:none;
        }

        #mobileMenu {
            z-index: 99;
        }

       
       /* DJ page */
	   #one_column h2  {
        	font-size:24px;
       }
	  #one_column p  {
           font-size:medium;
	  }
	  
	  
	  #pastClients h2  {
        	font-weight:normal;
       		font-size:24px;
	  }


.columnLeftContactForm {
	    float:none;
  		width: 95%;
        margin: 20px 10px 10px 10px;
}

.columnRightContactForm {
	    float:none;
  		width: 95%;
        margin: 20px 10px 10px 10px;
}
		
.inputBox {
        font-size:12px;
  		width: 90%;
        color:#333333;
        padding:6px;
        margin:0 10px 10px 4px;
}

.textinputbox {
        font-size:11px;
  		width: 90%;
        color:#333333;
        padding:6px;
        margin:0 10px 10px 4px;
}
				
        #spacer  {
                height:50px;
        }
        #spacer p  {
                text-align:center;
                position:static;
                margin: 0 auto;
                padding:15px 0 7px 0;
        }
        #spacer .search  {
                text-align:center;
                position:static;
                margin: 0 auto;
        }
        
        
        #clientTestimonials .wrapper  {
        		padding:7px 7px 20px 7px;
                width: 95%;
                margin: 0 auto;
        }

		#clientTestimonials .wrapper h2 {
        	font-size:22px;
       }

		.youtubeiframeDims {
			width:500px;
			height:281px;
		}
  
       
		.bespokeDJSetImg {
			width:50%;
		}

		.ImgRightOrFullWidthInMblView {
			width:50%;
		}
                    
}


/* -----------------------------------------------------------------------  max-width: 500px  ------------------------------------------------------------------------------------- */

@media (max-width: 500px) {

#HeaderAreaDiv {
	height:90px;
}
header {
	 height:80px;
}	
.toggleMobile {
    right:10px;
}
#mobileMenu {
    right: 0;
}	


/* Swap to showing "logotaglineMbl" */          		
.logotagline {
	display: none;
}	
.logotaglineMbl { 
	display: inline; 
  	font-size:9px;		
 }
 #logotaglineMblDiv {
	display:block;
	padding-top:35px;
}
		
#azurbiz_dj_sound_light_rental_logo {
	height:80px;
}	

#spacer  {
     height:auto;
     padding-bottom:15px;
}

 /* home page, rentals, av services, contact page */
.text_columns h2  {
       	padding: 10px 0 10px 0;
       	font-size: 1.4em;
}  
/* DJ page */
#one_column h2  {
     	font-size:20px;
      	padding: 10px 0 10px 0;
}

#pastClients h2  {
      	font-weight:normal;
   		font-size:20px;
}

.columnLeftContactForm {
	    float:none;
  		width: 97%;
        margin: 20px 5px 10px 5px;
        font-size: 1em;
}

.columnRightContactForm {
	    float:none;
  		width: 97%;
        margin: 20px 5px 10px 5px;
        font-size: 1em;
}

.inputBox {
        font-size:0.95em;
}
.inputBoxHalf {
       /* font-size:0.95em; */
}
.textinputbox {
        font-size:0.95em;
}	
	
	  
		.amb_light_photo {
			display: block;	
		}
        
		.youtubeiframeDims {
			width:100%;
			height:100%;
		}
		.VertyoutubeiframeDims {
			width:100%;
			height:100%;
		}
		.animGifDims {
			width:100%;
			height:100%;
		}

		.showInMblViewOnly {
			display:block;
		}
       
		.bespokeDJSetImg {
			width:95%;
			margin:5px;
		}
           
		.ImgRightOrFullWidthInMblView {
			width:95%;
			margin:5px;
		}
                  
        		
}
/* ---------  END :  max-width: 500px  ---------- */



/* KEYFRAMES */

@keyframes stylie-transform-keyframes {
  0% {transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);}
}

@keyframes stylie-transform2-keyframes {
  0% {transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);}
}