@import url('//fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Rufina:wght@400;700&display=swap');
/************ TEMPLATE  ************
Rotator Size: 1400x586 (super wide, 2.39:1)

/************ FONTS  ************
Serif Headings: Rufina
Sans Serif Headings/special text: Montserrat
Sans Serif body text: Lato

/************ COLORS  ************
Blue: #002f5f; rgba(0,47,95,1)
Light Blue: #64a0c8; rgba(100,160,200,1)
Grey (lines): #bcbec0;
Light Grey: #f1f2f2;

/************ NOTES ************
*logo and rotator text - would probably need top aligned so logo doesn't jump between slides
*Rotator Overlay, white at 50% - rgba(255,255,255,.5)
*Dropshadow on rotator, news, and sponsors - 20%, 0,0,10px
*There is a Light Grey Fade starting from the top of 'Our Affiliates' down to the bottom of 'Thank you to our Sponsors'. It goes from 0-100% opacity. The 50% opacity mark is like 2/3rds of the way up on the mockup. Idk how much that will matter. It's light grey after all
*Montserrat Medium - Menu, Rotator text
*Montserrat Regular - Footer contact text
*Montserrat Semibold - Calendar badges, news titles and 'read more',  button text, Footer title
*Add an identical button under "Go Paperless" that says "Update My Info"
*Footer - replace email address with this one: nsrtofc@gmail.com
*Change 'Our Affiliates" to "Professional Organizations", and edit button to say "View All Organizations", too. These images are clickable, and I've added more logos from a trello card they mentioned they wanted shown in this area. Here are some of the links for this section:
https://www.asrt.org/
https://www.arrt.org/
https://www.rsna.org/
https://www.isrrt.org/
https://avir.org/
***********************************/

body {color: #333; font-family: 'Lato', sans-serif;}

h1, h2, h3, h4, h5, h6 {margin: .75rem 0; line-height: 1.3; font-weight: normal;}
p {line-height: 1.3;}
.page-header h1 {text-transform: none; font-size: 3rem;}
h1 {color: #002f5f; font-size: 3.5rem; font-weight: bold; font-family: 'Montserrat', sans-serif;}
h2, .page-header h2 {font-variant-caps: small-caps; color: #002f5f; font-size: 2.2rem; font-family: 'Montserrat', sans-serif;  font-weight: bold;}
h3 {color: #002f5f; font-size: 1.8rem; border-bottom: 1px solid #002f5f; line-height: 1.3; margin: 0 0 10px 0;}
h4 {color: #002f5f; font-size: 1.8rem;}
h5 {background: #64a0c8; font-size: 1.75rem; color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #002f5f; font-size: 1.4rem; text-transform: uppercase; font-weight: bold;}
a {color: #002f5f}
a:hover {color: black;}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    h1 {font-size: 2.2rem;}
    h2 {font-size: 1.75rem;}
    h3 {font-size: 1.75rem;}
    h4 {font-size: 1.75rem;}
    h5 {font-size: 1.2rem;}
    h6 {font-size: 1.2rem;}
    p {font-size: 1rem; margin-bottom: 4px;}
    h1, h2, h3 {line-height: 1.2;}
    h4, h5, h6, p {line-height: 1.1;}
}

@media only screen and (max-width: 767px) {
 h1 {font-size: 2.2rem;}
 h2 {font-size: 1.75rem;}
 h3 {font-size: 1.75rem;}
 h4 {font-size: 1.75rem;}
 h5 {font-size: 1.2rem;}
 h6 {font-size: 1.2rem;}
 p {font-size: 1rem; margin-bottom: 4px;}
 h1, h2, h3 {line-height: 1.2;}
 h4, h5, h6, p {line-height: 1.1;}
}

.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a {
    background: #002f5f;
}

:root {
    --primary-color: #002f5f;
}

/*************** HOMELAYOUT ***************/
.homelayout .button {border-radius: 0;}

/*************** OFFCANVAS ****************/
/*************** TOP **********************/
/*************** NAVIGATION ***************/
        /*Menu*/

/*************** SLIDESHOW ****************/
#g-showcase:not(.homelayout #g-showcase) {position: relative; height: 24vw;}
#g-showcase .g-content .platform-content:not(.homelayout #g-showcase .g-content .platform-content) {position: absolute; width: 100%;}
#g-showcase .g-content .platform-content:last-child:not(.homelayout #g-showcase .g-content .platform-content:last-child) {top: 10px; left: 50px;}

.hero img {opacity: 0.5;}

        /*Hero Logo*/
.hero-logo img {height: auto; width: 15vw;}
@media only screen and (max-width: 767px){
	#g-showcase .g-content .platform-content:last-child:not(.homelayout #g-showcase .g-content .platform-content:last-child) {top: 0px; left: 15vw;}
	.hero-logo img {height: auto; width: 16vw;}
	
}

/*************** HEADER *******************/
        /*Mobile-Logo*/
#g-header .g-logo img {height: 30vw; width: auto;}

/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
.homelayout #g-showcase {padding: 2vw 10%!important;}
        /*Rotator*/
.nsrt-homerotator .layout-slideshow {box-shadow: 0px 0px 10px rgba(0,0,0,.2);}
.nsrt-homerotator .sprocket-features-img-container img {height: 30vw!important; object-position: center; object-fit: cover;}
.nsrt-homerotator .sprocket-features-content {top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; display: block; background: rgba(255,255,255,.5);}
.nsrt-homerotator .sprocket-features-desc {position: absolute; top: 10%; left: 0; right: 0; width: 35%; background: transparent;}
.nsrt-homerotator .sprocket-features-desc img {height: 12vw; width: auto;}
.nsrt-homerotator .sprocket-features-desc h4 {color: #000000; font-size: 2.0vw;}

@media only screen and (max-width: 767px) {
    .homelayout #g-showcase {padding: 0 0!important;}
    .nsrt-homerotator .sprocket-features-img-container img {height: 42vw!important;}
    .nsrt-homerotator .sprocket-features-desc {width: 45%; top: 10%;}
    .nsrt-homerotator .sprocket-features-desc img {height: 15vw;}
    .nsrt-homerotator .sprocket-features-desc h4 {font-size: 2.5vw;}
}

/*************** UTILITY ******************/
.homelayout #g-utility {padding: 2vw 5%!important;}
.homelayout #g-utility h3.g-title {
    display: grid;
    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
    align-items: center;
    font-size: 2.2rem;
    grid-gap: 20px;
    width: 100%;
    border-bottom: none; 
    text-align: center;
    font-weight: 500;
}
.homelayout #g-utility h3.g-title:before, .homelayout #g-utility h3.g-title:after {
    content: '';
    border-top: 1px solid #bcbec0;
}

.homelayout #g-utility h3.g-title:before {margin-left: 10vw;}
.homelayout #g-utility h3.g-title:after {margin-right: 10vw;}
        /*Upcoming Events*/
.rok-mini-landscape .rme-badge, .rok-mini-landscape .rme-description {margin-left: 5vw;}
.homelayout #g-utility .button {border-radius: 0px;}

/*************** FEATURE ******************/
.homelayout #g-feature {padding: 2vw 5%!important;}
.homelayout #g-feature h3.g-title {border-bottom: none;}
        /*News, Events & Announcements*/
.homelayout #g-feature .sprocket-strips-s-container {display: flex; justify-content: space-around;}
.homelayout #g-feature .sprocket-strips-s-block {width: 30%; display: flex; align-items: stretch;}
.homelayout #g-feature .sprocket-strips-s-item {box-shadow: 0px 0px 10px rgba(0,0,0,.2); position: relative; padding-bottom: 15px;}
.homelayout #g-feature .sprocket-strips-s-item img {height: 15vw; width: 100%; object-fit: cover; object-position: center;}
.homelayout #g-feature .sprocket-strips-s-content {padding: 1vw;}
.homelayout #g-feature h4.sprocket-strips-s-title {font-size: 1.5vw;}
.homelayout #g-feature .sprocket-strips-s-text {height: 13vw; font-size: 1.1vw;}
.homelayout #g-feature .sprocket-strips-s-content a.readon {position: absolute; bottom: 15px; right: 0; background: none; color: #002f5f; text-transform: uppercase; font-weight: bold; font-size: 1.2rem;}

@media only screen and (max-width: 767px) {
    .homelayout #g-feature .sprocket-strips-s-container {flex-direction: column;}
    .homelayout #g-feature .sprocket-strips-s-block {width: 100%; height: 100vw; align-items: initial;}
    .homelayout #g-feature .sprocket-strips-s-item {display: flex; flex-direction: column;}
    .homelayout #g-feature h4.sprocket-strips-s-title {font-size: 4vw;}
    .homelayout #g-feature .sprocket-strips-s-text {font-size: 3.2vw;}
}

/*************** EXPANDED *****************/
.homelayout #g-expanded .g-content {background: #f1f2f2;}
.homelayout #g-expanded h3.g-title {border-bottom: none;}
.homelayout #g-expanded .button {width: 100%; padding: 1vw 0; font-size: 1.6rem;}
        /*Find Us on Facebook*/

        /*Keep in Touch With Us*/
.homelayout #g-expanded .platform-content {margin-left: 3vw; margin-right: 3vw;}

/*************** EXTENSION ****************/
.homelayout #g-extension h3.g-title {
    display: grid;
    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
    align-items: center;
    font-size: 2.2rem;
    grid-gap: 20px;
    width: 100%;
    border-bottom: none; 
    text-align: center;
    font-weight: 500;
}
.homelayout #g-extension h3.g-title:before, .homelayout #g-extension h3.g-title:after {
    content: '';
    border-top: 1px solid #bcbec0;
}

.homelayout #g-extension h3.g-title:before {margin-left: 10vw;}
.homelayout #g-extension h3.g-title:after {margin-right: 10vw;}
        /*Our Affiliates*/
.affiliatelinks {padding: 0 10vw;}
.affiliatelinks img {height: 10vw; width: auto; margin-top: 2vw;}
.affiliatelinks img:hover { transform: scale(1.1); transition-duration: 1s; }
.separatecells {display: flex; flex-direction: row; justify-content: space-around;}
.lowercells > div:first-child {margin-right: 10vw;}

@media only screen and (max-width: 767px) {
    .homelayout #g-extension {padding: 0 0;}
    .separatecells {padding-bottom: 0!important;}
    .affiliatelinks img {height: 30vw;}
    .lowercells > div:first-child {margin-right: 0;}

    .ql-moffset .sprocket-strips-s-container {
        grid-template-areas: 
		"a c"
		"e g"
		"i k"
		"m m"
        "o o"
		"q q"
        "s s"
		"u u"
        "w w"
		"yy yy"
        "aa aa"
		;
    }
}

/*************** BOTTOM *******************/
.homelayout #g-bottom h3.g-title {border-bottom: none;}
.homelayout #g-bottom /*.sponsorbox*/ {margin: 2vw 5%; box-shadow: 0px 0px 10px rgba(0,0,0,.2); padding: 0;}
#g-bottom .sprocket-strips-item {box-shadow: none;}
        /*Thank You to Our Sponsors*/

/*************** FOOTER *******************/
#g-footer {padding-top: 1vw!important;}
#g-footer :is(h1,h2,h3,h4,h5,h6,p,a) {color: #ffffff;}
#g-footer .g-logo img {height: 7vw; width: auto;}

@media only screen and (max-width: 767px) {
    #g-footer .g-logo img {height: 30vw; width: auto;}
    #g-footer :is(h4, p) {text-align: center!important;}
}

/*************** COPYRIGHT ****************/

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #002f5f;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    color: #ffffff;
    background: #64a0c8;
}

/*************** SECTIONS *****************/
#g-footer a {color: #ffffff;}

/*************** MOBILE *******************/
.g-offcanvas-toggle {color: #002f5f;}

/*************** ADS **********************/

/*************** BECOME A MEMBER **********/
.nsrt-grid .sprocket-grids-b-content.overlay-mode {background: rgba(0,47,95,.8);}
.nsrt-grid h2.sprocket-grids-b-title a {color: #ffffff;}
.nsrt-grid .sprocket-grids-b-readon {color: #ffffff; border: 1px solid #ffffff; padding: 3px;}
.nsrt-grid .sprocket-grids-b-readon:hover {background: #ffffff; color: #002f5f;}