/*UTIL*/
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Color coding section RED*/
body {
   	background: red;
}  
  	
.header {
	background: red;
}

.icobox {	
	   background: red;
}

.navbox  {
	   background: red;
	   color:white;
}

.nav {
	background: red;
}

.article {
   background: white
}
   
.footer {
	background: red;
	color:white;
}

.footer p{
	color:white;
}

.footer a{
	color:white;
}

.aside{
	background:#eee;
}

#navBar a:hover{
	color:white;
}

#navBar a{
	color:white;
}


//***** Alternative Color //
/* Color coding section GOLD*/
/*
.colorBackground {
	   	background: #ffD700;
   	background-color:#ffD700;

}
body {
   	background: #ffD700;
   	background-color:#ffD700;
}  
  	
.header {
	background: #ffD700;
}

.icobox {	
	   background: #ffD700;
}

.navbox  {
	   background: #ffD700;
}

.nav {
	background: #ffD700;
	background-color: #ffD700;
}

.article {
   background: white
}
   
.footer {
	background: #ffD700;
}

.aside{
	background:#ccc;
}


#navBar a:hover{
	color:black;
}

#navBar a{
	color:black;
}

*/

/************************************ Boxing section */

.nav{
	padding-top:1.0em;
	padding-bottom:1.0em;
}

.article{
	padding-top:1.0em;
	padding-bottom:1.0em;
}

.aside  {
	padding-top:1.0em;
	padding-bottom:1.0em;
}
  
.navbox  {
	padding: 0px 0px 0px 0px ;
}

.icobox {	
	   padding: 0px 0px 0px 25px;
}

.wrapper{
	-ms-box-orient: horizontal;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row;
	flex-flow: row;
  
	-webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    
    -webkit-box-align: end;
    -moz-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.asideContainerSafari
{
	display: block;
	width:340px;
}

.main {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    
	-webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
        
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;}

.nav {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 0 250px;
    -ms-flex: 0 0 250px;
    flex: 0 0 250px;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
 
.article {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -webkit-flex: 2 1 auto;
    -ms-flex: 2 1 auto;
    flex: 2 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
  
.aside {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 1;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 0 380px;
    -ms-flex: 0 0 380px;
    flex: 0 0 380px;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
   
.article{
	padding-left:3em;;
	padding-right:1em;;
}

.aside {
	padding-left:1em;;
	padding-right:0.5em;;
}
 
.header, .footer, .aside, .article, .nav {
	border-radius: 7pt;
	margin: 3 pt;
}

.article {
	border-radius: 10px 0px 0px 10px;
	margin: 3pt 0pt 3pt 3pt;
}

.aside {
	border-radius: 0px 10px 10px 0px;
	margin: 3pt 3pt 3pt 0pt;
}


.header, .footer {
	text-align:center;
		display:block;
}
   
.footer {
	padding: 20px 0px 20px 0px;
}
   
.figureblock{
	display:block;
	text-align:center;    
    padding-bottom:30px;
}

.mainHor2Vert {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: colum;
    flex-direction: column;
    
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    
	-webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
        
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;}

/* For narrow display  ************************ */

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

	.center-screen{
		text-align:center;
	}
	
	.asideContainerSafari
	{
		display: block;
		width:100%;
	}
	
	.wrapper {
	     display: -webkit-box;
	    display: -moz-box;
	    display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-direction: normal;
	    -moz-box-direction: normal;
	    -webkit-box-orient: vertical;
	    -moz-box-orient: vertical;
	    -webkit-flex-direction: column;
	    -ms-flex-direction: column;
	    flex-direction: column;
	    -webkit-flex-wrap: nowrap;
	    -ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	    -webkit-box-pack: center;
	    -moz-box-pack: center;
	    -webkit-justify-content: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    -webkit-align-content: flex-start;
	    -ms-flex-line-pack: start;
	    align-content: flex-start;
	    -webkit-box-align: stretch;
	    -moz-box-align: stretch;
	    -webkit-align-items: stretch;
	    -ms-flex-align: stretch;
	    align-items: stretch;
	}
	
	.main {
	    display: -webkit-box;
	    display: -moz-box;
	    display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-direction: normal;
	    -moz-box-direction: normal;
	    -webkit-box-orient: vertical;
	    -moz-box-orient: vertical;
	    -webkit-flex-direction: column;
	    -ms-flex-direction: column;
	    flex-direction: column;
	    -webkit-flex-wrap: nowrap;
	    -ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	    -webkit-box-pack: center;
	    -moz-box-pack: center;
	    -webkit-justify-content: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    -webkit-align-content: flex-start;
	    -ms-flex-line-pack: start;
	    align-content: flex-start;
	    -webkit-box-align: stretch;
	    -moz-box-align: stretch;
	    -webkit-align-items: stretch;
	    -ms-flex-align: stretch;
	    align-items: stretch;
	}	
	      
	.figureblock{
		 -webkit-box-ordinal-group: 1;
	    -moz-box-ordinal-group: 1;
	    -webkit-order: 0;
	    -ms-flex-order: 0;
	    order: 0;
	    -webkit-box-flex: 0;
	    -moz-box-flex: 0;
	    -webkit-flex: 0 1 auto;
	    -ms-flex: 0 1 auto;
	    flex: 0 1 auto;
	    -webkit-align-self: auto;
	    -ms-flex-item-align: auto;
	    align-self: auto;
	    
	    padding:20px;
	}
		
	.header, .article {
	    -webkit-box-ordinal-group: 3;
	    -moz-box-ordinal-group: 3;
	    -webkit-order: 2;
	    -ms-flex-order: 2;
	    order: 2;
	    -webkit-box-flex: 0;
	    -moz-box-flex: 0;
	    -webkit-flex: 0 1 auto;
	    -ms-flex: 0 1 auto;
	    flex: 0 1 auto;
	    -webkit-align-self: auto;
	    -ms-flex-item-align: auto;
	    align-self: auto;
	}
		   
	.footer, .aside {
	    -webkit-box-ordinal-group: 3;
	    -moz-box-ordinal-group: 3;
	    -webkit-order: 2;
	    -ms-flex-order: 2;
	    order: 2;
	    -webkit-box-flex: 0;
	    -moz-box-flex: 0;
	    -webkit-flex: 0 1 auto;
	    -ms-flex: 0 1 auto;
	    flex: 0 1 auto;
	    -webkit-align-self: auto;
	    -ms-flex-item-align: auto;
	    align-self: auto;
	}
		   
	.nav {
	    -webkit-box-ordinal-group: 7;
	    -moz-box-ordinal-group: 7;
	    -webkit-order: 6;
	    -ms-flex-order: 6;
	    order: 6;
	
		display: -webkit-box;
	    display: -moz-box;
	    display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-direction: normal;
	    -moz-box-direction: normal;
	    -webkit-box-orient: horizontal;
	    -moz-box-orient: horizontal;
	    -webkit-flex-direction: row;
	    -ms-flex-direction: row;
	    flex-direction: row;
	    -webkit-flex-wrap: nowrap;
	    -ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	    -webkit-box-pack: center;
	    -moz-box-pack: center;
	    -webkit-justify-content: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    -webkit-align-content: space-between;
	    -ms-flex-line-pack: justify;
	    align-content: space-between;
	    -webkit-box-align: center;
	    -moz-box-align: center;
	    -webkit-align-items: center;
	    -ms-flex-align: center;
	    align-items: center;    
	}
	
	.icobox {
		padding-top:20px;
	}
	
	.navbox {
		padding-top:20px;
	}
	
	.mainHor2Vert {
	    display: -webkit-box;
	    display: -moz-box;
	    display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-direction: normal;
	    -moz-box-direction: normal;
	    
	    -webkit-box-orient: horizontal;
	    -moz-box-orient: horizontal;
	    -webkit-flex-direction: row;
	    -ms-flex-direction: row;
	    flex-direction: row;
	    
	    -webkit-flex-wrap: nowrap;
	    -ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	    
		-webkit-box-pack: justify;
	    -moz-box-pack: justify;
	    -webkit-justify-content: space-between;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	        
	    -webkit-align-content: stretch;
	    -ms-flex-line-pack: stretch;
	    align-content: stretch;
	    -webkit-box-align: stretch;
	    -moz-box-align: stretch;
	    -webkit-align-items: stretch;
	    -ms-flex-align: stretch;
	    align-items: stretch;
	}
	
	.header, .footer, .aside, .article, .nav {
		border-radius: 7pt;
		margin: 3 pt;
	}
	
	.article {
		border-radius: 10px 10px 0px 00px;
		margin: 3pt 3pt 0pt 3pt;
	}
	
	.aside {
		border-radius: 0px 0px 10px 10px;
		margin: 0pt 3pt 3pt 3pt;
	}
}
/************** PRINTING ******************/

@media print {

	.main {
	    -webkit-flex-flow: column;
	            flex-flow: column;
	       flex-direction: column;
	}

	.header, .aside, .nav {
		display:none;
	}
}

/************** PERSONAL ******************/
.p-wrapper {
   display: 	-webkit-flex;
   display:         	flex;
   		-webkit-order: 	3;
           		order: 	3;

  /*-webkit-flex-flow: 	row;
  flex-flow: 			row;*/
  /*justify-content: flex-start;*/
  flex-wrap: wrap;
  
}

.p-box {
	   /*-webkit-flex: 	1 1 60%;
           		flex:	1 1 60%;*/
   		-webkit-order: 	4;
           		order: 	4;
           		display: 	inline-block;
           	border: 	1px solid #555555;
           	height: 	auto;
	border-radius: 		5pt;
	background-color:	silver;
	margin:20px;
	padding: 10px;
}