/* CSS VARIABLES FROM THE BOOTSTRAP TEMPLATE: https://bootswatch.com/flatly/ */
/* Use them instead of "real" colours. E.g.  color: var(--primary); */
:root{
--ooba-orange: #f58233;
--ooba-blue: #004d8f;
--ooba-purple: #712079;
--ooba-green: #008c3c;
--ooba-grey: #575756;
--ooba-red: #961914;

--white: #fff;
--grey: #95a5a6;
--grey-dark: #343a40;
--grey-light: #ecf0f1;
--grey-lighter: #f9f9f9;

--success: #18BC9C;
--info: #3498DB;
--warning: #F39C12;
--danger: #E74C3C;
}











/* STANDARD HTML ELEMENTS */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: none;
}

body { font-family: 'Open Sans', sans-serif; background-color: var(--white); font-size: 12pt; line-height: 1.5em; color: var(--grey-dark); }

h1, h2, h3, h4, h5, h6 { display: block; width: 100%; font-style: normal; text-align: center; line-height: 1.4em;  margin: 1.2em 0 0.3em 0; padding: 0px; color: #000000; text-shadow: none; text-transform: capitalize; }
h4, h5, h6 { text-align: left; }
h1 { font-size:340%; color: var(--ooba-grey); margin: 0; padding: 40px 0;  }
h2 { font-size: 190%; font-weight: 700; text-transform: uppercase; }
h3 {  font-size: 130%; color: var(--ooba-blue); }
h4 { font-size: 110%; }


.itemFullText p, .itemFullText li { color: var(--grey-dark); }

div.itemToolbar { display: none; }




.itemFullText a { color: var(--ooba-orange); }
.itemFullText a.btn.btn-primary { color: #fff; }

p { margin: 0.2em 0 1em 0; }
#header p { margin: 0; }

.product-info a { color: var(--ooba-orange); }


.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; } /* For IE 6/7 only - Include this rule to trigger hasLayout and contain floats */




/* OOBA FLEXBOX STUFF */
.flex-container { display: flex; flex-direction: row; align-items: stretch; align-content: stretch; flex-wrap: wrap;  }
.flex-item { display: flex; margin: 0 0.5% 0 0.5%; flex: 0 0 auto; flex-direction: column; }
.flex-item img{ width: 100%; height: auto; }
.flex-content { display: block; }
.flex-10 { flex-basis: 9%; }
.flex-15 { flex-basis: 14%; }
.flex-20 { flex-basis: 19%; }
.flex-25 { flex-basis: 24%; }
.flex-33 { flex-basis: 32.333% }
.flex-40 { flex-basis: 39% }
.flex-50 { flex-basis: 49% }
.flex-66 { flex-basis: 65.666% }
.flex-75 { flex-basis: 74% }
.flex-80 { flex-basis: 79% }
.flex-100 { flex-basis: 99% }


@media only screen and (min-width: 20px) and (max-width: 767px) {
.flex-10 { flex-basis: 99% !important; margin: 10px 0; }
.flex-15 { flex-basis: 99% !important; margin: 10px 0; }
.flex-20 { flex-basis: 99% !important; margin: 10px 0; }
.flex-25 { flex-basis: 99% !important; margin: 10px 0; }
.flex-33 { flex-basis: 99% !important; margin: 10px 0; }
.flex-40 { flex-basis: 99% !important; margin: 10px 0; }
.flex-50 { flex-basis: 99% !important; margin: 10px 0; }
.flex-66 { flex-basis: 99% !important; margin: 10px 0 ; }
.flex-75 { flex-basis: 99% !important; margin: 10px 0 ; }
.flex-80 { flex-basis: 99% !important; margin: 10px 0 ; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.flex-10 { flex-basis: 9% !important; }
.flex-15 { flex-basis: 14% !important; }
.flex-20 { flex-basis: 19% !important; }
.flex-25 { flex-basis: 24% !important; }
.flex-33 { flex-basis: 32.333% !important; }
.flex-40 { flex-basis: 49% !important; }
.flex-50 { flex-basis: 49% !important; }
.flex-66 { flex-basis: 49% !important; }
.flex-75 { flex-basis: 99% !important; }
.flex-80 { flex-basis: 99% !important; }
}

@media only screen and (min-width: 992px) and (max-width: 1024px) {
.flex-10 { flex-basis: 9% !important; }
.flex-15 { flex-basis: 14% !important; }
.flex-20 { flex-basis: 99% !important; }
.flex-25 { flex-basis: 24% !important; }
.flex-33 { flex-basis: 32.333% !important; }
.flex-40 { flex-basis: 49% !important; }
.flex-50 { flex-basis: 49% !important; }
.flex-66 { flex-basis: 49% !important; }
.flex-75 { flex-basis: 99% !important; }
.flex-80 { flex-basis: 99% !important; }
}





.youtube-container { overflow: hidden; position: relative; width:100%; }
.youtube-container::after { padding-top: 56.25%; display: block; content: ''; }
.youtube-container iframe {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; }




















/*
 ______                    _                  _                  
|_   _ \                  / |_               / |_                
  | |_) |   .--.    .--. `| |-'.--.   _ .--.`| |-',--.  _ .--.   
  |  __'. / .'`\ \/ .'`\ \| | ( (`\] [ `/'`\]| | `'_\ :[ '/'`\ \ 
 _| |__) || \__. || \__. || |, `'.'.  | |    | |,// | |,| \__/ | 
|_______/  '.__.'  '.__.' \__/[\__) )[___]   \__/\'-;__/| ;.__/  
													   [__|      
 */
.container { position: relative; } 
.row div img, .row div img { max-width: 100%; height: auto; }
.navbar { background: none; border: none; border-radius: 0px; min-height: 0px; margin: 5px 0 0 0;  width: 100%; }

.nav-link { color: #ffffff; }

a.nav-link.active, a.nav-link:focus, a.nav-link:hover { color: #F58232; }
























/*
   ___           __                _________                            __          _            ______    _                           _                           
 .'   `.        [  |              |  _   _  |                          [  |        / |_        .' ____ \  / |_                        / |_                         
/  .-.  \  .--.  | |.--.   ,--.   |_/ | | \_|.---.  _ .--..--.  _ .--.  | |  ,--. `| |-'.---.  | (___ \_|`| |-'_ .--.  __   _   .---.`| |-'__   _   _ .--.  .---.  
| |   | |/ .'`\ \| '/'`\ \`'_\ :      | |   / /__\\[ `.-. .-. |[ '/'`\ \| | `'_\ : | | / /__\\  _.____`.  | | [ `/'`\][  | | | / /'`\]| | [  | | | [ `/'`\]/ /__\\ 
\  `-'  /| \__. ||  \__/ |// | |,    _| |_  | \__., | | | | | | | \__/ || | // | |,| |,| \__., | \____) | | |, | |     | \_/ |,| \__. | |, | \_/ |, | |    | \__., 
 `.___.'  '.__.'[__;.__.' \'-;__/   |_____|  '.__.'[___||__||__]| ;.__/[___]\'-;__/\__/ '.__.'  \______.' \__/[___]    '.__.'_/'.___.'\__/ '.__.'_/[___]    '.__.' 
															   [__|                                                                                                
 */


/* font-family: "Font Awesome 5 Free"; */

#header { background-image: url(/images/header-bg.jpg); text-align: center; color: #eee; width: 100%; height: 600px; }

#languageNavigation { font-size: 100%; background-color: #333333; width: fit-content; padding: 0; position: absolute; left: 0; }
#mainNavigation { font-size: 130%; background-color: #003366; width: 260px; padding: 10px 10px; position: absolute; right: 0; }
#mainContent { margin: 0 auto; background-color: #EEF0F3; padding: 0; border: 1px solid #EEF0F3 }
.section { margin: 0px 0px 0px 0px; clear: both; display: block; padding: 50px 0px;  }
.page-header { border: none !important; }






#extraBottomFooterInfo { background-color: #282a34; }
#extraBottomFooterInfo ul.nav li { float: left; margin: 0 20px 0 20px;}
#extraBottomFooterInfo ul.nav li a { color: #999999; font-size: 12px; padding: 5px 0 12px 0px; display: block;  }
#extraBottomFooterInfo ul.nav li a:hover { background: none; color: #fff; }






.opacity-black-5 {  background-image: url("/images/trans-pngs/transparent-png-black-05.png"); }
.opacity-black-10 { background-image: url("/images/trans-pngs/transparent-png-black-10.png"); }
.opacity-black-15 { background-image: url("/images/trans-pngs/transparent-png-black-15.png"); }
.opacity-black-20 { background-image: url("/images/trans-pngs/transparent-png-black-20.png"); }
.opacity-black-30 { background-image: url("/images/trans-pngs/transparent-png-black-30.png"); }
.opacity-black-40 { background-image: url("/images/trans-pngs/transparent-png-black-40.png"); }
.opacity-black-50 { background-image: url("/images/trans-pngs/transparent-png-black-50.png"); }
.opacity-black-60 { background-image: url("/images/trans-pngs/transparent-png-black-60.png"); }
.opacity-black-70 { background-image: url("/images/trans-pngs/transparent-png-black-70.png"); }
.opacity-black-75 { background-image: url("/images/trans-pngs/transparent-png-black-75.png"); }
.opacity-black-80 { background-image: url("/images/trans-pngs/transparent-png-black-80.png"); }
.opacity-black-90 { background-image: url("/images/trans-pngs/transparent-png-black-90.png"); }
.opacity-black-90 { background-image: url("/images/trans-pngs/transparent-png-black-100.png"); }

.opacity-white-05 { background-image: url("/images/trans-pngs/transparent-png-05.png"); }
.opacity-white-10 { background-image: url("/images/trans-pngs/transparent-png-10.png"); }
.opacity-white-15 { background-image: url("/images/trans-pngs/transparent-png-15.png"); }
.opacity-white-20 { background-image: url("/images/trans-pngs/transparent-png-20.png"); }
.opacity-white-30 { background-image: url("/images/trans-pngs/transparent-png-30.png"); }
.opacity-white-40 { background-image: url("/images/trans-pngs/transparent-png-40.png"); }
.opacity-white-50 { background-image: url("/images/trans-pngs/transparent-png-50.png"); }
.opacity-white-60 { background-image: url("/images/trans-pngs/transparent-png-60.png"); }
.opacity-white-70 { background-image: url("/images/trans-pngs/transparent-png-70.png"); }
.opacity-white-75 { background-image: url("/images/trans-pngs/transparent-png-75.png"); }
.opacity-white-80 { background-image: url("/images/trans-pngs/transparent-png-80.png"); }
.opacity-white-90 { background-image: url("/images/trans-pngs/transparent-png-90.png"); }





































/*
 ____    ____               __          __                
|_   \  /   _|             |  ]        [  |               
  |   \/   |   .--.    .--.| | __   _   | | .---.  .--.   
  | |\  /| | / .'`\ \/ /'`\' |[  | | |  | |/ /__\\( (`\]  
 _| |_\/_| |_| \__. || \__/  | | \_/ |, | || \__., `'.'.  
|_____||_____|'.__.'  '.__.;__]'.__.'_/[___]'.__.'[\__) ) 
														  
*/


/* Header */
#header .container { background-image: url(/images/header-main-graphic.jpg); background-repeat: no-repeat; height: 600px; }
.companyLogo { position: absolute; top: 50px; left: 50px; width: 200px; height: 200px; }
.companyLogo img { width: 100%; }
.strapline { font-size: 27pt; text-align: right; width: 50%; color: var(--white); font-style: italic; position: absolute; bottom: 50px; right: 50px; line-height: 1.1em; text-shadow: 2px 2px 4px #333333; }



/* A career in cyber */
.career-in-cyber { padding: 50px; height: 600px; margin: 0; flex-basis: 50%; }
.career-in-cyber h2 { }
.career-in-cyber p { }
.kirsty-williams-girls { margin: -1px 0 0 0; flex-basis: 50%; background-image: url(/images/kirsty-williams-with-students.jpg); background-repeat: no-repeat; background-size: cover; background-position: left; }


/* Kirsty Williams */
.kirsty-williams-speaking { margin: 0; flex-basis: 50%; background-image: url(/images/kirsty-williams-speach.jpg); background-repeat: no-repeat;background-size: cover; background-position: center; }
.kirsty-williams-quote { height: 400px; padding: 50px; }
.kirsty-williams-quote h2 { display: none; }
.kirsty-williams-quote h3 { display: none; }



/* Programme Contents */
#programme-contents { background-color: #6D6E70; padding: 10px 106px 50px 106px; }
#programme-contents .programme-contents-header { display: block; width: 100%; color: #ffffff; }
#programme-contents .programme-contents-header h2 { text-align: center; color: #ffffff; margin-bottom: 30px; }
#programme-contents .flex-item { background-repeat: no-repeat; height: 300px; width: 300px; border: 3px solid #ffffff; margin-bottom: 20px; position: relative; background-size: cover; background-position: center; }
#programme-contents .flex-item .holdingbox { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 16px; min-height: 166px; }
#programme-contents .flex-item .holdingbox h3 { color: #ffffff; text-align: left; text-transform: uppercase; }
#programme-contents .flex-item .holdingbox p { color: #ffffff; line-height: 1.3em; }
.curriculum-briefings { background-image: url(/images/programme-contents/curriculum-briefings.jpg);  }
.technical-skills-workshops { background-image: url(/images/programme-contents/technical-skills-workshops.jpg); }
.cyber-essential-technologies { background-image: url(/images/programme-contents/cyber-essentials-technologies.jpg); }
.professional-certifications { background-image: url(/images/programme-contents/professional-certifications.jpg); }
#programme-contents .flex-item.challenge-days { background-image: url(/images/programme-contents/challenge-days.jpg); background-position: left; }
.university-cyber-week { background-image: url(/images/programme-contents/university-cyber-week.jpg); }





/* Programme Overview */
#programme-overview { position: relative; }
#programme-overview .programme-overview-header { position: absolute; top: 50px; left: 0; width: 100%; }
#programme-overview h2 { text-align: center; margin: auto; background-color: #F58232; border: 1px solid #ffffff; color: #ffffff; padding: 10px 20px; width: fit-content; }
.year-one { margin: 0; flex-basis: 50%; background-color: #152236; padding: 100px 5% 50px 5%; text-align: center; }
.year-one h3 { color: #ffffff; text-align: center;   font-weight: 700;  font-size: 170%; }
.year-one h4 { color: #ffffff; text-align: center; font-weight: 700; }
.year-one p { color: #ffffff; }
.year-two { margin: 0; flex-basis: 50%; background-color: #DCE0EB; padding: 100px 5% 50px 5%; text-align: center;  }
.year-two h3 { color: #152236; text-align: center; font-weight: 700; font-size: 170%; }
.year-two h4 { color: #152236; text-align: center;	font-weight: 700; }
.year-two p { color: #152236; }



/* Partner Colleges */
#partner-colleges {}
#partner-colleges p { text-align: center; }
#partner-colleges .flex-item { padding: 20px; }
#partner-colleges .flex-item img { border: 1px solid #666666; }





/* PARTNERS PAGE */
.partners-text { padding: 50px; height: 530px; margin: 0; flex-basis: 50%; }
.partners-image { margin: 0; flex-basis: 50%;  background-repeat: no-repeat; background-size: cover; background-position: left; }
#founding-partners .partners-image { background-image: url(/images/partner-page/founding-partners.jpg); background-position: center; background-size: contain; background-color: #ffffff; }
#lead-partners .partners-image { background-image: url(/images/partner-page/lead-partners.jpg); }
#associate-partners .partners-image { background-image: url(/images/partner-page/associate-partners.jpg); }
#education-partners-colleges .partners-image { background-image: url(/images/partner-page/education-partners-colleges.jpg); }
#education-partners-universities .partners-image { background-image: url(/images/programme-contents/university-cyber-week.jpg); }
#cyber-first-schools { background-color: #333333; padding: 20px 0 50px 0; }
#cyber-first-schools h2 { color: #ffffff; }
#cyber-first-schools .partners-image { background: none; }
#cyber-first-schools .partners-image img { margin: 58px 20px; }
#cyber-first-schools .partners-text { height: auto; color: #ffffff; }
#video-testimonials { background-color: #3b629b; padding: 20px 0 50px 0; }
#video-testimonials h2 { color: #ffffff; }
#video-testimonials .flex-item { padding: 20px; }










/* FOOTER */
#footer { background-image: url(/images/header-bg.jpg); text-align: left; color: #eee; width: 100%; height: 500px; }
#footer .companyLogo { position: unset; margin: 40px auto 0 auto; }
#footer h3 { text-align: left; color: #ffffff;  margin: 80px 0 0 0; font-weight: normal; display: block; width: 100%; }
#footer p { font-size: 11pt; text-align: left; color: #ffffff; margin: 80px 0 0 0; }
#footer a { color: #F58232; }




/* FOOTER - "Cyber College Cymru is managed and delivered by TechEd Programmes Ltd" */









/* BACK TO TOP */
/* This is actually created on the fly in the script.js file in the template */
a.backTotop { position: fixed; bottom: 30px; left: calc(50% - 24px); display: none; }
a.backTotop .fas { font-size: 3em; color: #aaa; }



























/*
  ______                          _     ___  _           _______                          ______   ______    ______   
.' ____ \                        (_)  .' ..](_)         |_   __ \                       .' ___  |.' ____ \ .' ____ \  
| (___ \_|_ .--.   .---.  .---.  __  _| |_  __   .---.    | |__) |,--.   .--./) .---.  / .'   \_|| (___ \_|| (___ \_| 
 _.____`.[ '/'`\ \/ /__\\/ /'`\][  |'-| |-'[  | / /'`\]   |  ___/`'_\ : / /'`\;/ /__\\ | |        _.____`.  _.____`.  
| \____) || \__/ || \__.,| \__.  | |  | |   | | | \__.   _| |_   // | |,\ \._//| \__., \ `.___.'\| \____) || \____) | 
 \______.'| ;.__/  '.__.''.___.'[___][___] [___]'.___.' |_____|  \'-;__/.',__`  '.__.'  `.____ .' \______.' \______.' 
		 [__|                                                          ( ( __))                                       
*/

/* HOME */
#pageOverride-101 #mainContent {  }






































/* ======================================================================== */
/* Off Canvas Navigation
/* ======================================================================== */
#offCanvasNavButtonWrapper { display: none; float:left; margin: 0px; cursor: pointer; text-align: center; font-size: 10pt; padding: 0px; position: absolute; top: 10px; left: 4px; background-color: #3b444c; text-transform: uppercase; font-weight: 700; border-radius: 4px; }
#offCanvasNavButton { width: auto; padding: 1px 8px 0px 8px; height: 26px; margin-left: 0px; color: #fff; float: left; }
#offCanvasNavButtonWrapper img { background: none; border: none; }
#offCanvasNavButtonWrapper.closeReposition { margin-left: -240px; background-color: #fff; }
#offCanvasNavButtonWrapper.closeReposition #offCanvasNavButton { color: #3b444c; }

/****** The actual navigation when it is 'off canvas' ********/
.navigation.offCanvas { left: -220px; top: 100px; opacity: 1; width: 190px; background: none; }
.navigation.offCanvas h3 { margin-bottom: 20px; color: #fff; padding-bottom: 0px; font-size:130%; }
.navigation.offCanvas li { text-align: left; width: 100%; margin-left: 0px;}
.navigation.offCanvas li.active.deeper:before, .navigation.offCanvas li.active.deeper:after, .navigation.offCanvas li.current:before, .navigation.offCanvas  li.current:after, .navigation.offCanvas li:hover:before, .navigation.offCanvas li:hover:after { content: none; }

.navigation.offCanvas li.parent { position: relative; }
.navigation.offCanvas li .expandTier { position: absolute; top: 5px; right: -10px; display: block; padding: 0px 5px 0px 5px; color: #fff; cursor: pointer; border-radius: 5px; background: #9a0000  !important; }
.navigation.offCanvas li ul li .expandTier { position: absolute; top: 0px; right: 5px; display: block; padding: 1px 7px 0px 7px; color: #fff; cursor: pointer; border-radius: 3px; background: #9a0000 !important; }

/* Tier 1 EXPAND icons */
.navigation.offCanvas li .expand-icon-closed:before { content: "\f078"; }
.navigation.offCanvas li .open .expand-icon-open:before { content: "\f077"; }

/* Tier 2 EXPAND icons */
.navigation.offCanvas li li .expand-icon-closed:before { content: "\f067"; }
.navigation.offCanvas li li .open .expand-icon-open:before { content: "\f068"; }

/* Tier 3 EXPAND icons */
.navigation.offCanvas li li li .expand-icon-closed:before { content: "\f078"; }
.navigation.offCanvas li li li .open .expand-icon-open:before { content: "\f077"; }

.navigation.offCanvas li a { font-weight: 300; margin-left:0px; margin-bottom: 0px; background: none; color: #666; border-bottom: 1px solid #9a0000; border-top: 1px solid #9a0000; height: auto !important; padding: 14px 0px 14px 10px; font-size: 100%; width: 100% !important; line-height: 14px; color: #000 !important; }
.navigation.offCanvas li.active > a,.navigation.offCanvas .navigation li.current > a { margin-left: 0px; color: #9a0000 !important; }
.navigation.offCanvas li a:hover { color: #fff; margin-left: 0px; }
.navigation.offCanvas li li { margin-left: 0px !important; background: none; }

/* Tier 2 - Needs to be visible as this navigation is mainly for MOBILES - :hover does not work! ********/
.navigation.offCanvas ul ul { position: relative; top:0px; border: none; max-height: 0em; opacity: 0; visibility: hidden; overflow: hidden; width: 100%; margin-left: 0px;  -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; transition: all .4s ease-out; }
.navigation.offCanvas ul ul li a, .navigation.offCanvas ul ul li a:visited { background-color: #ccc !important; padding-left: 10px; border:none; padding-right: 10px; font-size: 17px;  border-bottom: 1px solid #eee; color: #fff !important; }

.navigation.offCanvas ul ul li.active a { background-color: #ccc !important; }

.navigation.offCanvas ul ul.show { max-height: 100em; opacity: 1; visibility: visible; margin-bottom: 20px; padding-top: 5px;  border-top: 2px solid #795548; }
.navigation.offCanvas ul ul a:hover { background: none !important; margin-left: 7px; padding-top: 0px; padding-bottom: 5px; line-height: 17px; margin-top: 5px; margin-bottom: 5px; }
.navigation.offCanvas ul ul ul { display: block; left: 0px; }
.navigation.offCanvas ul ul ul.show { background-color: #eee; }
.navigation.offCanvas ul ul ul a { border-bottom: 1px solid #ddd; }
.navigation.offCanvas ul ul ul ul.show { background-color: #fff; }
.navigation.offCanvas ul ul ul ul a { border-bottom: 1px solid #ccc; }
.navigation.offCanvas li:last-child ul { left:0px; }
#outerWrapper.offCanvas { left:240px; overflow: visible; }
/* Off Canvas Navigation - END
/************************************************/


















































/*
   ____   ____    ____              __   _             ___                      _                              __  _______                                                   _                 
 .' __ \ |_   \  /   _|            |  ] (_)          .'   `.                   (_)                            / / |_   __ \                                                 (_)                
/ .'  \ |  |   \/   |  .---.   .--.| |  __   ,--.   /  .-.  \  __   _   .---.  __   _ .--.  .---.  .--.      / /    | |__) |  .---.  .--.  _ .--.    .--.   _ .--.   .--.   __  _   __  .---.  
| | (_/ |  | |\  /| | / /__\\/ /'`\' | [  | `'_\ :  | |   | | [  | | | / /__\\[  | [ `/'`\]/ /__\\( (`\]    / /     |  __ /  / /__\\( (`\][ '/'`\ \/ .'`\ \[ `.-. | ( (`\] [  |[ \ [  ]/ /__\\ 
\ `.__.'\ _| |_\/_| |_| \__.,| \__/  |  | | // | |, \  `-'  \_ | \_/ |,| \__., | |  | |    | \__., `'.'.   / /     _| |  \ \_| \__., `'.'. | \__/ || \__. | | | | |  `'.'.  | | \ \/ / | \__., 
 `.___ .'|_____||_____|'.__.' '.__.;__][___]\'-;__/  `.___.\__|'.__.'_/ '.__.'[___][___]    '.__.'[\__) ) /_/     |____| |___|'.__.'[\__) )| ;.__/  '.__.' [___||__][\__) )[___] \__/   '.__.' 
																																		   [__|                                                 
*/



/* Small Devices, Tablets */
@media only screen and (min-width: 577px) and (max-width: 767px) {

}





/* Small devices (landscape phones) */
@media only screen and (min-width: 481px) and (max-width: 576px) {

}




/* Extra Small Devices, Phones */ 
@media only screen and (min-width: 321px) and (max-width: 480px) {

}




/* Custom, iPhone Retina */ 
@media only screen and (min-width: 20px) and (max-width: 320px) {

}






/* Small devices (landscape phones, 576px and up) */
@media only screen and (min-width: 20px) and (max-width: 576px) {

}






/* GENERIC PHONE */	
@media only screen and (min-width: 20px) and (max-width: 767px) {

/* Header */
#header { height: 400px; } 
#header .container {
    height: 400px;
    background-size: cover;
    background-position: -80px;
}
.companyLogo {
    position: unset;
    margin: 0px auto;
    padding: 80px 0 0 0;
}

.strapline {
    font-size: 18pt;
    width: 90%;
    position: unset;
    text-align: center;
    margin: 100px auto 0 auto;
}





/* Home */
.career-in-cyber, .kirsty-williams-quote { height: auto; }
.kirsty-williams-girls, .kirsty-williams-speaking { order: 1; height: 420px; }
.kirsty-williams-quote h2 { display: block; }
.kirsty-williams-quote h3 { display: block; }

#programme-contents { padding: 20px; }
#programme-overview h2 { font-size: 16pt; }
.year-one { padding: 120px 5% 50px 5%; }
.year-one h3 {} 
.year-one h4 {}
.year-two { padding: 0px 5% 50px 5%; }
.year-two h3 {} 
.year-two h4 {} 


/* Partners */
#cyber-first-schools .partners-image img { width: 90%; }
.partners-text { height: auto; }
.partners-image { order: 1; height: 420px; }


/* Footer */
#footer { height: auto; }
#footer .flex-empty { display: none; }
#footer .partner-logos .flex-33 { flex-basis: 49% !important; }
#footer .companyLogo {} 
#footer p { padding: 40px 0 40px 0; font-size: 10pt; }

}









/* Small devices (tablets, 768px to 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
body { font-size: 10pt; }

/* Home */
.career-in-cyber { height: auto; padding: 20px; }
.kirsty-williams-quote { height: auto; padding: 20px; }
#programme-contents { padding: 10px 10px 50px 10px; }
#programme-contents .flex-item .holdingbox p {     font-size: 9pt; }


/* Partners Page*/
.partners-text { height: auto; padding: 20px; flex-basis: 50% !important; }
.partners-image { flex-basis: 50% !important; }
#cyber-first-schools .partners-image img { width: 90%; }

/* Footer */
#footer { height: auto; }
#footer .flex-empty { flex-basis: 10% !important; }
#footer .companyLogo { margin: 0px auto 0 auto; width: 160px; } 
#footer p { padding: 40px 0 40px 0; font-size: 10pt; }
}








@media only screen and (min-width: 992px) and (max-width: 1024px) {
#programme-contents { padding: 10px 10px 50px 10px; }
#programme-contents .flex-item .holdingbox p { font-size: 9pt; }


/* Partners Page*/
.partners-text { height: auto; padding: 20px; flex-basis: 50% !important; }
.partners-text h2 { margin-top: 0.4em; }
.partners-image { flex-basis: 50% !important; }

#cyber-first-schools .partners-image img { width: 90%; }

/* Footer */
#footer { height: auto; }
#footer p { padding: 40px 0 40px 0; font-size: 10pt; }

}








/* "Medium" devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {


}



/* DESKTOPS "Laptop with MDPI Screen" */
@media only screen and (min-width: 1200px) and (max-width: 1439px) {

}




/* EXTRA LARGE "Laptops with HiDPI Screen" */
@media only screen and (min-width: 1440px) and (max-width: 1799px) {


}