/* New Great American Song Site CSS */ html { overflow-y: scroll; } body { background: #d5e3ef; margin: 0px; overflow-x: hidden; } .mastercontainer { width: 100%; padding-right: 0px; padding-left: 0px; margin: 0px; background: #fff; border-top: solid 4px #a91e21; } /* End Body Styles */ /* Start header Styles*/ .togglesidebar { display: none; } .togglesidebaricon { font-size: 32px; cursor: pointer; position: absolute; right: 0; top: 100px; } .topnav { display: flex; justify-content: center; } .topnav .sidebar-close { display: none; } .topnav .dropdown-toggle { display: block; color: #33669a; text-align: center !important; padding: 5px 22px; text-decoration: none; font-size: 15px; font-weight: bold; } .topnav .dropdown-toggle:hover { color: #990000; text-decoration: none; } .topnav .dropdown-toggle:focus { text-decoration: none; } .topnav-link { display: block; color: #33669a; padding: 5px 22px; text-decoration: none; font-size: 15px; font-weight: bold; } .topnav-link:hover { text-decoration: none; } .active { color: #990000; } .topnav .icon { display: none; } /* Creates the dropdown effect on hover */ @media all and (min-width: 1130px) { .dropdown .dropdown-menu { max-height: 0; display: block; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 0.3s ease-out, opacity 0.2s 0.1s ease-out, visibility 0s 0.3s ease-out; } .dropdown:hover .dropdown-menu { max-height: 250px; opacity: 1; visibility: visible; transition: max-height 0.3s ease-in, opacity 0.2s ease-in, visibility 0s ease-in; } } /* Sidebar enables at 1130px */ @media all and (max-width: 1130px) { .gasongremindercontainer { top: 40px; left: 8px; } .togglesidebar { display: inline-block; } .togglesidebaricon { top: 12px; right: 12px; } .topnav { position: absolute; top: 0; left: 0; flex-direction: column; justify-content: flex-start; width: 250px; height: 100%; z-index: 10; background-color: #fff; transform: translate(-250px); transition: transform 0.1s ease-out; } .topnav.sidebar-active { transform: translate(0px); transition: transform 0.15s ease-in; } .topnav .sidebar-close { height: 48px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; } .sidebar-close-icon { font-size: 20px; cursor: pointer; color: #33669a; } .topnav .dropdown { background-color: #33669a; } .topnav .dropdown:last-child { background-color: #a91e21; } .topnav .dropdown-toggle { color: #fff; width: 100%; text-align: left !important; } .topnav .dropdown-toggle::after { position: absolute; top: 15px; right: 8px; transform: rotate(90deg); transition: transform 0.1s ease-out; } .topnav .dropdown-arrow-down.dropdown-toggle::after { transform: rotate(0deg); transition: transform 0.15s ease-in; } .topnav .dropdown-menu { position: unset; max-height: 0; padding: 0 0 0 22px; overflow: hidden; display: block; opacity: 0; visibility: hidden; transition: max-height 0.2s ease-out, opacity 0.2s ease-out, visibility 0s 0.15s ease-out; } .dropdown-active.dropdown-menu { max-height: 350px; opacity: 1; visibility: visible; transition: max-height 0.3s ease-in, opacity 0.2s ease-in, visibility 0s ease-in; } .topnav-link { text-align: left; background-color: #33669a; color: #fff; } .grayscreen { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgb(0, 0, 0, 0.5); z-index: 1; display: none; } .grayscreen-active { display: block; } .rcontest { white-space: nowrap; } .fix-position { height: 100vh; overflow: hidden; } } .dropdown-menu { margin: 0; border: 1px solid #33669a; border-top: 1px solid #fff; border-radius: 0; width: 100%; padding-left: 22px; font-size: 14px; } .dropdown-menu li { transition: all 0.3s; display: flex; flex-direction: row; margin-right: 8px; } .dropdown-menu li:hover { transform: translateX(8px); } .dropdown-menu li div { color: #a91e22; padding-right: 5px; transition: all 0.3s; } .dropdown-menu li a:hover { text-decoration: none; } .dropdown-menu li:hover a { color: #a91e22; } .rcontest { background-color: #a91e21; color: #fff !important; border-radius: 0; } .rcontest:hover { color: #6F97BF !important; text-decoration: none; } .carousel-inner { background-color: #d5e3ef; } .centerblock { margin-left: auto; margin-right: auto; } .centerblock4 { max-width: 1100px !important; margin-left: auto; margin-right: auto; padding-left: 6%; padding-top: 10px; text-align: center !important; } .centerblockboxes { max-width: 1050px !important; margin-left: auto; margin-right: auto; } .centerblocklightblue { border-top: solid 1px #33669b; width: 100%; background-color: #d5e3ef; text-align: center; } .centerblocknav { border-top: solid 1px #33669b; width: 100%; background-color: #ffffff; text-align: center; } .centerblockfull { border-top: solid 1px #33669b; width: 100%; } .centerblockdarkblue { width: 100%; background-color: #33669a; margin-bottom: 10px; } .gatopbar { position: relative; width: 100%; padding: 0px 15px 0px 15px; } @media all and (max-width: 1199px) and (min-width: 1px) { .gatopbar { position: relative; width: 100% !important; } .container, .container-sm, .container-md, .container-lg { max-width: 1200px !important; } } .galogo { position: relative; float: left; width: 50%; text-align: left; } .galogo .a .img { float: left; } .gatopright { display: flex; flex-direction: row; align-items: center; } .garedbannercontainer { position: relative; float: left; } .gasongremindercontainer { position: relative; float: right; } .garedbanner { height: 85px; background-color: #a91e21; display: inline-block; width: 265px; text-align: center; padding-top: 5px; color: #fff; line-height: 24px; font-size: 18px; -moz-box-shadow: 0px 3px 8px rgb(100, 100, 100); -webkit-box-shadow: 0px 3px 8px rgb(100, 100, 100); box-shadow: 0px 3px 8px rgb(100, 100, 100); } .gabannertextcontainer { display: flex; flex-direction: column; } .gabannertextcontainer span { white-space: nowrap; } .mobilegaredbanner { display: none; background-color: #a91e21; color: #fff; -moz-box-shadow: 0px 3px 8px rgb(100, 100, 100); -webkit-box-shadow: 0px 3px 8px rgb(100, 100, 100); box-shadow: 0px 3px 8px rgb(100, 100, 100); line-height: 24px; font-size: 18px; padding: 4px; height: 32px; } .gasongreminder { display: inline-block; padding: 10px 0px 0px 0px; } .ganavigation { width: 100%; background-color: #000; position: relative; } /*header mobile*/ @media all and (max-width: 800px) and (min-width: 1px) { .garedbanner { float: none; margin-left: auto; margin-right: auto; } .gasongreminder { float: none; } .gatopright { text-align: center; width: 100%; } .centerblock4 { padding-left: auto !important; } } @media all and (max-width: 1030px) { .navcontainer { margin-bottom: 85px; } .garedbanner { width: 100vw; height: 85px; } .gasongremindercontainer { top: 48px; left: 8px; } .togglesidebaricon { top: 24px; right: 12px; } .garedbannercontainer { position: absolute; top: 160px; left: 0; } .gabannertextcontainer { flex-direction: row; align-items: center; justify-content: center; } .gabannertextcontainer span { margin-right: 4px; } .centerblocklightblue { margin-top: 85px; } } @media all and (max-width: 550px) { .gabannertextcontainer span { font-size: 14px; } } @media all and (max-width: 475px) { .navcontainer { margin-bottom: 75px; } .garedbanner { height: fit-content; } .gasongremindercontainer { position: absolute; width: 100%; right: unset; top: 90px; left: unset; } .gasongreminder a { margin-right: 22px; float: right; } .togglesidebaricon { top: 37px; right: 12px; } .gabannertextcontainer { flex-direction: column; } .gabannertextcontainer span { font-size: 18px; } .centerblocklightblue { margin-top: 77px; } } /* End header Styles */ /* Start Home Page Styles */ .gabluebar { background-color: #33669b; color: #fff; padding: 5px 5px 20px 5px; line-height: 21px; } .gablueleft { width: 50%; float: left; height: 50px; } .gablueright { width: 50%; float: right; height: 50px; font-size: 12px; line-height: 14px; } .gablocks { width: 100%; padding: 0px 0px 0px 0px; } .gablok { background-color: #d6e4f1; margin-left: 11px; margin-right: 11px; padding: 0px 0px 8px 0px; line-height: 16px; font-size: 14px; max-width: 211px; } .gablok h1 { padding-top: 5px; font-size: 15px; color: #993333; line-height: 16px; font-weight: bold; } * { box-sizing: border-box; } .boxreverse { display: flex; width: 100%; } .boxreverse:nth-of-type(1) { order: 1; } .boxreverse:nth-of-type(2) { order: 2; } @media all and (max-width: 970px) and (min-width: 1px) { .boxreverse { display: grid; } .boxreverse:nth-of-type(1) { order: 2; } .boxreverse:nth-of-type(2) { order: 1; } } /* Container for flexboxes */ .winnersfeaturebox { width: 70%; margin: 20px auto 10px auto; background-color: #e6e7e7; border: solid 1px #33669a; padding: 10px 5px 20px 5px; } .winnertitle { width: 100 !important; font-size: 18px; font-weight: bold; color: #993333; text-align: center; padding: 10px; margin-bottom: 20px !important; } .winnerrow { display: flex; flex-wrap: wrap; } .winnerbadge { justify-content: center; } .winnerbox.pic { justify-content: center; } .winnerbox.text { justify-content: center; text-align: center !important; } .winnerbox { display: flex; flex: 33.3333333%; flex-wrap: wrap; } .runnerow { display: flex; flex-wrap: wrap; width: 100%; margin-top: 20px; } .runnerbox { display: flex; flex: 50%; flex-wrap: wrap; } .runnerbox { display: flex; flex: 50%; flex-wrap: wrap; } .runnerbox.pic { justify-content: center; } .runnersplit img { border: solid 2px #000 !important; } .runnersplit { position: relative; float: left; width: 40%; } .runnersplit2 { position: relative; float: right; width: 60%; padding-right: 5%; } @media all and (max-width: 915px) and (min-width: 1px) { .runtitle h1 { text-align: center !important; } .runnersplit img { text-align: center; justify-content: center; } .runnersplit { float: none; width: 100%; text-align: center; justify-content: center; } .runnersplit2 { float: none; width: 100%; padding-right: 0%; } } .winnersrunnerbox { width: 98%; margin: 20px auto 10px auto; padding: 5px; } .runtitle h1 { line-height: 10px; font-size: 15px; text-align: left; padding-top: 10px; } .runnerbox h2 { line-height: 16px !important; color: #000 !important; font-weight: 400 !important; text-align: center; width: 100%; margin-top: 25px !important; } .runnerbox h3 { line-height: 5px !important; color: #000 !important; font-size: 16px !important; text-align: center; width: 100%; } .runnerbox h4 { line-height: 5px !important; color: #941a1d !important; font-size: 16px; text-align: center; width: 100%; text-decoration: underline; } @media all and (max-width: 700px) and (min-width: 1px) { .winnerbox { flex: 100%; line-height: 10px; } .winnerbox h1 { padding-top: 10px !important; } .winnerbox h2 { padding-top: 15px !important; padding-bottom: 15px !important; } .winnerbox h4 { padding-bottom: 15px !important; } .winnerbox.text h1 { text-align: center !important; } } .winnerbox.pic img { border: solid 2px #000 !important; } .winnerbox.win { text-align: center !important; } .winnerbox h1 { line-height: 10px; font-size: 15px; text-align: center; width: 100%; } .winnerbox.text h1 { line-height: 10px; font-size: 15px; text-align: left; width: 100%; padding-top: 10px; } .winnerbox h2 { line-height: 16px !important; color: #000 !important; font-weight: 400 !important; text-align: center; width: 100%; margin-top: -15px !important; } .winnerbox h3 { line-height: 5px !important; color: #000 !important; font-size: 16px !important; text-align: center; width: 100%; } .winnerbox h4 { line-height: 5px !important; color: #941a1d !important; font-size: 16px; text-align: center; width: 100%; text-decoration: underline; } .garow { display: flex; flex-wrap: wrap; text-align: center; } .garowinner { display: flex; flex-wrap: wrap; text-align: left; } .successrow { width: 90%; margin: 15px auto 15px auto; text-align: left; padding-top: 20px; font-size: 15px; line-height: 18px; } .successleft { position: relative; float: left; width: 25%; } .successright { position: relative; float: right; width: 75%; font-size: 14px; line-height: 16px; } .rulesbox { width: 96%; margin: 15px 1% 15px 3%; text-align: left; padding-top: 20px; font-size: 15px; line-height: 18px; } .rulesboxleft { position: relative; float: left; width: 75%; } .rulesboxleft h1 { font-size: 18px; font-weight: bold; color: #993333; text-align: center !important; } .rulesboxleft h2 { font-size: 16px; font-weight: bold; color: #33669a; } .rulesboxleft ul { list-style: none; } .rulesboxleft ul li::before { content: "\2022"; color: #33669a; font-weight: bold; display: inline-block; width: .8em; margin-left: -.8em; font-size: 1.3em; } .rulesboxright { position: relative; float: right; width: 25%; } @media all and (max-width: 715px) and (min-width: 1px) { .rulesboxleft { position: relative; float: none; width: 100%; } .rulesboxright { position: relative; float: none; width: 100%; } } .clearboth { clear: both; } @media all and (max-width: 990px) and (min-width: 1px) { .successleft { position: relative; float: none; width: 100%; } .successright { position: relative; float: none; width: 100%; } } /* Create columns */ .gacolumn { flex: 25%; padding: 5px; } .gahometext { width: 90%; margin-left: auto; margin-right: auto; text-align: left; padding-top: 20px; font-size: 15px; line-height: 18px; } .gahometext h1 { font-size: 18px; font-weight: bold; color: #993333; } .gahometext h2 { font-size: 16px; font-weight: bold; color: #33669a; } .gahometext ul { list-style: none; } .gahometext ul li::before { content: "\2022"; color: #33669a; font-weight: bold; display: inline-block; width: .8em; margin-left: -.8em; font-size: 1.3em; } .gafooter { background-color: #d6e4f1; width: 100%; } /* End Home Page Styles */ /*home mobile*/ @media all and (max-width: 800px) and (min-width: 1px) { .gabluebar { height: auto; } .gablueleft { width: 100%; float: none; height: auto; } .gablueright { width: 100%; float: none; height: auto; } .gahometext { float: none !important; } } @media all and (max-width: 970px) { .gacolumn { flex: 100%; } .gacolumn { float: right !important; } .gablok { max-width: 211px; margin: auto; } } /* End home mobile */ /*footer*/ .gafooter { width: 100%; padding-left: 3%; padding-right: 3%; background-color: #d6e4f1; } #redbottom { width: 100%; color: #fff !important; padding: 5px; background-color: #a91e22; text-align: center; font-size: 10px; line-height: 12px; } .ga-list { list-style: none; padding-left: 0; } .custom-list li { position: relative; padding-left: 20px; } .custom-list li:before { content: ''; width: 10px; height: 10px; position: absolute; background-image: url('img/bullet.png'); background-size: cover; background-position: center; left: 0; top: 50%; transform: translateY(-50%); } .gfrow { display: flex; flex-wrap: wrap; } /* Create four equal gfcolumns */ .gfcolumn { flex: 16.6666667%; padding: 20px; font-size: 11px; color: #33669a; } .gfcolumn p { line-height: 14px; } .gfcolumn h1 { font-size: 12px; text-transform: uppercase; color: #33669a; font-weight: bold; } .gfrow a { color: #33669a !important; text-decoration: none !important; } .gfrow a:hover { color: #ff0000 !important; text-decoration: none !important; } /* On screens that are 992px wide or less, go from four gfcolumns to two gfcolumns */ @media screen and (max-width: 992px) { .gfcolumn { flex: 100%; text-align: center; padding: 0px; } .gafooter { padding-top: 15px; ; } } /* On screens that are 600px wide or less, make the gfcolumns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .gfrow { flex-direction: gfcolumn; } } .columns-categories{ float: left; position: relative; margin-right: 20px; }