@font-face { font-family: 'OpenSans-Bold'; src: url('res/fonts/OpenSans-Bold.eot'); src: url('res/fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'), url('res/fonts/OpenSans-Bold.woff') format('woff'), url('res/fonts/OpenSans-Bold.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'OpenSans-Light'; src: url('res/fonts/OpenSans-Light.eot'); src: url('res/fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'), url('res/fonts/OpenSans-Light.woff') format('woff'), url('res/fonts/OpenSans-Light.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'OpenSans-Regular'; src: url('res/fonts/OpenSans-Regular.eot'); src: url('res/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), url('res/fonts/OpenSans-Regular.woff') format('woff'), url('res/fonts/OpenSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'OpenSans-Semibold'; src: url('res/fonts/OpenSans-Semibold.eot'); src: url('res/fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'), url('res/fonts/OpenSans-Semibold.woff') format('woff'), url('res/fonts/OpenSans-Semibold.ttf') format('truetype'); font-weight: 400; font-style: normal; } html { /* border-box box model allows us to add padding and border to our elements without increasing their size */ box-sizing: border-box; } /* WHAT IS THIS?! We inherit box-sizing: border-box; from our selector Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector */ *, *:before, *:after { box-sizing: inherit; } .clear { clear: both; } body { font-family: "Arial"; font-size: 16px; background-color: #faf8fc; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { margin: 0 0 5px 0; } .hidden { display: none !important; } .testing-only-header { height: 50px; width: 100%; position: fixed; color: #FFF; background-color: #FF0000; line-height: 20px; text-align: center; z-index: 100; padding-top: 5px; padding-bottom: 5px; } .testing-only { position: fixed; width: 110%; height: 25px; top: 50%; left: -5%; transform: rotate(-10deg); background-color: #ffbfbf; border-bottom: solid 1px #fa5454; opacity: 0.8; z-index: 100; } .testing-only .text{ color: #fff; line-height: 25px; width: 16%; display: inline-block; } .testing-only .text:first-child { color: #fff; line-height: 25px; width: 16%; display: inline-block; margin-left: 12%; } #loadingOverlayWrapper { height: 100vh; font-size: 10pt; font-weight: normal; margin: auto; padding-top: 33vh; display: none; opacity: 0; } #loadingOverlayWrapper img { width: 120px; margin-bottom: 20px; } .loading-overlay { text-align: center; } .loading-progress-wrapper { width: 400px; height: 25px; margin: auto; } .loading-progress-outer { width: 400px; height: 3px; float: left; border: solid 0.5px #999988; margin-top: 30px; border-radius: 1px; } #loadingProgress { width: 25px; height: 2px; float: left; background-color: #aa6622; -webkit-transition-property: width; /* Safari */ -webkit-transition-duration: 0.2s; /* Safari */ transition-property: width; transition-duration: 0.2s; } #loadingStatus { font-size: 13px; float: right; margin-top: 4px; letter-spacing: 0; } #disclaimerWrapper { top: 40px; position: relative; display: none; opacity: 0; padding-bottom: 30px; } .disclaimer-header { width: 1000px; margin: auto; padding: 30px 0 25px; } #disclaimerRdlr { height: 110px; } #disclaimerNspdr { height: 96px; margin-left: 20px; padding-bottom: 15px; } #disclaimerFlag { height: 96px; float: right; padding-top: 10px; } .disclaimer-content { width: 1000px; margin: auto; } .disclaimer-intro { width: 50%; float: left; } .disclaimer-intro-header { font-size: 32px; line-height: 50px; padding: 30px 0 50px; } .disclaimer-intro-content { font-size: 10pt; color: rgb(127,127,127); ; line-height: 26px; padding-right: 80px; } .disclaimer-intro-copy { color: #7f7f7f; } .disclaimer-terms { width: 50%; float: right; background-color: #fff; -webkit-box-shadow: 7px 7px 20px 0px rgba(187,187,187,0.8); -moz-box-shadow: 7px 7px 20px 0px rgba(187,187,187,0.8); box-shadow: 7px 7px 20px 0px rgba(187,187,187,0.8); border-radius: 3px; } .disclaimer-terms-header { text-align: center; color: #aa6622; font-size: 20px; font-weight: bold; padding: 30px 0; } .disclaimer-terms-content { width: 80%; margin: auto; font-size: 9pt; color: #7f7f7f; max-height: 370px; overflow-y: scroll; padding-right: 20px; } .content-header { font-size: 10pt; } .disclaimer-terms-content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } .disclaimer-terms-content::-webkit-scrollbar { width: 5px; background-color: #F5F5F5; } .disclaimer-terms-content::-webkit-scrollbar-thumb { background-color: #aa6622; } .disclaimer-terms-footer { width: 80%; margin: auto; padding: 30px 0; } .accept-disabled { cursor: not-allowed; } .accept-enabled { cursor: pointer; background-color: #aa6622; } #disclaimerTermsAccept { min-width: 220px; min-height: 45px; float: right; color: #fff; border-radius: 5px; border: none; } #loadingSpinner{ position: relative; top: 3px; } .remember-my-choice { float: left; padding: 10px 0 20px; font-size: 14px; color: #7f7f7f; } #chkRememberMyChoice { position: relative; top: 2px; cursor: pointer; } #errorWrapper { height: 100vh; color: #ff0000; font-size: 10pt; margin: auto; padding-top: 33vh; letter-spacing: 1.5px; display: none; opacity: 0; } #errorWrapper img { width: 120px; margin-bottom: 20px; } #fixedNavigationWrapper { display: none; /*opacity: 0;*/ position: fixed; top: 40px; left: 0; right: 0; padding: 10px 0 5px; background-color: #eee; box-shadow: rgba(0,0,0,0.4) 0 0 1px; z-index: 99; } .fixed-nav { width: 70%; margin: auto; padding-right: 5px; } .fixed-nav-logo { float: left; } .sign-in-wrapper, .sign-in-wrapper-fixed { width: calc(100% - 185px); height: 20px; float: right; color: rgb(127,127,127); font-size: 9pt; font-weight: bold; padding-right: 5px; } #loggedInUser, #loggedInUserFixed { float: right; padding-right: 5px; } #signIn, #signInFixed { float: right; cursor: pointer; } #signOut, #signOutFixed { float: right; cursor: pointer; } #primaryToolsFixed { float: right; color: rgb(127,127,127); font-size: 9pt; padding-right: 5px; margin-top: 10px; } #nsdprLogoFixed { width: 100px; cursor: pointer; } #rdlrWrapper { height: auto; background-color: #fff; display: none; opacity: 0; top: 40px; position: relative; } #nspdrWrapper { height: auto; background-color: #eee; display: none; opacity: 0; top: 40px; position: relative; } #contentWrapper { background-color: transparent; display: none; opacity: 0; top: 40px; position: relative; } #searchWrapper { display: none; opacity: 0; top: 40px; position: relative; } #footerWrapper { height: auto; background-color: #7f7f7f; margin-top: 20px; display: none; opacity: 0; top: 40px; position: relative; } .rdlr { width: 70%; margin: auto; padding: 10px 0 0; } .rdlr-logo { width: 50%; float: left; } .rdlr-flag { width: 50%; float: right; padding-top: 10px; } #dptLogo { height: 110px; cursor: pointer; } #safLogo { height: 80px; float: right; } .nspdr { width: 70%; height: auto; margin: auto; padding: 20px 0 !important; } .nspdr-space { background: #eee; } .nspdr-logo { float: left; } #nspdrLogo { width: 100px; cursor: pointer; } #readMore { float: left; color: #555; font-size: 9pt; cursor: pointer; margin: 45px 0 0 15px; } #readMoreContent { color: rgb(127,127,127); background-color: #e7e7e7; border-radius: 8px; font-size: 10pt; font-weight: normal; line-height: 1.5em; margin-top: 20px; padding: 10px 15px; text-align: justify; display: none; opacity: 0; } #learnMore { color: #fff; background-color: #a6a6a6; padding: 5px 15px; border-radius: 4px; text-decoration: none; font-size: 9pt; margin-left: 10px; } #primaryTools { float: right; color: rgb(127,127,127); font-size: 9pt; padding-right: 5px; margin-top: 10px; } .primary-tool { color: rgb(127,127,127); background-color: transparent; border: solid 1.2px rgb(166,166,166); text-decoration: none; font-weight: normal; float: left; border-radius: 2px; text-align: center; padding: 3px 10px 3px 10px; cursor: pointer; margin: 5px 0 0 10px; } .primary-tool-inverted { color: rgb(127,127,127); background-color: transparent; border: solid 1.2px rgb(170,102,34); text-decoration: none; font-weight: normal; float: right; border-radius: 2px; text-align: center; padding: 3px 10px 3px 10px; cursor: pointer; margin: 5px 0 0 10px; } .primary-tool i, .primary-tool-inverted i { float: left; margin-right: 10px; } .primary-tool div:nth-child(1), .primary-tool-inverted div:nth-child(1) { float: left; font: normal 7pt 'Font Awesome 5 Free'; margin-top: 2px; padding-right: 6px; } .primary-tool div:nth-child(2), .primary-tool-inverted div:nth-child(2) { font-size: 9pt; float: left; text-transform: lowercase; } .content { width: 70%; margin: auto; display: grid; display: -ms-grid; grid-template-columns: 2fr 1fr; -ms-grid-columns: 2fr 1fr; } #mapThemes { color: #116633; border-left: solid 2px #116633; -ms-grid-column: 1; -ms-grid-row: 1; } #news { color: #999988; border-left: solid 2px #999988; margin-left: 20px; padding-bottom: 15px; -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 4; grid-row: span 4; } #secondaryTools { color: #aa6622; border-left: solid 2px #aa6622; -ms-grid-column: 1; -ms-grid-row: 2; } #reportAProblem { color: rgb(51,51,51); border-left: solid 2px rgb(51,51,51); -ms-grid-column: 1; -ms-grid-row: 3; } #contributors { color: #aa9955; border-left: solid 2px #aa9955; -ms-grid-column: 1; -ms-grid-row: 4; } #seeMoreNews { float: right; font-weight: normal; font-size: 9pt; cursor: pointer; } .search-tools { padding-top: 15px; } #searchInput { width: calc(100% - 290px); float: left; height: 45px; color: rgb(64,64,64); border: none; padding: 10px; font-size: 12pt; border-radius: 4px 0 0 4px; border: solid 0.75pt rgb(170,102,34); } input:focus { outline: none; } #searchSubmit { width: 140px; float: left; line-height: 45px; border-radius: 0 4px 4px 0; background-color: rgb(170,102,34); color: white; text-align: center; cursor: pointer; font-size: 10pt; font-weight: normal; text-align: center; } #exploreSubmit { width: 140px; float: left; line-height: 43px; border-radius: 4px; margin-left: 10px; background-color: transparent; color: #aa6622; border: solid 1.2px #aa6622; text-align: center; cursor: pointer; font-size: 10pt; font-weight: normal; } #dataCounter { padding: 20px 0 0 5px; font-size: 9pt; font-weight: normal; color: rgb(89,89,89); grid-area: data-counter; } #numberDatasets, #numberCustodians { font-weight: bold; } #searchOverlay { height: 215px; text-align: center; padding: 80px 0; display: none; opacity: 0; } #searchOverlay img { width: 100px; } #searchOverlay div { color: #555; font-size: 10pt; letter-spacing: 1.5px; margin-top: 10px; } div { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently */ } .caret_down:before { font: normal 8pt 'Font Awesome 5 Free'; content: "\f0d7"; } .card { border-radius: 0 8px 8px 0; box-shadow: 0 0 5px rgba(191,191,191,0.4); background-color: #fff; margin-top: 20px; } .card-header { font-weight: bold; font-size: 9pt; padding: 10px; margin: 0 10px; border-bottom: solid 0.5pt rgb(217,217,217); line-height: 24px } #mapthemeContent, #secondaryToolsContent, #reportAProblemContent{ padding: 0 20px 20px 0; } #contributorsContent { max-height: 300px; overflow-y: auto; padding-bottom: 20px; } .card-button { float: left; width: 100px; margin: 20px 0 0 20px; border-radius: 4px; cursor: pointer; position: relative; transition: all .1s ease-in-out; } .card-button:hover { transform: scale(1.2); } .card-button:hover i, .card-button:hover img, .card-button:hover div { opacity: 0; } .summary-wrapper { font-family: 'Arial' !important; position: absolute; top: 0; bottom: 0; height: 100%; display: none; } .card-summary { position: relative; font-size: 7pt !important; font-family: 'Arial' !important; text-align: center; line-height: 8pt !important; padding: 5px; margin: auto !important; opacity: 1 !important; align-self: center; } .card-button:hover .summary-wrapper { display: grid; display: -ms-grid; opacity: 1 !important; vertical-align: middle; align-self: center; } #mapThemeContent div.card-summary { color: #116633 !important; } #secondaryToolsContent div.card-summary { color: #aa6622 !important; } #reportAProblemContent div.card-summary { color: rgb(51,51,51) !important; } .card-button-green { border: solid 1pt rgba(17,102,51,0.75); color: rgb(17,102,51); } .card-button-green:hover { border: solid 1pt rgba(17,102,51,1); } .card-button-orange { border: solid 1pt rgba(170,102,34,0.75); color: rgb(170,102,34); } .card-button-orange:hover { border: solid 1pt rgba(170,102,34,1); } .card-button-dark-grey { border: solid 1pt rgba(51,51,51,0.75); color: rgb(51,51,51); } .card-button-dark-grey:hover { border: solid 1pt rgba(51,51,51,1); } .card-button div:nth-child(1) { margin-top: 10px; font-size: 30pt; font-family: 'Font Awesome\ 5 Free'; display: block; text-align: center; line-height: 60px; } .card-button div:nth-child(2) { font-size: 8pt; height: 25px; margin-bottom: 10px; text-align: center; text-transform: lowercase; } .card-button img { width: 48px; } .tool-lock { float: left; font-size: 10pt; position: absolute; left: 7px; top: 7px; /*color: rgb(127,127,127);*/ } #newsHeader { padding: 10px; margin: 0 10px 0 20px; } .news { padding: 10px 0 0 0; margin: 0 10px 0 20px; } .news-with-link:hover { background-color: #f6f6f6; cursor: pointer; } a.news-link { text-decoration: none !important; } #newsContent { padding-right: 10px; } .news-title { font-size: 10pt; font-weight: bold; color: #777; } .news-author-date { margin-top: 3px; font-size: 9pt; font-weight: 500; color: rgb(191,191,191); line-height: 25px; } .news-author { width: 50%; display: inline-block; } .news-date { width: 50%; display: inline-block; text-align: right; } .news-content { font-size: 9pt; color: #555; line-height: 20px; margin-top: 5px; padding-bottom: 10px; border-bottom: solid 0.5pt rgb(217,217,217); } .news div:nth-child(4) { margin: 20px 5px 0px 0px; border-top: solid 0.5pt rgba(217,217,217,0.75) } .contributor { float: left; margin: 20px 0 0 20px; cursor: pointer; } .contributor img { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.5; margin: auto; } .contributor img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); opacity: 1; } #contributorsSummaries { max-height: 300px; overflow-y: auto; } .contributor-summary { color: #555; font-size: 9pt; padding: 20px; display: none; opacity: 0; } .summary-img { } .summary-website { color: inherit; margin-left: 50px; } .summary-close { color: #777; float: right; cursor: pointer; } .summary-content { padding: 20px 0 0; line-height: 25px; text-align: justify; } .search { width: 70%; margin: auto; } #searchFilters { width: 25%; float: left; color: #999988; border-left: solid 2px #999988; } .filters { padding: 15px; } #dataTypeSelected, #categorySelected, #themeSelected, #sourceSelected, #regionSelected { padding: 3px 0 10px; } .filter-tag { color: #555; background-color: #f0f0ed; font-size: 9pt; font-weight: normal; display: inline-block; padding: 4px 10px; margin: 7px 7px 0 0; border-radius: 2px; } .filter-tag i { color: #888; margin-top: 2px; margin-left: 7px; cursor: pointer; } .filters-footer { height: 30px; padding-top: 12px; border-top: solid 0.5pt rgb(217,217,217); } #resetFilter { color: #116633; font-size: 10pt; float: left; display: inline-block; padding: 2px 0 0 2px; cursor: pointer; } #applyFilter { color: #fff; font-size: 10pt; background-color: #999988; float: right; border-radius: 15px; padding: 3px 15px; text-align: center; cursor: pointer; } #searchResultsWrapper { width: calc(75% - 20px); min-height: 215px; float: right; margin-left: 20px; color: #116633; border-left: solid 2px #116633; } #resultsHeaderTitle { display: inline-block; margin-right: 20px; } #numberOfResults { color: #777; font-size: 9pt; font-weight: normal; display: inline-block; margin-right: 20px; } #searchPagingTop { color: #777; font-size: 9pt; font-weight: normal; display: inline-block; visibility: hidden; } #searchPagingTop i, #searchPagingBottom i { font-size: 10pt; cursor: pointer; } #topLeft, #bottomLeft { padding: 5px; visibility: hidden; } #topRight, #bottomRight { padding: 5px; } #resultsFooter { padding: 0 20px 15px 20px; } #searchPagingBottom { color: #777; font-size: 9pt; font-weight: normal; text-align: center; visibility: hidden; } #pageNumbersTop, #pageNumbersBottom { display: inline-block; } .page-number { width: 23px; text-align: center; display: inline-block; cursor: pointer; } .page-number-current { color: #666; width: 23px; text-align: center; display: inline-block; font-weight: bold; } #pagingTopPreviousPage, #pagingBottomPreviousPage { padding-right: 5px; } #pagingTopNextPage, #pagingBottomNextPage { padding-left: 5px; } #sortByWrapper { float: right; } #sortByRelevance { padding-right: 15px; } #sortBy { color: #888; } .sort-by-label { width: 70px; color: #777; font-size: 9pt; font-weight: normal; display: inline-block; text-align: right; } .sort-by { color: #777; font-size: 9pt; font-weight: normal; float: right; margin-left: 15px; cursor: pointer; } .sort-by.active { font-weight: bold; } .sort-by i { font-size: 10pt; padding-left: 2px; visibility: hidden; } .sort-by.active i { visibility: visible; } #sortBySelect { width: 90px; color: #777; background-color: #f7f7f7; font-size: 9pt; font-weight: normal; padding: 3px 5px; border-radius: 2px; float: right; } #sortBySelect option:hover { color: #777; background-color: #f7f7f7; } #searchResults { padding: 20px 20px 0 20px; } .result-wrapper { font-weight: normal; margin-bottom: 15px; border-bottom: solid 0.5pt rgb(217,217,217); } .result-wrapper .title { font-size: 12pt; color: rgb(17,102,51); float: left; line-height: 25px; } .result-wrapper .long-title { float: none; font-size: 12pt; color: rgb(17,102,51); line-height: 25px; } .result-wrapper .action-btn { width: 100px; font-size: 9pt; color: #116633; background-color: #d9e6de; border-radius: 12px; float: right; text-align: center; margin-left: 10px; padding: 5px 0; cursor: pointer; text-decoration: none; } .result-wrapper .download-wrapper { display: none; font-size: 9pt; color: #116633; background-color: #d9e6de; border-radius: 12px; float: right; text-align: center; margin-left: 10px; padding: 5px 10px; cursor: pointer; text-decoration: none; } .result-wrapper .download-wrapper .download-btn { padding: 10px; } .result-wrapper .download-wrapper .download-size { margin-top: 5px; padding: 0 10px; border-left: solid 1px #116633; } .result-wrapper .download-wrapper .download-type { margin-top: 5px; padding: 0 10px; border-left: solid 1px #116633; } .result-wrapper .source { font-size: 9pt; color: #777; padding: 8px 0; } .result-wrapper .description { font-size: 9pt; color: #777; padding: 8px 0; line-height: 12pt; } .result-wrapper .result-footer { width: 150px; font-size: 8pt; font-weight: normal; color: #999; float: left; padding: 8px 0 20px 0; line-height: 20px; } .result-wrapper .result-footer i { font-size: 9pt; margin-right: 8px; } #noRecordsFound { height: 195px; color: #999988; font-size: 9pt; } .icon_upload { content: "\70"; } .footer { width: 70%; margin: auto; color: #fff; padding: 20px 0 !important; } .footer-space { background-color: #7f7f7f; } #footerContent { display: grid; display: -ms-grid; grid-template-columns: 295px 1fr 1fr 1fr 1fr; -ms-grid-columns: 295px 1fr 1fr 1fr 1fr; } #footerLogo { width: 295px; height: 110px; -ms-grid-row: 1; -ms-grid-column: 1; } .footer-menu-header { text-transform: uppercase; font-size: 10pt; font-weight: bold; } #footerData { padding-left: 20px; -ms-grid-row: 1; -ms-grid-column: 2; } #footerTools { padding-left: 20px; -ms-grid-row: 1; -ms-grid-column: 3; } #footerLinks { padding-left: 20px; -ms-grid-row: 1; -ms-grid-column: 4; } #footerAbout { padding-left: 20px; -ms-grid-row: 1; -ms-grid-column: 5; } #footerDataList, #footerToolsList, #footerLinksList, #footerAboutList { font-size: 9pt; padding-left: 0; list-style-type: none; line-height: 25px; cursor: pointer } #footerDataList li a, #footerToolsList li a, #footerLinksList li a, #footerAboutList li a { color: white; text-decoration: none; } #footerDataList li a:hover, #footerToolsList li a:hover, #footerLinksList li a:hover, #footerAboutList li a:hover { color: white; } #footerSocialWrapper { padding-top: 10px; } #footerSocial { padding-left: 1px; } .social-icon { float: left; margin-right: 10px; font: normal 20pt 'Font Awesome 5 Free'; cursor: pointer; } .social-icon i { color: #fff; } #copyright { font-size: 9pt; font-weight: normal; padding: 10px 0 0 18px; } /**********MEDIA QUERIES************/ @media screen and (max-width: 1600px) { .fixed-nav { width: 80%; } .rdlr { width: 80%; } .nspdr { width: 80%; } .content { width: 80%; } .search { width: 80%; } .footer { width: 80%; } } @media screen and (max-width: 1366px) { .fixed-nav { width: 95%; } .rdlr { width: 95%; } .nspdr { width: 95%; } .content { width: 95%; } .search { width: 95%; } .footer { width: 95%; } } @media screen and (max-width: 1024px) { .content { grid-template-columns: 1fr; -ms-grid-columns: 1fr; } #mapThemes { -ms-grid-column: 1; -ms-grid-row: 1; } #secondaryTools { -ms-grid-column: 1; -ms-grid-row: 2; } #reportAProblem { -ms-grid-column: 1; -ms-grid-row: 3; } #contributors { -ms-grid-column: 1; -ms-grid-row: 4; } #news { margin-left: 0; grid-row-start: 4; -ms-grid-column: 1; -ms-grid-row: 4; } #searchFilters { width: 100%; float: none; } #searchResultsWrapper { width: 100%; float: none; margin-left: 0; } #footerContent { grid-template-columns: 295px 1fr 1fr; -ms-grid-columns: 295px 1fr 1fr; } #footerLogo { -ms-grid-row: span 2; grid-row: span 2; } #footerData { -ms-grid-row: 1; -ms-grid-column: 2; } #footerTools { -ms-grid-row: 1; -ms-grid-column: 3; } #footerLinks { -ms-grid-row: 2; -ms-grid-column: 2; } #footerAbout { -ms-grid-row: 2; -ms-grid-column: 3; } } @media screen and (max-width: 768px) { .testing-only .text { font-size: 80%; } } /**********END MEDIA QUERIES************/