/* shared */

body
{
    font-family: sans-serif;
    font-size: 14pt;
}

div
{
    /*border:1px solid silver;*/
    display:block
}

/*************************************************************/
/* header items                                              */
/* > contains all of the stuff before card index             */
/* > facebook, site header, site toolbar and card index      */
/*************************************************************/

div.header
{
    padding-top:10px;
    padding-left:50px;
    padding-right:50px;
    padding-bottom: 10px;
}

@media only screen and (max-width: 768px) 
{
    div.header
    {
        padding:5px;
    }
}

/******************/
/* links */
/******************/

div.header div.top-bar
{
    position: absolute;
    top:5px;
    right:10px;
    text-align: right;
}

div.header div.links
{
    display: inline;
    right:5px;
    top:5px;
    vertical-align:top;
}

div.header span.text
{
    display: inline;
    top:10px;
    display:block;
    font-weight: bold;
    color:silver;
    font-size: 20px;  
}

div.header div.links div.link
{
    display:inline-block;
    height:28px;
    line-height: 30px;
    vertical-align: middle
}

div.header div.link a:hover
{
    text-decoration: none
}

div.header div.link a img
{
    display: inline-block;
    height:28px;
    vertical-align: top
}

div.header div.link a label
{
    font-size: 16px;
    vertical-align: top;
    color:silver;
    font-weight: bold;
    margin-left:5px;
}
div.header div.link a label:hover
{
    color:gray;
    text-decoration: none
}

div.header div.link a span.mail
{ 
    display:inline;
    font-size: 28px;
    padding:0px;
    margin-left:5px;
}


@media only screen and (max-width: 768px) 
{
    div.header div.link
    {
        font-size: 20px; 
    }
    div.header span.text
    {
        font-size: 18px; 
        margin-left:-122px;
        top:4px;
    }    
    div.header div.link a label
    {
    }    
}

@media only screen and (max-width: 500px) 
{
    div.header div.link
    {
        font-size: 15px; 
    }
    
    div.header span.text
    {
        font-size: 14px; 
        margin-left:-122px;
        margin-right:55px;
    }
    div.header div.link a label
    {
        display:none; 
    }
    div.header div.top-bar
    {
    }
    div.header div.links
    {
        position: absolute;
        top:0px;
        right:0px;
    }

    div.header div.link a img
    {
        height:20px;
    }
    div.header div.link a span.mail
    { 
        font-size: 20px;
    }    
}

/***************/
/* site banner */
/***************/
div.header
{
    max-width: 1130px;
    margin: auto
}

div.header div.site-banner
{
    margin-bottom: 1em;
    width: 100%;
    display: table;
}

div.header div.site-banner div.two-cols
{
    display: table-row;
    width: 100%
}

/* site logo */
div.header div.site-banner div.two-cols div.site-logo
{
    text-align: left;
    display: table-cell;
    width:50%;
}
div.header div.site-banner div.two-cols div.site-logo img
{
    width:100%;
}

/* four kids */
div.header div.site-banner div.two-cols div.four-kids
{
    text-align: center;
    display: table-cell;
    width:50%;
    vertical-align: bottom;
}

div.header div.site-banner div.two-cols div.four-kids img
{
    width:90%;
}


/**************/
/* about text */
/**************/

/* ipad and iphone */
div.header div.about
{
    display: none
}

@media only screen and (min-width: 768px) 
{
    /* desktop */
    div.header div.about
    {
        display:inline
    }

    div.header div.about
    {
        font-family: "Arial";
        margin:20px
    }

    div.header div.about p
    {
        font-size: 14pt;
        border:1px solid silver;
        padding:20px;
        padding-top:10px;
        border-radius: 10px;
        margin:0px;
        margin-bottom:10px;
    }

    div.header div.about p strong
    {
        font-size: 18pt;
        color:orange
    }
}

@media only screen and (max-width: 992px) 
{
    body 
    {
        background-color:white
    }
}

@media only screen and (max-width: 768px) 
{
    /*mobiles*/
    body 
    {
        background-color:white
    }
}

@media only screen and (orientation: landscape) 
{

}

/****************/
/* site toolbar */
/****************/

/*
<div class="site-toolbar">
    <ul class="menu">
        <li>Testimonials</li>
        <li>Contact</li>
    </ul>
</div>
*/

div.header div.site-toolbar
{
    display:none;
    background-color: rgb(0,161,75);
    height:2em;
}

div.header div.site-toolbar ul.menu
{
    list-style: none;
    text-align: right
}
div.header div.site-toolbar ul.menu li
{
    display: inline;
    color:white;
    margin-right:15px;
    line-height: 2em;
    letter-spacing: 2px
    
}

/***************/
/* card index  */
/***************/

@media only screen and (max-width: 768px) 
{
    div.header div.card-index
    {
        display:none
    }
}


div.header div.card-index div.row div div.Image
{
    margin:5px;
    width:100%;
    padding-top:100%;
    background-size:cover;
    background-repeat:no-repeat;
    background-position: center;
}

div.header div.card-index div.row div div.Image.English
{
    background-image: url('/png/english_02.png');
}
div.header div.card-index div.Image.Maths
{
    background-image: url('/png/maths_3.png');
}
div.header div.card-index div.Image.Individual
{
    background-image: url('/png/individual.png');
}
div.header div.card-index div.Image.Groups
{
    background-image: url('/png/groups.png');
}
                    
div.header div.card-index h1
{
    color:silver;
    font-size: 16pt;
    text-align: center;
    margin: 0px;
}

div.header div.card-index row div
{
    overflow: hidden
}

/***********************/
/* end of header items */
/***********************/


/* gap between header and card index */

div.leading
{
    background-color:white;
    height:0px
}


/*********/
/* cards */
/*********/

div.cards
{
    width:100%;
    max-width: 1130px;
    margin: auto;
    
}

div.card
{
    clear: both;
    padding:20px
}

div.summary
{
}

div.card h1
{
    text-align: let;
    font-size: 16pt;
    display: inline-block;
    margin:0px;
    float:left
}

div.card p.summary
{
    font-size: 14pt;
    color: gray;
}


div.card p.detail
{
    display:none;
    text-align: left;
    color: gray;
}

div.card p.detail.show
{
    display:inline-block
}


div.card p.summary span.read-more
{
    display: inline;
    color:orange;
    cursor: default;
    margin-left: 1px;
    float:right
}
div.card p.summary span.read-more.hide
{
    display:none
}
div.card p.summary span.read-more:hover
{
   text-decoration: underline
}

div.card.leftalign img
{
    float:right;
    padding-left:10px;
}

div.card.rightalign img
{
    float:left;
    padding-right:10px;
}

div.card div.row div.image
{
    text-align: center;
    height:200px;
}

@media only screen and (max-width: 500px) 
{
    div.card.rightalign img
    {
        width: 50%;         
    }
    div.card.leftalign img
    {
        width: 50%;  
    }
}
/****************/
/* Testimonials */
/****************/

div.testimonials
{
    clear: both;
    text-align: left;
    margin-top:20px;
}

div.testimonials h1
{
    margin-left:10px;
    padding-top:20px;
}

div.testimonials img
{
    width:100%;
}
/**********/
/* footer */
/**********/
div.footer
{
    position:relative;
    height:120px;
    background-color: black;
    text-align: center;
}

div.footer img.left
{
    width: 64px;
    float:left;
    margin: 10px;
}

div.footer img.right
{
    width: 64px;
    float:right;
    margin:10px
}

div.footer div.text
{
    display: block;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
}

div.footer  div.text p
{
    font-size: 12pt;
    color:white;
    padding:0px;
    margin:0px;
}