@media (min-width: 0px) {

	/* ----- Main Divs ----- */

	.inner-margin {
		position:relative;
		margin:0 150px 0 150px;
		width:1000px;
	}

	#blue-header, #blue-footer, #black-header {
		height:40px;
	}
	#blue-header {
		top:40px;
	}
	#outer {
		top:80px;
		bottom:40px;
	}

	.page {
		width:1360px;
	}

	.content-body {
		margin:20px 20px 20px 20px;
	}

	#inner, .strip .centre-strip {
		width:1400px;

	}
	.strip .centre-strip {
		margin-left:-700px;

	}
	.web-icon {
		width:24px;

	}
	#main-title {
		margin-top:40px;
	}

	/* ----- Main Menu ----- */

	#main-menu  a{
		color:#FFD50B;
		font-size:2.0em;
		font-family:crescentregular;
	}

	/* ----- Black Header Parts ----- */

	#black-header #home-icon, #black-header #change-language-icon {
		padding:8px 0;
	}
	#black-header #website-title {
		margin:0 0 0 10px;
	}
	#black-header #change-language-top {
		padding:0 0 0 3px;
		margin:0 10px  0 0;
	}

	.content-body .line {
		height:5px;
	}
	.content-body .flush-line {
		margin-top:-10px;
	}

	/*-------------navigation---------------*/

	#navigation, .nav-controls {
		height:60px;
	}
	#navigation ul li a {
		line-height:60px;
		padding:20px 20px;
	}

	/* --------------Link image----------------*/

	.link-main-box img {
		right: -20px;
		top: -12px;
	}

	/*---------time line---------*/

	/*addition by gwern - modified some of the heights, margin, and padding to accommodate larger paragraphs*/
	
	.timeline{
		margin-bottom: 50px;
	}

	.timeline li{
		height:150px;
		margin : 5px 0px;
		padding: 13px 0px;
	}
	
	.timeline li ul {
		height:150px;
	}
	.timeline li ul li p {
		width:700px;
		height:150px;
		padding: 7px 4px;
	}
	
	
	.timeline li ul li h3 {
		line-height:120px;
		width:200px;
	}
	.time-line-circle {
		position:absolute;
		top:38px;
		left:-14px;
	}

	/*--------------Nav Buttons--------------*/

	.bottom-nav {
		width:100%;
		padding-bottom:4%;
		padding-top:25px;
		margin-bottom:10px;
	}

	.nav-button {
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}

	.nav-button ul li{
		height:100%;
		margin:0px 20px 0px 20px;
	}

	.nav-button ul li.arrow {
		padding:10px;
		margin:5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}

	.nav-button ul li p {
		margin:10px 0px;
		font-size:1.6em;
	}


	/* --------------Font Sizes----------------*/


	.title-layer h2 {
		font-size:9em;
	}

	.image-layer .sub-title, .content-body h3 {
		font-size:3.0em;
	}
	#welsh-bacc-title{
		font-size:4.0em;
	}
	.inner-wrap h4, .tiles-wrap a  {
		font-size:1.5em;
	}

	.poem .title {
		font-size:2.2em;
	}

	.content-body p, .centre-strip h3  {
		font-size:1.7em;
	}
	#navigation ul li a,#blue-footer #atebol-footer p {
		font-size:1.2em;
	}


	.caption {
		font-size:0.8em;
	}


	.table-wrapper li {
		font-size:24px;
	}

	/* ---- universal line height property---*/

	#black-header #website-title, .inner-wrap h4, #black-header #change-language-top, #blue-footer #atebol-footer  {
		line-height:40px;
	}
	
	/* ---- Footer---*/
	
	.contact-info ul li img {
		width:40px;
		height:40px;
	}
	
	.contact-info .alpha, .contact-info .beta {
		width:50%;
		float:left;	
	}
	
	
}

@media (min-width: 1200px) and (max-width: 1440px) {

	/* ----- Main Divs ----- */


	.inner-margin {
		margin:0 60px 0 60px;
		width:800px;
	}

	#blue-header, #blue-footer, #black-header {
		height:35px;
	}
	#blue-header {
		top:35px;
	}
	#outer {
		top:70px;
		bottom:35px;
	}
	.web-icon {
		width:20px;

	}
	#black-header #home-icon, #black-header #change-language-icon {
		padding:8px 0;
	}

	.content-body {
		margin:20px 20px 20px 20px;
	}

	.page {
		width:960px;
	}

	#inner, .strip .centre-strip {
		width:1000px;

	}
	.strip .centre-strip {
		margin-left:-500px;
	}


	.content-body .line {
		height:4px;
	}
	.content-body .flush-line {
		margin-top:-8px;
	}


	/* --------------navigation----------------*/

	#navigation, .nav-controls {
		height:50px;
	}
	#navigation ul li a {
		line-height:50px;
		padding:18px 12px;
	}

	/* --------------Link image----------------*/



	.link-main-box img {
		right: -20px;
		top: -12px;
	}


	/*---------time line---------*/
	
	.timeline{
		margin-bottom: 50px;
	}

	.timeline li ul {
		height:150px;
	}
	.timeline li ul li p {
		width:550px;
		height:150px;
		padding: 7px 4px;
	}
	.timeline li ul li h3 {
		line-height:120px;
		width:150px;
	}
	.time-line-circle {
		position:absolute;
		top:38px;
		left:-14px;
	}

	/*--------------Nav Buttons--------------*/


	.nav-button {
		-webkit-border-radius: 5px;
		-moz-border-radius:5px;
		border-radius: 5px;
	}

	.nav-button ul li.arrow {
		padding:5px;
		margin:4px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}

	.nav-button ul li p {
		margin:6px 0px;
		font-size:1.4em;
	}

	.arrow-image {
		width:22px;
		height:16px;
	}


	/* --------------main page----------------*/
	#canvas {
	  width:960px;
	  height:600px;

	}


	/* --------------Font Sizes----------------*/
	.title-layer h2 {
		font-size:7em;
	}
	.title-menu ul li a {
		padding:10px 20px;
		font-size:1.5em;
	}


	#welsh-bacc-title{
		font-size:3.5em;
	}
	.image-layer .sub-title, .content-body h3{
		font-size:2.5em;
	}

	.poem .title {
		font-size:1.9em;
	}

	.content-body p, .centre-strip h3 {
		font-size:1.5em;
	}

	#navigation ul li a, .inner-wrap h4, .tiles-wrap a   {
		font-size:1.3em;
	}

	#navigation ul li a,#blue-footer #atebol-footer p {
		font-size:1.0em;
	}
	.caption {
		font-size:0.7em;
	}

	.table-wrapper li {
		font-size:20px;
	}


	/* ---- universal line height property---*/

	#black-header #website-title, .inner-wrap h4,#black-header #change-language-top, #blue-footer #atebol-footer  {
		line-height:35px;
	}
	
	/* ---- Footer---*/
	
	.contact-info ul li img {
		width:30px;
		height:30px;
	}
	
	.contact-info .alpha, .contact-info .beta {
		width:100%;
		float:left;	
	}

}
@media (min-width: 1000px) and (max-width: 1199px) {

	/* ----- Main Divs ----- */

	.inner-margin {
		margin:0 60px;
		width:700px;
	}

	#blue-header, #blue-footer, #black-header {
		height:30px;
	}
	#blue-header {
		top:30px;
	}
	#outer {
		top:60px;
		bottom:30px;
	}
	.web-icon {
		width:20px;
	}
	#black-header #home-icon, #black-header #change-language-icon {
		padding:5px 0;
	}

	.page {
		width:860px;
	}
	#inner, .strip .centre-strip {
		width:900px;

	}
	.strip .centre-strip {
		margin-left:-450px;
	}

	.content-body .line {
		height:3px;
	}
	.content-body .flush-line {
		margin-top:-6px;
	}

	/* --------------navigation----------------*/

	#navigation, .nav-controls {
		height:40px;
	}
	#navigation ul li a {
		line-height:40px;
		padding:18px 12px;
	}

	/* --------------Link image----------------*/

	.link-main-box {
		margin: 25px 0;
	}

	.link-main-box img {
		right: -20px;
		top: -12px;
	}

	/*---------time line---------*/

	.timeline{
		margin-bottom: 40px;
	}
	
	.timeline li ul {
		height:130px;
	}
	.timeline li ul li p {
		width:480px;
		height:130px;
		padding: 5px 2px;
	}
	.timeline li ul li h3 {
		line-height:120px;
		width:120px;
	}
	.time-line-circle {
		position:absolute;
		top:38px;
		left:-14px;
	}

	/*--------------Nav Buttons--------------*/


	.nav-button {
		-webkit-border-radius: 5px;
		-moz-border-radius:5px;
		border-radius: 5px;
	}

	.nav-button ul li.arrow {
		padding:5px;
		margin:4px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}

	.nav-button ul li p {
		margin:6px 0px;
		font-size:1.4em;
	}

	.arrow-image {
		width:22px;
		height:16px;
	}
	/* --------------main page----------------*/
	#canvas {
	  width:860px;
	  height:500px;

	}
	.title-menu {
		position:absolute;
		left:50%;
		margin-left:-200px;
		top:42%;
		width:400px;
	}



	/* --------------Font Sizes----------------*/
	.title-layer h2 {
		font-size:6em;
	}
	.title-menu ul li a {
		padding:10px 20px;
		font-size:1.2em;
	}


	.image-layer .sub-title, .content-body h3{
		font-size:2.0em;
	}
	#welsh-bacc-title{
		font-size:3.0em;
	}
	#navigation ul li a {
		font-size:22px;
	}

	.poem .title {
		font-size:1.6em;
	}

	#navigation ul li a, .inner-wrap h4 , .tiles-wrap a  {
		font-size:1.1em;
	}

	.content-body p, .centre-strip h3 {
		font-size:1.3em;
	}
	#navigation ul li a,#blue-footer #atebol-footer p {
		font-size:0.8em;
	}
	.caption {
		font-size:0.5em;
	}


	.table-wrapper li {
		font-size:18px;
	}


	/* ---- universal line height property---*/

	#black-header #website-title, .inner-wrap h4,#black-header #change-language-top, #blue-footer #atebol-footer  {
		line-height:30px;
	}
	
	/* ---- Footer---*/
	
	.contact-info ul li img {
		width:30px;
		height:30px;
	}
	
	.contact-info .alpha, .contact-info .beta {
		width:100%;
		float:left;	
	}
}
@media (min-width: 768px) and (max-width: 999px) {

	/* ----- Main Divs ----- */

	.inner-margin {
		margin:0 29px;
		width:650px;
	}

	#blue-header, #blue-footer, #black-header {
		height:30px;
	}
	#blue-header {
		top:30px;
	}
	#outer {
		top:70px;
		bottom:30px;
	}

	.web-icon {
		width:20px;
	}
	#black-header #home-icon, #black-header #change-language-icon {
		padding:5px 0;
	}
	.content-body {
		margin:10px;
	}
	.page {
		width:728px;
	}
	#inner, .strip .centre-strip {
		width:768px;
	}
	.strip .centre-strip {
		margin-left:-384px;
	}

	.content-body .line {
		height:2px;
	}
	.content-body .flush-line {
		margin-top:-4px;
	}

	/* --------------navigation----------------*/

	#navigation, .nav-controls {
		height:35px;
	}
	#navigation ul li a {
		line-height:35px;
		padding:18px 10px;
	}

	/* --------------Link image----------------*/

	.link-main-box img {
		right: -20px;
		top: -6px;
		width:50px;
		height:50px;
	}

	/*---------time line---------*/

	.timeline{
		margin-bottom: 50px;
	}
	
	.timeline li {
		height:100px;
	}
	
	.timeline li ul {
		height:100px;
	}
	.timeline li ul li{
		height:100px;
	}
	.timeline li ul li p {
		width:440px;
		height:100px;
		padding: 4px 2px;
	}
	.timeline li ul li h3 {
		line-height:100px;
		width:100px;
	}
	.time-line-circle {
		position:absolute;
		top:32px;
		left:-6px;
	}
	.time-line {
		width:20px;
		height:100px;
		position:relative;
	}
	.circle {
		width: 32px;
		height: 32px;
		-moz-border-radius: 16px;
		-webkit-border-radius: 16px;
		border-radius: 16px;
	}

	/*--------------Nav Buttons--------------*/


	.nav-button {
		-webkit-border-radius: 5px;
		-moz-border-radius:5px;
		border-radius: 5px;
	}

	.nav-button ul li.arrow {
		padding:4px;
		margin:3px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}

	.nav-button ul li p {
		margin:4px 0px;
		font-size:1.2em;
	}

	.arrow-image {
		width:20px;
		height:14px;
	}

	/* --------------main page----------------*/
	#canvas {
	  width:728px;
	  height:450px;

	}
	.title-menu {
		left:50%;
		margin-left:-150px;
		top:42%;
		width:300px;
	}



	/* --------------Font Sizes----------------*/
	.title-layer h2 {
		font-size:6em;
	}
	.title-menu ul li a {
		padding:8px 20px;
		font-size:1.2em;
	}

	.image-layer .sub-title, .content-body h3{
		font-size:1.5em;
	}
	#welsh-bacc-title{
		font-size:2.5em;
	}
	#navigation ul li a, .inner-wrap h4, .tiles-wrap a   {
		font-size:0.9em;
	}
	.poem .title {
		font-size:1.4em;
	}
	.content-body p, .centre-strip h3 {
		font-size:1.1em;
	}
	#navigation ul li a,#blue-footer #atebol-footer p {
		font-size:0.6em;
	}
	.caption {
		font-size:0.5em;
	}

	.table-wrapper li {
		font-size:15px;
	}

	/* ---- universal line height property---*/

	#black-header #website-title, .inner-wrap h4,#black-header #change-language-top, #blue-footer #atebol-footer  {
		line-height:30px;
	}
	
	/* ---- Footer---*/
	
	.contact-info ul li img {
		width:30px;
		height:30px;
	}
	
	.contact-info .alpha, .contact-info .beta {
		width:100%;
		float:left;	
	}
	
	
}

@media (max-width: 768px){

	/* ----- Main Divs ----- */

	.inner-margin {
		margin: 0 0px;
		width:100%;
	}

	#blue-header, #blue-footer, #black-header {
		height:30px;
	}
	#blue-header {
		top:30px;
	}
	#outer {
		top:70px;
		bottom:30px;
	}

	.web-icon {
		width:20px;
	}
	#black-header #home-icon, #black-header #change-language-icon {
		padding:5px 0;
	}

	.page {
		width:100%;
	}

	#inner, .strip .centre-strip {
		width:100%;

	}
	.strip .centre-strip {
		margin-left:-50%;
	}

	.content-body .line {
		height:2px;
	}
	.content-body .flush-line {
		margin-top:-6px;
	}

	/* --------------Navigation----------------*/

	#navigation, .nav-controls {
		height:50px;
	}
	#navigation ul li a {
		line-height:50px;
		padding:18px 20px;
	}

	/* --------------Link image----------------*/

	.link-main-box img {
		right: -10px;
		top: -10px;
		width:60px;
		height:60px;
	}

	/*---------time line---------*/
	
	.timeline{
		margin-bottom: 50px;
	}
	
	.timeline li {
		height:100px;
	}
	
	.timeline li ul {
		height:100px;
	}
	.timeline li ul li{
		height:100px;
	}

	.timeline li ul li p {
		width:360px;
		height:100px;
		font-size:14px;
	}
	.timeline li ul li h3 {
		line-height:100px;
		width:80px;
		font-size:18px;
	}
	.time-line-circle {
		position:absolute;
		top:32px;
		left:-6px;
	}
	.time-line {
		width:20px;
		height:100px;
		position:relative;
	}
	.circle {
		width: 32px;
		height: 32px;
		-moz-border-radius: 16px;
		-webkit-border-radius: 16px;
		border-radius: 16px;
	}
	/*--------------Nav Buttons--------------*/


	.nav-button {
		-webkit-border-radius: 5px;
		-moz-border-radius:5px;
		border-radius: 5px;
	}

	.nav-button ul li.arrow {
		padding:4px;
		margin:3px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}

	.nav-button ul li p {
		margin:4px 0px;
		font-size:1.2em;
	}

	.arrow-image {
		width:20px;
		height:14px;
	}
	.map .viewport {
		border-left: 0px solid #FCCF0B;
		border-top: 4px solid #FCCF0B;
		margin-top:10px;
		padding-top:20px;
	}

	/* --------------main page----------------*/
	#canvas {
	  width:100%;
	  height:450px;

	}
	.title-menu {
		left:50%;
		margin-left:-150px;
		top:42%;
		width:300px;
	}

	/* --------------Font Sizes----------------*/
	.title-layer h2 {
		font-size:10vw;
	}
	.title-menu ul li a {
		padding:8px 20px;
		font-size:2.5vw;
	}

	.image-layer .sub-title, .content-body h3{
		font-size:4vw;
	}

	#welsh-bacc-title{
		font-size:5vw;

	}
	#navigation ul li a, .inner-wrap h4, .tiles-wrap a   {
		font-size:2vw;
	}
	.poem .title {
		font-size:4vw;
	}

	.content-body p, .centre-strip h3 {
		font-size:3vw;
	}
	#navigation ul li a,#blue-footer #atebol-footer p {
		font-size:1.5vw;
	}
	.table-wrapper li {
		font-size:0.5vw;
	}
	.caption {
		font-size:0.2vw;
	}
	.standard-table ul li {
		padding:3px 0 3px 3px;
	}

	/* ---- universal line height property---*/

	#black-header #website-title, .inner-wrap h4,#black-header #change-language-top, #blue-footer #atebol-footer  {
		line-height:30px;
	}

	/* ----- Table Divs ----- */

	.table-wrapper .col-sm-1, .table-wrapper .col-sm-2, .table-wrapper .col-sm-3, .table-wrapper .col-sm-4 {
		float:left;
	}
	.table-wrapper li {
		font-size:14px;
	}
	.table-wrapper .col-sm-1 {
		width:8.33%;
	}
	.table-wrapper .col-sm-2 {
		width:16.66%;
	}
	.table-wrapper .col-sm-3 {
		width:24.99%;
	}
	.table-wrapper .col-sm-4 {
		width:33.32%;
	}

	/* ---- Footer---*/
	
	.contact-info ul li img {
		
		width:30px;
		height:30px;
	}
	
	.contact-info .alpha, .contact-info .beta {
		
		width:100%;
		float:left;	
	}
	.final-footer{
		margin-top:300px;
		
		
	}
	
	
}





/*
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}

@media screen and (min-width: 1px) and (max-width: 480px){
  #columns[data-columns]::before {
	content: '1 .col-xs-12';
  }
}

@media screen and (min-width: 481px) and (max-width: 767px){
  #columns[data-columns]::before {
	content: '2 .col-xs-6';
  }
}
@media screen and (min-width:768px) and (max-width: 991px){
  #columns[data-columns]::before {
	content: '3 .col-sm-4';
  }
}
@media screen and (min-width:992px) and (max-width: 9999px){
  #columns[data-columns]::before {
	content: '4 .col-md-3';
  }
}
*/