@charset "UTF-8"; /* CSS Document */ /* START FULLSCREEN NAVIGATION STYLES ------------------------- */ /*styling open close button*/ /* .fullscreen-nav .button { display: none; } */ .btn-open img.nav-bars { display: inline-block; } .btn-open img.nav-x { display: none; } .fullscreen-nav .button { display:inline; position:absolute; right:40px; top:10px; z-index:999; font-size:30px; color: #777; } /* @media screen and (max-width: 999px) { .fullscreen-nav .button { display:inline; position:absolute; right:0; top:30px; z-index:999; font-size:30px; color: #777; } } */ .fullscreen-nav .button a { text-decoration:none; font-size: 30px; border: none; } .fullscreen-nav .button a span { font-size: 15px; text-transform: uppercase; font-family: "Open Sans"; position: relative; top: -5px; margin-left: 10px; color: rgba(256,256,256,.5); } .fullscreen-nav .button a:hover span { color: #fff; } .fullscreen-nav .btn-open:before { color:#ccc; /* content:"\f0c9"; */ font-family:"FontAwesome"; font-size: 30px; transition-property:all .2s linear 0s; -moz-transition:all .2s linear 0s; -webkit-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; } @media screen and (max-width: 767px) { .fullscreen-nav .button { } } @media screen and (max-width: 650px) { .fullscreen-nav .btn-open:before { content: ""; } .fullscreen-nav .button a.btn, .fullscreen-nav .pipe { display: none; } } @media screen and (max-width: 580px) { .fullscreen-nav .button { right:20px; } } @media screen and (max-width: 499px) { .fullscreen-nav .button a span { display: none; } } .fullscreen-nav .btn-open:hover:before { color:#d50032; } .btn-close img.nav-bars { display: none; } .btn-close img.nav-x { display: inline-block; } /* .fullscreen-nav .btn-close { position: relative; top: -60px; } */ .fullscreen-nav .btn-close:before { color:#e61516; /* content:"\f00d"; */ font-family:"FontAwesome"; transition-property:all .2s linear 0s; -moz-transition:all .2s linear 0s; -webkit-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; } .fullscreen-nav .btn-close:hover:before { color: #ccc; } /*overlay*/ .fullscreen-nav .overlay { display:none; position:fixed; top:0; height:100%; width:100%; background-image: linear-gradient( 45deg, #9B279B, #f60 ); overflow:auto; z-index:99; } .fullscreen-nav .wrap { color:#e9e9e9; text-align:center; max-width:90%; margin:0 auto; } .fullscreen-nav .wrap ul.wrap-nav { border-bottom:1px solid #575757; text-transform:capitalize; padding:150px 0px 100px; } .fullscreen-nav .wrap ul.wrap-nav li { font-size:20px; display:inline-block; vertical-align:top; width:24%; position:relative; } .fullscreen-nav .wrap ul.wrap-nav li a { color:#ccc; display:block; padding:8px 0; text-decoration:none; transition-property:all .2s linear 0s; -moz-transition:all .2s linear 0s; -webkit-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; } .fullscreen-nav .wrap ul.wrap-nav li a:hover { color:#f0f0f0; } .fullscreen-nav .wrap ul.wrap-nav ul { padding:20px 0; } .fullscreen-nav .wrap ul.wrap-nav ul li { display:block; font-size:13px; width:100%; color:#e9e9e9; } .fullscreen-nav .wrap ul.wrap-nav ul li a { color:#f0f0f0; } .fullscreen-nav .wrap ul.wrap-nav ul li a:hover { color:#34B484; } .fullscreen-nav .social { font-size:25px; padding:20px; } .fullscreen-nav .social p { margin:0; padding:20px 0 5px 0; line-height:30px; font-size:13px; } .fullscreen-nav .social p a { color:#34B484; text-decoration:none; margin:0; padding:0; } .fullscreen-nav .social-icon { width:50px; height:50px; border-radius: 25px; background:#d2d2d2; color:#333; display:inline-block; margin:0 20px; transition-property:all .2s linear 0s; -moz-transition:all .2s linear 0s; -webkit-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; } .fullscreen-nav .social-icon:hover { background:#d50032; color:#fff; } .fullscreen-nav .social-icon i { margin-top:12px; } @media screen and (max-width:48em) { .fullscreen-nav .wrap ul.wrap-nav>li { width:100%; padding:20px 0; border-bottom:1px solid #575757; } .fullscreen-nav .wrap ul.wrap-nav { padding:30px 0px 0px; } .fullscreen-nav .social { color:#c1c1c1; font-size:25px; padding:15px 0; } .fullscreen-nav .social-icon { width:100%; height:50px; background:#fff; color:#333; display:block; margin:5px 0; } } /* OVERLAY NAV CUSTOM STYLES ------------------------- */ .fullscreen-nav .form-group { margin-top: 30px; } .over-nav { padding-top: 50px; /* THIS IS FOR INDEX-TRIAL.HTML B/C OF THE SIZE OF THE HEADER */ background: transparent; font-family: "Alice", serif; } .overlay hr { border-color: #c0b9b1; } .over-nav ul { list-style: none; margin: 0; padding: 0; text-align: center; } .over-nav ul li { font-size: 100px; line-height: .9em; display: block; margin-bottom: 20px; padding-top: 15px; } .over-nav .nav-cat { margin-top: 30px; } .over-nav ul li a { color: rgba(256,256,256,.4); border: none; } .over-nav ul li a:hover { color: #fff; text-decoration: none; } .over-nav ul li ul { margin-top: 15px; } .over-nav ul li ul li { margin: 0 30px 15px 0; font-size: 14px !important; border: none; padding-top: 0; } .over-nav ul li ul li a { color: #817363; } .over-nav ul li ul li a:hover { color: #333; text-decoration: none; } .essentials { margin-bottom: 50px; text-transform: uppercase; } .essentials a { color: #216289; } .essentials a:hover { color: #817363; text-decoration: none; } .essentials .donate a.btn { color: #fff; } @media screen and (max-width: 575px) { .essentials a { padding-top: 5px; padding-bottom: 5px; margin-bottom: 15px; display: block; background: #216289; border-radius: 20px; color: #fff; } .essentials a:hover { text-decoration: none; background: #c0b9b1; color: #fff; } .over-nav ul li { font-size: 30px; } } .over-nav .soc { font-size: 1.2rem; } .over-nav .soc a { margin: 15px 10px; width: 40px; height: 40px; line-height: 42px; display: inline-block; background: transparent; border: 1px solid #bacfdd; color: #216289; border-radius: 6px; text-align: center; } .over-nav .soc a:hover { background: #216289; color: #fff; text-decoration: none; } .utb-info { padding-bottom: 40px; } .utb-info h2 { font-size: 24px; } .utb-info p a { border-bottom: 1px dotted #999; } .utb-info p a:hover { color: #222; border: none; } @media screen and (max-width: 767px) { .over-nav { text-align: center; } } @media screen and (max-width: 450px) { .over-nav .soc a { width: 30px; height: 30px; line-height: 30px; font-size: 1rem; } } .over-nav a.dropdown-item { margin: 0; } .over-nav .dropdown-menu a { background: #fff; color: #333; } .over-nav .dropdown-menu a:hover { color: #e5b223; } /* END FULLSCREEN NAVIGATION ------------------------------------------------- */ /* ------------------------- */ /* ------------------------- */ /* ------------------------- */