/* M1 CSS FIXES =================================== ===================================*/ 
 .subjectbox .valign, .pricing .col .heading .valign { -webkit-transform: translateY(-50%); } .mtw_pressicon { margin: 0 40px 40px 40px; } .bannerA { margin-bottom: 100px; } .templateB .banner h1 { font-family: Arvo,Times,"Times New Roman",serif; font-size: 2em; } /* Constants =================================== ===================================*/ .mtw_lightgreyfill { background: #F5F5F5; } /* MTW CUSTOM CSS (should all start with 'mtw_') =================================== ===================================*/ /* The rest of the styles for this are found @ /secure/htmlsnippet.html?id=72 =============================================================================================*/ .teamprofiles { margin-top: 60px; } /* Changed from mtwsubheader to mtw_subheader 21/01/2016 =============================================================================================*/ .mtw_subheader { margin: 30px auto 60px; max-width: 760px; text-align: center; } /* Add a greyscale metro look to the press bar. Used on /about.html =============================================================================================*/ .banner.prefooter-press { margin-bottom: 0; background: #f9f9f9; padding: 40px; } /* CSS for /referrals.html =============================================================================================*/ .referral_list { line-height: 25px; letter-spacing: 0.5px; font-size: 1.125em; color: rgba(0, 0, 0, 0.7); margin-bottom: 10px; } /* CSS for about.html =============================================================================================*/ #mtw_aboutus_banner { margin-bottom: 0px; background-size: 100%; background-repeat: no-repeat; /* background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('https://mytutorweb-my.sharepoint.com/personal/matt_mytutorweb_co_uk/Documents/Shared%20with%20Everyone/mtw.jpg'); */ /* background-color: lightgrey; */ padding: 100px; background-position: center 20%; background-size: cover; } .col.pod { border-radius: 5px; box-shadow: 0px 0px 5px #c4c4c4; padding: 30px; min-height: 220px; margin: 30px; } /* Press pages CSS - /press.html. This could be changed to be page specific CSS =============================================================================================*/ .pressarticle { margin-top: 70px; } .pressarticle section { background: #F2F2F2 none repeat scroll 0 0; padding: 20px; } /* Elements =============================================================================================*/ em { font-style: italic; } body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga" on; } /* Components =================================== ===================================*/ .inner .box { width: 40%; border-radius: 5px; border: 1px solid #FFFFFF; } .inner .box.center { margin: auto; } .inner .box h2 { margin-top: 52px; margin-bottom: color: #000000; } .inner .box p { padding: 0 40px; font-weight: bold; line-height: 25px; } .inner .box a { margin-bottom: 52px; width: 50%; } .inner .box p { padding: 25px; } .inner .box a { width: 80%; } /* Fixes the error.html page */ .inner .box { margin: auto; width: 80%; } /* Meet our tutors (index.html) =======================================================================*/ #meetourtutors { background-image: url("uploads/become-a-tutor_photo.jpg"); background-repeat: no-repeat; background-position: center; background-size: 100%; } #meetourtutors .inner .box { width: 40%; } @media screen and (max-width: 1350px) { #meetourtutors { background-size: auto; } } @media screen and (max-width: 500px) { #meetourtutors { background-size: auto; background-image: none; } } /* Post banner press bar =============================================================================================*/ .banner.mtw_postbannerpress { margin-top: -80px; display: inline-block; position: static; padding-top: 25px; } .mtw_postbannerpress .mtw_pressicon { margin: 0; width: 12%; display: inline-block; margin-top: 40px; padding-bottom: 5px; } .mtw_pressicon.mtw_featured { color: #7B7B7B; font-size: 1.2em; font-weight: bold; position: relative; right: -50px; top: -12px; } .mtw_postbannerpress .mtw_pressicon.mtw_featured h2 { margin: 0; } .mtw_pressicon#goodschool img { height: 70px; width: 70px; } .mtw_postbannerpress .mtw_pressicon img { width: 150px; } .mtw_postbannerpress .inner { padding-top: 65px; } .mtw_postbannerpress .inner.wide { width: 100%; max-width: none; } /********************************************* Other **********************************************/ /* Adds a background color on hover to a tutor tile */ .tutorcard:hover { background: #f5f7fa none repeat scroll 0 0; } /* Creates a simple bordered box around content /404.html and /error.html */ .outline { width: 90%; margin: 40px auto; padding: 20px; border: 1px lightgrey solid; border-radius: 3px; } /* Adds and possitions a background image for the banner at the top of the schools.html page */ .schoolbanner { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('uploads/woman-notebook-working-girl.jpg'); background-position: 50% 71%; background-repeat: no-repeat; background-size: 100% auto; } /* Adds and possitions a background image for the banner at the top of the becoming a tutor.html page */ .becomingatutorbanner { background-image: url('uploads/become-a-tutor_photo.jpg'); background-repeat: no-repeat; background-color: #7D7875; background-position: center top; background-size: 100%; } /* This adds a small horizontal line under the section headers - /schools.html */ .schoolbenefits .col.small .font2::after { border-bottom: 2px solid #ffffff; content: ''; display: block; margin: 20px auto; width: 32px; } /* This groups items together so when the page size is shrinking, the grouped items will remain on the same line */ .hgroup { display: inline-block; } /********* Other END *********/ /********************************************* Responsive CSS **********************************************/ @media screen and (max-width: 1555px) { .mtw_pressicon.mtw_featured { right: 10px; } } @media screen and (max-width: 1460px) { .becomingatutorbanner { background-size: auto; background-position: 20% center; } } @media screen and (min-width: 1400px) { #mtw_aboutus_banner { background-position: ; } } @media screen and (max-width: 1300px) { .mtw_pressicon.mtw_featured { display: block; margin: auto; position: static; padding-top: 40px; } .mtw_postbannerpress .mtw_pressicon { margin-top: 5px; width: 24%; } } @media screen and (max-width: 1200px) { .becomingatutorbanner { background-size: auto } } @media screen and (max-width: 1040px) { #meetourtutors .inner .box { width: 60%; } } @media screen and (max-width: 942px) { .col.pod { width: 80%; } } /* Keeps the background image filling the container area once the width gets too small /schools.html */ @media screen and (max-width: 900px) { .schoolbanner { background-size: 100% 100%; } } /* This was a fix to the responsive design on the schools page /schools.html - There may be a better way to do this */ @media screen and (max-width: 735px) { .schoolbenefits { height: 1000px; } } @media screen and (max-width: 720px) { .hgroup { display: inline-block; width: 100% } .mtw_postbannerpress .mtw_pressicon { width: 39% } } @media screen and (max-width: 600px) { .mtw_postbannerpress .mtw_pressicon { padding-bottom: 5px; width: 46%; } .mtw_postbannerpress { padding: 0px; } } @media screen and (max-width: 500px) { .mtw_postbannerpress .mtw_pressicon { width: 49%; } #meetourtutors .inner .box { height: 100%; width: 100%; border-radius: 0px; } } @media screen and (max-width: 370px) { .mtw_postbannerpress { display: none; } } /* Modalise Plugin =================================== ===================================*/ .mtw_modal { display: none; position: fixed; z-index: 100000; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin: 0; background: url('uploads/circle_close_delete_white.svg'), linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)); background-origin: padding-box, padding-box; background-position: 90% 10%, center center; background-repeat: no-repeat; background-size: 40px auto, 100% auto; cursor: pointer; } .mtw_modal iframe { height: 34vw; width: 60vw; left: 50%; position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); } @media screen and (max-width: 568px) { .mtw_modal iframe { height: 30vw; width: 53.2vw; } } @media screen and (max-width: 450px) { .mtw_modal iframe { height: 45vw; width: 80vw; } } /* Accordion =================================== ===================================*/ .mtw_accordion { width: 90%; margin: 0 auto 40px; auto; padding: 0px; list-style: none; display: inline-block; vertical-align: top; min-width: 300px; } .mtw_accordion .quote { font-size: 1em; font-style: italic; padding: 20px 0 20px 30px; } .mtw_accordion li { border: 1px solid grey; border-radius: 20px; cursor: pointer; margin-bottom: 10px; padding: 14px 10px 10px 8px; transition: background-color 1s ease 0s; } .mtw_accordion .header { display: block; position: static; font-family: "Source Sans Pro",sans-serif; font-weight: 400; margin: 0px; padding: 10px; background: #FFFFFF; font-size: 18px; padding: 0 0 10px 10px; color: #000000; height: auto; } .mtw_accordion .content { padding: 0 0 20px 30px; width: 90%; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 1.0em; cursor: auto; } .mtw_accordion ul li{ cursor: default; } .mtw_accordion li div.content a { color: lightskyblue; text-decoration: underline; cursor: pointer; } .mtw_accordion .header::before { background-image: url("uploads/bullet-arrow-right.svg"); background-repeat: no-repeat; background-size: 19px auto; content: ""; display: inline-block; font-size: 35px; font-weight: bold; margin-right: 8px; padding: 10px; position: relative; top: 4px; transform: rotate(0deg) scale(1, 1); transition: all 0.5s ease 0s; } .mtw_accordion .header.expanded::before { transform-origin: 50% 50%; transform: rotate(90deg) scale(1, 1); } .highlight { transition: background-color 2s ease; background: #F3F3F3; } .manualstars svg { height: 50px }

                .main_headings {
                    margin-bottom: 30px;
                    line-height: 30px;
                    color: #333;
                    padding-right: 8px;
                    font-weight: 600;
                    display: inline-block;
                    float: none;
                    font-size: 22px !important;
                    text-align: center;
                    width: 100%;
                    white-space: normal;
                    margin: 0;
                    padding: 0 8px 0 0;
                    font-family: 'MuseoSlab500Regular',arial,helvetica,sans-serif;
                    box-sizing: border-box;
                }

                .frontend .darkskybluefill {
                    background: #4891e6;
                }

                .frontend .button, .frontend .smallbutton, .frontend .ui-button.button {
                    border-radius: 5px;
                    padding: 14px 20px;
                    margin: 20px 0;
                    display: inline-block;
                    color: #fff;
                    font-weight: 700;
                    font-size: 1.25em;
                    text-align: center;
                    border: none;
                    cursor: pointer;
                }
                .frontend a {
                    color: #4891e6;
                    text-decoration: none;
                }
                .cusombtn {
                    text-rendering: auto;
                    cursor: pointer;
                    color: initial;
                    letter-spacing: normal;
                    word-spacing: normal;
                    text-transform: none;
                    text-indent: 0px;
                    text-shadow: none;
                    display: inline-block;
                    text-align: start;
                    margin: 0;
                    font: 400 13.3333px Arial;
                    font: 100% Arial,Helvetica,sans-serif;
                    vertical-align: middle;
                    background: #55a098;
                    color: #fff;
                    border-color: #fff;
                    padding: 13px 29px;
                    line-height: 17px;
                    font-size: 14px;
                    border-width: 0;
                    border-style: solid;
                    -webkit-border-radius: 2px;
                    font-family: 'Open Sans',Arial,Helvetica,sans-serif;
                    font-weight: 700;
                }


                #_hj-f5b2a1eb-9b07_feedback{display:none;}

                #_hj-f5b2a1eb-9b07_feedback #_hj-f5b2a1eb-9b07_feedback_minimized ._hj-f5b2a1eb-9b07_hotjar_buddy:after {
                    content: "";
                    position: absolute;
                    z-index: 1;
                    top: 17px;
                    left: 25px;
                    background: none !important;
                    width: 6px;
                    height: 1px;
                    -webkit-box-shadow:  none !important;
                    -moz-box-shadow:  none !important;
                    /* box-shadow: 0 2px 18px 18px rgba(0, 0, 0, .48); */
                    -webkit-transition:  none !important;
                    -moz-transition:  none !important;
                    -o-transition:  none !important;
                    -ms-transition:  none !important;
                    transition: all .2s ease-in-out;
                }
                
                	

			.main_headings {
    margin-bottom: 30px;
    line-height: 30px;
    color: #333;
    padding-right: 8px;
    font-weight: 600;
    display: inline-block;
    float: none;
    font-size: 22px !important;
    text-align: center;
    width: 100%;
    white-space: normal;
    margin: 0;
    padding: 0 8px 0 0;
    font-family: 'MuseoSlab500Regular',arial,helvetica,sans-serif;
    box-sizing: border-box;
}

.frontend .darkskybluefill {
    background: #4891e6;

    
}

.frontend .darkskybluefill2 {
    /*background: #4891e6;*/
background:#38973b;

    
}


.frontend .button, .frontend .smallbutton, .frontend .ui-button.button {
    border-radius: 5px;
    padding: 14px 20px;
    margin: 20px 0;
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-size: 1.25em;
    text-align: center;
    border: none;
    cursor: pointer;
}
.frontend a {
    color: #4891e6;
    text-decoration: none;
}
.cusombtn {
    text-rendering: auto;
    cursor: pointer;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0;
    font: 400 13.3333px Arial;
    font: 100% Arial,Helvetica,sans-serif;
    vertical-align: middle;
    background: #55a098;
    color: #fff;
    border-color: #fff;
    padding: 13px 29px;
    line-height: 17px;
    font-size: 14px;
    border-width: 0;
    border-style: solid;
    -webkit-border-radius: 2px;
    font-family: 'Open Sans',Arial,Helvetica,sans-serif;
    font-weight: 700;
}

	
    #_hj-f5b2a1eb-9b07_feedback{display:none;}
    
    #_hj-f5b2a1eb-9b07_feedback #_hj-f5b2a1eb-9b07_feedback_minimized ._hj-f5b2a1eb-9b07_hotjar_buddy:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 17px;
    left: 25px;
    background: none !important;
    width: 6px;
    height: 1px;
    -webkit-box-shadow:  none !important;
    -moz-box-shadow:  none !important;
    /* box-shadow: 0 2px 18px 18px rgba(0, 0, 0, .48); */
    -webkit-transition:  none !important;
    -moz-transition:  none !important;
    -o-transition:  none !important;
    -ms-transition:  none !important;
    transition: all .2s ease-in-out;
}
.button-icon-left{
    margin-right:10px;
}
.button-icon-left1{
    margin-right:16px;
}

.errors_final{ display:none;}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: lightgrey;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: lightgrey;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: lightgrey;
}



.labelsheading {
    font-size: 13px !important;
}