@charset "UTF-8";

 * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body,ul,li,p,h1,h2,h4,header,nav,#wrapper,footer,#content,.colLeft,.colRight,#menu {
	padding: 0;
	margin: 0;
	border: 0;
}
body {
	background-color: #fcfbfb;
	font-family: 'Titillium Web', sans-serif;
	font-size: 85%;	
}

/* ==========   HEADER & NAV ==========   */

header {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 84px;
	background-image: url(graphics/vigne.png);
	background-position: 0px 0px;
	background-size: auto 100px;
	background-repeat: no-repeat;
        background-color : #ffffff;
	z-index: 100;	
}


@media screen and (min-width:200px) and (max-width:380px) {
	#logo {width: 88%; top: 40px; height: 52px;	}}

@media screen and (min-width:381px) and (max-width:568px) {
	#logo {width: 70%; top: 38px; height: 52px;	}}
	
@media screen and (min-width:569px) and (max-width:1080px) {
	#logo {width: 50%; top: 40px; height: 35px;	}}	

@media screen and (min-width:1081px) and (max-width:3000px) {
	#logo {width: 40%; top: 20px; height: 52px;}}


#logo {
	position: relative;	
	z-index: 12;
	left: 1.6em;
	height: 52px;
		
	background-image: url(graphics/logo.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 100%;
}
#language {
	position: absolute;
	float: right;
	top: 15px;
	z-index: 13;
	right: 20px;
	height: 0px;
	width: 80px;	
	
}

/* ======     END HEADER & NAV  ======   */


/* ======    BANNER PHOTO ======   */

#banner {
	position: relative;
	top: 80px;
	width: 100%;
	height: 240px;
	background-position: 0px 0px;
	background-size: cover;
	z-index: 10;
}
#pagename {
	position: absolute;
	top: 140px;
	left: 30px;
	width: 80%;
	text-align: left;
	z-index: 11;
}

#pagenameModules {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 11;
	text-align: left;
	
	
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(246,246,246,0.7) 87%, rgba(237,237,237,0.65) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(246,246,246,0.7) 87%,rgba(237,237,237,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(246,246,246,0.7) 87%,rgba(237,237,237,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#a6ededed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
	-moz-box-shadow: 6px 5px 0px #e0dfdf;
	-webkit-box-shadow: 6px 5px 0px #e0dfdf;
	box-shadow: 6px 5px 0px #e0dfdf;
	border-width: 1px;
	border-style: solid;
	border-color: #dbdbdb;
	-webkit-border-top-right-radius: 20px;
	-webkit-border-bottom-right-radius: 20px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	z-index: 8;	
	text-align: left;	
	padding: 0em 3em 0em 2em;
	margin: 1em 0em 2em 0em;
}

#bannergrad {
	position: relative;	
	top: 60px;
	width: 100%;
	height: 60px;
	margin: 0em 0em 1em 0em;
	background-image: url(graphics/gradGrain.gif);
	background-repeat: repeat-x;
	z-index: 18;	
}
#bannergradHome {
	position: relative;	
	top: 60px;
	width: 100%;
	height: 60px;
	margin: 0em 0em 3em 0em;
	background-image: url(graphics/gradGrain.gif);
	background-repeat: repeat-x;
	z-index: 18;	
}
#bannerHome {
	position: relative;
	top: 80px;
	width: 100%;
	margin: 0em 0em 6em 0em;
	height: 260px;
	background-position: 0px 0px;
	background-size: cover;
}

.pagenameHome {
	/*visibility: hidden; height: 0; width: 0;*/
	position: relative;
	top: 30px;
	left: 10px;
	width: 90%;	
}
.blankimagemobile img{height: auto; width: 100%;}
.blankimage img{visibility: hidden; height: 0; width: 0;}
.blankimageHome img{visibility: hidden; height: 0; width: 0;}


/* ======    END BANNER PHOTO  ======   */

/* ======    EDITABLE CONTENT  ======  */

.module1, .module2, .module3, .module4, .module5, .module6, .module7, .module8, .module9 {
	display: inline-block;
	text-align: left;
	width: 100%;
	margin: 2em 0em 0em 0em;
	padding: 0em 0em 0em 0em;
}
.modulePhoto {	
	width: 90%;
	height: 15em;
	margin: 4em 4% 0% 4%;
	display: inline-block;
	background-image: url(graphics/transparentmobile.png);
	background-repeat: no-repeat;
	background-size: cover ;	
	-moz-box-shadow: 10px 6px 0px #e9e9e9;
	-webkit-box-shadow: 10px 6px 0px #e9e9e9;
	box-shadow: 10px 6px 0px #e9e9e9;
	border-width: 1px;
	border-style: solid;
	border-color: #e5e5e5;
	-webkit-border-top-right-radius: 40px;
	-webkit-border-bottom-left-radius: 30px;
	-moz-border-radius-topright: 40px;
	-moz-border-radius-bottomleft: 30px;
	border-top-right-radius: 40px;
	border-bottom-left-radius: 30px;
}
.module {
	display: inline-block;
	text-align: left;
	width: 100%;
	margin: 2em 0em 0em 0em;
	padding: 0;
}
.photoPano {	
	width: 100%;	
	margin: 3em 0em 0em 0em;
	padding: 0em 0em 0em 0em;
	background-image: url(photos/teachermobile.jpg);
	background-repeat: no-repeat;
	background-position: 30% 0%;
	background-size: cover;
} 
.photoText {
	position: relative;
	width: 75%;
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(246,246,246,0.7) 87%, rgba(237,237,237,0.65) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(246,246,246,0.7) 87%,rgba(237,237,237,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(246,246,246,0.7) 87%,rgba(237,237,237,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#a6ededed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	z-index: 8;	
	text-align: left;	
	padding: 1.5em 2em 1.5em 1.5em;
}
.colLeft {	
	text-align: left;
	width: 94%;
	margin: 1em 0em 0em 0em;	
	padding: 1em 0em 1em 1.5em;
}
.colLeftBox {
	text-align: left;
	width: 73%;	
	padding: 2em 3em 5em 1.5em;
}
.colLeftPhoto {
	width: 100%;
	margin: 2em 0% 0% 0%;
	padding: 4em 0em 0em 0em;
	background-image: url(graphics/transparentmobile.png);
	background-repeat: no-repeat;
	background-size: cover;	
} 

.colLeftPhoto1, .colLeftPhoto2, .colLeftPhoto3, .colLeftPhoto4, .colLeftPhoto5 {
	width: 100%;
	margin: 2em 0% 0% 0%;
	padding: 4em 0em 0em 0em;
	background-image: url(graphics/transparentmobile.png);
	background-repeat: no-repeat;
	background-size: 100%;	
}


.colLeftBorder {	
	display: inline-block;
	text-align: left;
	width: 88%;	
	margin: 2.5em 0.5em 0em 1.5em;
	padding: 1em 0.5em 1em 1.5em;
	background-color: #ffffff;
	background-image: url(graphics/transparent-png.png);
		-moz-box-shadow: 6px 5px 0px #e0dfdf;
	-webkit-box-shadow: 6px 5px 0px #e0dfdf;
	box-shadow: 6px 5px 0px #e0dfdf;
	border-width: 1px;
	border-style: solid;
	border-color: #dfdfdf;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.colRight {	
	
	text-align: left;
	width: 94%;
	margin: 0em 0em 0em 0em;
	padding: 1em 1em 1em 1.5em;
}
.colRightBorder {	
	display: inline-block;
	text-align: left;
	width: 88%;	
	margin: 2.5em 0.5em 2em 1.5em;
	padding: 1em 0.5em 1em 1.5em;
	background-color: #ffffff;
	background-image: url(graphics/transparent-png.png);
		-moz-box-shadow: 6px 5px 0px #e0dfdf;
	-webkit-box-shadow: 6px 5px 0px #e0dfdf;
	box-shadow: 6px 5px 0px #e0dfdf;
	border-width: 1px;
	border-style: solid;
	border-color: #dfdfdf;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

/* ====== 3 COLUMN & 4 COLUMN  BOXES  ======   */

.colLeft3, .colLeft332{
	display: inline-block;
	text-align: left;
	width: 100%;
	padding: 2em 1em 1em 2em;
}
.colMiddle3, .colMiddle332  {	
	display: inline-block;
	text-align: left;
	width: 100%;
	padding: 1em 1em 0em 2em;
}
.colRight3, .colRight332 {
	display: inline-block;
	text-align: left;
	width: 100%;
		
	padding: 1em 0em 0em 2em;
}
.colLeft4, .colLeft252 {
	float: left;
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 100%;
	padding: 0em 1em 0em 1em; 
}
.colMiddle4, .colMiddle252 {
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 100%;	
	padding: 0em 1em 0em 1em; 
}
.colRight4, .colRight252 {
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 100%;	
	padding: 0em 1em 0em 1em; 
}
.colVeryRight4, .colVeryRight252 {
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 100%;	
	padding: 0em 1em 0em 1em; 
}

/* ====== END 3 COLUMN & 4 COLUMN  BOXES  ======   */

/* ======    END  EDITABLE CONTENT  ======   */

/* ======    TEXT STYLES  ======   */
p {
	margin: 0em 0em 0em 0em;
	padding: 0em 0em 0em 0em;
	font-size: 1.4em;
	line-height: 1.4em;
	font-weight: 300;
	color: #767778;
}
footer p{
	color: #BBBBBB;
	font-size: 1.4em;
}
h1 {
	font-style: normal;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 300;
	font-size: 2.2em;
	color: #5e7e11;
	padding:0em 0em 0.2em 0em;
	line-height: 1em;
}
h2 {
	font-weight: 400;
	font-family: 'Titillium Web', sans-serif;
	text-shadow: 1px 0px #FFFFFF;
	font-size: 2.3em;
	color: #a91a03;
	text-transform: none;
	padding: 0em 0em 0.2em 0em;
	line-height: 1.2em;
}
h3 {
	font-weight: 200;
	/*text-shadow: -1px 0px #666;*/
	font-size: 2em;
	color: #5e7e11;
	text-transform: none;
	margin: 1em 0em 0.3em 0em;
	line-height: 1.2em;
}

h4 {font-weight: 200;
	/*text-shadow: -1px 0px #666;*/
	font-size: 2em;
	text-transform: none;
	margin: 1em 0em 0.3em 0em;
	line-height: 1.2em;
	color: #5e7e11;
	padding: 4% 0% 4% 0%;
}
h5 {
	font-weight: normal;
	font-family: 'Titillium Web', sans-serif;	
	font-size: 1.0em;
	color: #bbb;	
	margin: 0.4em 0em 0.3em 0em;
}
h5 a {
	text-decoration: none;
	font-family: 'Titillium Web', sans-serif;
	color: #bbb;
	margin: 0.4em 0em 0.3em 0em;
}
h6 {font-size: 1.5em;
	line-height: 1.4em;
	font-weight: 300;
	color: #767778;
	text-decoration: none;
	margin: 0.4em 0em 0.3em 0em;
}
h6 a {
	text-decoration: none;
	color: #767778;
}
a {
	font-size: 1.2m;
	font-weight: 400;
	text-decoration: none;
	color: #b10101;	
 }
footer a {
	text-decoration: none;
	color: #ce3d3d;	
 }
.align-right { float:right; margin: 0 0 5px 5px; }
.align-left { float:left; margin: 0em 1em 0em 0em; }
.top3em { margin: 3em 0em 0em 0em; }

 ===== COLOURED HEADLINES  ======   
.darkGrey {color: #4b4a4a;}
.white {color: #ffffff;}
.red {color: #d34758;}
.yellow {color: #edb800;}
.orange {color: #fd9f26;}
.cyan {color: #53E4E4;}
.purple {color: #d259da;}
.green {color: #5e7e11;}
.greenbright {color: #93DC27;}

 ===   END COLOURED HEADLINES  === 

/* ======    END TEXT STYLES  ======   */

/* ======    TOP MENU LINK  ======   
HTML CODE MUST LINK TO THIS SAME PAGE*/

.menubottom {
	display: inline-block;
	margin: 3em 0em 0em 0em;
}

/* ======    TOP MENU LINK  ======   */

/* ======    FOOTER  ======   */

footer {	
	width: 100%;
	height: auto;
	margin: 0em 0em 0em 0em;
	padding: 0em 0em 0em 0em;
	background-image: url(graphics/noise2.gif);
	background-size: auto 190px;
	background-repeat: repeat;	
}
.colLeftFooter{
	text-align: left;
	width: 100%;
	padding: 5em 2em 5em 3em;
	margin: 0% 0% 0% 0%;	
}
.colRightFooter{
	text-align: left;
	width: 100%;
	padding: 0em 2em 5em 3em;
	margin: 0% 0% 0% 0%;}
	
/* ======    END FOOTER  ======   */