*{

	transition: all 0.21s;

	-webkit-transition: all 0.21s; /* Safari */

}



body{

	padding:0;	

	margin:0;

    font-family:Open Sans,Source Sans Pro,Helvetica,Arial,sans-serif;

	background-color:#E1E1E1;

	background-image:url('images/bodybg.jpg');

	background-position:bottom;

	background-repeat:repeat-x;

}



.text-justify{

	text-align:justify;	

}



h1{

	font-family: 'EB Garamond', serif;	

	font-size:49px !important;	

	text-align:center;

	font-weight:normal;

	

	color:#444444;

}







h2{

	text-align:center;		

	 font-family: 'EB Garamond', serif;	

	font-weight:normal;

	font-size:24px !important;	
			

}



body:hover h2{

	transform: scale(1.001,1.001);

	-ms-transform: scale(1.001,1.001); /* IE 9 */

	-webkit-transform: scale(1.001,1.001); /* Safari and Chrome */	

}





h3{

	  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	text-align:center;		

	font-weight:100 !important;

	font-size:24px !important;	



}





body:hover h3{



}



		

	h3{

		font-size:20px !important;	

	}



.frontpageh3{

	margin:80px 0px 80px 0px;	

}



h4{	

	/* font-family: 'EB Garamond', serif;	*/

	font-weight:normal;

	font-size:20px !important;	

	

	color:#131C22;

	

			

	transition: font-size 0.1s, -webkit-transform 100s;	

	transform: scale(1,1);

	-ms-transform: scale(1,1); /* IE 9 */

	-webkit-transform: scale(1,1); /* Safari and Chrome */

}



.separaterule{

	width:100%;

	height:1px;

	background-color:#c2c2c2;

	margin-top:15px;

	margin-bottom:15px;

}



.textblack{

	color:#000;	

}



.textblackhighlight{

	color:#000;	

	background-color:#243038;

	color:#FFF;

	padding:3px;

	display:inline;

	overflow:scroll;

	

		

	-webkit-border-radius: 2px;    

    border-radius: 2px;

}



.textblackhighlight:hover{

	color:#FFF;

	background-color:#000;

}



.textblackhighlight:hover .mtooltip{

	opacity:1;

	visibility:visible;

}



.mtooltip{

	display:inline-block;

	position:relative;

	top:40px;

	left:-2px;

	width:0px;

	overflow:visible;

	white-space:nowrap;

	font-size:14px;

	color:#999;

    font-family:Open Sans,Source Sans Pro,Helvetica,Arial,sans-serif;

	text-align:center;

	opacity:0;

	visibility:hidden;		

}



.allcontain{

	width:auto;

	max-width:1140px;

	padding:50px 20px 20px 20px;	

	margin:0 auto;

}



.logochanger{

	width:198px;

	height:198px;

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

	background-position:center center;

	

	margin:0 auto;

	

	-webkit-border-radius: 49px;    

    border-radius: 49px;

	

	margin-top:148px;

	

	margin-top:50px;

	margin-bottom:50px;

	

	transition: all 0.5s;

	opacity:0.8;

}



.logochanger:hover{

	opacity:1;

}





.allclick{

	width:100%;

	height:100%;

	position:relative;

	z-index:999;

	background-color:#F00;

	display:inline-block;

	float:left;

	top:-210px;

}



.categoryholder{

	width:auto;

	background-color:#EBEBEB;	

	height:210px;	

		

	-webkit-border-radius: 5px;    

    border-radius: 5px;

	

	margin-bottom:40px;

	

	-webkit-box-shadow:  5px 5px 0px 0px rgba(0, 0, 0, 0.1); 	

	box-shadow:  5px 5px 0px 0px rgba(0, 0, 0, 0.1);

}





.categoryholder:hover{

	-webkit-box-shadow:  7px 7px 0px 0px rgba(0, 0, 0, 0.2); 	

	box-shadow:  7px 7px 0px 0px rgba(0, 0, 0, 0.2);

}



.categoryicon{

	width:250px;

	height:210px;

	background-position:center center;

	background-repeat:no-repeat;

	-webkit-border-radius: 5px 0px 0px 5px;

	border-radius: 5px 0px 0px 5px;

	float:left;

	opacity:0.9;

}



.categoryholder:hover .categoryicon{

	opacity:1;	

	background-size:73%;

}





	.iconweb{

		background-image:url('images/iconweb.jpg');

		background-color:#1b2d3b;

	}

	.iconconvert{

		background-image:url('images/iconconvert.jpg');	

		background-color:#c4273c;

	}

	.icondesign{

		background-image:url('images/icondesign.jpg');	

		background-color:#319dc1;

	}



.categoryimage{

	width:auto;

	margin-left:250px;

	height:210px;	

	position:relative;

	top:0px;

	border-style:solid;

	border-width:0px;

	border-color:#FFF;



	

	-webkit-border-radius: 0px 5px 5px 0px;

    border-radius: 0px 5px 5px 0px;

	

	opacity:0.6;

}



.categoryholder:hover .categoryimage{

	opacity:1.0;	

}



	.webimage{

		background-image:url('images/webimage.jpg');

		

		background-size:120%;		

		background-position:center center;	

			



		

		width:650px;

		height:210px;	

	}

	

	.categoryholder:hover .webimage{		

		background-size:100%;

		background-position:top center;

	}

	

	.convertimage{

		background-image:url('images/convertimage.jpg');

		

		background-size:120%;		

		background-position:center center;	

			



		

		width:650px;

		height:210px;	

	}

	

	.categoryholder:hover .convertimage{		

		background-size:100%;

		background-position:top center;

	}

	

	.graphicimage{

		background-image:url('images/graphicimage.jpg');

		

		background-size:120%;		

		background-position:center center;	

			



		

		width:650px;

		height:210px;	

	}

	

	.categoryholder:hover .graphicimage{		

		background-size:100%;

		background-position:bottom center;

	}

	

.categoryinfo{

	width:00px;

	height:80px;

	position:absolute;

	top:130px;

	right:0px;

	background-color:#000;

	background-color:rgba(0,0,0,0.8);	

	overflow:hidden;

	color:#CCC;	

	

	text-shadow: 1px 1px 1px #000000;

     filter: dropshadow(color=#000000, offx=1, offy=1);

}



.categoryholder:hover .categoryinfo{	

	width:650px;

}



.categorytext{

	margin:20px;	

}



@media only screen and (max-width: 979px) {

	

	h1{

		font-size:49px !important;	

	}

	

	h2{

		font-size:16px !important;	

	}

		

	h3{

		font-size:20px !important;	

	}

	

	.logochanger{

		opacity:1.0;	

	}

	

	

	.mtooltip{

		display:none;

	}

	

	.categoryicon{		

		width:100%;	

		height:110px;

		background-size:130px;

		

		-webkit-border-radius: 5px 5px 0px 0px;

		border-radius: 5px 5px 0px 0px;

		

		opacity:1.0

	}

	

	.categoryholder:hover .categoryicon{

		opacity:1;	

		background-size:140px;

	}

	

	.categoryholder{

		width:auto;

		background-color:#EBEBEB;	

		height:240px;	

			

		-webkit-border-radius: 5px;    

		border-radius: 5px;

		

		margin-bottom:40px;

		

		-webkit-box-shadow:  5px 5px 0px 0px rgba(0, 0, 0, 0.1); 	

		box-shadow:  5px 5px 0px 0px rgba(0, 0, 0, 0.1);

	}

	

	.categoryimage{

		width:auto;

		margin-left:0px;

		height:130px;	

		position:relative;

		top:110px;

		border-style:solid;

		border-width:0px;

		border-color:#FFF;

		

		opacity:1.0; /* opera@ android seems to not like the opacity value */

	

		

		-webkit-border-radius: 0px 0px 5px 5px;

		border-radius: 0px 0px 5px 5px;

	}

	

	.categoryinfo{

		display:none;	

	}

	

}



/*



.logochanger .logoinnerbanner{

	background-image:url('images/lmlogoskills.jpg');	

	background-position:center center;

	width:	870px;

	height:0px;

	

	transition: all 0.2s;

	-webkit-transition: all 0.2s;

	

	position:relative;

	width:0px;

	left: 49px;

	top:49px;

	

	-webkit-border-radius: 5px;    

    border-radius: 5px;

}



.logochanger:hover .logoinnerbanner{

	width:870px;

	height:	296px;

	left: -376px;

	top:-99px;	

}



*/





















/* LMargison.com Responsive slider */



#slider{

	background:none;

	background-color:#26313A;

}



.ui-slider-handle{

	border-color:#1DA7FA !important;	

	border-width:1px !important;

	border-style:solid !important;

	

	background:none !important;

	background-color:#06C !important;	

}



.deviceholder{

    display:block;

    overflow:visible;

    width:300px;

    padding:0px;

    margin:0 auto;



    float:none;

    transition: all 0s;

    -moz-transition: all 0s; /* Firefox 4 */

    -webkit-transition: all 0s; /* Safari and Chrome */

    -o-transition: all 0s; /* Opera */

}



#devicedisplay{

    height:160px;

    height:140px;



    width:220px;

    background-color:#000;

    margin:0px auto;

    margin-top:20px;

    margin-top:40px;



    margin-bottom:20px;



    padding:5px;



    transition: all 0.2s;

    -moz-transition: all 0.2s; /* Firefox 4 */

    -webkit-transition: all 0.2s; /* Safari and Chrome */

    -o-transition: all 0.2s; /* Opera */



    -webkit-border-radius: 5px 5px 5px 5px;

    border-radius: 5px 5px 5px 5px;



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

    background-size:100% 100%;



    -webkit-box-shadow:  3px 8px 8px 0px rgba(0, 0, 0, 0.2);

    box-shadow:  3px 8px 8px 0px rgba(0, 0, 0, 0.2);

}



.displayiframe{

    border-style:none;

    overflow:hidden;

    overflow-y:hidden;

    width:100%;

    height:100%;

    margin:0%;

    opacity:1;

}



#infodisplay{

    width:100%;

    text-align:center;

    margin:0 auto;

    margin-top:24px;

    font-size:16px;

}





    .indevpage{

        background-color:#d9d9d9;

        width:98%;

        height:97%;

        opacity:1;

        overflow:hidden;

        padding:1px;

        border-bottom-style:solid;

        border-bottom-color:#d9d9d9;

        border-bottom-width:1px;



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

        background-size:100% 100%;

    }



    .ido{

        background-color:#06C;

    }



    .indevcontain{

        max-width:220px;

        margin:0 auto;

        overflow:hidden;

    }



    .indevhead{

        width:100%;

        height:30px;

        margin-bottom:2%;

        clear:both;



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

        background-size:100% 100%;

    }





    .indevfooter{

        width:100%;

        height:60px;

        margin-bottom:2%;

        clear:both;



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

        background-size:100% 100%;

    }



    #indevleft{

        float:left;

        width:60%;

        height:92px;

        margin-bottom:2%;



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

        background-size:100% 100%;

    }



    #indevright{

        float:left;

        width:38%;

        margin-left:2%;

        height:92px;

        margin-bottom:2%;



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

        background-size:100% 100%;

    }



/* end of resp slider */







/* contact form */

.contactinput{

	display:block;	

	margin-bottom:10px;

	width:90%;

	background-color:#D2D2D2;

	border-style:solid;

	border-color:#A4A4A4;

	border-width:1px;

	font-size:18px;

	font-weight:200;

    font-family:Open Sans,Source Sans Pro,Helvetica,Arial,sans-serif;

	min-height:30px;	

	-webkit-border-radius: 2px;    

    border-radius: 2px;

	

	-webkit-box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.05);

	box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.05);

}



.contactinput:hover, .contactinput:active{

	border-color:#FFF;

}



.contactinputtextarea{

	min-height:50px;

	width:90%;

}



.contactoptions{

	font-size:12px;	

}



.contactinputselect{

	text-transform:uppercase;	

	font-size:11px;

}



/* */

#contact{

	margin-top:160px;	

	margin-bottom:700px;

	border-top-style:solid;

	border-top-width:1px;

	border-top-color:#CCC;

	padding-top:50px;

}



.contacttext{

	font-family: 'EB Garamond', serif;	

	font-size:49px !important;	

	text-align:left;

	font-weight:normal;	

	color:#444444;

	margin-bottom:40px;	

}



.contacttextsmall{	

	font-size:16px !important;	

	text-align:left;

	font-weight:normal;	

	color:#444444;

	margin-bottom:22px;	

}



.leftcontact{

	float:left;

	width:40%;	

	min-width:245px;

}



.rightcontact{

	float:left;

	width:60%;	

	min-width:300px;

}



.rightcontact .portlink{

	float:left;	

	border-style:none;

}





/* portfolio items */

.portitem{

	text-align:left;

	margin:30px 0px 30px 0px;	

	padding:30px 0px 30px 0px;	

	border-bottom-style:solid;

	border-bottom-width:1px;

	border-bottom-color:#CCC;

}



.portitem img{

	margin:10px 0px 10px 0px;

	border-style:solid;

	border-width:1px;

	border-color:#CCC;

	

	-webkit-border-radius: 10px;    

    border-radius: 10px;	

	

	-webkit-box-shadow:  5px 5px 0px 0px rgba(0, 0, 0, 0.1); 	

	box-shadow:  5px 5px 0px 0px rgba(0, 0, 0, 0.1);	

}



.portlink{

	padding:10px 20px 10px 20px;

	background-color:#155391;

	color:#E0E0E0;			

	-webkit-border-radius: 4px;    

    border-radius: 4px;	

	margin:0 auto;

	text-align:center;

	display:block;

	width:120px;

	margin-top:10px;

	margin-bottom:20px;

}



.portlink:hover{

	text-decoration:none;

	color:#FFF;		

	-webkit-box-shadow:  5px 5px 0px 0px rgba(0, 0, 0, 0.1); 	

	box-shadow:  5px 5px 0px 0px rgba(0, 0, 0, 0.1);

}



.portitem ul{

	margin-left:30px;	

}



/* */



.hireme{

	display:none;

}





/* ~ */

@media only screen and (max-width: 979px) {

	.makefull{

		width:100% !important;

	}

	

	.repeatedvisible{

		display:none;	

	}

	.repeatedhidden{

		display:block;	

	}

}

@media only screen and (min-width: 768px) {

	.logo{

		top:-44px;	

	}

	

	#CDT {

    	font-size: 10px !important;

	}

	

}



@media only screen and (min-width: 980px) {

	.hideonsmall{

		display:inline-block;	

	}

	

	#CDT {

    	font-size: 20px !important;

	}



	.hireme{

		display:block;

	}

		

}













h1 a:hover{

	text-decoration:none !important;

	opacity:1.0;	

}



h1 a{

	opacity:0.8;	

	line-height:48px !important;

}



.hidemetext{

	width:33px;

	max-width:33px;

	display:inline-block;

	overflow:hidden;

}

h1 a:hover  .hidemetext{

	width:0px;

	max-width:0px;

	display:inline-block;

	overflow:hidden;

}





.showmetext{

	width:0px;

	max-width:0px;

	display:inline-block;

	overflow:hidden;

	opacity:0;

}

h1 a:hover  .showmetext{

	width:30px;

	max-width:30px;

	display:inline-block;

	overflow:hidden;

	opacity:0.9;

}



html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;

  vertical-align: top;

}



.container {

  width: 440px;

  margin: 0 auto;

}



header {

	margin:0 auto;

	-webkit-border-radius: 5px;    

    border-radius: 5px;

	width:450px;

  z-index: 2;

  height: 48px;

  line-height: 47px;

  color: #ddd;

  text-shadow: 0 -1px black;

  background: #243942;

  background:#131C22;

  border-bottom: 1px solid #191919;

  -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.1), 0 3px 0px rgba(0, 0, 0, 0.1);

  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.1), 0 3px 0px rgba(0, 0, 0, 0.1);

    font:inherit;

	font-size:10px;

}



header a {

  -webkit-transition: 0.1s ease-out;

  -moz-transition: 0.1s ease-out;

  -o-transition: 0.1s ease-out;

  transition: 0.1s ease-out;

  -webkit-transition-property: background, color;

  -moz-transition-property: background, color;

  -o-transition-property: background, color;

  transition-property: background, color;

}

header h1 {

  float: left;

}

header h1 a {

	line-height:48px;

  display: block;

  padding: 0 15px;

  color: #eee;

  text-decoration: none;

 	font:inherit;

	font-size:11px;

	font-family:Verdana, Geneva, sans-serif;

}

header h1 a:hover {

  color: white;

}

header nav {

  float: right;

  border-left: 1px solid #2f4b56;

  border-left: 1px solid rgba(255, 255, 255, 0.05);

  border-right: 1px solid #111;

  

  list-style:none;

}

header nav li {

  float: left;

  list-style:none;

  padding-top:0px;

  line-height:48px;

}

header nav a {

  display: block;

  padding: 0 15px;

  color: #d0d9de;

  text-decoration: none;

  border-left: 1px solid #191919;

  border-right: 1px solid #2f4b56;

  border-right: 1px solid rgba(255, 255, 255, 0.05);

  cursor: pointer;

}

header nav a:hover {

  background: #2f4b56;

  background: rgba(255, 255, 255, 0.1);

  color:#FFF;

  text-decoration:none;

}

header nav a.icon {

  padding-left: 40px;

  background-position: 12px 11px;

  background-repeat: no-repeat;

}

header nav a.tasks {

  background-image: url("images/tasks.png");

}

header nav a.messages {

  background-image: url("images/tasks.png");

}

header nav a.settings {

  background-image: url("images/tasks.png");

}



.bodyweb header nav li.webnav a, .bodyconversion header nav li.conversionnav a, .bodydesign header nav li.designnav a {

  padding-right: 16px;

  background-color: #1b2b32;

  border-right: 0;

  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7);

  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7);

}



header nav span {

  display: inline-block;

  vertical-align: text-top;

  margin-left: 10px;

  padding: 0 5px;

  line-height: 16px;

  font-size: 10px;

  color: white;

  text-shadow: 0 1px #902a27;

  background: #e93631;

  border-radius: 2px;

  background-image: -webkit-linear-gradient(top, #f65d5f, #e93631);

  background-image: -moz-linear-gradient(top, #f65d5f, #e93631);

  background-image: -o-linear-gradient(top, #f65d5f, #e93631);

  background-image: linear-gradient(to bottom, #f65d5f, #e93631);

  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.2);

  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.2);

}



@media only screen and (max-width: 540px) {

	header{

		height:0px;

		overflow:hidden;

		opacity:0;

	}

	

	.allcontain{

		padding-top:0px;	

	}

}