* { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: 'Quicksand', sans-serif; background-image: url('//papers.gceguide.cc/assets/images/bgpat.png'); background-repeat: repeat; } .notif-bar { display: flex; align-items: center; justify-content: center; top: 0 !important; left: 0; position: fixed; padding: 0 20px 0; width: 100%; height: 50px; background-color: #1975ff; color: #fff; text-align: center; z-index: 9; } .navbar { position: fixed; top: 50px !important; left: 0; width: 100%; font-size: 18px; padding-bottom: 15px; z-index: 9; } .navbar-toggle { position: absolute; top: 10px; right: 20px; cursor: pointer; color: #fff; font-size: 35px; } #nav-icon { width: 40px; height: 30px; position: relative; margin-top: 7px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #nav-icon span { display: block; position: absolute; height: 6px; width: 100%; background: #fff; border-radius: 6px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #nav-icon span:nth-child(1) { top: 0px; } #nav-icon span:nth-child(2),#nav-icon span:nth-child(3) { top: 12px; } #nav-icon span:nth-child(4) { top: 24px; } #nav-icon.open span:nth-child(1) { top: 12px; width: 0%; left: 50%; } #nav-icon.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #nav-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #nav-icon.open span:nth-child(4) { top: 12px; width: 0%; left: 50%; } .logo { display: inline-block; font-size: 18px; margin-top: 10px; margin-left: 20px; } .logo-text { display: none; } .main-nav { list-style-type: none; display: none; } .active { display: block; background-color: #fff; padding-bottom: 15px; padding-top: 15px; } .main-nav li { text-align: center; margin: 15px auto; } .main-nav li a { text-decoration: none; color: #0e2433 } .sticky { background-color: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3); transition: background-color .25s; } .active, .sticky .logo-text, .sticky ul li a { color: #0e2433; } .sticky ul li a:hover { color: #3284ff; } .sticky #nav-icon span { background: #0e2433; } .banner { display: flex; flex-direction: column; align-items: center; justify-content: center; top: 0 !important; padding-top: 100px; width: 100%; background-image: url('//papers.gceguide.cc/assets/images/banner.svg'), linear-gradient(0deg, #fff, #3284ff); background-repeat: no-repeat; background-size: cover; height: 70vh; } .banner .pagetitle { text-align: center; font-size: 2em; color: #fff; padding: 0 20px; } .searchbar { padding: 20px 10px 20px; } #myInput { width: 100%; font-size: 18px; color: #000; padding: 10px 20px 10px 40px; border-radius: 10px; border: 2px solid #E0E0E0; background: url('//papers.gceguide.cc/assets/images/searchsolid.svg') no-repeat 10px 10px; background-size: 20px 20px; background-color: rgba(224, 224, 224, 0.2); } ::placeholder { font-size: 16px; color: #000; opacity: 0.6; } :focus { outline: 0; outline-color: transparent; outline-style: none; } .qualif { display: flex; justify-content: space-around; align-items: center; background-color: #fff; /*linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0))*/ width: 100%; font-weight: 600; padding: 20px 10px; } .qualif a { display: block; width: 100%; text-align: center; text-decoration: none; color: #939393; padding: 20px 10px; border-bottom: 3px solid #fff; } .qualif a:hover { color: #3284ff; border-bottom-color: #3284ff; transition: 0.1s; } hr { border: solid 1px rgba(211,211,211,0.5); } .content { padding: 20px 10px; } .clock-col > div, .left-col > div, .right-col > div { background-color: #fff; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1); padding: 10px; margin-bottom: 10px; } .countdown { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } #clockdiv { color: #000; display: inline-block; text-align: center; font-size: 25px; } #clockdiv > div { padding: 10px; border-bottom: 3px solid #3284ff; /*border: 3px solid #000; border-radius: 10px;*/ display: inline-block; } #clockdiv div > span { padding: 15px; display: inline-block; } .smalltext { padding-top: 5px; font-size: 16px; } .listtitle { font-weight: 600; padding: 15px; text-align: center; background-color: #eee; } .paperslist { list-style-type: none; font-size: 18px; background-color: #fff; border-radius: 10px; margin-bottom: 10px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1); } /*Files / Folders Icons by prettycons freepik*/ .paperslist li { background: url('//papers.gceguide.cc/assets/images/icons/UNKNOWN.svg') no-repeat 10px 10px; background-size: 35px 35px; } /*images*/ .paperslist [href$=".jpg"], .paperslist [href$=".jpeg"] { background: url('//papers.gceguide.cc/assets/images/icons/JPG.svg') no-repeat 10px 10px; background-size: 35px 35px; } .paperslist [href$=".png"] { background: url('//papers.gceguide.cc/assets/images/icons/PNG.svg') no-repeat 10px 10px; background-size: 35px 35px; } .paperslist [href$=".gif"] { background: url('//papers.gceguide.cc/assets/images/icons/GIF.svg') no-repeat 10px 10px; background-size: 35px 35px; } .paperslist [href$=".svg"] { background: url('//papers.gceguide.cc/assets/images/icons/SVG.svg') no-repeat 10px 10px; background-size: 35px 35px; } /*zips*/ .paperslist [href$=".zip"] { background: url('//papers.gceguide.cc/assets/images/icons/ZIP.svg') no-repeat 10px 10px; background-size: 35px 35px; } .paperslist [href$=".rar"] { background: url('//papers.gceguide.cc/assets/images/icons/RAR.svg') no-repeat 10px 10px; background-size: 35px 35px; } /*pdfs*/ .paperslist [href$=".pdf"] { background: url('//papers.gceguide.cc/assets/images/icons/PDF.svg') no-repeat 10px 10px; background-size: 35px 35px; } /*docs*/ .paperslist [href$=".doc"] { background: url('//papers.gceguide.cc/assets/images/icons/DOC.svg') no-repeat 10px 10px; background-size: 35px 35px; } .paperslist [href$=".docx"] { background: url('//papers.gceguide.cc/assets/images/icons/DOCX.svg') no-repeat 10px 10px; background-size: 35px 35px; } .paperslist [href$=".rtf"] { background: url('//papers.gceguide.cc/assets/images/icons/RTF.svg') no-repeat 10px 10px; background-size: 35px 35px; } .paperslist [href$=".txt"] { background: url('//papers.gceguide.cc/assets/images/icons/TXT.svg') no-repeat 10px 10px; background-size: 35px 35px; } .paperslist [href$=".csv"] { background: url('//papers.gceguide.cc/assets/images/icons/CSV.svg') no-repeat 10px 10px; background-size: 35px 35px; } .paperslist [href$=".ppt"] { background: url('//papers.gceguide.cc/assets/images/icons/PPT.svg') no-repeat 10px 10px; background-size: 35px 35px; } /*videos*/ .paperslist [href$=".mp4"] { background: url('//papers.gceguide.cc/assets/images/icons/MP4.svg') no-repeat 10px 10px; background-size: 35px 35px; } /*audios*/ .paperslist [href$=".mp3"] { background: url('//papers.gceguide.cc/assets/images/icons/MP3.svg') no-repeat 10px 10px; background-size: 35px 35px; } /*directories*/ .paperslist > .dir { background: url('//papers.gceguide.cc/assets/images/icons/DIR.svg') no-repeat 10px 10px; background-size: 35px 35px; } /*Icons End*/ .paperslist li { border-bottom: dotted 1px rgba(211,211,211,0.5); } .paperslist li a { display: block; padding: 15px 20px 15px 50px; text-decoration: none; color: #000; width: 100%; } .paperslist li a:hover { color: #3284ff; transition: 0.1s; } .paperslist li span { font-size: 10px; background-color: #0066ff; text-align: center; color: #fff; width: 100px; padding: 5px; border-radius: 5px; } .paper-guide > h4, .paper-guide > p { text-align: center; } .top-link { transition: all .25s ease-in-out; position: fixed; bottom: 0; right: 0; display: inline-flex; cursor: pointer; align-items: center; justify-content: center; margin: 0 3em 3em 0; border-radius: 50%; padding: .25em; width: 50px; height: 50px; background-color: #3284ff; z-index: 9999; } .top-link.show { visibility: visible; opacity: 1; } .top-link.hide { visibility: hidden; opacity: 0; } .top-link svg { fill: #fff; width: 24px; height: 12px; } .top-link:hover { background-color: #66a3ff; } .top-link:hover svg { fill: #ffffff; } footer { color: #000; text-align: center; padding: 30px; } @media screen and (min-width: 992px) { .navbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0; height: 70px; padding: 40px 50px; } .main-nav { display: flex; margin-right: 30px; flex-direction: row; justify-content: flex-end; } .main-nav li { margin: 0; } .main-nav li a { margin-left: 40px; color: #fff; } .logo { display: flex; justify-content: center; align-items: center; margin-top: 0; } .logo a { text-decoration: none; color: #002866;; } .logo-text { display: block; margin-left: 10px; font-family: 'Montserrat', sans-serif !important; font-size: 20px; font-weight: 400; color: #fff; } .logo-text span { font-weight: 400; } .navbar-toggle { display: none; } .main-nav li a:hover { color: #1c4966; transition: 0.2s; } .searchbar, .qualif, .content { padding: 20px 150px; } /*Names for grid areas*/ .clock-col { grid-area: ClockCol; } .right-col { grid-area: RightCol; } .left-col { grid-area: LeftCol; } .content { display: grid; grid-gap: 10px; grid-template-columns: 65% auto; grid-template-areas: 'LeftCol ClockCol' 'LeftCol RightCol'; } }