.footer ul {
    list-style-type: none;
    margin: 0;
}

#bottom-footer {
    margin-top: 10px;
}

#socialMedia {
    margin-bottom: 10px;
}


@media only screen and (max-width: 768px) { 

    .backgroundSquare {
        display: none;
    }
    .hiddenDiv {
        position: inherit !important;
        display:block !important;
        background-color: white;
        height: 100%;
    }
    .close {
        display: none;
    }
    .mobile_banner {
        width: 100%;
    }
    .black-btn {
        margin-top: 10px;
        margin: 0 auto;
    }
  
	
	/* JMAY */
	.hiddenDiv div { margin-right: 0px !important; }
	
}

@media only screen and (max-width: 1199px){
	.carousel .item { margin-left: 0px; width: 100%; height: auto; }
	.carousel .item img { width: 40% !important; height: auto; }
	.carousel-caption a span, .carousel-caption a:hover span { top: -215px !important; }
    
	
    .backgroundSquare {
        display: none !important;
    }
    .hiddenDiv {
        position: inherit !important;
        display:block !important;
        background-color: white;
        height: auto;
    }
    .close {
        display: none;
    }
    .mobile_banner {
        position: relative;
        width: 100%;
        padding-top: 25px;
        padding-bottom: 25px;
    }
	
	/* JMAY ADDED, removes the one by one display*/
	.carousel-inner>.item { display: block; height: 250px; }
	.carousel-caption { bottom: 20px; }
	/*  END JMAY ADD */
    
    .carousel-control {
        display: none;
    }
    /* JMAY HIDE 
	.carousel-caption a {
        display: none;
    } */
    .carousel-caption a span, .carousel-caption a:hover span { /* JMAY add "a" selector to show the span within the link. Include the hover span here too to override the desktop styles and make the span look like Britt's layout */
        display: block;
		background: none !important;
		 background-color: none !important; 
		 padding: 0px;
		 
		 color: #988c88; /*lt gray*/
		 font-family: "DINOT-Medium", sans-serif;
		 text-transform: none;
		 width: 50%;
         height: 200px;
		 position:absolute !important;
		 
		 top: -180px;
		 left: 50%;
		 text-decoration: none !important;
		 text-align: left;
		 -webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		opacity: 1;
    }
    .carousel-caption a {
        
    }
	/* JMAY ADD */
	.carousel-inner a span h4 { /*Add a new H4 to the span for the product title. Visible only on mobile, hidden in eloquastyles.css, maybe it should be there anyways? */
		display: block !important;
		font-family: "DINOT-Bold", sans-serif;
        text-transform: uppercase;
	}
	/* END JMAY ADD  */
	
    .final-slide-all.button {
        display: block !important;
    }
    .final-slide-all {
        background-image: url();
        height: 0px;
    }
    .desk_prod {
        display: none !important;
    }
    .mobile_prod img {
        display: block !important;
        padding: 0px 10px;
		float: left;
    }
    #socialMedia ul {
        padding-left: 0 !important;
    }

    .emg-brochures {
        width: 100% !important;
    }
}

@media only screen and (min-width: 1200px) { 
    .backgroundSquare {
        display: block;
    }
    .hiddenDiv {
        display:none;
    }
    .close {
        display: block;
    }
    .mobile_banner {
        display: none;
    }
    .mobile_prod {
        display: none !important;
    }
    .footer ul {
    list-style-type: none;
    margin-bottom: 10px;
}
    /*#mid3hidden {
        height: 350px !important;
    }*/
}