/*
Theme Name: Matthew Thomas Designs - OTC Test
Theme URI: matthewthomasdesigns.com
Description: Custom WordPress theme for MTD - OTC Test.
Version: 1.0
Author: Matthew Thomas
Author URI: matthewthomasdesigns.com
*/

html {box-sizing:border-box}
*, *:before, *:after {box-sizing:inherit}
body {margin:0; padding:0; font-family:Open Sans, Arial, sans-serif}


/* HEADER */
#header-bkgd {width:100%; height:65px; background:#00447C}
#header {position:relative; margin:0 auto; width:100%; height:100%; max-width:1230px; padding:0 15px}
#header .logo {display:block; position:absolute; top:14px; left:15px; width:199px; height:37px; background-size:cover}
#header .search-icon {position:absolute; top:20px; right:66px; width:24px; height:24px; background-size:cover; cursor:pointer}
#header .menu-icon {position:absolute; top:19px; right:15px; width:26px; height:26px; background-size:cover; cursor:pointer}

@media only screen and (max-width:350px) {
#header .logo {top:16px; width:179px; height:33px}
}


/* SUBHEADER */
#subheader-bkgd {with:100%; background:#EBEBEB}
#subheader {display:flex; justify-content:space-around; margin:0 auto; width:100%; max-width:1160px; padding:9px 0; font-size:16px; font-weight:300}
#subheader a {text-align:center; color:#000000; text-decoration:none; transition:.1s}
#subheader a:hover {font-weight:600}
#subheader a::after {display:block; content:attr(title); font-weight:600; height:0; overflow:hidden; visibility:hidden}

@media only screen and (max-width:950px) {
#subheader .bookstore {display:none}
}
@media only screen and (max-width:850px) {
#subheader .events {display:none}
}
@media only screen and (max-width:750px) {
#subheader .library {display:none}
}

@media only screen and (max-width:750px) {
#subheader-bkgd {display:none}
}


/* MENU */
.menu-lock {position:fixed; top:0; width:100%; height:100%; overflow:hidden}
#menu-bkgd {display:none; position:fixed; width:100vw; height:100vh; background:rgba(0,0,0,.9); z-index:5}
#menu {display:none; position:relative; top:0; padding:80px calc((100vw - 1200px) / 2) 0; color:#FFFFFF; z-index:10}
#menu .close {position:absolute; top:19px; right:calc((100vw - 1200px) / 2); width:26px; height:26px; background-size:cover; cursor:pointer}
#menu .search {width:90%; max-width:650px; margin:0 auto 25px auto}
#menu .search input {width:calc(100% - 45px); padding:0 0 8px 0; color:#FFFFFF; font-size:28px; font-family:Open Sans, sans-serif; font-weight:300; background:transparent; border:none; border-radius:0; border-bottom:2px solid #FFFFFF}
#menu input:focus {outline:none}
#menu .search input::placeholder {color:#4D4D4D; opacity:1}
#menu .search .search-icon {display:inline-block; width:30px; height:30px; background-size:cover; margin:0 0 -10px 10px; cursor:pointer}
#menu .icons {margin:0 0 50px 0; overflow:hidden}
#menu a {display:block; float:left; width:20%; height:170px; margin:45px 0 0 0; color:#FFFFFF; font-size:20px; font-weight:600; text-align:center; text-decoration:none; -webkit-transform:translate3d(0, 0, 0) /* Prevents flickering on transform */}
#menu span {display:block; width:100px; height:100px; margin:0 auto 15px auto; border-radius:50%; border:7px solid #FFFFFF; background-repeat:no-repeat; transition:.2s}
#menu a:hover span {transform:scale(1.1)}

#menu .icons .admissions span {background-size:58%; background-position:60% 53%}
#menu .icons .programs span {background-size:80%; background-position:50% 50%}
#menu .icons .financialaid span {background-size:68%; background-position:50% 50%}
#menu .icons .studentservices span {background-size:70%; background-position:50% 50%}
#menu .icons .myotc span {background-size:63%; background-position:50% 50%}
#menu .icons .eagleevents span {background-size:59%; background-position:50% 45%}
#menu .icons .library span {background-size:65%; background-position:50% 50%}
#menu .icons .bookstore span {background-size:68%; background-position:50% 55%}
#menu .icons .helpdesk span {background-size:65%; background-position:50% 50%}
#menu .icons .tutoring span {background-size:62%; background-position:50% 45%}
#menu .icons .disability span {background-size:72%; background-position:39% 50%}
#menu .icons .workforce span {background-size:60%; background-position:50% 50%}
#menu .icons .security span {background-size:65%; background-position:50% 60%}
#menu .icons .about span {background-size:65%; background-position:50% 42%}
#menu .icons .news span {background-size:65%; background-position:53% 55%}
#menu .icons .facultystaff span {background-size:65%; background-position:50% 44%}
#menu .icons .administration span {background-size:70%; background-position:50% 50%}
#menu .icons .development span {background-size:67%; background-position:50% 46%}

@media only screen and (max-width:1230px) {
#menu .close {right:15px}
}

@media only screen and (max-width:900px) {
#menu a {width:25%}
}

@media only screen and (max-width:650px) {
#menu {padding:80px 10px 0 10px}
#menu .search {margin:0 auto}
#menu a {width:33.333%; height:120px; font-size:15px}
#menu span {width:80px; height:80px; border-width:6px}
#menu a:hover span {transform:scale(1)}
}


/* CONTAINER */
#container {width:100%; max-width:1230px; margin:0 auto; padding:15px 15px 5px 15px; font-size:18px; line-height:180%}

@media only screen and (max-width:767px) {
#container {font-size:16px}
}


/* SECTION MAIN */
.sectionhero {width:100vw; margin:calc(-1em - 15px) 0 0 calc((100vw - 1200px) / -2)}
.sectiontitle {display:block; margin:30px 0 40px 0; color:#00447C; font-size:80px; font-weight:700}

@media only screen and (max-width:1199px) {
.sectionhero {margin:calc(-1em - 15px) 0 0 -15px}
.sectiontitle {margin:20px 0 30px 0; font-size:55px}
}

@media only screen and (max-width:767px) {
.sectiontitle {margin:-13px 0 -5px 0; font-size:40px; line-height:115%}
}


/* CONTENT */
#content {float:left; padding:5px 42px 0 0; width:calc(100% - 215px)}

#content .news-headline {display:block; margin:-24px 0 0 0; font-size:40px; line-height:130%; font-weight:600}
#content .news-date {font-size:14px}
#content .news-image {width:100%; margin:.8em 0 0 0}
#content .news-cutline {display:block; margin:-15px 0 0 0; font-size:12px; line-height:160%; color:#7D7D7D}

#content a:link, #content a:visited, #content a:active; #content a:hover {color:#00447C; font-weight:600; text-decoration:none}

@media only screen and (max-width:999px) {
#content {width:100%; padding:0}
}

@media only screen and (max-width:767px) {
#content .news-headline {font-size:28px}
}


/* SIDEBAR */
#sidebar {float:left; width:215px; font-size:14px; line-height:175%}
#sidebar img {width:100%; padding:19px 0 0 0; border-top:1px solid #C2C2C2}
#sidebar .noborder {padding:0; border-top:none}
#sidebar .title {font-size:16px; font-weight:600}
#sidebar a {display:inline-block; margin:0 0 12px 0; color:#00447C; font-weight:600; text-decoration:none}
#sidebar .link-arrow {display:inline-block; margin:0 0 0 7px; width:10px; height:10px; background-size:cover}

@media only screen and (max-width:999px) {
#sidebar {display:none}
}


/* FOOTER SOCIAL */
#footer-social-bkgd {clear:both; width:100%; background:#EBEBEB}
#footer-social {width:550px; margin:0 auto; padding:18px 15px; color:#A7A9AB; font-size:20px; text-align:center; overflow:hidden}
#footer-social .content {float:left; width:245px; margin-top:4px; text-align:left}
#footer-social a {float:left; width:35px; height:35px; margin-right:25px; background-size:cover; opacity:.3}
#footer-social a:last-child {margin-right:0}

@media only screen and (max-width:599px) {
#footer-social {width:305px; padding:15px}
#footer-social .content {display:none}
}


/* FOOTER LINKS */
#footer-links-bkgd {width:100%; background:#00447C}
#footer-links {width:100%; max-width:1230px; margin:0 auto; padding:18px 15px; overflow:hidden}
#footer-links div {float:left; width:20%}
#footer-links a {color:#FFFFFF; font-size:16px; font-weight:300; line-height:32px; text-decoration:none}
#footer-links .title {font-size:18px; font-weight:600}
#footer-links a:after {content:""; display:block; height:0; width:1px}

@media only screen and (max-width:999px) {
#footer-links div {width:25%}
#footer-links a {font-size:14px}
#footer-links .title {font-size:16px}
#footer-links .locations {display:none}
}

@media only screen and (max-width:767px) {
#footer-links div {width:33.33%}
#footer-links .current {display:none}
}

@media only screen and (max-width:550px) {
#footer-links-bkgd {display:none}
}


/* FOOTER LOGO */
#footer-logo-bkgd {width:100%; background:#000000}
#footer-logo {width:100%; max-width:1230px; margin:0 auto; padding:20px 15px}
#footer-logo .logo {width:199px; height:37px; margin:0 auto 11px auto; background-size:cover}
#footer-logo .content {margin:0 auto; color:#A7A9AB; font-size:12px; font-weight:300; text-align:center}
#footer-logo br {display:none}

@media only screen and (max-width:767px) {
#footer-logo .spacer {display:none}
#footer-logo br {display:inline}
}


/* PRINT */
@media print {
#menu-lock {margin:5%}
#header-bkgd {display:none}
#subheader-bkgd {display:none}
#container {width:100%; padding:0}
#content {width:100%; padding:0}
#sidebar {display:none}
#footer-social-bkgd {display:none}
#footer-links-bkgd {display:none}
#footer-logo-bkgd {display:none}

#hero {width:1200px}
#dreamplan {width:1200px}
#slick-pos {width:1200px !important}
#financialaid {width:1200px}
#profiles {width:1200px}
#slick-profiles {width:1200px}
#apply-bkgd {width:1200px}
#photo {width:1000px}
#social-media {width:1200px}
}