@import url('https://fonts.googleapis.com/css?family=Libre+Franklin');
@import "scss/_allvariables"; /*start here and set the default values for all the variables*/
@import "scss/_header";
@import "scss/_pagetypes";
@import "scss/_footer";
@import "scss/_animations";
@import "scss/editorstyles";
@import "scss/_webkitCustoms";
@import "scss/_sliders";
/* Important note: unlike some other Xerte themes this theme has been developed using sass and scss files */
/*You should not edit the .css files directly or change values directly unless you wish to override something*/
/*Use SASS and the file in the scss folder name _allvariables.scss to start any customisation*/

body {
	background:$bodybackgroundcolor;
	color:$mainfontcolour;
	font-family: $mainfonts;
}
.cke_editable {
	background: $defaultpagebackground;
}
/******Fonts******/
.ui-button .ui-button-text {
	font-family: $mainfonts;
	color:$fontcolorfordarkestcolor;
}
.ui-button{
	//default button background unless changed for specific pages
	background:$darkestcolor;
	color:$fontcolorfordarkestcolor;
}
/*Note: these font-sizes will be ignored when responsive text is on*/
p{
	font-size:1.1em;
}
h1 {
	font-size:	1em;
	margin:		0;
}
h2 {
	font-size:	1.2em;
	margin:		5px 0 0 0;
}
h3 {
	font-size:	1.2em;
	margin:		0;
}

#x_mainHolder{
	background:$defaultpagebackground;
	border-top-right-radius:$largeroundedcorners;
	border-bottom-left-radius:$largeroundedcorners;
	border: none !important;/*remove this to restore the default border*/
}
#x_pageDiv {
	padding-top: $defaultpagepadding;
	padding-left: $defaultpagepadding;
	padding-right:$defaultpagepadding;
	padding-bottom:$defaultpagepadding;
}
#infoHolder{
	border-radius:$mediumroundedcorners;
	background: $brightcolor;
}
/*****panel all pages with a panel*****/
.panel {
	border-radius: $mediumroundedcorners;
	background:$brightcolor;
	box-shadow: none;
	border-color: transparent;
}
.panelPage{
	padding:1%;
}
/*****all images*****/
img {
	border-radius: $imageroundedcorners;
}

/******@media changes******/
@media (min-width: 1366px) {
	/*tablet and above css below here*/
	#x_mainHolder{
		max-width:90%;
		max-height:92%;
		margin:auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
	#x_mainHolder{
		max-width:98%;
		max-height:98%;
		margin:auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
}