/* 
------------------------------------------

2a3054  42,48,84


primary-dark: 0d3773 | 13,55,115;
primary-med: 1c70ae | 28,112,174;
primary-light: 2ea6c9 | 46,166,201


Media Queries
small: min-width 576px;
medium: min-width: 768px;
large: min-width: 992px;
x-large: min-width: 1200px;

// MEDIA QUERY MANAGER
/* breakpoints
0-600px - phone
601 - 900 - tablet portrait
901 - 1200 - tablet landscape
1201 - 1800 - desktop
1801+ - large screen deskop

@media (min-width:1385px ) {  
}

@media (min-width:1160px) and (max-width:1384px ) {
}

-------------------------------------------
*/

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&family=Thasadith:wght@400;700&family=Palanquin&&display=swap');

:root {
  --color-primary-darkest: #2a3054;
  --color-primary-dark: #0d3773;
  --color-primary-med: #1c70ae;
  --color-primary-light: #2ea6c9;


  --color-gray-dark:#899194;
  --color-gray-med:#bcc1c4;
  --color-gray-light:#ececec;

  --color-white: #ffffff;
  --color-black: #000000;
  --color-subBlue: #5F6DB0;
}

/* to use vars: color: var(--primaryBlock); */

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 118%;  
}

/*
	@media (max-width:1450px ) {

		html {
		font-size: 100%;	
		}	
	}

	@media (max-width:1250px ) {
		
		html {
		font-size: 90%;	
		}	
	}

	@media (max-width:1099px) {
		
		html {
		font-size: 80%;	
		}	
	}
	*/

/* 1 rem = 18pixels 18px/16px = 113% | 90% ~ 14.5px | 80% ~ 13px */

.tmpMsg {
	margin-left: 6rem;
	height: 300px;
}

body {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  background-color:  var(--color-primary-darkest);
  color: var(--color-gray-dark);	
}

/* white page background */
.pageBG {
	max-width: 100%;
	max-height: 100%;
	margin: 4rem;
	background-color: var(--color-white);
	border-radius: 4px;
}

@media (max-width:900px ) {

.pageBG {
	margin: 2rem;
	}	
}

.clearfix {
	clear: both;
}

h1, h2, h3, h4, h5, h6 {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-weight: bold;
	margin-bottom: 0;
}

p {
	font-family: inherit;
	font-size: inherit;
	padding:0;
}

img {
	max-width: 100%;
}


/* -------------------  HEADER INCLUDE ------------------------- */

header {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 3rem 2rem;
	margin-bottom: .5rem;
}

/* Carol Elizabeth */
.gblHeaderMain {
	font-family: 'Thasadith', sans-serif;
	font-size: 2.75rem;
	font-weight: bold;
	color: var(--color-primary-light);
	margin-bottom: 0;
}	

/* Company */
.gblHeaderSub {
	font-family: 'Thasadith', sans-serif;
	font-size: 1.75rem;
	font-weight: bold;
	letter-spacing: 10px;
	color: var(--color-gray-dark);
	text-align: center;
}

@media (max-width:600px ) {
	#headerSocial {
		text-align: center;
		padding: 1rem 0;
		margin-right: 0;
	}
}

@media (max-width:350px ) {

/* Carol Elizabeth */
.gblHeaderMain {
	font-family: 'Thasadith', sans-serif;
	font-size: 2rem;
	font-weight: bold;
	color: var(--color-primary-light);
	margin-bottom: 0;
	}	

/* Company */
.gblHeaderSub {
	font-family: 'Thasadith', sans-serif;
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: 10px;
	color: var(--color-gray-dark);
	text-align: center;
	}
}


@media (max-width:1350px ) {

header {
	flex-direction: column;
	align-content: center;
	margin-bottom: .5rem;
	}	
}
/* -------------------  HOME PAGE ------------------------- */


.flex-container {
  display: flex; 
 	flex-direction: row;
}

.col1 {
	width: 25%;
}

.col2 {
	width: 75%;
	margin: 0 3rem;	
}

.imageCEC {				
	border-radius: 50%;
	max-height: 75%;
	max-width: 75%;
	margin-left: 20%;
	margin-bottom: 3rem;
}

@media (max-width:1200px ) {

	.flex-container {
		flex-direction: column;
		}	

	.col1 {
		width: 90%;
	}

	.col2 {
		width: 90%;
		margin: 2rem 1rem;
	}

	.imageCEC {				
		max-width: 40%;
		max-height: 40%;
		margin-left: 34%;
		margin-bottom: 0;
	}
}

@media (max-width:600px ) {
	.imageCEC {				
		max-width: 50%;
		max-height: 50%;
		margin-left: 28%;
	}
}