/* Theme Name: Canadian College Author: SWD Author URI: https://swd.ca Description: Canadian College Custom Made Design Version: 1.0 */ html {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0; } body {margin: 0; padding:0; background-color: #fff; font-family: 'Open Sans', sans-serif; color: #333333; font-size: 20px; overflow-x: hidden;} *, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .clearfix:before, .clearfix:after {content: " "; display: table;} .clearfix:after {clear: both;} article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {display: block;} audio, canvas, progress, video {display: inline-block; vertical-align: baseline;} audio:not([controls]) {display: none; height: 0;} [hidden], template {display: none;} abbr[title] {border-bottom: 1px dotted;} small {font-size: 80%;} sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup {top: -0.5em;} sub {bottom: -0.25em;} img {border: 0;} svg:not(:root) {overflow: hidden;} figure {margin: 0;} hr {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;} code, kbd, pre, samp {font-size: 1em;} button, input, optgroup, select, textarea {color: inherit; font: inherit; margin: 0;} select {text-transform: none;} button {overflow: visible;} button, input, select, textarea {max-width: 100%;} button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;} button[disabled], html input[disabled] {cursor: default; opacity: .5;} button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;} input[type="checkbox"], input[type="radio"] {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-right: 0.4375em; padding: 0;} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto;} input[type="search"] {-webkit-appearance: textfield;} input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;} fieldset {border: 1px solid #d1d1d1; margin: 0 0 1.75em; padding: 0.875em;} fieldset > :last-child {margin-bottom: 0;} legend {border: 0; padding: 0;} textarea {overflow: auto; vertical-align: top;} optgroup {font-weight: bold;} /*=============================================================================== WP ALIGNMENTS ===============================================================================*/ .alignleft {float: left; margin: 0.375em 1.75em 1.75em 0;} .alignright {float: right; margin: 0.375em 0 1.75em 1.75em;} .aligncenter {clear: both; display: block; margin: 0 auto 1.75em;} /*=============================================================================== FLEXIBLE EMBEDS ===============================================================================*/ embed, iframe, object, video {margin-bottom: 0; max-width: 100%; vertical-align: middle;} p > embed, p > iframe, p > object, p > video {margin-bottom: 0;} .entry-content .wp-audio-shortcode a, .entry-content .wp-playlist a {box-shadow: none;} .wp-audio-shortcode, .wp-video, .wp-playlist.wp-audio-playlist {margin-top: 0; margin-bottom: 1.75em;} .wp-playlist.wp-audio-playlist {padding-bottom: 0;} .wp-playlist .wp-playlist-tracks {margin-top: 0;} .wp-playlist-item .wp-playlist-caption {border-bottom: 0; padding: 0.7142857143em 0;} .wp-playlist-item .wp-playlist-item-length {top: 0.7142857143em;} /*=============================================================================== CAPTIONS STYLE ===============================================================================*/ .wp-caption {margin-bottom: 1.75em; max-width: 100%;} .wp-caption img[class*="wp-image-"] { display: block; margin: 0;} .wp-caption .wp-caption-text {color: #686868; font-size: 13px; font-size: 0.8125rem; font-style: italic; line-height: 1.6153846154; padding-top: 0.5384615385em;} /*=============================================================================== GALLERIES STYLE ===============================================================================*/ .gallery {margin: 0 -1.1666667% 1.75em;} .gallery-item {display: inline-block; max-width: 33.33%; padding: 0 1.1400652% 2.2801304%; text-align: center; vertical-align: top; width: 100%;} .gallery-columns-1 .gallery-item {max-width: 100%;} .gallery-columns-2 .gallery-item {max-width: 50%;} .gallery-columns-4 .gallery-item {max-width: 25%;} .gallery-columns-5 .gallery-item {max-width: 20%;} .gallery-columns-6 .gallery-item {max-width: 16.66%;} .gallery-columns-7 .gallery-item {max-width: 14.28%;} .gallery-columns-8 .gallery-item {max-width: 12.5%;} .gallery-columns-9 .gallery-item {max-width: 11.11%;} .gallery-icon img {margin: 0 auto;} .gallery-caption {color: #686868; display: block; font-size: 13px; font-size: 0.8125rem; font-style: italic; line-height: 1.6153846154; padding-top: 0.5384615385em;} .gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption {display: none;} /*=============================================================================== BASIC FORMATTING ===============================================================================*/ h1, h2, h3, h4, h5, h6 {margin:0; padding:0 0 20px 0; color: #007c4d; font-weight: 300; line-height: 1.2; text-align: center; font-family: 'Domine', serif;} h1 {font-size: 74px; } h2 {margin-bottom: 16px; font-size: 40px; font-weight: 500;} h2 small {display: block; margin: 0; padding: 15px 0 20px 0; font-size: 20px; color: #333333; position: relative; font-family: 'Open Sans', sans-serif; text-transform: none;} h3 {font-size: 26px; color: #333;} h4 {font-size: 20px;} h5 {font-size: 18px;} h6 {font-size: 18px;} p {margin: 0 0 20px; padding:0; font-size: 20px; line-height: 1.4;} dfn, cite, em, i {font-style: italic;} blockquote {margin:0; padding:0 6%; z-index: 10; color: #fff; font-style: italic; font-size:27px; line-height: 1.6;} blockquote p {margin:0; padding:0; font-style: italic; font-size:28px; line-height: 1.6; } blockquote p strong {font-weight: 700;} blockquote cite {display: block; margin:0; padding:20px 0 10px 0; font-size: 1em; font-weight: 900; font-style: normal; line-height: 1;} address {font-style: normal; margin: 0; padding: 0; font-size: 0.875em; line-height: 1.6;} address p {margin: 0; padding: 0; font-size: 0.875em; line-height: 2; font-weight: 400;} code, kbd, tt, var, samp, pre {font-family: Inconsolata, monospace;} pre {border: 1px solid #d1d1d1; font-size: 1em; font-size: 1rem; line-height: 1.3125; margin: 0 0 1.75em; max-width: 100%; overflow: auto; padding: 1.75em; white-space: pre; white-space: pre-wrap; word-wrap: break-word;} code {background-color: #d1d1d1; padding: 0.125em 0.25em;} abbr, acronym {border-bottom: 1px dotted #d1d1d1; cursor: help;} mark, ins {background: #007acc; color: #fff; padding: 0.125em 0.25em; text-decoration: none;} big {font-size: 125%;} a {color: #007c4d; cursor: pointer; text-decoration: none;} a, a:hover, a:active, a:focus, button, input[type="button"] {outline: 0; transition-property: all; transition-duration: 1s; transition-timing-function: ease-out;} a:hover {opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80); text-decoration: none;} a:focus {text-decoration: none; } a:active {text-decoration: none;} hr {margin:10px 0; padding:0; border: 0; height: 1px; background-color: #007c4d;} ul, ol {margin: 0 0 1.75em 1.25em; padding: 0;} ul {list-style: none;} ol {list-style: decimal; margin-left: 1.5em;} li > ul, li > ol {margin-bottom: 0;} dl {margin: 0 0 1.75em;} dt {font-weight: 700;} dd {margin: 0 0 1.75em;} img {height: auto; max-width: 100%; vertical-align: middle;} del {opacity: 0.8;} /*table, th, td {border: 1px solid #027c7f; } table {border-collapse: separate; border-spacing: 0; margin: 0 0 1.75em; table-layout: fixed; width: auto !important; border-bottom-width: 3px;} caption, th, td {font-weight: normal; text-align: left; padding-right: 50px !important;} th {border-width: 0; font-weight: 700; background-color: #027c7f; color: #fff; text-transform: uppercase;} td {border-width: 0; border-bottom: 1px solid #027c7f;} th, td {padding: 10px 20px;} tr:nth-of-type(even) {background-color: #e1eaea; } */ /*=============================================================================== FORMS ===============================================================================*/ /* Placeholder text color -- selectors need to be separate to work. */ ::-webkit-input-placeholder {color: #686868;} :-moz-placeholder {color: #686868;} ::-moz-placeholder {color: #686868; opacity: 1;} :-ms-input-placeholder {color: #686868;} input {line-height: normal;} label, .gfield_label {display: block; margin:10px 0 6px; padding:0; font-size: 20px !important; color: #333333; font-weight: 400 !important; text-transform: uppercase; } .button, button, button[disabled]:hover, button[disabled]:focus, input[type="button"], input[type="button"][disabled]:hover, input[type="button"][disabled]:focus, input[type="reset"], input[type="reset"][disabled]:hover, input[type="reset"][disabled]:focus, input[type="submit"], input[type="submit"][disabled]:hover, input[type="submit"][disabled]:focus {display: inline-block; margin: 0; padding: 20px 60px 20px 20px !important; border: 0; background: #007c4d url('images/buttonArrow.png') no-repeat right center; text-align: center; width: auto; line-height: 1em !important; font-size: 20px !important; text-transform: uppercase; color: #fff; border: 0 !important; transition-property: all; transition-duration: 1s; transition-timing-function: ease-out; font-weight: 400; position: relative !important; z-index: 10; transition: background-color 250ms; letter-spacing:0; overflow: hidden; border-radius: 0; border: none;} .gform_wrapper .gform_footer {display: inline-block !important; margin: 55px 0 0 !important; padding: 0 !important; height: 58px !important; width: auto !important; position: relative;} .button:hover, button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus {color: #f7d117;} select {display: block; margin:0 !important; padding: 15px 8px !important; height: auto !important; width: 100%; line-height: 1; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: #fff url('images/mockselect.png') right center no-repeat; font-weight: 400; color: #333; width: 100%; line-height: 1; font-size: 20px !important; border: 1px solid #25408f; outline: 0;} .ui-datepicker-title select {width: auto !important; padding: 2px !important; font-size: 14px !important; display: inline; border: 0; background-image: none; margin: 0 4px !important;} button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus {outline: thin dotted; outline-offset: -4px;} input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea {margin:0; padding: 16px 8px !important; background-color: #fff; color: #333; width: 100%; line-height: 1; font-size: 20px !important; border: 1px solid #007c4d; outline: 0;} input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus {border: 1px solid #f7d117; outline: 0;} .gfield_required {color: #333 !important;} .gform_legacy_markup_wrapper .gfield_checkbox li label, .gform_legacy_markup_wrapper .gfield_radio li label {max-width: 95% !important;} /* ============================================================================ GENERAL STYLES ===============================================================================*/ .container {margin: 0 auto; width: 100%; max-width: 1170px;} @media (min-width : 1021px) and (max-width : 1220px) { .container {padding: 0 20px;} } section {margin: 0 auto; padding: 60px 0; width: 100%; max-width: 2560px;} /* ============================================================================ HEADER STYLES ==============================================================================*/ header {margin: 0 auto; padding: 20px 0 0; width: 100%; max-width: 2560px;} header .logo {margin:0; padding:0; float: left; width:269px; height: 100px;} header .logo a {display: block; margin:0; padding:0; width: 100%; height: 100%; background: transparent url('images/logo.png') no-repeat center top; text-indent: -9000px; background-size: 94% auto;} header .topMenu {margin:16px 0 0 0; padding:0; width: auto; display: inline-block; float: right;} header .topMenu li {margin:0; padding:0; width: auto; display: inline-block;} a.learn-more { position: relative; display: inline-block; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; background: transparent; padding: 0; width: 190px; height: 60px; } a.learn-more .circle { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 60px; height: 60px; background: #007c4d url('images/top-menu-icons.png') no-repeat; border-radius: 30px; } header .topMenu li:nth-of-type(1) a.learn-more .circle {background-position: 15px 10px;} header .topMenu li:nth-of-type(2) a.learn-more .circle {background-position: 10px -50px;} header .topMenu li:nth-of-type(3) a.learn-more .circle {background-position: 13px -108px;} a.learn-more .button-text { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 60px; margin: 0; color: #333333; line-height: 1; font-size: 20px; text-align: center; text-transform: uppercase; } a:hover .circle {width: 100%;} a:hover .button-text {color: #fff;} header .topMenu li:nth-of-type(1) a.learn-more .button-text {padding: 20px 0 0 0;} header .topMenu li:nth-of-type(2) a.learn-more .button-text {padding: 12px 0 0 36px;} header .topMenu li:nth-of-type(3) a.learn-more .button-text {padding: 12px 0 0 14px;} header nav {margin:20px 0 0 0; padding:10px 0; background-color: #007c4d; } /* ============================================================================ MAIN MENU STYLE ===============================================================================*/ header .primary-menu {margin:0; padding:0;} header .primary-menu li {margin:3px 0 0 0; padding:0 30px 0 0; display: inline-block; position: relative;} header .primary-menu li a {color: #fff; font-size: 22px; line-height: 1; text-transform: uppercase;} header .primary-menu li.menu-item-has-children a:after {content: ''; display: block; margin:8px 0 0 5px; padding:0; width: 0; height: 0; border-left: 5px solid transparent; border-top: 10px solid #f7d117; border-right: 5px solid transparent; float: right;} header .primary-menu li .sub-menu {display: none; position: absolute; width: auto; top:38px; left:0; margin:0; padding:20px; height: auto; z-index: 9999999; background-color: #e5e5e5;} header .primary-menu li .sub-menu li {display: block; margin:0; padding:0 !important; float: none; white-space: nowrap;} header .primary-menu li .sub-menu li a {display: block; margin:0; padding:10px; font-size: 20px; color: #333; text-transform: none;} header .primary-menu li.menu-item-has-children .sub-menu li a:after {display: none;} header .primary-menu li.current-menu-item a {} header .primary-menu li .sub-menu li.current-menu-item a {background-color: #f7d117;} header .primary-menu li a:hover {} header .primary-menu li .sub-menu li a:hover {background-color: #f7d117;} header .primary-menu li.current-menu-item .sub-menu li a {background-color: transparent;} header .primary-menu li.current-menu-item .sub-menu li.current-menu-item a {background-color: #f7d117;} .responsiveMenu {display: none;} /* ============================================================================ HOME STYLE ==============================================================================*/ .heroImage {margin: 0 auto; padding:15% 0 13% 0; background-repeat: no-repeat; background-position: center top; height: auto; background-size: cover; box-shadow: inset 0 0 0 2000px rgba(0,0,0,.4);} .heroImage h1 {margin:0; padding:0; color: #fff; font-size: 48px; text-align: left; font-weight: 500;} .heroImage p {margin:0; padding:0 0 20px 0; color: #fff; line-height: 1.3; font-size: 22px; font-weight: 400;} .heroImage ul {margin:20px 0 0 0; padding:0;} .heroImage ul li {margin:0; padding:0 10px 0 0; display: inline-block; width: auto;} .heroImage ul li a.button {background-color: #f7d117; color: #333333;} .heroImage ul li:last-of-type a.button {background: #fff url('images/buttonArrowGrey.png') no-repeat right center !important;} .heroImage .span10 {width:71% !important;} .ourGroupPrograms {margin:0 auto; padding: 0; background-color: #e6e6e6;} .post-type-archive-programs .ourGroupPrograms, .tax-prog_cat .ourGroupPrograms {margin:0 auto; background-color: #fff;} .ourGroupPrograms .span4 {margin:0 !important; padding:0; width: 33.33333333333333% !important; background-repeat: no-repeat; background-position: center center; background-size: cover; color: #fff !important;} .ourGroupPrograms .span4 img {width: 100%;} .ourGroupPrograms .span4 h3 {margin:-100px 0 0 0; padding: 0 55px 0 20px; color: #fff; font-size:26px; font-weight: 600; line-height: 1; text-align: center; background: #007c4d url('images/buttonArrow.png') no-repeat right 60px; position: relative; cursor: pointer; height: 100px; display: flex; justify-content: center; align-items: center; font-family: 'Open Sans', sans-serif;} .ourGroupPrograms .span4 h3 a {color: #fff; font-size:26px;} .ourGroupPrograms .span4:nth-of-type(3n+1) h3 {background-color: #1295b0;} .ourGroupPrograms .span4:nth-of-type(3n+2) h3 {background-color: #74b009;} .ourGroupPrograms .span4:nth-of-type(3n+3) h3 {background-color: #c96814;} .term-business-law .ourGroupPrograms .span4 {padding: 15px; } .term-business-law .ourGroupPrograms .span4 h3 {background-color: rgba(18, 149, 176,.6);} .term-business-law .pageTitle h1:before {background: rgba(18, 149, 176,.6);} .term-healthcare .ourGroupPrograms .span4 {padding: 15px; } .term-healthcare .ourGroupPrograms .span4 h3 {background-color: rgba(116, 176, 9,.6);} .term-healthcare .pageTitle h1:before {background: rgba(116, 176, 9,.6);} .term-technology-energy .ourGroupPrograms .span4 {padding: 15px; } .term-technology-energy .ourGroupPrograms .span4 h3 {background-color: rgba(201, 104, 20,.6);} .term-technology-energy .pageTitle h1:before {background: rgba(201, 104, 20,.6);} .viewAll {margin:0; padding:10px 0 0; text-align: center;} .introBoxes {margin: 10px auto;} .introBoxes .span6 {padding: 20px; background-color: #e6e6e6; min-height: 360px; position: relative;} .introBoxes .span6 .bottomBT {margin:0; padding:0; width: 100%; text-align: center; position: absolute; left: 0; bottom: 20px;} .introBoxes .span6 .button {background-color: #f7d117; color: #333;} .extraBlock {margin:0 auto; padding:0; background-color: #007c4d; position: relative; } .extraBlock .span4 {padding: 0; color: #fff !important;} .extraBlock .span4 .contentBox {position: absolute; top: 50%; margin: -140px 0 0 0; left: 51%; width: 30%; height: 280px;} .extraBlock .span4 h2 {color:#fff; text-align: left; font-weight: 500; margin-bottom: 1px; font-size: 34px;} .extraBlock .span4 .button {background-color: #f7d117; color: #333;} @media (min-width : 1270px) and (max-width : 1730px) { .extraBlock .span4 .contentBox {position: absolute; top: 50%; margin: -140px 0 0 0; left: 55%; width: 40%; height: 280px;} } @media (min-width : 1190px) and (max-width : 1269px) { .extraBlock .span4 .contentBox {left: 52%; width: 46%;} } @media (min-width : 1015px) and (max-width : 1189px) { .extraBlock .span4 .contentBox {left: 52%; width: 46%;} } /* School News */ .schoolNews {padding: 60px 0; background-color: #e6e6e6;} .schoolNews h2 {padding-bottom: 0px;} .schoolNews h2 small {margin:0; padding: 10px 0 20px 0 !important;} .schoolNews .span4 {margin: 1% !important; padding:0 !important; width: 31.33333333333333%;} .schoolNews .postInfo {margin:0; padding:0; position: relative; height: 238px; overflow: hidden;} .schoolNews .postInfo img {width: 100%;} .schoolNews .postInfo .postDate {position: absolute; bottom: 0; right:0; margin:0; padding: 14px 24px; background-color: #007c4d; color: #fff; font-size: 16px; display: inline-block; width: auto;} .schoolNews .postBody {margin: 0 0 20px; padding: 15px 20px 40px; border-top: 0px; text-align: left; height:auto; position: relative; background-color: #fff;} .schoolNews .postBody h3 {margin:0; padding:0 0 10px 0; font-size: 20px; font-weight: 400; color: #007c4d; text-align: left; font-family: 'Open Sans', sans-serif; } .schoolNews .postBody h3 a {color: #007c4d;} .schoolNews .postBody p {font-size: 18px; line-height: 1.6; color: #333333;} .continueReading {display: block; margin: 0; text-transform: uppercase; font-size: 18px; color: #007c4d; position: absolute; bottom: 15px; right: 24px;} .continueReading:hover {text-decoration: underline;} .schoolNews .button {background-color: #f7d117; color: #333;} .masonry-layout { display: flex; flex-direction: row; flex-wrap: wrap; height: auto; } .masonry-layout__panel { display: flex; flex: 1 1 auto; width: 33.3%; margin-bottom: 10px; max-width: 420px; } .masonry-layout__panel-content { padding: 10px; border-radius: 10px; } .post-type-archive-school-news .pageTitle {margin: 0 0 0 0;} /* ============================================================================ INTERNAL PAGES ==============================================================================*/ .pageTitle {margin:0 auto 30px; padding: 0; background-size: cover; box-shadow: inset 0 0 0 10000px rgba(0, 0, 0,.4); background-repeat: no-repeat; background-position: center center; background-size: cover; height: 400px; display: flex; justify-content: center; align-items: center; text-align: center;} .pageTitle h1 {margin:-15px auto 0; padding:30px; display: inline-block; width: auto; font-size: 46px; color: #fff; line-height: 1; font-weight: 400; text-align: center; position: relative; z-index: 30;} .pageTitle h1:before {content:''; display: inline-block; margin:0 ; padding:10px; width: 100%; height: 100%; transform: skew(20deg); background: rgba(0, 124, 77,.6); position: absolute; top:0; left:0; z-index: 10;} .pageTitle h1 span {display: inline-block; width: 100%; margin:0; padding:0; position: relative; z-index: 30;} .blog .pageTitle {margin:0;} /*.pageTitle h1 {margin:-15px auto 0; padding:0; display: inline-block; width: auto; font-size: 46px; color: #fff; line-height: 1; font-weight: 400; text-align: center;} .pageTitle h1:before {content:''; display: block; margin:0 0 -75px -30%; padding:0; width: 160%; height: 100px; transform: skew(20deg); background: rgba(0, 124, 77,.6); position: relative; z-index: 10;} .pageTitle h1 span {display: inline-block; width: 100%; margin:0; padding:0; position: relative; z-index: 30;} */ .internalContent {margin:0 auto; padding: 40px 0;} .internalContent h2, .internalContent h3, .internalContent h4, .internalContent h4, .internalContent h6 {text-align: left;} .internalContent h2 {padding: 20px 0 10px; font-size: 32px; line-height: 1.2; font-weight: 400; color: #007c4d;} .internalContent h3, .internalContent h4, .internalContent h5, .internalContent h6 {padding: 10px 0 20px; font-size: 24px; line-height: 1.2; font-weight: 600; color: #333;} .internalContent ul {margin:10px 0; padding: 0;} .internalContent ul li {position: relative; margin:0; padding: 0 0 6px 20px; line-height: 1.2; font-size: 20px;} .internalContent ul li::before {content:''; position: absolute; top: 8px; left: 0; display: block; margin:0; padding:0; width:10px; height: 10px; background-color: #007c4d;} .single_job_listing .meta li::before {display: none !important;} .internalContent p {line-height: 1.4;} .internalContent a:hover {text-decoration: underline;} .page-id-657 ul li::before {display: none;} .gallery-item { display: inline-block; width: 260px !important; padding: 0 !important; text-align: center; vertical-align: top; width: 100%; height: 175px !important; overflow: hidden !important; margin: 10px; border: 0 !important; } .gallery-item img {width: 100% !important; border: 0 !important;} .wooShop ul li::before {display: none;} .related.products {clear: both;} h1.page-title {display: none} .woocommerce div.product .product_title {font-size: 32px !important; text-align: left !important;} .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { color: #333333 !important; background: #f7d117 url('images/buttonArrowGrey.png') no-repeat right center !important; } .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { color: #333333 !important; background: #f7d117 url('images/buttonArrowGrey.png') no-repeat right center !important;} .gform_wrapper .gform_footer input[type="submit"] {color: #fff !important; background: #007c4d url('images/buttonArrow.png') no-repeat right center !important; } .woocommerce-page .pageTitle {margin:0 auto 30px; padding: 0; background-image: url('images/blank.gif') !important; background-color: #f7d117 !important; background-size: cover; box-shadow: inset 0 0 0 10000px rgba(0, 0, 0,0); background-repeat: no-repeat; background-position: center center; background-size: cover; height: 105px; display: flex; justify-content: center; align-items: center; text-align: center;} .woocommerce-page .pageTitle h1 {margin:0 auto; padding:30px; display: block; width: 100%; font-size: 46px; color: #333333; line-height: 1; font-weight: 400; text-align: center; position: relative; z-index: 30;} .woocommerce-page .pageTitle h1:before {display: none;} .woocommerce-page .pageTitle h1 span {font-size: 46px; color: #333333;} /* ============================================================================ SINGLE PROGRAMME PAGES ==============================================================================*/ .post-type-archive-programs .ourPrograms {padding:0 0 80px;} .single-programs .pageTitle h1 {margin-top: 40px;padding: 30px 50px;} .single-programs .pageTitle h1 small {padding-left: 10px; font-weight: 300; font-size: 30px; line-height: 80px;} .single-programs .pageTitle h1 small a {color: #fff;} .single-programs .pageTitle h1 small .separator:last-of-type {display:none;} .single-programs .pageTitle h1.business-law:before {background: rgba(18, 149, 176,.6);} .single-programs .pageTitle h1.healthcare:before {background: rgba(116, 176, 9,.6);} .single-programs .pageTitle h1.technology-energy:before {background: rgba(201, 104, 20,.6);} .single-programs .internalContent .separator:last-of-type {display:none;} .single-programs .internalContent .span7 p {line-height: 1.4;} .single-programs .internalContent.topCTA .span7, .single-programs .internalContent.topCTA .span5 {float: right;} .single-programs .internalContent.topCTA .span7 {margin: 0 !important; padding: 0 28px 0 0 !important; width: 65% !important;} .single-programs .internalContent.topCTA .span5 {margin: 0 !important; padding: 0 !important; width: 35% !important;} .ctaBox {background-color: #f7d117; margin:9px 0 0 10px; padding:30px 40px; text-align: center;} .ctaBox h3 {margin:0 !important; padding:0 10px 10px !important; font-weight: 600; font-size: 24px !important; line-height: 1.2; text-align: center;} .ctaBox p {margin:0; padding:10px 0 40px; font-size: 20px; text-transform: none; text-align: center; line-height: 1.4;} .jobMarket {margin-top: 20px; padding: 30px 0; background-color: #007c4d; text-align: left;} .jobMarket h2, .jobMarket h3 {color:#f7d117; } .jobMarket p {color: #fff;} .jobMarket ul li {color: #fff;} .jobMarket ul li::before {background-color: #f7d117;} .outline {} .outline p {line-height: 1.8;} .pum-theme-1053 .pum-content + .pum-close, .pum-theme-hello-box .pum-content + .pum-close { position: absolute !important; padding: 0px !important; font-size: 32px !important; line-height: 28px !important; border: 1px none #ffffff !important; } .sideform input[type="text"], .sideform input[type="email"], .sideform input[type="url"], .sideform input[type="password"], .sideform input[type="search"], .sideform input[type="tel"], .sideform input[type="number"], .sideform textarea {padding: 8px !important; font-size: 16px !important;} .sideform select {padding: 8px 8px !important; font-size: 16px !important;} .sideform label, .sideform .gfield_label {margin: 0 !important; font-size: 18px !important;} .sideform .gform_wrapper .gform_heading {margin-bottom: -10px !important; padding: 0 20px !important;} .sideform .gform_wrapper .gform_footer {margin: 36px 0 20px !important; text-align: center !important; width: 100% !important;} .button.getInfo {display: none;} .ctaBox p {padding: 10px 0 0 !important;} .sideform .gform_wrapper .gform_footer input.button, .sideform .gform_wrapper .gform_footer input[type="submit"], .sideform .gform_wrapper .gform_page_footer input.button, .sideform .gform_wrapper .gform_page_footer input[type="submit"] {margin: 0 auto !important; background-color: #FC230D; font-size: 18px !important; } /* ============================================================================ FOOTER FORM ==============================================================================*/ .footerForm {padding:60px 0 80px !important;} .tax-prog_cat .footerForm {margin-top: 40px;} .footerForm input, .footerForm select {border: 0 !important;} .footerForm .formBoxFooter p {clear: both; margin: 0; padding: 30px 18% 10px; font-size: 11px; line-height: 18px; font-weight: 400; color: #333; text-align: center;} .footerForm .formBoxFooter p a {display: block; color: #333 !important; font-weight: 600; margin-top: -20px;} .footerForm {background-color: #f7d117;} .footerForm h2, .footerForm h2 small {color: #333333;} .footerForm .gform_wrapper form {text-align: center !important;} .footerForm .gform_wrapper {width: 76% !important; margin:0 auto !important; text-align: left !important;} .footerForm .gform_wrapper ul.gform_fields li.gfield {margin: 0 !important; display: inline-block; width: 50%; padding:6px 20px !important; text-align: left !important;} .footerForm .gform_wrapper .top_label div.ginput_container {margin-top: 4px !important;} .footerForm .gfield_label {color: #333;} .footerForm p {clear: both; margin: 0; padding: 30px 18% 10px; font-size: 11px; line-height: 13px; font-weight: 400; color: #333; text-align: center;} .footerForm p a {display: block; color: #fff !important; font-weight: 600; margin-top: -20px;} .footerForm .button { height: 58px !important;} /*.page-template-page-campus .footerForm .gform_wrapper .gform_footer {height: 59px !important;}*/ .footerForm .gform_wrapper .gform_footer { clear: both !important; display: block !important; width: 100% !important; padding-top: 50px !important;} .footerForm .gform_wrapper ul li#field_1_5.gfield {float: left !important;} /* ============================================================================ FOOTER ==============================================================================*/ footer {margin:0 auto; padding:50px 0 0 0; text-align: left; background-color: #007c4d; width: 100%; max-width: 2560px;} footer h5 {margin:0; padding:0 0 20px 0; color: #fff; font-size: 18px; letter-spacing: 1px; font-weight: 600; text-align: left; text-transform: uppercase; font-family: 'Open Sans', sans-serif;} footer p {margin:0; padding: 0; font-weight: 400; font-size: 18px; line-height: 1.6; color: #fff;} footer a {color: #fff;} footer strong {font-weight: 900;} footer .footer-menu {margin:0 !important; padding:0 !important;} footer .footer-menu ul {margin:0 !important; padding:0 !important;} footer .footer-menu li {margin:0; padding: 0; font-weight: 400; font-size: 18px; line-height: 1.6; color: #fff;} footer .footer-menu li:before {content:''; display: block !important;float: left; margin:12px 14px 0 0; padding:0; width: 0; height: 0; border-top: 5px solid transparent; border-left: 10px solid #f7d117; border-bottom: 5px solid transparent;} footer .span4:nth-of-type(2) {text-align: center;} footer .span4:nth-of-type(3) {padding-left:100px;} footer .social-menu {margin:30px 0 0 0; padding:0; display: inline-block; width: auto;} footer .social-menu li {margin:0 4px 0 0; padding:06px; display: inline-block; width: auto;} footer .social-menu li a {display: block; margin:0 !important; padding:0 !important; color: transparent; font-size: 0; width: 40px; height: 40px !important; overflow: visible; text-align: center;} footer .social-menu li a i {margin:5px auto; padding:0 !important; font-size: 40px; color: #fff;} .copyrights {margin: 60px 0 0 0; padding: 20px 0 30px; background-color: #00623d;} .copyrights .span8, .copyrights .span4 {min-height: 10px !important;} .copyrights p {margin:0; padding:0; color: #fff; font-size: 18px; line-height: 13px; font-weight: 400; } .copyrights .span4 p {} .copyrights a {color: #fff;} .mobile {display: none;} .desktop {display: block;} /* ============================================================================ CSS ANIMATIONS ==============================================================================*/ @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-ms-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } } @-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } } @-ms-keyframes fadeOut { from { opacity:1; } to { opacity:0; } } @keyframes fadeOut { from { opacity:1; } to { opacity:0; } } #fade-in {opacity:0; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s;} :root #fade-in { opacity:1 \0/IE9; } #fade-in.first {-webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; animation-delay: 0.25s;} #fade-in.second {-webkit-animation-delay: 0.5s; -moz-animation-delay:0.5s; animation-delay: 0.5s;} #fade-in.third {-webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s;} .fade-out.first {-webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; animation-delay: 0.25s;} .fade-out.second {-webkit-animation-delay: 0.5s; -moz-animation-delay:0.5s; animation-delay: 0.5s;} .fade-out.third {-webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s;} /** ======================================================================================================================================================================================================= ======================================================================================================================================================================================================= MEDIA QUERIES ======================================================================================================================================================================================================= ======================================================================================================================================================================================================= */ /* ============================================================================ HAMBURGER MENU ==============================================================================*/ #hamburgericonmenuwrapper {display: none; z-index: 10000; position: absolute; font-size: 16px;} #hamburgerui {overflow: hidden; position: fixed; right: 0; top: 0; z-index: 2; width: 100%;} #hamburgerui ul {margin: 0; padding: 10px; list-style-type: none; width: 100%; background: #007c4d; height: 60px;} #hamburgerui li {display: block; margin: 0; padding:0; width: 50%; float: left;} #hamburgerui li a.toggleButton {float: right; display: block; width: 40px; height: 40px; position: relative; text-decoration: none; margin: 0; padding: 10px 20px; color: white; outline: none; -webkit-transition: all 0.5s; transition: all 0.5s;} #hamburgerui li .logoMobile {margin:0; padding:0; float: left; width: 40px; height: 40px; text-indent: -9000px; background-size: auto 100%;} #hamburgerui li:last-of-type a:after{content: 'Menu'; visibility: hidden;} #hamburgerui li a:visited {color: white;} #hamburgerui li a:hover{background: #25408f;} #navtoggler{display: block; position: absolute; top: 50%; left: 50%; font-size: 8px; width: 4em; height: 2.5em; padding: 0; text-indent: -1000px; border: 0.6em solid white; border-width: 0.6em 0; cursor: pointer; -webkit-transform: translate3D(-50%, -50%, 0); transform: translate3D(-50%, -50%, 0); -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;} #navtoggler::before, #navtoggler::after{content: ""; display: block; position: absolute; width: 100%; height: 0.6em; top: 50%; margin-top: -0.3em; left: 0; background: white; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;} /* ###### CSS for Full Screen Menu NAV ###### */ .menu-mobile-menu-container {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #007c4d; padding-top: 80px; z-index: 1; visibility: hidden; overflow: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3D(0, -100%, 0); transform: translate3D(0, -100%, 0); -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s; transition: transform 0.5s, visibility 0s 0.5s;} /* #### Menu Hamburger Icon UI when shrinked CSS ######## */ #hamburgerui.shrink li:nth-last-of-type(n+2) a{opacity: 0; pointer-events: none;} /* #### Menu Opened State CSS ######## */ #hamburgericonmenuwrapper.open .menu-mobile-menu-container{visibility: visible; -webkit-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s;} #hamburgericonmenuwrapper.open #navtoggler{ border-width: 0;} #hamburgericonmenuwrapper.open #navtoggler::before{-webkit-transform: rotate(-45deg); transform: rotate(-45deg); /* rotate line to create "x" */} #hamburgericonmenuwrapper.open #navtoggler::after{-webkit-transform: rotate(45deg); transform: rotate(45deg); /* rotate line to create "x" */} #hamburgericonmenuwrapper.open #hamburgerui li:nth-last-of-type(n+2) a{ opacity: 0; pointer-events: none;} #hamburgericonmenuwrapper.open .menu-mobile-menu-container ul{ opacity: 1; -webkit-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); /* restore UL to original positon */} /* begin media for smartphone */ @media (min-width : 230px) and (max-width : 767px) { body {overflow-x: hidden;} .menu-main-menu-container {display: none;} #hamburgericonmenuwrapper {display: block !important;} .mobile {display: block;} .desktop {display: none;} .menu-main-menu-container, header nav {display: none;} .responsiveMenu {display: block; position: fixed; top: 0; left: 0; width: 100%; z-index: 99999;} #mobileButton {margin:0; padding:0; background-color: #007c4d; height: 60px; width: 100%; padding-right: 70px; text-align: right; border-radius: 0; position: relative;} #mobileButton span{display: block; position: absolute; top: 50%; right: 10px; font-size: 8px; width: 4em; height: 2.5em; padding: 0; text-indent: -1000px; border: 0.6em solid white; border-width: 0.6em 0; cursor: pointer; -webkit-transform: translate3D(-50%, -50%, 0); transform: translate3D(-50%, -50%, 0); -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;} #mobileButton span::before, #navtoggler::after{content: ""; display: block; position: absolute; width: 100%; height: 0.6em; top: 50%; margin-top: -0.3em; left: 0; background: white; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;} #mobileToggle {display: none; position: absolute; top:60px; left:0; width: 100%; background-color: #007c4d;; z-index: 999} #mobileToggle li a {display: block; margin:0; padding: 14px 20px; color:#fff; font-size: 18px; line-height: 1; text-transform: uppercase;} #mobileToggle .sub-menu a {padding: 15px 10px 15px 40px; font-size: 16px;} section {padding:40px 0;} .container {margin: 0; padding: 0 10px;} .row-fluid [class*="span"], .row-fluid [class*="span"]:first-child {margin:0; padding:0; width: 100%;} .row-fluid [class*="span"]:first-child {margin-left: 0;} select {display: block; margin:0 !important; padding: 7px !important; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea {margin:0; padding: 4px !important;} /* ============================================================================ HEADER STYLES ==============================================================================*/ header {padding: 80px 0 20px !important; text-align: center;} header .logo {margin: 0 auto;} header .topMenu {margin:10px auto; float: none;} a.learn-more { width: 100px; height: 30px; } a.learn-more .circle { width: 30px; height: 30px; background-size: 20px auto; border-radius: 15px; } header .topMenu li:nth-of-type(1) a.learn-more {width: 80px;} header .topMenu li:nth-of-type(1) a.learn-more .circle {background-position: 8px 6px;} header .topMenu li:nth-of-type(2) a.learn-more .circle {background-position: 7px -21px;} header .topMenu li:nth-of-type(3) a.learn-more .circle {background-position: 8px -48px;} a.learn-more .button-text { height: 30px; font-size: 12px; } a:hover .circle {width: 100%;} a:hover .button-text {color: #fff;} header .topMenu li:nth-of-type(1) a.learn-more .button-text {padding: 10px 0 0 18px;} header .topMenu li:nth-of-type(2) a.learn-more .button-text {padding: 4px 0 0 24px;} header .topMenu li:nth-of-type(3) a.learn-more .button-text {padding: 4px 0 0 10px;} /* ============================================================================ HOME STYLE ==============================================================================*/ .heroImage {margin: 0; padding:230px 0 0 0; height: auto !important; background-position: 65% top;} .heroImage h1 {margin:0; padding:0; color: #fff; font-size: 40px;} .heroImage p {margin:0; padding:30px 0 20px 0; color: #fff; font-size: 18px; font-weight: 400; line-height: 1.4;} .heroImage ul {margin:25px 0 0 0; padding:0;} .heroImage ul li {margin:0; padding:0 20px 20px 0; display: inline-block; width: 100%;} .heroImage .span10 {width: 100% !important;} .introBoxes .span6 {margin: 10px !important; padding: 20px 20px 80px !important; height: auto; width: 96% !important;} .formSection {padding-top: 100px;} .formSection h2 {font-size: 45px; padding: 0px 0;} .formSection .gform_wrapper { width: 100% !important; } .formSection .gform_wrapper ul.gform_fields li.gfield {margin: 0 !important; display: block; width: 100%; padding:6px 20px !important; text-align: left !important;} .formSection p {clear: both; margin: 0; padding: 17px 0 10px; } .ourGroupPrograms {margin:0; padding:20px 0 50px;} .ourGroupPrograms .span4 {margin:2% 1% !important; padding:0; width: 98% !important; background-repeat: no-repeat; background-position: center center; background-size: cover; color: #fff !important;} .ourGroupPrograms .span4 h3 {margin:0; font-size:18px;} .extraBlock .span4 {padding:20px;} .extraBlock .span4 .contentBox {position: static !important; top: 50%; margin: 0 !important; left: 55%; width: 100% !important; height: auto !important;} .schoolNews .postInfo {height: auto;} .schoolNews .postBody {padding: 30px 24px 60px; height: auto !important;} .masonry-layout__panel { width: 100%; } .pageTitle {margin:0 0 30px 0; padding: 0; background-size: cover; box-shadow: inset 0 0 0 10000px rgba(0, 0, 0,.4); background-repeat: no-repeat; background-position: center center; background-size: cover; height: 400px; display: flex; justify-content: center; align-items: center; text-align: center;} .pageTitle h1 {margin:-15px auto 0; padding:20px 10px; display: block; width: 100%; font-size: 46px; color: #fff; line-height: 1; font-weight: 400; text-align: center; background: rgba(0, 124, 77,.6);} .woocommerce-page .pageTitle h1 {background: transparent !important;} .pageTitle h1:before {display: none;} .single-programs .pageTitle h1{background: rgba(18, 149, 176,.6);} .internalContent h2 {font-size: 36px;} .single-programs .internalContent h2 {font-size: 40px;} .single-programs h2:after {top: 60%;} .single-programs .internalContent.topCTA .span7, .single-programs .internalContent.topCTA .span5 {float: none;} .single-programs .internalContent.topCTA .span7 {margin: 0 !important; padding: 0 28px 0 0 !important; width: 100% !important;} .single-programs .internalContent.topCTA .span5 {margin: 0 !important; padding: 0 !important; width: 100% !important;} .ctaBox {margin:9px auto 60px; padding:50px 20px 30px;} /* ============================================================================ FOOTER FORM ==============================================================================*/ .footerForm h2:after {top: 90%;} .footerForm .formBoxFooter .gform_wrapper {width: 96% !important;} .footerForm .gform_wrapper ul.gform_fields li.gfield {margin: 0 !important; display: block; width: 100%; padding:6px 20px !important; text-align: left !important;} .footerForm .gform_wrapper .top_label div.ginput_container {margin-top: 4px !important;} .footerForm #field_1_6 {float: left;} .footerForm input, .footerForm select {border: 0 !important;} .footerForm .formBoxFooter p {clear: both; margin: 0; padding: 17px 4% 10px;} /* ============================================================================ FOOTER ==============================================================================*/ footer .span4:nth-of-type(2) {text-align: center;} footer .span4:nth-of-type(3) {padding-left:10px;} footer .social-menu {margin:30px 0 60px 0;} .copyrights p {line-height: 1.4; text-align: center;} } /* end media for smartphone */ /* iPads (portrait) ----------- */ @media (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) { body {overflow-x: hidden;} .container {margin: 0; padding: 0 10px;} header .logo { width: 210px; height: 73px;} header .primary-menu li {margin: 0px 0 0 0; padding: 0 10px 0 0;} header .primary-menu li a {font-size: 14px;} header .primary-menu li.menu-item-has-children a::after {margin: 10px 0 0 5px;} header .topMenu {margin: 5px 0 0 0;} a.learn-more {width: 170px;} header .topMenu li:nth-of-type(1) a.learn-more {width: 130px;} header .topMenu li:nth-of-type(1) a.learn-more .button-text {padding: 18px 0 0 53px;} header .topMenu li:nth-of-type(2) a.learn-more .button-text {padding: 10px 0 0 65px;} header .topMenu li:nth-of-type(3) a.learn-more .button-text {padding: 10px 0 0 40px;} /* ============================================================================ HOME STYLE ==============================================================================*/ /* Hero Image */ .heroImage {margin: 0; padding: 35% 0 0; background-repeat: no-repeat; background-position: 55% top;} .heroImage .span6 {width: 100%; float: none;} .introBoxes .span6 {padding: 20px 20px 80px !important;} footer .span4:nth-of-type(3) {padding-left: 50px;} footer .social-menu li {padding: 0 4px;} footer .social-menu li a {width: 25px; height: 25px !important;} footer .social-menu li a i {font-size: 30px;} .footerForm .formBoxFooter .gform_wrapper {width: 96% !important; margin:0 auto !important; text-align: left !important;} .social-menu li {margin:0 10px 0 0; font-size: 32px;} footer p {font-size: 16px; line-height: 1.9;} footer address {font-size: 16px; line-height: 1.4;} .single-programs .internalContent .span7 {padding-right: 50px;} .single-programs .internalContent ul { columns: 1; -webkit-columns: 1; -moz-columns: 1;} .ctaBox {margin:9px 0 0; padding:50px 15px 30px;} .ctaBox h3 {font-size: 38px;} .page-template-page-home-alt .heroImage {margin: 0; padding:40% 0 0 0;} .page-template-page-home-alt .heroImage .span9 {width: 100% !important;} .page-template-page-home-alt .ourGroupPrograms .span3 {margin:0; padding:70px 0 0 0; width: 50%;} .ourGroupPrograms .span3 .gradient { margin: 0; padding: 290px 35px 35px; height: 615px; } .heroImage ul li {padding: 0 0 32px 0;} .homeIntroSection {background-position: 78% top;} .schoolNews .postInfo {height: 151px;} .extraBlock .span6 {width: 100% !important; float: none;} .extraBlock .span4 {padding: 50px 30px 0; color: #fff !important; width: 100% !important;} .extraBlock .span4 .contentBox {position: static !important; margin: 0 !important; width: 100% !important; height: auto !important;} } /* end iPads (portrait) ----------- */ /* iPads (landscape) ----------- */ @media (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { body {overflow-x: hidden;} .container {padding:0 20px;} .schoolNews .postInfo {height: auto;} .extraBlock .span6 {width: 52% !important; margin: 0 !important;} .extraBlock .span4 h2 {font-size: 24px;} .extraBlock .span4 p {font-size: 16px; line-height: 1.2;} .extraBlock .span4 .button {padding: 12px 60px 14px 20px !important;} .extraBlock .span4 .contentBox {margin: -105px 0 0 0; left: 54%; width: 44%;} header .primary-menu li {padding: 0 20px 0 0 !important;} header .primary-menu li a {font-size: 19px !important;} } /* end iPads (landscape) ----------- */