/************************************************************************************
RESET HTML and HTML5 ELEMENTS TO BLOCK
*************************************************************************************/
	html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, th, tr, td, dd, dt, ol, ul, li, tbody, tfoot, th, thead, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset {
		margin: 0;
		padding: 0;
		border: 0;
		vertical-align: baseline;

	}


/* Google Fonts */
/* Light - 300, Normal - 400, Bold - 700*/


    
 
	h1, h2, h3,h4,p{
		
		font-family: 'Oxygen', sans-serif;
		margin: 0.5em;

	}

	/* main title */

	h1{
		font-weight: 300;
		font-size: 1.5em;

		display: inline-block;
		vertical-align: middle;

	}
	h4{
		font-weight: 300;
		font-size: 1em;
		color: white;

		display: inline-block;
	

	}

	/* content */

	p{
		font-weight: 300;
		font-size: 1em;

	}
	

	/* portfolio piece title */

	h2{

		font-weight: 300;
		font-size: 0.5em;

	}

	.red{

		font-weight: 700;
		

	}

/* links */

	a:link {

		font-family: 'Oxygen', sans-serif;
		font-weight: 300;
		font-size: 1em;
		color:#000000;
		
	}

	a:visited{

		font-family: 'Oxygen', sans-serif;
		font-weight: 300;
		font-size: 1em;
		color:#a3a3a3;
	}

/* logo */
	
	img.logo{

		height:auto;

		display: block;
		margin-left: auto;
		margin-right: auto;


		padding-top: 2em;
		padding-bottom: 2em;
	}

	img.svgsm{

		height: 3em;
		width: auto;
		padding: 0.5em;
	}

	img.desc{
		position: relative;
		width: 100%;
		
		text-align: left;
	}



/* Classes */
	
	img.blink{

		height:5%;
	}	

/* sections */



	/* Section heading styling */


	.containers{

		width:75%;
		height:2em;

		padding-top: 1.5em;

		display:block;
		margin-left: auto;
		margin-right: auto;

		text-align: center;
		position: relative;
		vertical-align: middle;






	}

	.title{

		/* testing using a border around the div box
		border:solid;
		border-width: 1px;*/
		height: 2.75em;


		padding-left: 1.25em;
		padding-right: 1.25em;

		background-color: #ffffff;

		display:inline-block;
		position: relative;
		vertical-align: middle;

		z-index: 1;
		top:-2em;



	}

	/* introduction */

	.introduction{
		text-align: center;
	}

	/* portfolio */	
	.works{

		padding-top: 1.25em;

		width:75%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align:center;
		
	}
	
	/* Individual portfolio work */

	.hide{


		width:85%;
		text-align: left;
		display:none;
		position:relative;


	}
	.closed{
	
		cursor: pointer;


		text-align: center;
		outline-width: thick;
		outline-color:#808080;
		
		color:#ffffff;
		
	
		width:12em;
		height:1.5em;
		display:block;
	}
	
	.closed p{ 
	
		color: #ffffff;
		
		
	
	}

	



	.work{

		/*for testing : width:17em;*/
		width:30%;
		height: 25em;
		cursor: pointer;
		/*height:15em;*/


		display:inline-block;
		position:relative;
		
		
		/*border:solid;
		border-width: 0.12em;
		border-color:#808080;*/
		margin: 0.25em;


		/* image treatment*/
		overflow: hidden;
		background-size: contain;

		background-position: center center;
		background-repeat:no-repeat;



		
	}

	/*expand and retract */




	#a{

		background-image: url('images/new/pa.png');


	}

	#b{

		background-image: url('images/new/dmf.png');


	}
	#c{

		background-image: url('images/new/sc.png');

	}
	#d{

		background-image: url('images/new/gsl.png');

	}
	#e{

		background-image: url('images/new/cs.png');

	}
	#f{

		background-image: url('images/new/ba.png');

	}
	#g{

		background-image: url('images/new/av.png');

	}


	#h{

		background-image: url('images/new/chemo1.png');
	}

	#i{

		background-image: url('images/new/service1.png');
	}

	#j{

		background-image: url('images/new/nurse1.png');
	}
	
	#k{

		background-image: url('images/new/brochure1.png');
	}

	#l{

		background-image: url('images/new/travelguide1.png');
	}

	#m{

		background-image: url('images/new/8text.png');
	}









	/* process blog */
		.blogdescription{
			text-align: center;
			padding-bottom: 2em;
		}


/* dyname Shapes and Lines */

	/* adjustatble horizontal line */

	.beforeline {
		max-width: 5%;
		min-width: 100%;

		border:solid;
		border-width: 0.12em;
		border-color:#808080;


		display:inline-block;
		vertical-align: middle;
		position:relative;

		z-index: -1;
		top:0;

	}

	/*.afterline {
		max-width: 5%;
		min-width: 30%;
		padding-left: 0.5em;

		border:solid;
		border-width: 0.12em;
		border-color:#808080;


		display:inline-block;
		vertical-align: middle;
		position:relative;

	}*/


	/*Template*/

	
	.templateline {
		max-width: 5%;
		min-width: 80%;

		border:solid;
		border-width: 0.12em;
		border-color:#808080;


		display:inline-block;
		vertical-align: middle;
		position:relative;

		z-index: -1;
		top:0;

	}


	img.larrows{


		position:relative;
		display:inline-block;
		float:left;

		vertical-align: middle;


		z-index: 999;


	}

	img.rarrows{


		position:relative;
		display:inline-block;
		float: right;



		z-index: 998;



	}

	

	/* SVG SHAPES */



  	img.svg { 
  		display: inline-block; 		
  		position:relative;
		vertical-align: middle;

  	}

  	img.svgsm { 

  		margin-right:0.25em; 
  		margin-left:0.25em;
  		margin-bottom: 0.25em;
  		display: inline-block; 		
  		position:relative;
		vertical-align: middle;

  	}

  	html.svg img.svg { display: inline; }

  	/* Fallback image */
  	img.png { display: inline; }
  	html.svg img.png { display: none; }

    

	/*circle*/

	.circle {
		border-radius: 50%;
		width: 1.15em;
		height: 1.15em; 
		/* width and height can be anything, as long as they're equal */

		border: solid;
		border-width: 0.13em;

		display:inline-block;
		position:relative;
		vertical-align: middle;
	}

	/* square */
	.square {
		width: 15px;
		height: 15px;

		border: solid;
		border-width: 0.13em;


		display:inline-block;
		position:relative;
		vertical-align: middle;

	}

	/* triangle */
	.triangle-down {
	  width: 0;
	  height: 0;
	  border: 0.26em solid transparent;
	  border-left: 0.26em solid red;
	  background: #ffffff;

	}	

	.triangle-right {
		width: 0;
		height: 0;
		border-top: 50px solid transparent;
		border-left: 100px solid red;
		border-bottom: 50px solid transparent;
	}


/*Template css*/

	.workdescription{


		display: block;
		margin-left: auto;
		margin-right: auto;


		width: 75%


	}