/* make content full width */
div#mainContent { width: 100%!important;}

/*Page title*/
.boxesrow h2#pageTitle, div#twoColSide h1, div#oneColSide h1 {font-size: 3.2em!important; margin: 0px 0 0px 0px;}
h2#pageTitle, h1 {background-color: #a4928e; color: #fff; height: 60px; line-height: 1em; padding-left: 30px; position: absolute; padding-right: 38px; z-index: 3; padding-top: 0px!important; }
.Landing-page-full-width h2#pageTitle, div#twoColSide h1, div#oneColSide h1 {margin: 0 0 0 0!important;}	
	
/*color line across page*/
hr.color-line {background-color: #a4928e; border: 0 none; color: #a4928e; height: 30px; margin-top: -25px;margin-bottom: -5px;}

.searchcaption {margin-bottom: 2em;}

.colsearch .search, .submit {border: none!Important; border-radius: 0!Important;}

.boxp {line-height:1.3em; color: #666666;}

h3.boxheader {margin-bottom: 0em!important; color:black;}

.space {Margin-top: 60px;}

.buttons { max-width: 1600px; margin: 0px auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;   -webkit-justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-pack: justify; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between;}
.buttons * {transition: all .5s ease;}
.butFrame {width: 32%; margin-bottom: 30px;}
.butFrame2 {width: 49%; margin-bottom: 30px;}
.butFrame4 {width: 23.5%;}
.butFrame img, .butFrame2 img, .butFrame4 img {width: 100%; vertical-align: bottom;}
.butFrame .butHeading, .butFrame2 .butHeading, .butFrame4 .butHeading {position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 0; display: block; background: #006ed2; margin: 0; font-size: 1.2em; color: #fff; text-align: center; text-transform: uppercase; font-weight: 400;}
.boxesrow {margin: 0 auto; width: 90%; font-size: 18px; line-height: 2em; background-color: #f2f2f2; padding:20px; margin-top: 60px;}


/*call to action buttons*/
.btnhome3 {display: inline-block; padding: 1px 12px; margin-bottom: 5px; margin-top: 5px; border: 2px solid #006ed2; text-decoration: none; transition: all; cursor: pointer; background-color: #fff; float: right;}
.btnhome3:hover {background-color: #006ed2; border: 2px solid #006ed2; color: #fff; text-decoration: none;}
.btnhome3:after{content:  "\0000a0"; display: inline-block; height: 10px; width: 10px; line-height: 10px; margin: 0 -4px -6px 4px; position: relative; top: 0px; left: 0px; background: url("https://www.npg.org.uk/assets/images/buttons/right_arrow.svg") no-repeat left center transparent; background-size: 100% 100%;}
.btnhome3:hover:after {content:  "\0000a0"; display: inline-block; height: 10px; width: 10px; line-height: 10px; margin: 0 -4px -6px 4px; position: relative; top: 0px; left: 0px; background: url("https://www.npg.org.uk/assets/images/buttons/right_arrow_white.svg") no-repeat left center transparent; background-size: 100% 100%;}

.btnhome2 {display: table!important; padding: 1px 12px!important; margin-bottom: 5px; margin-top: 5px; border: 2px solid #006ed2; text-decoration: none; transition: all .5s; width: auto !important; color: #006ed2;}
.btnhome2:hover, .btnhome2:focus, .btnhome2:active {border: 2px solid #006ed2; color: #fff; background-color: #006ed2; text-decoration: none;}

@media all and (max-width: 768px) and (min-width: 0px){
.boxesrow h2#pageTitle, div#twoColSide h1, div#oneColSide h1 {font-size: 2.5em !important; padding-top: 10px !important;}
.butFrame, .butFrame2, .butFrame4 {display:block; width:100%;}
}

/* promo ribbon */
.ribbon{background: #006ed2; position: fixed; left:auto; text-align: center;   line-height: 50px;   letter-spacing: 1px;   color: #fff;   transform: rotate(45deg);   -webkit-transform: rotate(45deg);  text-transform: uppercase;}
@media all and (min-width: 769px) {.ribbon {top: 15%; right: -42%; font-size: 2vw;}	}
@media all and (max-width: 768px) {.ribbon {top: 10vw; width: 90vw!important; right: -30vw;}	}

.ribbon-red{background: #e2211c; position: fixed; left:auto; text-align: center;   line-height: 50px;   letter-spacing: 1px;   color: #fff;   transform: rotate(45deg);   -webkit-transform: rotate(45deg);  text-transform: uppercase;}
@media all and (min-width: 769px) {.ribbon-red {top: 15%; right: -42%; font-size: 2vw;}	}
@media all and (max-width: 768px) {.ribbon-red {top: 10vw; width: 90vw!important; right: -30vw;}	}

/* image slider dots */
@media all and (min-width: 769px) {.slider-dots {position: absolute;left: 45%; bottom: 50px;}}
@media all and (max-width: 768px) {.slider-dots {left: 40%; position: relative;}}
@media all and (max-width: 420px) {.slider-dots {left: 35%;}}
@media all and (max-width: 320px) {.slider-dots {left: 30%;}}
.slider-dots li.slick-active {list-style-type: disc!important; color:#fff;  pointer-events: none;}
.slider-dots li {position: relative; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; font-size: 25px; color: #fff; float: left; pointer-events: none; display: list-item;}
.credit-line-slider .slider-dots {bottom: 20px;}

/* image slider credit line*/
.credit-line-slider {display: inline; font-size: 1.125rem; color: #000; margin-top: 5px; margin-left: 14px; padding-right: 14px;}
.slick-wrapper .slick-slide .credit-line-slider a {display: inline; font-size: 1rem;}
@media all and (max-width: 768px) {.credit-line-slider a, .credit-line-slider {color: #fff; line-height: 1em; margin-bottom: 10px; margin-top: 30px;}}

/*FRIDAY LATES LOGO ON BANNER*/
@media all and (min-width: 768px){
.hold-still::before {display:inline-block; height:118px; width:164px; content: ""; background:url(https://www.npg.org.uk/assets/microsites/hold-still/logos/164_Hold-Still-logo.jpg) no-repeat 0 0; background-size: 164px 118px; position: fixed; top: 30px; right: 30px;}
.friday-lates-white::before {display:inline-block; height:118px; width:120px; content: ""; background:url(https://www.npg.org.uk/assets/images/FridayLates/200_FridayLates_White.png) no-repeat 0 0; background-size: 120px 118px; position: fixed; top: 30px; right: 30px;}
.friday-lates-black::before {display:inline-block; height:118px; width:120px; content: ""; background:url(https://www.npg.org.uk/assets/images/FridayLates/200_FridayLates_Black.png) no-repeat 0 0; background-size: 120px 118px; position: fixed; top: 30px; right: 30px;}
}
@media all and (max-width: 768px){
.hold-still::before {display:inline-block; height:118px; width:164px; content: ""; background:url(https://www.npg.org.uk/assets/microsites/hold-still/logos/164_Hold-Still-logo.jpg) no-repeat 0 0; background-size: 164px 118px; position: fixed; top: 30px; right: 30px;}
.friday-lates-white::before {display:inline-block; height:69px; width:70px; content: ""; background:url(https://www.npg.org.uk/assets/images/FridayLates/200_FridayLates_White.png) no-repeat 0 0; background-size: 70px 69px; position: fixed; top: 10px; left: 10px;}
.friday-lates-black::before {display:inline-block; height:69px; width:70px; content: ""; background:url(https://www.npg.org.uk/assets/images/FridayLates/200_FridayLates_Black.png) no-repeat 0 0; background-size: 70px 69px; position: fixed; top: 10px;left: 10px;}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.friday-lates-white::before, .friday-lates-black::before {display:none!important;}}

/*Hover effects*/
.butFrame:hover p.btnhome2, .butFrame:focus p.btnhome2, .butFrame2:hover p.btnhome2, .butFrame2:focus p.btnhome2, .butFrame4:hover p.btnhome2, .butFrame4:focus p.btnhome2 {border: 2px solid #006ed2; filter: brightness(100%) !important; text-decoration: none;}
.butFrame a:hover, .butFrame a:focus, .butFrame2 a:hover, .butFrame2 a:focus, .butFrame4 a:hover, .butFrame4 a:focus {text-decoration: none;}
.butFrame img:hover, .butFrame img:focus, .butFrame2 img:hover, .butFrame2 img:focus, .butFrame4 img:hover, .butFrame4 img:focus {filter: brightness(110%); transition: all 0.5s ease 0s;}

/*image slider fade in on page load*/
.slick-wrapper {visibility: hidden; animation: fadein 1000ms; -moz-animation: fadein 1000ms; -webkit-animation: fadein 1000ms; -o-animation: fadein 1000ms;}
@keyframes fadein {0% {opacity: 0;} 10% {opacity: 0.1;} 20% {opacity: 0.2;} 30% {opacity: 0.3;} 40% {opacity: 0.4;} 50% {opacity: 0.5;} 60% {opacity: 0.6;} 70% {opacity: 0.7;}  80% {opacity: 0.8;} 90% {opacity: 0.9;} 100% {opacity: 1;} }

/*full width promo box*/
.overlay-box .form input[type="text"] {border: 3px solid #fff; line-height: 1.8em; width: 250px; padding: 5px; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; font-size: 18px; background-color:transparent; color: #fff;}
div.overlay-container {position: relative; width: 100%; height: 400px; display: block; background-size: auto 100%; margin-top: 60px;}
div.overlay-container.calendar {height:500px;}

div.overlay-container a {text-decoration:none;}

/*IE 10 & 11*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
.overlay-box .form input[type="text"] {border: 3px solid #fff; line-height: 0.5em; width: 250px; padding: 10px; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; font-size: 18px; background-color:transparent;color: #fff;}
}

.content {width: 100%; text-align: center; overflow: hidden;}
.overlay-box {background: radial-gradient(circle, black 0%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%); height: 100%; margin: 0 auto; width: 50%;}
.overlay-container .overlay-box p {color: white; text-align: center; vertical-align: middle; font-size: 250%; line-height: 150%; opacity: 1!important;}
.overlay-box h2 {padding-top:50px; color: white; text-align: center; vertical-align: middle; font-size: 500%; line-height: 100%; margin-bottom: 0.3em; opacity: 1!important;}
@media only screen and (max-width: 1600px) {
.overlay-container .overlay-box p {font-size: 200%;}
.overlay-box h2 {font-size: 400%;}
}
@media only screen and (max-width: 800px) {
.overlay-box {background:rgba(0,0,0,0.5); height: 100%; margin: 0 auto; width: 100%;}
}
@media only screen and (max-width: 415px) {
.overlay-box h2 {font-size: 300%;}
}
.overlay-container:hover {filter: brightness(110%); text-decoration: none!important; transition: all .5s ease;}
.overlay-container a:hover {text-decoration: none!important;}

.butFrame a, .butFrame2 a, .butFrame4 a {text-decoration: none;}

/*remove inline code to stylesheet below*/
.boxesrow h2 {text-align: center;}
td.icons p img {width: 35px; margin-right: 10px;}
td.icons {vertical-align: top;}