/*Applies to the div that contains all the 'parts' (2, 3, or 4) for each module*/
.flex_module {
padding: 0;
margin:0;
}

/* Module27. FLEX FOR TWO parts. */
.module27_flexcontainer {
/*even if is no mention of flex in the four parts, fact of 'display: flex  here means they will be horizontally next to eachother*/
display:flex;
/*
box-shadow: 3px 3px 20px 3px #333;
*/
width: 96%;
margin: 0 auto;
}

.module27_firstoftwo {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding:.5em;
line-height:;
background-color:#000064;
color:;
flex: 1;
}

.module27_secondoftwo{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color:azure;
flex:3; 
}  

/*---TABLET MEDIA QUERY.  Module27--*/
@media screen and (max-width: 768px){
.module27_flexcontainer {
display: block;
}
.module27_firstoftwo {
background-color: slateblue;
}
}
/* END Module27.  FLEX FOR TWO parts */ 
 
 
 
 /* Module27b. FLEX FOR TWO parts. Full width.*/
.module27b_flexcontainer {
/*even if is no mention of flex in the four parts, fact of 'display: flex  here means they will be horizontally next to eachother*/
display:flex;
/*box-shadow: 3px 3px 20px 3px #333;*/
/*96% on non Full Width*/
width:100%;
margin: 0 auto;
}

.module27b_firstoftwo {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding:.5em;
line-height:;
background-color:#000064;
color:;
flex: 1;
/* New for Full Width */
padding-left: 3%;
padding-right: 3%;
}

.module27b_secondoftwo{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color:azure;
flex:3; 
/* New for Full Width */
padding-left: 3%;
padding-right: 3%;
}  

/*---TABLET MEDIA QUERY.  Module27b. Full width.--*/
@media screen and (max-width: 768px){
.module27b_flexcontainer {
display: block;
}
.module27b_firstoftwo {
background-color: slateblue;
}
}
/* END Module27b.  FLEX FOR TWO parts. Full width. */

 
 

/* Module28. FLEX FOR THREE parts. */
.module28_flexcontainer {
/*even if is no mention of flex in the four parts, fact of 'display: flex  here means they will be horizontally next to eachother*/
display:flex;
/*
box-shadow: 3px 3px 20px 3px #333;
*/
width: 96%;
margin: 0 auto;
}

.module28_firstofthree {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding:.5em;
line-height:;
background-color: #000064 !important; 
color:;
flex: 1;
}

.module28_secondofthree{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color:lightcyan;
flex:3; 
}  

.module28_forborder {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
border: solid 2px #666;
padding: .5em;
}

.module28_thirdofthree{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color:midnightblue;
color:;
flex: 2;
}

/*---TABLET MEDIA QUERY.  Module28 --*/
@media screen and (max-width: 768px){
.module28_flexcontainer {
display: block;
}
.module28_firstofthree {
background-color: teal;
}
}
/* END Module28. FLEX FOR THREE parts */ 
 
 
 

/* Module28b. FLEX FOR THREE parts. Full width.*/
.module28b_flexcontainer {
/*even if is no mention of flex in the four parts, fact of 'display: flex  here means they will be horizontally next to eachother*/
display:flex;
/*box-shadow: 3px 3px 20px 3px #333;*/
/*96% on non Full Width*/
width: 100%;
margin: 0 auto;
}

.module28b_firstofthree {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding:.5em;
line-height:;
background-color: #000064;
color:;
flex: 1;
/* New for Full Width */
padding-left: 3%;
padding-right: 3%;
}

.module28b_secondofthree{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color:lightcyan;
flex:3;
/* New for Full Width */
padding-left: 3%;
padding-right: 3%;
}  

.module28b_forborder {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
border: solid 2px #666;
padding: .5em;
}

.module28b_thirdofthree{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color:midnightblue;
color:;
flex: 2;
/* New for Full Width */
padding-left: 3%;
padding-right: 3%;
}

/*---TABLET MEDIA QUERY.  Module28b. Full width --*/
@media screen and (max-width: 768px){
.module28b_flexcontainer {
display: block;
}
.module28b_firstofthree {
background-color: teal;
}
}
/* END Module28b. FLEX FOR THREE parts. Full width */ 
 
 
 

/*Module29. FLEX FOR FOUR parts*/ 
.module29_flexcontainer {
/*even if is no mention of flex in the four parts, fact of 'display: flex  here means they will be horizontally next to eachother*/
display:flex;
/*
box-shadow: 3px 3px 20px 3px #333;
*/
width: 96%;
margin: 0 auto;
}

.module29_firstoffour {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding:.5em;
line-height:;
background-color:lightslategray;
color:;
flex: 2;
}

.module29_secondoffour{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color:azure;
flex:1; 
}  

.module29_thirdoffour{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color:lightslategray;
flex: 2;
}

.module29_fourthoffour{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color:lightcyan;
flex:3;
}

/*---TABLET MEDIA QUERY. Module29--*/
@media screen and (max-width: 768px){
.module29_flexcontainer {
display: block;
}

.module29_firstoffour {
background-color: cadetblue;
}
}
/* END Module29. FLEX FOR FOUR parts */ 




/*Module29b. FLEX FOR FOUR parts. Full screen.*/ 
 .module29b_flexcontainer {
/*even if is no mention of flex in the four parts, fact of 'display: flex  here means they will be horizontally next to eachother*/
display:flex;
/*
box-shadow: 3px 3px 20px 3px #333;
*/
/*96% on non Full Width*/
width: 100%;
margin: 0 auto;
}

.module29b_firstoffour {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding:.5em;
line-height:;
background-color:lightslategray;
color:;
flex: 2;

/* New for Full Width */
padding-left: 2%;
padding-right: 2%;
}

.module29b_secondoffour{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color:azure;
flex:1; 

/* New for Full Width */
padding-left: 2%;
padding-right: 2%;
}  

.module29b_thirdoffour{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color:lightslategray;
flex: 2;

/* New for Full Width */
padding-left: 2%;
padding-right: 2%;
}

.module29b_fourthoffour{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color:lightcyan;
flex:3;

/* New for Full Width */
padding-left: 2%;
padding-right: 2%;
}

/*---TABLET MEDIA QUERY. Module29b. Full width--*/
@media screen and (max-width: 768px){
.module29b_flexcontainer {
display: block;
}

.module29b_firstoffour {
background-color: cadetblue;
}
}
/* END Module29b. FLEX FOR FOUR parts. Full width */ 





/*--------------For DrivingCool------------------*/


/* Module28. FLEX FOR THREE parts. */
.module28_flexcontainerDrivingCool {
/*even if is no mention of flex in the four parts, fact of 'display: flex  here means they will be horizontally next to eachother*/
display:flex;
/*
box-shadow: 3px 3px 20px 3px #333;
*/
width: 96%;
margin: 0 auto;
}

.module28_firstofthreeDrivingCool {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding:.5em;
line-height:;
background-color: red !important; 
color:;
flex: 1;
}

.module28_secondofthreeDrivingCool{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color: orange;
flex:1; 
}  

.module28_forborderDrivingCool {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
border: solid 2px #666;
padding: .5em;
}

.module28_thirdofthreeDrivingCool{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color: green;
color:;
flex: 1;
}

/*---TABLET MEDIA QUERY.  Module28 --*/
@media screen and (max-width: 768px){
.module28_flexcontainerDrivingCool {
display: block;
}
.module28_firstofthreeDrivingCool {
background-color: teal;
}
}
/* END Module28. FLEX FOR THREE parts */ 
 
 











/* Module28b. FLEX FOR THREE parts. Full width.*/
.module28b_flexcontainerDrivingCool {
/*even if is no mention of flex in the four parts, fact of 'display: flex  here means they will be horizontally next to eachother*/
display:flex;
/*box-shadow: 3px 3px 20px 3px #333;*/
/*96% on non Full Width*/
width: 100%;
margin: 0 auto;
}

.module28b_firstofthreeDrivingCool {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding:.5em;
line-height:;
background-color: red;
color:;
flex: 1;
/* New for Full Width */
padding-left: 3%;
padding-right: 3%;
}

.module28b_secondofthreeDrivingCool {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color: orange;
flex:1;
/* New for Full Width */
padding-left: 3%;
padding-right: 3%;
}  

.module28b_thirdofthreeDrivingCool {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: .5em;
line-height:;
background-color: green;
color:;
flex: 1;
/* New for Full Width */
padding-left: 3%;
padding-right: 3%;
}

/*---TABLET MEDIA QUERY.  Module28b. Full width --*/
@media screen and (max-width: 768px){
.module28b_flexcontainerDrivingCool {
display: block;
}
.module28b_firstofthreeDrivingCool {
background-color: ;
}
}
/* END Module28b. FLEX FOR THREE parts. Full width */ 
 
 

/*-------------END: For DrivingCool------------------*/