@charset 'UTF-8';

@font-face{font-family:'FontAwesome';src:url('font/fontawesome-webfont.eot?v=4.0.1');src:url('font/fontawesome-webfont.eot?#iefix&v=4.0.1') format('embedded-opentype'),url('font/fontawesome-webfont.woff?v=4.0.1') format('woff'),url('font/fontawesome-webfont.ttf?v=4.0.1') format('truetype'),url('font/fontawesome-webfont.svg?v=4.0.1#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}

/************************************************************************************
smaller than 1136
*************************************************************************************/

@media screen and (max-width: 1136px) {
    img.screenshot {
        margin: 20px 15px;
        height: 200px;
    }
    .pullout {
	width: 90%;
    }
    .pulloutColour {
        width: 100%;
    }
}


/************************************************************************************
smaller than 1024
*************************************************************************************/

@media screen and (max-width: 1024px) {
    .wrapper{
        width:100%;
    }
}


/************************************************************************************
smaller than 980
*************************************************************************************/

@media screen and (max-width: 980px) {
    .global {
        /*background-image: url("../images/towardmay-brand-background.jpg");*/
        background-size: cover;
        /*min-height: 500px;*/
    }
    .phoneLayout {
        width: 35px;
        height: auto;
        display: inline-block;
    }
    .right strong {
        /*display: none;*/
    }
    img.screenshot {
        width: 50%;
        height: auto;
    }
    .pulloutColour {
        width: 70%;
    }
    p.colours {
        min-width: 170px;
        max-width: 35%;
        padding-top: 35%;
    }

/*--------------menu-------------*/
    
	#menu-icon {
		display:inline-block;
	}

	nav ul, nav:active ul { 
        z-index: 1;
		display: none;
		position: absolute;
		padding: 20px;
		background: #fff;
		border: 1px solid #f7f7f7;
		left: 25px;
		top: 45px;
		width: 70%;
		border-radius: 4px 0 4px 4px;
	}

	nav li {
		text-align: left;
		width: 100%;
		padding: 10px 0 10px 5px;
		margin: 0;
	}
    nav ul li a:link,
    nav ul li a:visited,
    nav ul li a:active{
    border-right:none;
    padding:0 ; 
}

	nav:hover ul {

		display: block;

	}
    
    
    
    
    
    
}

/************************************************************************************
smaller than 801
*************************************************************************************/

@media screen and (max-width: 801px) {

    .global {
       /* background-image: url("../images/towardmay-brand-background.jpg");*/
        background-size: cover;
        min-height: 100px;
    }
    .pullout {
        padding-bottom: 0px;
        padding-top: 0px;
    }
    .pulloutColour {
        padding: 0;
    }
    img.screenshot {
        height: auto;
        width: 50%;
    }
    .rectangleHalf {
        width: 50%;
    }
    
.pullout p a:link,
.pullout p a:visited,
.pullout p a:hover,
    .pullout p a:active{
    font-size:75%;
    font-weight:500; 
    }
    
p a:link.button,
p a:visited.button,
p a:hover.button,
p a:active.button{
    font-size:75%;
    }
}


/************************************************************************************
smaller than 650
*************************************************************************************/

@media screen and (max-width: 650px) {
    img.screenshot {
        height: auto;
        width: 65%;
        margin: 20px 0;
    }
    .pulloutColour {
        width: 70%;
        padding: 0;
        margin: 0 auto;
    }
    p.colours {
        min-width: 170px;
        max-width: 50%;
        padding-top: 50%;
    }
    .rectangleHalf {
        width: 60%;
    }
    h1{
    margin: 0 auto; 
    height:50px;
    background-image: url("../images/Churchimages/Church-Angel-1.png");
    background-position:left;
    background-size:12%;
    padding-top:60px;
    padding-left: 70px;
    padding-bottom: 0;
    font-size: 200%
}
}


/************************************************************************************
smaller than 560
*************************************************************************************/

@media screen and (max-width: 480px) {
    .global {
        /*background-image: url("../images/Churchimages/CSCPageheader3.png");*/
        background-size: cover;
        background-position: 0% 120%;
        min-height: 100px;
    }
.phoneLayout {
        width: 35px;
        height: auto;
        display: inline-block;
        margin-right:5px;
    }
h1 {
        font-weight: 200;
        font-size: 200%;
        margin-left: 0;
        margin-top: 0;
    }
img.screenshot {
        height: auto;
        width: 100%;
    }
.Light img.squareThird {
        margin: 30px 0;
}
.pulloutColour {
        width: 80%;
        padding: 0;
        margin: 0 auto;
    }
 p.colours {
        min-width: 170px;
        max-width: 62%;
        padding-top: 62%;
    }
.rectangleHalf {
        width: 70%;
    }
figure{
    padding:0;
    margin: 0;
}
    h1{
    margin: 0 auto; 
    height:50px;
    background-image: url("../images/Churchimages/Church-Angel-1.png");
    background-position:center 15px;
    background-size:15%;
    padding-top:80px;
    padding-left: 0;
    padding-bottom: 0;
    font-size: 150%
}
     
}