/******* CONTROLS THE SCREEN SIZES *******/
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

  html,
  body{
    width:100%;
	overflow-x:hidden;
  }
}

/******* HIDES THE OU COPYRIGHT *******/
a#de {
	color: #fff;
	display: hidden;
	z-index: -99999;
  pointer-events: none;
}



/******* CONTRLS THE YELLOW AREA ON TOP OF THE PAGE NON-MENU *******/
.navbar-default {
	border: none;
	width: 100%;
	font: 15px/1em 'Roboto', 'Lato', 'Open Sans', sans-serif;
	font-weight: 300;
	display: block;
	background-color: #fec938;
	z-index: 9999;
	color: #fff;
	border-bottom: #fec938 10px solid;
}

#featured {
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: normal;
	line-height: 16px;
}

/******* CONTROLS THE HEADER POSITIONING BELOW THE BRAND YELLOW AREA *******/
header {
	background-color: #fec938;
	overflow: hidden;
	background-size: cover;
	line-height: normal;
	max-height: 250px;
	font-family: 'Lato', sans-serif;
	border-bottom: #fff 20px solid;
}

header h1{
	font-family: 'Lato', sans-serif;
	font-weight: 900;
	letter-spacing: 20px;
	color: #fff;
	font-size: 100px;
	text-align: center;
	vertical-align: baseline;
	padding-top: 30px;
}

/* BRINGS BE BOLD DOWN */
header #title {
	padding-top: 30px;
}

/******* CONTROLS THE SUBTITLE BELOW BEBOLD TITLE *******/
#subtitle {
	background-color: #fff;
	text-align: center;
	font-family: 'Source Sans Pro', sans-serif;
	border-bottom: #fff 20px solid;

}

#slogan h4 {
	font-size: 20px;
	letter-spacing: 1.5px;
	font-weight: 300;

}

/******* CONTROLS THE NAVIGATION BRAND FONT ON TOP OF THE PAGE *******/
.navbar-brand {
	font-family: 'Roboto', 'Lato', 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 20px;
}

/******* PLACES NAVIGATION TO THE RIGHT OF THE PAGE *******/
.navbar-right {
		padding: 0 25px 0 0;
}

/********** COVER IMAGE OF MAIN PAGE *********/

.bgimage_cover {
	background-image: url('../images/cover.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	padding-bottom: -10px;
	height: 900px;
	width:100%;
    position: relative;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

}


/**********************************************/
/**********************************************/
/*********************** MAIN PAGES BEGIN HERE ***********************/
/**********************************************/
/**********************************************/


/******* PLACES A WHITE SPACE AFTER MENU AREA IN PAGES *******/
.white {
	background-color: #fff;
	overflow: hidden;
	background-size: cover;
	line-height: normal;
	min-height: 100px;
	font-family: 'Lato', sans-serif;
	border-bottom: #fff 60px solid;

}

/******* CONTROLS THE BODY OF THE SITE *******/
body {
	font: 16px/1.5em 'Roboto', 'Lato', 'Open Sans', sans-serif;
	background-color: #fff;
	margin: 0;
	padding:0;
  line-height: 25px;
}

/*** TITLE OF ALL PAGES ***/
.title {
	font-size: 50px;
	padding-top: 60px;
  text-align: left;
	font-weight: 800;
	padding-bottom: 20px;
}

.title span {
	font-size: 50px;
	padding-top: 60px;
  text-align: left;
	font-weight: 800;
	padding-bottom: 20px;
}

/*** TITLE IN THE OPPOSITE SIDE OF ALL PAGES ***/
.title-inverse {
	font-size: 50px;
	padding-top: 60px;
	text-align: right;
	font-weight: 800;
	padding-bottom: 20px;
}

.title-inverse span {
	font-size: 50px;
	padding-top: 60px;
	text-align: right;
	font-weight: 800;
	padding-bottom: 20px;
}

/******* TEXT ON THE LEFT BELOW THE TITLE OF THE PAGE *******/
cite p {
	font-size: 18px;
	padding: 10px 30% 10px 0px;
	text-align: left;
  font-style: normal;
}

/******* TEXT ON THE RIGHT BELOW THE TITLE OF THE PAGE *******/
cite-inverse p {
	font-size: 18px;
	padding: 10px 0 10px 30%;
	text-align: right;
  font-style: normal;
}

/******* CAPTIONS FOR UNDER PICTURES *******/
.caption_r {
	text-align: right;
	padding-right: 25px;
	font-size: 15px;
  line-height: normal;
  font-style:italic;
}

.caption_l {
	text-align: left;
	padding-left: 25px;
	font-size: 15px;
  line-height: normal;
  font-style:italic;
}

/******* FOR MEDIA SQUARE IMAGES *******/
.media img {
	width: 150px;
}

.media p {
  font-size: 14px;
  line-height: normal;
}

.media h3 {
	font-weight: bold;
	font-size: 18px;
}

.media a:hover {
	text-decoration: none;
}

.caption a {
	text-decoration: none;
}

.caption h4 {
	font-weight: 900;
}

/******* CONTROLS THE QUOTES *******/
.blockquote-reverse {
	font-style: italic;
	font-size: 20px;
	padding: 0px 15px 0px 15px;
	margin: 50px 5% 50px 35%;
  line-height: normal;
  font-weight: 600;
}

.blockquote_l {
	font-style: italic;
	font-size: 20px;
	padding: 0px 15px 0px 15px;
	margin: 50px 35% 50px 5%;
  line-height: normal;
  font-weight: 600;
}

/******* CREATES A DARK BACKGROUND ON AREA *******/
.dark {
	padding: 0px 15px 5px 20px;
	background: #35424a;
	color: #fff;
}

/******* CREATES BLANK AREA ABOVE AND BELOW *******/
.blank {
padding: 25px 0 25px 0;
}


/******* FIRST LETTER IS CAPITALIZED *******/
.firstcharacter {
  color: #903;
  float: left;
  font-family: 'Lato', sans-serif;
  font-size: 77px;
  line-height: 60px;
  padding-top: 4px;
  padding-bottom: 5px;
  padding-right: 8px;
  padding-left: 3px;
	font-weight: 900;

}

/******* CREATES AN ICON TO RETURN TO TOP OF THE PAGE *******/
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 50px;
    right: 20px;
    display:none;
		z-index: 9999;
		opacity: 0.85;
}

/******* THE FOOTER OF ALL PAGES BEGIN HERE *******/
footer {
	background-color: #21252b;
	line-height: normal;
	display: block;
	font-size: 13px;
	color: #fff;
	min-height: 350px;
	font-family: 'Lato', sans-serif;
	border-top: #fec938 10px solid;

}

footer a {
	color: #fff;

}

footer a:visited {
	color: #fff;

}

footer a:hover {
	color: #ffd200;
	text-decoration: none;

}

/******************************************************************************/
@media only screen and (min-width: 769px) and (max-width: 1024px) {

/********** COVER IMAGE OF MAIN PAGE @ THIS SCREEN SIZE *********/
	.bgimage_cover {
	background-image: url('../images/cover_large.jpg');
	background-size: 105%;
	height: 600px;
	}
}


/******************************************************************************/
@media only screen and (max-width: 768px) {

/********** COVER IMAGE OF MAIN PAGE @ THIS SCREEN SIZE *********/
	.bgimage_cover {
	background-image: url('../images/cover_mobile.jpg');
	background-size: 100%;
	height: 440px;

	}

/******* FOR MEDIA SQUARE IMAGES *******/
.media img {
	width: 150px;
}

/*** TITLE OF ALL PAGES ***/
	.title {
		font-size: 38px;
		padding-top: 40px;
		padding-bottom: 25px;
	}

	.title span {
		font-size: 38px;
		padding-top: 40px;
		padding-bottom: 25px;
	}

/*** TITLE IN THE OPPOSITE SIDE OF ALL PAGES ***/
	.title-inverse {
		font-size: 38px;
		padding-top: 40px;
		padding-bottom: 25px;
	}

	.title-inverse span {
		font-size: 38px;
		padding-top: 40px;
		padding-bottom: 25px;
	}

/******* TEXT ON THE LEFT BELOW THE TITLE OF THE PAGE *******/
cite p {
	font-size: 16px;
	padding: 0px 5% 30px 0px;
	text-align: left;
}

/******* TEXT ON THE RIGHT BELOW THE TITLE OF THE PAGE *******/
cite-inverse p {
	font-size: 16px;
	padding: 0px 0 30px 5%;
	text-align: right;
}

/******* CAPTIONS FOR UNDER PICTURES *******/
.caption_r {
	text-align: right;
	padding-right: 15px;
	font-size: 15px;
	font-style: italic;

}

.caption_l {
	text-align: left;
	padding-left: 15px;
	font-size: 15px;
	font-style: italic;

}

/******* CONTROLS THE QUOTES *******/
.blockquote-reverse {
	font-style: italic;
	font-size: 18px;
	padding: 0px 20px 0px 20px;
	margin: 20px 5% 35px 25%;
  line-height: normal;
  font-weight: 600;
}

.blockquote_l {
	font-style: italic;
	font-size: 18px;
	padding: 0px 20px 0px 20px;
	margin: 20px 25% 35px 5%;
  line-height: normal;
  font-weight: 600;
}

}

/******************************************************************************/
@media only screen and (min-width: 376px) and (max-width: 425px) {

/********** COVER IMAGE OF MAIN PAGE @ THIS SCREEN SIZE *********/
.bgimage_cover {
	background-image: url('../images/cover_mobile.jpg');
	background-size: 100%;
	height: 240px;
  }

/* be size */
header #title span {
	font-size: 80px;
	letter-spacing: 5px;
}

/* BOLD size */
header h1 {
	font-size: 80px;
	letter-spacing: 5px;
	padding-top: 45px;
}

/******* FOR MEDIA SQUARE IMAGES *******/
.media img {
	width: 125px;
}

/*** TITLE ON THE LEFT OF ALL PAGES ***/
.title {
	font-size: 34px;
	padding-top: 40px;
	padding-bottom: 15px;
}

.title span {
	font-size: 34px;
	padding-top: 40px;
	padding-bottom: 15px;
}

/*** TITLE ON THE RIGHT OF ALL PAGES ***/
.title-inverse {
	font-size: 34px;
	padding-top: 40px;
	padding-bottom: 15px;
}

.title-inverse span {
	font-size: 34px;
	padding-top: 40px;
	padding-bottom: 15px;
}

/******* TEXT ON THE LEFT BELOW THE TITLE OF THE PAGE *******/
cite p {
	font-size: 16px;
	padding: 0px 5% 30px 0px;
	text-align: left;
}

/******* TEXT ON THE RIGHT BELOW THE TITLE OF THE PAGE *******/
cite-inverse p {
	font-size: 16px;
	padding: 0px 0 30px 5%;
	text-align: right;
}

/******* CAPTIONS FOR UNDER PICTURES *******/
.caption_r {
	text-align: right;
	padding-right: 15px;
	font-size: 14px;
  line-height: normal;
  font-style: italic;
}

.caption_l {
	text-align: left;
	padding-left: 15px;
	font-size: 14px;
  line-height: normal;
  font-style: italic;
}

/******* CONTROLS THE QUOTES *******/
.blockquote-reverse {
	font-style: italic;
	font-size: 16px;
	padding: 0px 20px 0px 20px;
	margin: 20px 20px 30px 30px;
  line-height: normal;
  font-weight: 600;
}

.blockquote_l {
	font-style: italic;
	font-size: 16px;
	padding: 0px 20px 0px 20px;
	margin: 20px 30px 30px 20px;
  line-height: normal;
  font-weight: 600;
}

}

/******************************************************************************/
@media only screen and (min-width: 321px) and (max-width: 375px) {

/********** COVER IMAGE OF MAIN PAGE @ THIS SCREEN SIZE *********/
.bgimage_cover {
	background-image: url('../images/cover_mobile.jpg');
	background-size: 100%;
	height: 220px;
}

/* be size */
header #title span {
	font-size: 70px;
	letter-spacing: 5px;
}

/* BOLD size */
header h1 {
	font-size: 70px;
	letter-spacing: 5px;
	padding-top: 60px;
}

/******* FOR MEDIA SQUARE IMAGES *******/
.media img {
	width: 125px;
}

/*** TITLE ON THE LEFT OF ALL PAGES ***/
.title {
	font-size: 28px;
	padding-top: 40px;
	padding-bottom: 15px;
}

.title span {
	font-size: 28px;
	padding-top: 40px;
	padding-bottom: 15px;
}

/*** TITLE ON THE RIGHT OF ALL PAGES ***/
.title-inverse {
	font-size: 28px;
	padding-top: 40px;
	padding-bottom: 10px;
}

.title-inverse span {
	font-size: 28px;
	padding-top: 40px;
	padding-bottom: 10px;
}

/******* TEXT ON THE LEFT BELOW THE TITLE OF THE PAGE *******/
cite p {
	font-size: 14px;
	padding: 10px 5% 30px 0px;
	text-align: left;
  line-height: normal;
}

/******* TEXT ON THE RIGHT BELOW THE TITLE OF THE PAGE *******/
cite-inverse p {
	font-size: 14px;
	padding: 10px 0 30px 5%;
	text-align: right;
  line-height: normal;
}

/******* CAPTIONS FOR UNDER PICTURES *******/
.caption_r {
	text-align: right;
	padding-right: 15px;
	font-size: 12px;
  line-height: normal;
  font-style: italic;
}

.caption_l {
	text-align: left;
	padding-left: 15px;
	font-size: 12px;
  line-height: normal;
  font-style: italic;
}

/******* CONTROLS THE QUOTES *******/
.blockquote-reverse {
	font-style: italic;
	font-size: 15px;
	padding: 10px 15px 0px 15px;
	margin: 15px 15px 25px 30px;
  line-height: normal;
  font-weight: 600;
}

.blockquote_l {
	font-style: italic;
	font-size: 15px;
	padding: 0px 15px 0px 15px;
	margin: 15px 30px 25px 15px;
  line-height: normal;
  font-weight: 600;
}

}

/******************************************************************************/
@media only screen and (max-width: 328px) {

/********** COVER IMAGE OF MAIN PAGE @ THIS SCREEN SIZE *********/
.bgimage_cover {
		background-image: url('../images/cover_mobile_small.jpg');
		background-size: 100%;
		height: 180px;
  }

/******* CONTROLS THE LEVEL OF MENU APPEARING *******/
data-offset-top="100"

/* be size */
header #title span {
	font-size: 65px;
	letter-spacing: 5px;
}

/* BOLD size */
header h1 {
	font-size: 65px;
	letter-spacing: 5px;
	padding-top: 60px;
}

/******* FOR MEDIA SQUARE IMAGES *******/
.media img {
	width: 100px;
}

/*** TITLE ON THE LEFT OF ALL PAGES ***/
.title {
	font-size: 20px;
	padding-top: 15px;
	padding-bottom: 15px;
}

.title span {
	font-size: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
}

/*** TITLE ON THE RIGHT OF ALL PAGES ***/
.title-inverse {
	font-size: 20px;
	padding-top: 15px;
	padding-bottom: 15px;
}

.title-inverse span {
	font-size: 20px;
	padding-top: 15px;
	padding-bottom: 15px;
}

/******* TEXT ON THE LEFT BELOW THE TITLE OF THE PAGE *******/
cite p {
	font-size: 13px;
	padding: 0px 5% 20px 0px;
  text-align: left;
	line-height: 20px;
}

/******* TEXT ON THE RIGHT BELOW THE TITLE OF THE PAGE *******/
cite-inverse p {
	font-size: 13px;
	padding: 0px 0 20px 5%;
  text-align: right;
	line-height: 20px;
}

/******* CAPTIONS FOR UNDER PICTURES *******/
.caption_r {
	text-align: right;
  padding-left: 25px;
  padding-right: 25px;
	font-size: 12px;
  line-height: normal;
  font-style: italic;
}

.caption_l {
	text-align: left;
	padding-left: 25px;
  padding-right: 25px;
	font-size: 12px;
  line-height: normal;
  font-style: italic;
}

/******* CONTROLS THE QUOTES *******/
.blockquote-reverse {
	font-style: italic;
	font-size: 14px;
	padding: 0px 10px 0px 10px;
	margin: 15px 15px 25px 30px;
  line-height: normal;
  font-weight: 600;
}

.blockquote_l {
	font-style: italic;
	font-size: 14px;
	padding: 0px 10px 0px 10px;
	margin: 15px 30px 25px 15px;
  line-height: normal;
  font-weight: 600;
}

}

/******************************************************************************/

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

/********** COVER IMAGE OF MAIN PAGE @ THIS SCREEN SIZE *********/
.bgimage_cover {
		background-image: url('../images/cover_mobile_small.jpg');
		background-size: 100%;
		height: 180px;
  }

/******* CONTROLS THE LEVEL OF MENU APPEARING *******/
data-offset-top="100"

/* be size */
header #title span {
	font-size: 65px;
	letter-spacing: 5px;
}

/* BOLD size */
header h1 {
	font-size: 65px;
	letter-spacing: 5px;
	padding-top: 60px;
}

/******* FOR MEDIA SQUARE IMAGES *******/
.media img {
	width: 100px;
}

/*** TITLE ON THE LEFT OF ALL PAGES ***/
.title {
	font-size: 25px;
	padding-top: 15px;
	padding-bottom: 15px;
}

.title span {
	font-size: 25px;
  padding-top: 15px;
  padding-bottom: 15px;
}

/*** TITLE ON THE RIGHT OF ALL PAGES ***/
.title-inverse {
	font-size: 25px;
	padding-top: 15px;
	padding-bottom: 15px;
}

.title-inverse span {
	font-size: 25px;
	padding-top: 15px;
	padding-bottom: 15px;
}

/******* TEXT ON THE LEFT BELOW THE TITLE OF THE PAGE *******/
cite p {
	font-size: 13px;
	padding: 0px 5% 15px 0px;
  text-align: left;
	line-height: normal;
}

/******* TEXT ON THE RIGHT BELOW THE TITLE OF THE PAGE *******/
cite-inverse p {
	font-size: 13px;
	padding: 0px 0 15px 5%;
  text-align: right;
	line-height: normal;
}

/******* CAPTIONS FOR UNDER PICTURES *******/
.caption_r {
	text-align: right;
	padding-right: 15px;
	font-size: 12px;
  line-height: normal;
  font-style: italic;
}

.caption_l {
	text-align: left;
	padding-left: 15px;
	font-size: 12px;
  line-height: normal;
  font-style: italic;
}

/******* CONTROLS THE QUOTES *******/
.blockquote-reverse {
	font-style: italic;
	font-size: 14px;
	padding: 0px 10px 0px 10px;
	margin: 15px 15px 25px 30px;
  line-height: normal;
  font-weight: 600;
}

.blockquote_l {
	font-style: italic;
	font-size: 14px;
	padding: 0px 10px 0px 10px;
	margin: 15px 30px 25px 15px;
  line-height: normal;
  font-weight: 600;
}

}