/*
Theme Name: TeresaMockler
Theme URI: http://html5blank.com
Description: Based on HTML5 Blank WordPress Theme
Version: 1.4.3
Author: Todd Motto (@toddmotto)
Author URI: http://toddmotto.com
Tags: Blank, HTML5, CSS3
License: MIT
License URI: http://opensource.org/licenses/mit-license.php
*/
@import
url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
/*------------------------------------*\
MAIN
\*------------------------------------*/
/* global box-sizing */
*, *:after, *:before {
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
font-size: 62.5%;
}
body {
background: white;
font-size: 16px;
color: black;
font-family: 'Lato', sans-serif;
font-weight: 400;
}
/* clear */
.clear:before, .clear:after {
content: ' ';
display: table;
}
.clear:after {
clear: both;
}
.clear {
*zoom: 1;
}
img {
max-width: 100%;
vertical-align: bottom;
}
a {
color: #444;
text-decoration: none;
}
a:hover {
color: #444;
}
a:focus {
outline: 0;
}
a:hover, a:active {
outline: 0;
}
input:focus {
outline: 0;
border: 1px solid #04A4CC;
}
/*------------------------------------*\
STRUCTURE
\*------------------------------------*/
/* wrapper */
.wrapper {
}
html, body {
width: 100%;
min-width: 320px;
margin: 0px;
padding: 0px;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/*------------------------------------*\
TYPOGRAPHY
\*------------------------------------*/
@font-face {
font-family: 'LatoLatin-Medium';
src: url('fonts/LatoLatin-Medium.eot');
src: url('fonts/LatoLatin-Medium.eot?#iefix')
format('embedded-opentype'), url('fonts/LatoLatin-Medium.woff')
format('woff'), url('fonts/LatoLatin-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LatoLatin-Light';
src: url('fonts/LatoLatin-Light.eot');
src: url('fonts/LatoLatin-Light.eot?#iefix') format('embedded-opentype'),
url('fonts/LatoLatin-Light.woff') format('woff'),
url('fonts/LatoLatin-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LatoLatin-LightItalic';
src: url('fonts/LatoLatin-LightItalic.eot');
src: url('fonts/LatoLatin-LightItalic.eot?#iefix')
format('embedded-opentype'), url('fonts/LatoLatin-LightItalic.woff')
format('woff'), url('fonts/LatoLatin-LightItalic.ttf')
format('truetype');
font-weight: normal;
font-style: normal;
}
/*------------------------------------*\
CUSTOM
\*------------------------------------*/
div {
box-sizing: border-box;
}
body {
background-color: #282828;
}
html, body {
text-align: center;
}
#bodyContent {
display: inline-block;
width: 100%;
}
.mainPanel {
clear: both;
/*max-width: 1400px;*/
width:100%;
margin-left: auto;
margin-right: auto;
background-color: white;
}
.mainDiv {
padding-top: 10px !important;
padding-left: 7%;
padding-right: 7%;
}
.mainTitle {
font-size: 36px !important;
}
#headshotPanel {
width: 100%;
}
.headshot>img {
width: 100%;
height: auto;
}
.transition1 {
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
transition: all 400ms ease-out;
}
.transition2 {
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200 ms ease-out;
transition: all 200ms ease-out;
}
.transition3 {
-webkit-transition: background-color 200ms ease-out;
-moz-transition: background-color200ms ease-out;
-o-transition: background-color200 ms ease-out;
transition: background-color 200ms ease-out;
}
.bwFilter {
filter:
url("data:image/svg+xml;utf8,#grayscale");
filter: gray alpha(opacity = 0);
-webkit-filter: grayscale(100%);
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 1.0s ease-out;
-ms-transition: all 1.0s ease-out;
-o-transition: all 1.0s ease-out;
transition: all 1.0s ease-out;
}
.bwFilter:hover, .removeBwFilter {
filter:
url("data:image/svg+xml;utf8,#grayscale");
filter: none;
-webkit-filter: grayscale(0%);
}
#headshotText {
background-color: #171717;
cursor: pointer;
}
#headshotTextTitle {
color: white;
text-align: center;
font-size: 36px;
position: relative;
top: 100px;
margin-bottom: -100px;
height: 100px;
}
.textButtonWrapper {
position: relative;
text-align: center;
height: 100px;
overflow: hidden;
}
.textButton {
color: white;
text-align: center;
font-size: 14px;
border: 2px white solid;
padding-top: 10px;
padding-bottom: 8px;
z-index: 10;
position: relative;
cursor: pointer;
}
.textButton.inverted {
color: black;
border: 2px black solid;
}
#headshotTextButtonWrapper {
bottom: -230px;
left: 20%;
margin-bottom: -100px;
}
#headshotTextButton {
width: 60%;
}
#educatorPrivateButtonWrapper {
bottom: -120px;
left: 24%;
margin-bottom: -100px;
}
#educatorPrivateButton {
width: 25%;
}
#educatorScheduleButtonWrapper {
bottom: -120px;
left: 51%;
margin-bottom: -100px;
}
#educatorScheduleButton {
width: 25%;
}
.textButton:hover {
background-color: #0058a8;
color: #fff;
}
.moreArrow {
vertical-align: text-bottom;
}
.footer {
clear: both;
/*max-width: 1400px;*/
width:100%;
margin-left: auto;
margin-right: auto;
}
#socialMediaPanel {
}
#socialMediaPanel .fa {
font-size: 36px;
}
.socialMediaItem {
width: 25%;
float: left;
height: 200px;
border-color: #969696;
border-style: solid;
border-width: 1px;
text-align: center;
padding-top: 70px;
font-size: 16px;
cursor: pointer;
opacity: 0.7;
}
.socialMediaItem:hover {
opacity: 1;
color: #0058a8;
}
.socialMediaItem>div {
padding-top: 4px;
}
#socialMediaWrapper {
background-color: white;
width: 100%;
display: table;
/*max-width: 1400px;*/
}
#educatorPanel {
height: 800px;
background-position: right;
background-color: #181918;
display: inline-block;
width: 100%;
color: white;
text-align: center;
}
#educatorPanelTitle {
font-size: 36px;
width: 80%;
margin: 0 auto;
padding-top: 15%;
}
#educatorPanelText {
font-size: 16px;
width: 66%;
margin: 0 auto;
padding-top: 5%;
font-family: LatoLatin-Light;
color: #9c9c9c;
}
#aboutWrapper {
display: table;
width: 100%;
}
#aboutHeadshot, #aboutText {
width: 50%;
max-width: initial;
float: left;
background-color: white;
color: black;
text-align: center;
overflow: hidden;
}
#aboutHeadshot.pull-right {
float: right;
}
#aboutHeadshot>img {
/* min-width: 600px;*/
}
#aboutPanelTitle {
font-size: 36px;
margin-top: 150px;
}
#aboutPanelText {
font-size: 16px;
font-family: LatoLatin-Light;
margin-top: 40px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
#aboutTextButtonWrapper {
width: 300px;
margin: 0 auto;
margin-top: 40px;
}
#topPanel {
height: 800px;
width: 100%;
text-align: center;
position: relative;
}
#topTm {
max-width: 800px;
margin-top: 250px;
}
#topArrowWrapper {
position: absolute;
bottom: 20px;
width: 100%;
}
#menu {
/*max-width: 1400px;*/
margin-left: auto;
margin-right: auto;
}
#menuWrapper {
text-align: center;
width: 100%;
}
section {
width: 100%;
text-align: center;
}
.scaleImage {
max-width: 100%;
height: auto;
width: 100%;
}
#aboutHeadshot>img {
min-width: 600px;
}
/*------------------------------------*\
EMAIL FORM PLUGIN
\*------------------------------------*/
.emailForm {
clear: both;
max-width: 600px;
margin: 0 auto;
background-color: white;
display: inline-block;
text-align: left;
padding-top: 40px;
padding-bottom: 40px;
}
.emailFormWrapper {
border-top: 1px solid black;
}
.emailFormRow {
clear: both;
}
.emailFormRow>div {
padding: 10px;
}
.emailFormLabel {
width: 26%;
float: left;
}
.emailFormField {
float: left;
width: 74%;
}
.wpcf7-submit, .wpcf7-submit:focus {
width: 175px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 35px;
border: 2px solid black;
background-color: white;
float: left;
}
.wpcf7-submit:hover {
background-color: #04A4CC;
-webkit-transition: background-color 200ms ease-out;
-moz-transition: background-color200ms ease-out;
-o-transition: background-color200 ms ease-out;
transition: background-color 200ms ease-out;
}
#emailFormSubmit::before {
content: url(img/moreArrow_inverted.png);
position: relative;
left: -71px;
top: 11px;
pointer-events: none;
}
div.wpcf7-validation-errors, div.wpcf7-mail-sent-ok {
border: none;
clear: both;
}
.emailFormField textarea, .emailFormField input[type=text],
.emailFormField input[type=email] {
width: 100%;
padding: 0px;
margin: 0px;
}
.emailFormWrapper {
display: none;
}
/*------------------------------------*\
YOUTUBE PLUGIN
\*------------------------------------*/
.epyt-gallery-allthumbs.epyt-cols-1 .epyt-gallery-thumb {
width: 25% !important;
float: left;
padding: 0px !important;
margin: 0px !important;
border: 0px !important;
}
.epyt-gallery-allthumbs.epyt-cols-1 .epyt-gallery-thumb:first-of-type {
width: 50% !important;
}
.epyt-gallery-clear, .epyt-gallery-rowbreak, .epyt-pagination {
display: none;
}
.epyt-gallery-img {
filter: gray; /* IE6-9 */
filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
-webkit-filter: grayscale(1);
/* Google Chrome, Safari 6+ & Opera 15+ */
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200 ms ease-out;
transition: all 200ms ease-out;
}
.epyt-gallery-img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
.epyt-play-img, .epyt-gallery-playhover, .epyt-gallery-notitle {
display: none !important;
}
.fluid-width-video-wrapper {
display: none;
}
.epyt-gallery-title {
font-size: 18px !important;
color: black !important;
}
.epyt-gallery {
overflow: hidden;
}
.epyt-gallery-img:after {
content: url(img/play.png);
}
/*------------------------------------*\
QUOTES
\*------------------------------------*/
.quotePanel {
background-color: black;
color: white;
font-family: LatoLatin-LightItalic;
padding-top: 60px;
padding-bottom: 60px;
}
.quote {
font-size: 24px;
width: 80%;
margin: 0 auto;
}
.quotee {
font-size: 16px;
color: #9c9c9c;
padding-top: 20px;
}
/*------------------------------------*\
MEDIA GRID SEARCH
\*------------------------------------*/
.mg_new_filters a, .mgf_search_form input {
border-radius: 0px !important;
font-family: 'LatoLatin-Medium';
}
.mg_new_filters a:hover,
.mg_filter a.mgf.mg_cats_selected,
.mg_filter a.mgf.mg_cats_selected:hover
{
background-color: #04A4CC !important;
color: white !important;
}
.mg_filter a.mgf,
.mg_mobile_filter_dd,
.mgf_search_form input,
.mgf_search_form i:before,
.mgf_search_form:focus input,
.mgf_search_form:focus i:before,
.mg_filter a.mgf:hover,
.mgf_search_form:hover input,
.mgf_search_form:hover i:before
{
color: black !important;
}
.mg_filter a.mgf.mg_cats_selected:hover {
color: white !important;
}
/*------------------------------------*\
RESPONSIVE - STANDARD
\*------------------------------------*/
/* DESKTOP */
@media screen and (min-width:1025px) {
.headshot {
/* max-width:468px; */
float: left;
width: 33.33%;
}
#educatorPanel {
background-image: url(img/educatorBack.jpg);
}
}
/* TABLET */
@media screen and (max-width:1024px) {
.headshot {
/* max-width:512px; */
float: left;
width: 50%;
}
#headshotText {
float: right;
}
#headshotTextTitle {
font-size: 34px;
}
.socialMediaItem {
width: 50%;
}
#educatorPrivateButtonWrapper {
bottom: -120px;
left: 11%;
}
#educatorPrivateButton {
width: 38%;
}
#educatorScheduleButtonWrapper {
bottom: -120px;
left: 51%;
}
#educatorScheduleButton {
width: 38%;
}
#educatorPanelText {
width: 80%;
}
/*#educatorPanel {
background-image: url(img/educatorBack.jpg);
}*/
#aboutHeadshot, #aboutText {
float: none;
width: 100%;
}
#aboutHeadshot {
max-height: 868px;
}
#aboutPanelTitle {
margin-top: 60px;
}
}
/* MOBILE */
@media screen and (max-width:640px) {
#aboutPanelTitle {
margin-top: 90px;
}
.headshot {
max-width: 640px;
float: left;
width: 100%;
}
#headshot2 {
display: none;
}
#headshotTextTitle {
font-size: 48px;
}
.socialMediaItem {
width: 50%;
}
#educatorPrivateButtonWrapper {
bottom: -80px;
left: 17%;
}
#educatorPrivateButton {
width: 66%;
}
#educatorScheduleButtonWrapper {
bottom: -140px;
left: 17%;
}
#educatorScheduleButton {
width: 66%;
}
#educatorPanelText {
width: 90%;
}
#educatorPanelTitle {
font-size: 30px;
}
#educatorPanel {
background-image: url(img/educatorBack_mobile.jpg);
}
#aboutHeadshot>img {
min-width: 1px;
}
#aboutTextButtonWrapper {
width: 200px;
}
#teresa-classes {
padding-top: 40px;
}
}
/*------------------------------------*\
RESPONSIVE - EXCEPTIONS
\*------------------------------------*/
@media screen and (max-width:460px) {
footer {
padding: 15px 20px !important;
}
.copy-rights {
float: none !important;
font-size: 13px;
}
.webdesign-by-arooboo {
float: none !important;
font-size: 13px;
}
.footermenu {
text-align: inherit !important;
}
footer a {
margin: 0 4px !important;
font-size: 13px;
}
#educatorPanelText {
color: #CCCCCC !important;
}
#headshotTextTitle {
font-size: 36px;
}
#educatorPrivateButtonWrapper {
left: 10%;
}
#educatorPrivateButton {
width: 80%;
}
#educatorScheduleButtonWrapper {
left: 10%;
}
#educatorScheduleButton {
width: 80%;
}
}
@media screen and (max-width:360px) {
footer {
padding: 15px 20px !important;
}
.copy-rights {
float: none !important;
}
#headshotTextTitle {
font-size: 30px;
}
#headshotTextButtonWrapper {
bottom: -180px;
}
}
/*------------------------------------*\
MISC
\*------------------------------------*/
::selection {
background: #04A4CC;
color: #FFF;
text-shadow: none;
}
::-webkit-selection {
background: #04A4CC;
color: #FFF;
text-shadow: none;
}
::-moz-selection {
background: #04A4CC;
color: #FFF;
text-shadow: none;
}
/*------------------------------------*\
WORDPRESS CORE
\*------------------------------------*/
.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter, div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float: right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
background: #FFF;
border: 1px solid #F0F0F0;
max-width: 96%;
padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption .wp-caption-text, .gallery-caption {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
.sticky {
}
.bypostauthor {
}
/*------------------------------------*\
PRINT
\*------------------------------------*/
@media print {
* {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a, a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
content: "";
}
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr, img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
}
/**************************** STYLESFOR HEADER AND FOOTER Dated [18 April 2016 - Author - Mayur] ********************************/
.clearfix:before, .clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
header {
position: fixed;
top: 0;
width: 100%;
height: 60px;
padding-top: 40px;
padding-bottom: 10px;
color: #000;
z-index: 100;
}
nav {
float: left;
padding-left: 40px;
}
nav .fa {
font-size: 30px;
color: #000;
text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.5);
}
.logo {
float: right;
text-transform: uppercase;
font-size: 18px;
font-family: 'Lato', sans-serif;
padding-right: 40px;
text-align: center;
font-weight: 900;
line-height: 16px;
letter-spacing: 2px;
z-index: 1000;
position: relative;
text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.logo span {
font-size: 10px;
letter-spacing: 1px;
font-weight: 400;
}
/* Icon 1 */
#nav-icon {
display: block;
position: relative;
z-index: 1000;
}
#nav-icon+ul {
display: none;
background: rgba(0, 0, 0, 0.9);
z-index: 100;
height: 100%;
left: 0;
position: fixed;
padding: 0;
margin: 0;
top: 0px;
width: 100%;
}
.diamond-menu {
/* width: 500px; */
margin: 0 auto;
position: absolute;
left: 40%;
top: 10%;
}
.diamond-menu>a {
transform: rotate(-45deg);
width: 250px;
text-decoration: none;
display: block;
text-transform: uppercase;
position: absolute;
transition: background 0.3s ease-in;
height: 250px;
}
.diamond-menu>a.diamond-1 {
left: 0;
top: 0;
background-image:
url(http://www.teresamockler.com/wp-content/uploads/2016/04/home-bg.png);
}
.diamond-menu>a.diamond-2 {
left: -187px;
top: 186px;
background-image:
url(http://www.teresamockler.com/wp-content/uploads/2016/04/book-class-bg.png);
}
.diamond-menu>a.diamond-3 {
left: 0px;
top: 369px;
background-image:
url(http://www.teresamockler.com/wp-content/uploads/2016/04/about-us-bg.png);
}
.diamond-menu>a.diamond-4 {
left: 187px;
top: 185px;
background-image:
url(http://www.teresamockler.com/wp-content/uploads/2016/04/videos-bg.png);
}
.diamond-menu>a>span {
color: #fff;
font-size: 20px;
transform: rotate(45deg);
display: block;
text-align: center;
position: fixed;
width: 100%;
top: 100px;
}
.diamond-menu>a:hover {
/*background: rgba(252, 71, 52, 0.8);*/
background: rgba(0, 88, 168, 0.8);
}
footer {
background-color: #171717;
padding: 40px 40px;
color: #9c9c9c;
font-weight: 300;
position: relative;
}
footer a {
color: #fff;
margin: 0 8px;
font-weight: 400;
text-decoration: none;
}
footer a:hover {
color: #0058a8;
}
.copy-rights {
position: relative;
float: left;
}
.webdesign-by-arooboo {
position: relative;
float: right;
}
.webdesign-by-arooboo a {
color: #9c9c9c;
font-weight: 300;
}
.webdesign-by-arooboo a:hover {
color: #9c9c9c;
text-decoration: underline;
}
.text-center {
text-align: center;
}
@media screen and (max-width:830px) {
footer {
background-color: #171717;
padding: 20px 40px;
color: #9c9c9c;
font-weight: 300;
position: relative;
}
.copy-rights, .webdesign-by-arooboo {
position: relative;
left: 0;
right: 0;
top: 0;
}
.footer {
text-align: center;
}
}
#teresa-classes {
background-image:
url(http://www.teresamockler.com/wp-content/uploads/2016/04/teresa-teaching-classes.jpg);
background-position: top left;
}
#teresa-classes {
height: 800px;
background-color: #181918;
display: inline-block;
width: 100%;
color: white;
position: relative;
text-align: center;
}
.teresa-classes-title {
font-size: 72px;
width: 80%;
margin: 0 auto;
padding-top: 15%;
text-transform: uppercase;
}
.teresa-learner-carousel {
background-image:
url(http://www.teresamockler.com/wp-content/uploads/2016/04/teresa-learner-says-bg.jpg);
height: 683px;
width: 100%;
}
.teresa-learner-carousel h1 {
font-size: 36px;
margin: 0;
padding-top: 45px;
color: #fff;
text-transform: uppercase;
}
ul.testimonial {
margin: 0;
padding: 0;
}
.testimonial li {
color: #9c9c9c;
font-size: 24px;
line-height: 32px;
font-style: italic;
font-weight: 300;
padding-bottom: 50px;
}
.testimonial li span {
font-size: 16px;
font-style: normal;
}
.testimonial-div .bx-wrapper {
-moz-box-shadow: 0 0 0px #ccc;
-webkit-box-shadow: 0 0 0px #ccc;
box-shadow: 0 0 0px #ccc;
border: none;
background: none;
/*width: 800px;*/
top: 50px;
}
.video-div-box .bx-wrapper {
-moz-box-shadow: 0 0 0px #ccc;
-webkit-box-shadow: 0 0 0px #ccc;
box-shadow: 0 0 0px #ccc;
border: none;
background: none;
width: 100%;
top: 20px;
}
.video-div-box .bx-wrapper img {
width: 100%;
}
.video-div-box .bx-wrapper .bx-controls-direction a {
position: absolute;
/* bottom: 0; */
margin-top: 0;
outline: 0;
width: 63px;
height: 63px;
text-indent: -9999px;
z-index: 9999;
left: 47%;
top: 250px;
}
.video-div-box .bx-wrapper .bx-prev {
background:
url('http://www.teresamockler.com/wp-content/uploads/2016/04/scroll-left-icon.png')
no-repeat 0 0;
}
.video-div-box .bx-wrapper .bx-next {
margin-left: 68px;
background:
url('http://www.teresamockler.com/wp-content/uploads/2016/04/scroll-right-icon.png')
no-repeat 0 0;
}
.video-div-box li .fa {
position: absolute;
z-index: 1000;
font-size: 72px;
top: 54px;
left: 39%;
color: rgba(204, 204, 204, 0.7);
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
transition: all 400ms ease-out;
}
.video-div-box li:hover .fa {
color: rgba(255, 0, 0, 0.7);
}
.video-div-box .bx-wrapper .bx-next:hover, .video-div-box .bx-wrapper .bx-next:focus
{
background-position: 0;
}
.mainPanel>h1>span, .mainPanel>h1 {
margin: 0;
display: none;
}
.static-bg-top{
background-image:url(img/topbg-2.jpg);
background-repeat:no-repeat;
background-position:center;
position:relative;
}
#home-top {
background: url(img/top-new.png) 50% 0 no-repeat fixed;
min-height:800px;
}
#educatorPanel{
background: url(img/educatorBack-new.jpg) 50% 0 no-repeat fixed;
min-height:800px;
}
@media screen and (max-width:768px) {
#home-top {
background: url(img/top-mobile.png);
background-size:cover;
min-height:614px;
}
header {
position: absolute;
}
#nav-icon {
position: fixed;
}
.teresa-learner-carousel {
height: 85%;
background-size: cover;
}
.video-div-box .bx-wrapper .bx-controls-direction a {
left: 40%;
}
.testimonial-div .bx-wrapper {
-moz-box-shadow: 0 0 0px #ccc;
-webkit-box-shadow: 0 0 0px #ccc;
box-shadow: 0 0 0px #ccc;
border: none;
background: none;
width: 80%;
top: 50px;
}
#teresa-classes {
height: 600px;
background-position: right;
background-color: #181918;
display: inline-block;
width: 100%;
color: white;
position: relative;
text-align: center;
}
.teresa-classes-title {
font-size: 36px;
width: 80%;
margin: 0 auto;
padding-top: 15%;
text-transform: uppercase;
}
#teresa-classes {
background-image:
url(http://www.teresamockler.com/wp-content/uploads/2016/04/teresa-teaching-classes-mobile.jpg);
background-size: cover;
}
.diamond-menu>a>span {
color: #fff;
font-size: 15px;
transform: rotate(0deg);
display: block;
text-align: center;
position: relative;
line-height: 60px;
top: 0;
}
.diamond-menu {
/* width: 500px; */
margin: 0 auto;
position: relative;
left: 0;
top: 100px;
width: 100%;
}
.diamond-menu>a {
transform: rotate(0deg);
width: 100%;
display: inline-block;
text-transform: uppercase;
position: relative;
transition: background 0.3s ease-in;
height: 60px;
left: 0 !important;
background-size: cover;
top: 0 !important;
}
}
@media screen and (max-width:600px) {
#home-top {
min-height:400px;
}
}