/* INTERNATIONAL CSS*/
/*---- global colours */
.blue-bkg{ background-color:#023e88; }
/* Buttons and links-- -------------*/
.play-btn {
    background-image: url("/img/play-icon.svg");
    margin-bottom: 38px;
}

.print-only{display:none;}

/*=============================================================================================
                                           HEADER
===============================================================================================
*/

/*------- Logo -------------------------- */
.logo {
    /*background-image: url("../img/acc-sin-logo.svg");*/
    margin-bottom: 38px;
}


/*-------- Hiring btn ------------- */
.hiring-btn {
    width: 11em;
    background-image: url('../img/hiring-btn.png');
    background-repeat: no-repeat;
    opacity: .7;
    padding: 16px 7px;
    font-size: .7rem;
    float: left;
}

.hiring-btn:hover{ opacity: 1.0;}


/*-------- MAIN NAV ------------- */
img.video-menu-btn-child {left: 11px;}
/*
.no-de{background-color: #023e88;}
.top-pills {
    padding: 32px 0 0!important;
    height: 59px!important;
}
/*
/*main menu inactive background colour*/
/*    .nav-pills>li>a { background-color: #1f5492;  } */
/*main menu active item background colour*/
/*    .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover, .nav-pills>li>a:hover {  background-color: #000;  border: 0 solid #000;  } */
/*main menu dropdown background*/
/*    .main-menu li ul {background: #000;  } */



/*=============================================================================================
                                                               CAROUSEL - SLIDER
===============================================================================================
*/
.main-banner{display:inherit; position: relative;}
.main-banner-title {
    position: absolute;
    left: 12%;
    top: 22%;
    width: 49%;
}
.main-banner-title h1{
    font-family: 'Montserrat',sans-serif;
    line-height: 1.4;
    letter-spacing: .1rem;
    font-size: 2.5rem;
    font-weight: 200;
    text-transform: none;
}


/*-----------------------------------------------------------------------
-------------------------------------homepage content ------------------------*/

/* --------------WELCOME BOX --------------------------------------------*/
.welcome-box{ text-align:center; min-height:1px; float:left; height:270px; margin-bottom:30px; }
.welcome-box h1{display:block; background-color:#4d4d4d; color:#fff; font-weight:400; height:50px; line-height:50px;  font-size: 1.5rem !important; font-weight:200; margin:0px; font-family:'Montserrat',sans-serif;  }
.welcome-box p{padding:15px; text-align:left; background-color:#efefef; font-size:1rem;  }

/*----- top right box -----*/
.top-box-image-wrap{
    width: 100%;
    display: block;
    height: 280px;
    overflow: hidden;
    text-align: center;}
.top-box-image img{width:100%; height:auto;}

/*------ box headings -----*/
.top-box h2, .bottom-box h2{
    display:block;
    position:absolute;
    bottom:0px;
    height:50px; width:100%;
    line-height: 50px;
    color:#fff;
    font-weight:400;
    margin:0px;
    font-size:1rem;
    z-index:11;
    text-align:center;
    font-family: 'Montserrat', sans-serif;
    font-weight:200;}

/* --------------VISION video BOX --------------------------------------------*/
.play-btn {
    background-image: url("/img/play-icon.svg");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 120;
    top: 37%;
    margin-left: -4%;
    letter-spacing: 35px;
    left: 50%;
    width: 57px;
    height: 57px;
    color: #fff;
    font-size: 51px;
    opacity: .7;
}
.vision-box{position: relative;  height: 255px; overflow: hidden; text-align:center; float:left; min-height:1px; margin-bottom:30px;}
.vision-image-wrap {width: 100%;display: block; height: 280px;overflow: hidden;text-align: center;}
.vision-box img{position:relative; width:100%; height:auto;}
.vision-heading{ display:block; position:absolute; bottom:0px;  height:50px; width:100%; line-height: 50px; color:#fff; font-weight:400; margin:0px; font-size: 1.5rem; z-index:11; text-align:center; font-family: 'Montserrat', sans-serif; font-weight:200;}
.vision-grey-bar{ opacity:0.75; display:block; position:absolute; bottom:0px; left:15px; right:15px; height:50px; background-color:#4d4d4d; color:#fff; font-weight:400; margin:0px; padding:15px; font-size:24px; z-index:10; text-align:center; }

/* ------- calednar box -------- */
.calendar-btn-wrap {background: #4d4d4d; padding: 8px 0px; text-align: center; color: #fff; position: absolute; right: 15px; left: 15px; bottom: 30px;}

.term-dates-box h2 {
    font-size: 21px!important;
    color: #000;
    font-weight: 700;
    margin-top: 0;
}

/*---- bottom boxes ------*/
.bottom-box-pic-wrap {
    display: block;
    overflow: hidden;
}

/*-----------------------------------------------------------------------------
-----------------------------------------------FOOTER------------------*/
.content-pills > li > a {
    background-color:#3e599e;
    border:solid 2px #3e599e;}

.content-pills > li.active > a,
.content-pills > li.active > a:hover,
.content-pills > li.active > a:focus {
    background-color:#3e599e;
    border:solid 2px #3e599e;
}

.content-pills li > a:hover{
    background-color:#3e599e;
    border:solid 2px #3e599e;
}



/*=============================================================================================
                                                             CUSTOM PAGES
===============================================================================================
*/

/* --------modal popup window------*/
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}
.modal {
    top: 11%;
    left: 5%;
    width: 88%;
    height: auto;
    margin:0 auto;
    max-width:880px;
}

.modal img{width:100%;}

.close {
    position: relative;
    right: 0px;
    top: 0px;
    font-size: 25px;
    color: #fff;
    opacity: 1;
}

/*-----------------------------------------------------------------------------------------------
TEACHING TEAM */
.teacher{
    float:left;
    width:100%;
    margin-top:10px;
}

.teacher strong{display:block;}
.teacher-thumb{
    float:left;
    width:150px;
    margin:0 20px 10px 0 ;

}


/* teaching team page - buttons*/

a.acc-teacher-play-button {
    background-color: #3E599E;
    color: #fff !important;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 300;
    text-decoration: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-family: myriad-pro,sans-serif;
    letter-spacing: 1px;
    margin-top: 2px;
    line-height: 1.6rem;
    width: 150px;
    display: block;
    text-align: center;


}
a.acc-teacher-play-button img{ padding-bottom: 2px; background-color: #fff;}

a.acc-teacher-play-button:hover {
    background-color: #00CC00;
    color: #fff !important;
    text-decoration: none;
}


/*=============================================================================================
                                                              MEDIA QUERIES
===============================================================================================
*/

/* ------------------------------------------------------------------------------------
---------------------------------------Large desktop to infinity and beyond...  ------------------------*/
@media (min-width: 1200px) {
    .logo {
        overflow: visible;
        width: 33%;
    }

    .logo-link {
        min-height: 65px;
        min-width: 17em;
        float: left;
    }

    .hiring-btn {
        margin-top: -5px;
    }

    .top-pills {
        padding: 29px 0 0;
        height: 56px;
    }

    .vision-box {
        height: 279px !important;
    }
    /* customised dropdown padding for listed items - to align them with parent text */
    .main-menu .what-we-teach li a {  padding-left: 14%;  }
    .main-menu .learning li a {  padding-left: 20%;  }
    .main-menu .how-much li a {  padding-left: 16%;  }
    .main-menu .we-support-you li a {  padding-left: 16%;  }
    .main-menu .next-steps li a {  padding-left: 17%;  }

    .welcome-box p {  height: 230px;}

    .term-dates-box p {
        max-width: 61%;
        padding-left: 10px;
        margin: 10px auto;
        font-size: .9rem;
    }

    /*homepage buttom boxes*/

}

/* ------------------------------------------------------------------------------------
--------------------------------------- small desktop's (only) ------------------------*/
@media (min-width: 992px) and (max-width: 1199px) {
    .logo {
        max-width: none;
        width: 36%;
    }

    .logo-link {
        min-height: 73px;
        min-width: 100%;
        float: left;
    }

    .phone-number h2 {
        font-size: 3rem;
    }

    .top-pills {
        padding: 29px 0 0;
        height: 56px;
    }
    .nav-pills>li>a {
        position: relative;
        display: block;
        padding: 3px 9px;
    }
    .main-menu .parent-support{width: 17.666667%;}
    .main-menu .who-we-are {  width: 21.3em;  }
    .main-menu .who-we-are li a {  padding-left: 11%;  }
    .main-menu .learning li a {  padding-left: 14%;  }
    .main-menu .enrolment li a {  padding-left: 11%;  }
    .main-menu .parent-support{}
    .term-dates-box p {
        max-width: 69%;
        font-size: .9rem;
    }

    .main-banner-title h1 {
        font-size: 2.1rem;
    }
    .top-box-image-wrap img {
        margin-left: -20%;
    }



}

/*------------------------------------------------------------------------------
---------------------PORTRAIT TABLET and up to small desktop---------------------------------*/
@media (min-width: 768px) and (max-width: 991px) {

    /*---main nav ---*/
    .nav-pills>li>a {
        font-size: 0.83rem;
    }
    .nav>li>a {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 6px;
    }
    .main-menu li ul li a {  font-size: 0.83rem;}

    /*--main banner --*/
    .main-banner-title{position:absolute; left:10%; top:22%; width: 50%}
    .main-banner-title h1{
        font-size: 1.6rem;
    }

    .top-pills {
        padding: 29px 0 0;
        height: 56px;
    }
    /*--------------- HOME PAGE BOXES -----*/
    .welcome-box {height: 321px;}
    .vision-box {height: 321px}
    .top-box-image-wrap {  height: 322px;  }
    .term-dates-box h3 { margin: 0; }
    .term-dates-box p {font-size: 1.0rem; max-width: 100%; padding-left: 20%; }
}

@media only screen and (min-width: 768px) {
    .carousel-caption {
        left: 20%;
        right: 20%;
        padding-bottom: 30px;
    }
}

/* ------------------------------------------------------------------------------------
---------------------------------------Portrait tablet down ------------------------*/
@media (max-width: 767px) {
    .logo-link {
        min-height: 97px;
        min-width: 100%;
        float: left;
    }

    .carousel-caption {
        display: none;
    }

    .main-banner-title h1 {
        font-size: 1.3rem;
    }

    .hiring-btn {
        width: 9em;
        height: 28px;
        line-height: .6rem;
        padding: 19px 12px;
        font-size: .6rem;
        margin-left: 6.4em;
        margin-top: -32px;
    }

    .play-btn {
        top: 47%;
        left: 50%;
        width: 57px;
        height: 57px;
    }

    .top-box-image-wrap img {
        width: 100%;

    }
}

/* ------------------------------------------------------------------------------------
---------------------------------------Landscape phones and down ------------------------*/
@media (max-width: 480px) {
    .phone-slogan {
        margin-top: 6%; margin-top: 6%;
        text-align: center;
        width: 100%; }

    .main-banner-title {
        position: absolute;
        left: 7%;
        top: 28.5%;
        width: 56%;
    }
    .main-banner-title h1 {
        font-size: .8rem;
    }

    .welcome-box {height: auto;}

    .vision-box {height: auto;}
    .vision-image-wrap {  height: auto;}
        .play-btn {
            top: none;
            top: 30%;
        }
    .vision-heading {
        bottom: 0;
        padding-right: 30px;
        font-size: 1rem;}
    .vision-grey-bar {
        bottom: 0;
        left: 15px;
        right: 15px;}
    .goog-map-image-wrap {
        height: auto;}
    .enrolment-image-wrap {
        height: auto;
    }
}