@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}

body { 
      font-family:Source Sans Pro;
      font-size: 1.1em;
      text-decoration:none;
     margin:0px;
     padding:0px;
     box-shadow: 50px 0px 0px rgb(242,242,242) inset;
     }
     
 .container{
margin-left: 10%;
margin-right: 10%; 	
 	}
 
.containerBlue, .containerGrey{ 	
background-color: rgb(242, 242, 242);
width: 100%;	
 	}
 	
/*hide smartphone menu on computer*/ 	
#smartphoneMenu{display: none;}
#smallMenu{display:none;}
.displaySmartphone{display: none;}
     
 /*---------------- TECFA BANNER ---------------- */
 /*one id by word*/     
 
#banner{text-decoration: none;}
#logo{border-radius: 40px;
box-shadow: 1px 1px 1px rgb(51, 51, 51);
position: absolute;
top: 7px;
left: 7px;
}
 
 #TECFABanner{
font-family: Times New Roman;
font-weight: bold;
font-size: 45px;
text-decoration: none;
text-shadow: 4px 4px 4px #333;
color:rgb(241, 241, 241);
margin-left: 83px;
line-height: 66px;
vertical-align: middle;
padding-bottom: 5px;
}

#EDUCATIONBanner{
font-family: Arial;
font-size: 19px;
text-decoration: none;
text-shadow: 4px 4px 4px #333;
color: rgb(241, 241, 241);
margin-left: 35px;
vertical-align: top;
line-height: 50px;


}

#ANDBanner{
font-family: Times New Roman;
font-weight: bold;
font-size: 45px;
text-decoration: none;
text-shadow: 4px 4px 4px #333;
color: rgb(241, 241, 241);
line-height: 66px;
margin-left: 4px;
vertical-align: middle;
}

#TECHNOLOGIESBanner{
font-family: Arial;
font-size: 19px;
text-decoration: none;
text-shadow: 4px 4px 4px #333;
color: rgb(241, 241, 241);
margin-left: 7px;
vertical-align: bottom;
line-height: 47px;
}

/*---------------- END of TECFA BANNER  ---------------------- */

.tab{
    box-shadow: 0px 1.5px 1px -1px rgb(0, 0, 0) inset, 0px -1px 1px -1px rgba(0, 0, 0, 0.5) inset;
    width: 16%;
    padding-top: 2px;
    padding-bottom:2px;
}

.tab:hover{
box-shadow:0px 30px  0px rgba(0,0,0,0) inset,0px 1px 1px grey;
}

.navi2{
    color:#333;
    text-decoration:none;
    font-size:1em;
    line-height: 1.3em;
    vertical-align: middle;
    font-weight:bold;
    width:100%;
    display:block;
    height:100%;
    padding-top:0px;
    padding-bottom:2px;
}

.navi2:hover{
    color:white;
    text-shadow:none;
}

.blueTab{background-color:rgb(71, 122, 224);}
.yellowTab{background-color:rgb(244, 220, 20);}
.redTab{background-color:rgb(252, 43, 100);}
.orangeTab{background-color:orange}
.greenTab{background-color:rgb(139, 206, 98);}
.purpleTab{background-color:rgb(210, 80, 202);}


.navi { font-weight:bold;line-height:1em; }
a.navi:link {color:white; text-decoration:none}
a.navi:visited {color:white; text-decoration:none}
a.navi:hover {color:yellow; text-decoration:underline}

a.niceLink{text-decoration: none; }

H1 {
font-size: 2em;
margin-right: 0pt;
color: rgb(50, 50, 100);
text-transform: uppercase;
border-bottom: 1px solid #323264;
line-height: 1.9em;
}

H2 {
	font-size:1.7em;
	margin-right:0pt;
	color: white;
	text-transform: uppercase;
	background: #2D5AC5;
	padding: 2px 10px;
	}

H3 {
    font-size: 1.4em;
    font-weight: bold;
    color: rgb(106,156,200);
    border-bottom: 1px solid #6A9CC8;
    padding-bottom: 10px;
   }
   
h3 a{color: rgb(106,156,200);}   

address {
	margin-top:8pt;
	margin-bottom:20pt;
	font-size:small;}

a{color:rgb(51, 102, 204);}
a:hover{color:rgb(190, 50, 190);}

br, p, li, blockquote, dd, td { 
      font-weight:normal;
      font-size: 1em;
      text-decoration:none;
      color:#333;
 }
br{margin-bottom:10px;}
blockquote{line-height: 1.33em}
 
p,li{text-align: justify; line-height: 1.45em;padding-bottom:0.8em;}

.menu li { 
	  margin-left: 0px;
}

.arrow{ 
width: 0;
height: 0;
border-style: solid;
border-width: 0.5em 0px 0.5em 1em;
border-color: transparent transparent transparent #DD9246;
display:inline-block;
margin-right:7px;
}

.arrowBlue{ 
width: 0;
height: 0;
border-style: solid;
border-width: 0.5em 0px 0.5em 1em;
border-color: transparent transparent transparent rgb(150,190,240);
display:inline-block;
margin-right:7px;
display: none;
}


.square{ 
width: 0.5em;
height: 0.3em; 
border-top:5px solid #DD9246;
display:inline-block;}


.menu ul{ 
	  margin-top: 1px;
	  margin-bottom: 1px;
	  list-style: disc outside;
	  padding-left: 1em;
	  margin-left: 0px;
	  padding-right: 0px;
	}
		
#w3c{padding-right: 25px;}


/*SMARTPHONE STYLE*/ 	
@media only screen  and (min-device-width : 320px) and (max-device-width : 480px) {
 .container{margin-left: 1%;margin-right: 1%;}
/*hide computer menu and display smartphone menu*/ 	
#computerMenu{display: none;}
#smallMenu{display: none;}
#smartphoneMenu{display: table;}
#smartphoneMenu td{width: 100%;text-align: center;border-bottom:1px solid rgba(0,0,0,0.5);}
.navi2{ color:#333; font-size:1.1em; padding:5px;}
body{box-shadow: none;-webkit-text-size-adjust: none;}
td, p, li, a{font-size: 1.1em;-webkit-text-size-adjust: none;}
.noSmartphone{display: none;}
.displaySmartphone{display: block;}
}

/*SMALL WINDOWS STYLE*/ 	
@media only screen and (max-width : 1024px) and (min-device-width : 480px) {
 .container{margin-left: 1%;margin-right: 1%;}
/*hide computer menu and display smartphone menu*/ 	
#computerMenu{display: none;}
#smallMenu{display: table;}
#smallMenu td{width: 50%; text-align: center;border-bottom: 2px solid white;}
.tab{box-shadow:0px -1px 1px -1px rgba(0, 0, 0, 0.5) inset;}
body{box-shadow: none;}
}

/*VERY SMALL WINDOWS STYLE*/ 	
@media only screen and (max-width : 550px) {
 .container{margin-left: 1%;margin-right: 1%;}
/*hide computer menu and display smartphone menu*/ 	
#computerMenu{display: none;}
#smallMenu{display: none;}
#smartphoneMenu{display: table;}
#smartphoneMenu td{width: 100%;text-align: center;border-bottom:1px solid rgba(0,0,0,0.5);}
.navi2 {padding-top:2px;padding-bottom:4px;}
body{box-shadow: none;}
.noSmartphone{display: none;}
.noSmallScreen{display: none;}
}