/* Theme Name: Discovery Academy Theme URI: https://www.discoveryacademyhyde.org.uk/ Description: Discovery Academy Theme Version: 1.0.0 Author: Primary ICT Support Ltd Author URI: https://www.primaryictsupport.co.uk/ */ /* 300 light 500 medium 600 demibold 700 bold 800 extrabold */ * { padding: 0; margin:0; outline: none; box-sizing: border-box; font-family: chevin-pro, sans-serif; font-size: 16px; line-height: 1.3; transition: all 0.1s ease-in-out; letter-spacing: .4px; } .clear { clear: both; } img, iframe, table { max-width: 100%; } img { height: auto; } .alignleft { float: left; margin: 0 25px 10px 0; } .alignright { float: right; margin: 0 0 10px 25px; } .latestnews { float: right; margin-top: 30px; text-decoration: none; color:#495C7B; } .latestnews:hover { color:#7DB9CE; } div.container { } div.inner { width: 96%; max-width: 1280px; margin-left: auto; margin-right: auto; } .single-thumbnail { margin-bottom:30px; } form.search { } form.search input { width: 100%; padding: 8px; } form.search button { padding: 8px 32px; margin-top: 15px; background: #8797AF; border: none; color:#FFF; cursor: pointer; } form.search button:hover { background: #455363; } div.container header { background: url("assets/images/hero-bg.png") top center repeat-x; height: 298px; position: relative; } div.container header .header-wrapper { background: url("assets/images/nav-bg.png") top center no-repeat; } div.container header div.inner { } div.container header div.inner a.logo { float: left; margin-top: 20px; } div.container header div.inner a.logo img { width: 200px; } div.container header div.inner div.upper { background: #495C7B; width: calc(100% - 290px); float: right; position: relative; min-height: 50px; } div.container header div.inner div.upper:before { content: ""; position: absolute; width: 67px; height: 120px; top:0; left:-67px; background: url("assets/images/nav-before.png") 0 0 no-repeat; } div.container header div.inner div.upper p { line-height: 50px; color:#FFF; float: left; font-weight: 500; } div.container header div.inner div.upper ul { list-style: none; float: right; margin-top: 10px; } div.container header div.inner div.upper ul li { display: inline-block; margin-left: 8px; } div.container header div.inner div.upper ul li a { text-decoration: none; color:#FFF; width: 28px; height: 28px; border-radius: 14px; border:#FFF 1px solid; display: inline-block; text-align: center; } div.container header div.inner div.upper ul li a svg { line-height: 28px; font-size: 13px; color:#FFF; } div.container header div.inner div.upper ul li:hover a { background:#7DB9CE; } div.container header div.inner nav { background: #7DB9CE; width: calc(100% - 290px); float: right; min-height: 70px; } div.container header div.inner nav ul { list-style: none; display: flex; justify-content:space-between; } div.container header div.inner nav ul li { display: inline-block; position: relative; } div.container header div.inner nav ul li a { text-decoration: none; color: #FFF; text-transform: uppercase; line-height: 70px; font-weight: 500; display: block; font-size: 18px; } div.container header div.inner nav ul li a:hover { color:#495C7B; } div.container header div.inner nav ul li:hover > a { color:#495C7B; } div.container header div.inner nav ul li ul { display: none; } div.container header div.inner nav ul li ul:before { content: ""; width: 210px; height: 10px; background: url("assets/images/nav-arrow.png") top center no-repeat; float: left; margin-top: -10px; } div.container header div.inner nav ul li:hover ul { display: block; position: absolute; background: #96C8D8; top:70px; left: 50%; transform: translateX(-50%); width: 210px; } div.container header div.inner nav ul li ul li { border-bottom: rgba(255,255,255,.2) 1px solid; display: block; } div.container header div.inner nav ul li ul li a { display: block; text-align: center; line-height: 1; padding: 12px 10px; text-transform: none; font-size: 16px; } div.container header div.inner nav ul li ul li a:hover { color:#495C7B; } div.container header div.inner nav .mobile-nav { display: none; } div.container div.hero { margin-top:-298px; z-index: -1; position: relative; } body.home div.container div.hero div.slideshow { height: 692px; background: url("assets/images/slide1.png") top center no-repeat; background-size: cover; } div.container div.hero div.slideshow { height: 513px; background: url("assets/images/slide2.png") top center no-repeat; background-size: cover; } div.container div.hero div.quote { position: absolute; top:calc(50% + 60px); transform: translateY(-50%); left:0; right:0; margin-left: auto; margin-right: auto; max-width: 40%; z-index: 1; text-align: center; } div.container div.hero div.quote h1 { font-size: 30px; font-weight: 600; color:#FFF; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); } div.container div.hero div.quote span { display: block; font-size: 16px; font-weight: 600; color:#FFF; margin-top: 5px; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); } div.container div.sub-breadcrumb { margin-top: -26px; } div.container div.sub-breadcrumb div.inner { background: #495C7B; padding-left: 15px; padding-right: 15px; } div.container div.sub-breadcrumb div.inner a { color:#FFF; text-decoration: none; line-height: 52px; font-weight: 500; } div.container div.sub-breadcrumb div.inner a:hover { color:#29323A; } div.container div.sub-breadcrumb div.inner span { color: #FFF; margin: 0 8px; line-height: 52px; font-weight: 500; } div.container div.sub-content { } div.container div.sub-content div.inner { padding-top: 40px; padding-bottom: 40px; } div.container div.sub-content div.inner h1 { font-size: 36px; font-weight: 600; margin-bottom: 40px; color:#495C7B; } div.container div.sub-content div.inner p { margin-bottom: 25px; } div.container div.sub-content div.inner ul { margin: 25px 20px; } div.container div.sub-content div.inner ol { margin: 25px 20px; } div.container div.sub-content div.inner img { border-radius: 2px; } div.container div.sub-content div.inner a:hover { color:#7DB9CE; text-decoration: none; } div.container div.sub-content div.blogposts { } div.container div.sub-content div.blogposts ul { margin: 0; list-style: none; display: flex; flex-wrap: wrap; } div.container div.sub-content div.blogposts ul li { width: 32%; margin-bottom: 30px; margin-right: 1.3%; } div.container div.sub-content div.blogposts ul li div.photo { background-position: center; background-size: cover; } div.container div.sub-content div.blogposts ul li div.photo a { height: 260px; display: block; } div.container div.sub-content div.blogposts ul li div.news-inner { padding: 20px; background:#EFEFEF; } div.container div.sub-content div.blogposts ul li div.news-inner a { text-decoration: none; } div.container div.sub-content div.blogposts ul li div.news-inner a h3 { color:#495C7B; } div.container div.sub-content div.blogposts ul li div.news-inner a:hover h3 { color:#495C7B; } div.container div.sub-content div.blogposts ul li div.news-inner p { margin: 10px 0 0 0; } div.container div.sub-content div.search-results div.blogposts ul li { width: 100%; margin-bottom: 30px; margin-right: 0; } div.container div.sub-content div.search-results div.blogposts ul li div.photo { display: none; } div.container div.home-academies { } div.container div.home-academies div.inner { text-align: center; padding-top: 40px; padding-bottom: 40px; } div.container div.home-academies div.inner h2 { font-size: 36px; font-weight: 600; margin-bottom: 40px; color:#495C7B; } div.container div.home-academies div.inner ul.academies { list-style: none; display: flex; justify-content: space-between; } div.container div.home-academies div.inner ul.academies li { width: 15.25%;; margin-bottom: 20px; } div.container div.home-academies div.inner ul.academies li a { border: #D6D6D6 5px solid; display: flex; min-height: 140px; align-items: center; } div.container div.home-academies div.inner ul.academies li a:hover img { transform: scale(.95); } div.container div.home-academies div.inner ul.academies li a img { margin: 0 auto; } div.container div.home-academies div.inner ul.stats { margin-top: 10px; list-style: none; display: flex; justify-content: space-between; } div.container div.home-academies div.inner ul.stats li { width: 32%; line-height: 80px; background: #96C8D8; color: #FFF; font-weight: 600; font-size: 20px; text-align: left; } div.container div.home-academies div.inner ul.stats li span.num { background: #495C7B; line-height: 80px; display: inline-block; width: 120px; text-align: center; font-size: 33px; font-weight: 700; color: #FFF; margin-right: 20px; float: left; } div.container div.home-joiningus { background: #495C7B; } div.container div.home-joiningus div.inner { padding-top: 40px; padding-bottom: 40px; } div.container div.home-joiningus div.inner h2 { font-size: 36px; font-weight: 500; margin-bottom: 20px; color:#FFF; } div.container div.home-joiningus div.inner a.btn { background: #8797AF; color:#FFF; text-decoration: none; display: inline-block; line-height: 56px; padding: 0 60px; float: right; font-weight: 500; } div.container div.home-joiningus div.inner a.btn:hover { background: #455363; } div.container div.home-joiningus div.inner p { color:#FFF; font-weight: 500; max-width: calc(100% - 350px); } div.container div.home-latestnews { } div.container div.home-latestnews div.inner { padding-top: 40px; padding-bottom: 40px; } div.container div.home-latestnews div.inner h2 { font-size: 36px; font-weight: 600; margin-bottom: 40px; color:#495C7B; text-align: center; } div.container div.home-latestnews div.inner ul { list-style: none; display: flex; justify-content: space-between; } div.container div.home-latestnews div.inner ul li { width: 32%; } div.container div.home-latestnews div.inner ul li iframe { border:#EFEFEF 2px solid !important; } div.container div.home-latestnews div.inner ul li div.photo { background-position: center; background-size: cover; } div.container div.home-latestnews div.inner ul li div.photo a { height: 260px; display: block; } div.container div.home-latestnews div.inner ul li div.news-inner { padding: 20px; background:#EFEFEF; } div.container div.home-latestnews div.inner ul li div.news-inner a { text-decoration: none; } div.container div.home-latestnews div.inner ul li div.news-inner a h3 { color:#495C7B; } div.container div.home-latestnews div.inner ul li div.news-inner a:hover h3 { color:#495C7B; } div.container footer { background: #7DB9CE; border-top:#495C7B 10px solid; } div.container footer div.inner { padding-top: 65px; padding-bottom: 40px; } div.container footer div.inner div.left { width: 50%; float: left; } div.container footer div.inner div.left p { color:#495C7B; } div.container footer div.inner div.left p a { color: #495C7B; text-decoration: none; } div.container footer div.inner div.left p a:hover { color: #FFF; } div.container footer div.inner div.right { width: 50%; float: right; text-align: right; } div.container footer div.inner div.right p { color:#495C7B; } div.container footer div.inner div.right p a { color: #495C7B; text-decoration: none; } div.container footer div.inner div.right p a:hover { color: #FFF; } div.container footer div.inner a.picts { color:#495C7B; margin-top: 50px; text-align: center; display: block; text-decoration: none; } div.container footer div.inner a.picts:hover { color: #FFF; } @media screen and (max-width: 1260px) { div.container header div.inner nav ul { display: none; } div.container div.hero div.quote { max-width: 80%;} div.container div.home-academies div.inner ul.academies { flex-wrap: wrap; } div.container div.home-academies div.inner ul.academies li { width: 32%; } div.container div.home-academies div.inner ul.stats li { text-align: center; } div.container div.home-academies div.inner ul.stats li span.num { width: 100%; margin-right: 0; } div.container header div.inner nav .mobile-nav { display: block; margin: 17px 0; } div.container header div.inner nav .mobile-nav select { padding: 5px; border-radius: 5px; border:none; width: 100%; } } @media screen and (max-width: 1020px) { div.container div.home-latestnews div.inner ul { flex-wrap: wrap; } div.container div.home-latestnews div.inner ul li { width: 100%; margin-bottom: 20px; } div.container div.sub-content div.blogposts ul li { width: 100%; } div.container footer div.inner { padding-top: 180px; } div.container footer div.inner div.left { width: 100%; text-align: center; margin-bottom: 30px; } div.container footer div.inner div.right { width: 100%; text-align: center; } div.container footer div.inner a.picts { margin-top: 30px; } } @media screen and (max-width: 830px) { div.container header div.inner div.upper p { display: none; } div.container div.hero div.quote { max-width: 96%; } div.container div.hero div.quote h1 { font-size: 24px; } div.container div.home-academies div.inner ul.academies li { width: 48%; } div.container div.home-academies div.inner ul.stats { flex-wrap: wrap; } div.container div.home-academies div.inner ul.stats li { text-align: left; width: 100%; margin-bottom: 15px; font-size: 18px; } div.container div.home-academies div.inner ul.stats li span.num { display: inline-block; width: 110px; margin-right: 20px; font-size: 26px; } div.container div.home-joiningus div.inner { display: flex; flex-direction: column; } div.container div.home-joiningus div.inner h2 { order:1; } div.container div.home-joiningus div.inner p { order:2; max-width: 100%; } div.container div.home-joiningus div.inner a { order:3; text-align: center; margin-top: 25px;} } @media screen and (max-width: 650px) { div.container div.sub-breadcrumb { display: none; } .alignleft { float: none; margin: 15px 0; display: block; } .alignright { float: none; margin: 15px 0; display: block; } div.container header .header-wrapper { background: none; } div.container header div.inner { text-align: center; padding-top:15px; } div.container header div.inner a.logo { float: none; } div.container header div.inner div.upper { display: none; } div.container header div.inner nav { width: 100%; float: none; margin-top: 15px; min-height: 0; padding: 10px; } div.container header div.inner nav .mobile-nav {margin: 0; } div.container div.hero div.quote { top: calc(50% + 124px); } }