/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 30-Nov-2015, 12:40:28
    Author     : d00121058
*/

@import url(https://fonts.googleapis.com/css?family=Fredericka+the+Great);
@import url(https://fonts.googleapis.com/css?family=Architects+Daughter);

#imageBanner
{
    display: block;
    width: 100%;
    max-height: 350px;
}

#imageBanner img
{
    display:block;
    width: 100%;   
    max-height: 300px;
    border-bottom: solid rgb(100,0,0) thick;
    border-top: solid rgb(100,0,0) thick;

}

main
{
    display: block;
    float: left;
    width: 95%;
    padding: 2.5%;
}

main article img
{
    display: block;
    width: 100%; 
    margin-top: 15px;
    margin-bottom: 15px;
}

main  h2 ,main  h3
{
    font-family: 'Fredericka the Great', cursive;
    color: #7a8114;
}

main article p
{

    font-family: 'Architects Daughter', cursive;
}

.aboutImage
{
    display: block;
    width: 100%;

}

#aboutimage2
{
    display: none;
}

@media only screen and (min-width:641px)and (max-width:910px)
{

    main
    {
        display: block;
        float: left;
        width: 53%;
        padding: 2%;

    }

}


@media only screen and (min-width:911px)
{
    main
    {
        display: block;
        float: left;
        width: 60%;
        margin-left: 2%;
       // background-color: red;
       

    }

    #aboutText1
    {
        width: 65%;
        display: block;
        float: left;
        margin-right: 5%;
    }
    
        #aboutText2
    {
        width: 65%;       
        display: block;
        float: right;
    }

    .aboutImage
    {
        display: block;
        width: 100%;

    }

    #aboutimage1
    {
        width: 30%;
        float: left;
        
       
    }
    #aboutimage1 img
    {
         margin: 0;
    }

    #aboutimage2
    {
        display: block;
        width: 100%;
        clear: both;
        float: left;
        margin-top: 20px;
        margin-bottom: 20px;

    }
    #aboutimage2 img
    {
        display: block;
        float: left;
        width: 30%;
       margin-top: 0;
       margin-bottom:0;
       margin-right:5%;

    }
     #aboutimage2 img:nth-of-type(3)
    {
        
       margin-right:0% !important;

    }
    #aboutimage3
    {
        width: 30%;
        display: block;
        float: left;
    }
    
    #aboutimage3 img
    {
       margin: 0; 
    }


}