/*RESET*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: Arial, tahoma, sans-serif;
}

/*********html scroll bar***********/

html {
	overflow-y: scroll;  /****** prevents site from shifting because vertical scroll bars are added to a longer page ****/
}

/* my added reset styles: learning to reset html5 */

header, section, article, aside, footer, nav, main {

	display: block;

}

a {
	text-decoration: none;
	color: white;
}

.stronger{

	font: 20px "HelveticaNeue-CondensedBold", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-weight: bold;
	color: #555;
	padding-bottom: 4px;
}
.stronger2{

	font: 16px "HelveticaNeue-CondensedBold", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-weight: bold;
	color: #555;
}

.space {
	padding: 4px 0px 0px 2px;
}

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

/**** IE 9 and below Alert styles ********/

p.get_upgraded {
	display: none;
	margin-top: 10px;
	color: red;

}

body.ie7 p.get_upgraded, body.ie8 p.get_upgraded , body.ie9 p.get_upgraded  {

	display: block;
}

/*RESET ends here*/
/***** basic body styles ******/
body{

	background-color: #f0f0f0;

}

/* General classes starts here*/

.centerposition{
	max-width: 1124px;
	margin: 0 auto;
	background: none;
	
}

.centerposition2{
	max-width: 1500px;
	margin: 0 auto;
	

}

.container{
	display: inline-block;
	
}

/*applies to only the two sections*/
.fancySecs{
	margin-top: 10px;
}

.fancySecs2{
	margin-top: 15px;
}

.shadow-effex1{
	
	-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);

}

/* General classes ends here*/

/* Header styles starts here*/

#menupart_container{
	background-color: black;
	position: relative;
	height: 35px;
	

}

#headwrapper{
	background-color: black;
}



#logo_cont{
	background-color: none;
	color: white;
	font:12px "HelveticaNeue-CondensedBold", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	display: inline-block;
	padding: 1px 0px 1px 0px;
	
}

#logo_cont p:first-child {

	color: red;
	font: 20px "HelveticaNeue-CondensedBold", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#logo_cont p {
	margin-top: 4px;
	display: inline-block;
}



/******************navigation and menustyles****************************/


#navigator {
	background-color: none;
	margin-left: 85%;
/*	max-width: 950px;*/
	
}

.menulines{
	color: white;

}

.menulines:hover{
	color: red;
	cursor: pointer;

}

#navi {
	margin-top: 12px; 
	width: 100px;
	background: black; 
	list-style: none;
	z-index: 8888;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	
	
}

#navi li{
	
	padding: 4px 10px; 
	
}

#navi li:first-child:hover{
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

#navi li:last-child:hover{
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

#navi li:hover{
	
	background: #444;

}

#navi li :first-child:before {

	content:'';
	position: absolute;
	width: 1px;
	height: 1px;
	border: 5px solid transparent;
	border-bottom-color: #313131;
	left: 30%;
	top: -11px;
	margin-left: -5px;

}

#navi_menu[type=checkbox] {

	display: none;
}
#navi {
        position: absolute;
        display: none;
}
#navi_menu[type=checkbox]:checked ~ #navi {
        display: block;
}

/* Header styles ends here*/



/* Section styles starts here*/

/*** Firstmid container with children starts***/

#Firstmidcontainer{

	background-color: none;
	margin-top: 30px;
	
}

#QuickIntro{
	display: inline-block;
	background-color: none;
	width: 375px;
	height: 410px;
	vertical-align: top;
}

#quickintosub1{
	background-color: none;
	height: 225px;
	
}

#welcome {

	font: 16px "HelveticaNeue-CondensedBold", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #555;
	text-shadow: 0px 1px 1px #f8f8f8;
	margin: 40px 0px 6px 0px;
}
#myname{

	font: 100px "HelveticaNeue-CondensedBold", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #797775;
	text-shadow: 0px 1px 1px #f8f8f8;
	width: 123px;
	height: 95px;
	padding: 0;
	display: inline-block;
	margin-left: 96px;
	
}

#myname2{
	width: 123px;
	font: 16px "HelveticaNeue-CondensedBold", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #555;
	text-shadow: 0px 1px 1px #f8f8f8;
	display: inline-block;
	
}


#quickintosub2{
	background-color: white;
	height: 80px;
	margin-top: 15px;
	padding: 2px 2px;
	
}

/* below shadow effect not in use*/
/*.shadow-effects{
	
	-webkit-box-shadow:  0px 2px 2px #999;
	-moz-box-shadow:  0px 2px 2px #999;
	box-shadow:  0px 2px 2px #999;
	
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
}*/

/*shadow-effects */
.shadow-effects {

	position: relative;
}

.shadow-effects:after {
	
	z-index: -1;
	content: ""; /* content to use box shadow on*/
	position: absolute; 
	bottom: 12%;
	right: 1%;
	background: #777;
	width:70%;	/* width of content = 70% means 70% of the width of the main box.in this case, 70% of the width of quickintosub2*/
	height: 10%; /*height of content = 10% means 10% of the height of the main box.in this case, 10% of the height of quickintosub2*/
	
	
	-webkit-box-shadow:  0px 10px 10px 0px #999;
	-moz-box-shadow:  0px 10px 10px 0px #999;
	box-shadow: 0px 6px 10px 0px #999;
	
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
}

/*************** Portfolio*******************/

#Portfolio{
	display: inline-block;
	background-color: none;
	margin: 0px 0px 0px 20px;
	/*width: 794px;
	margin: 0px 0px 0px 10px;
	height: 410px;*/
}


#Portfolio {

	width: 80%;
	max-width: 729px;
	overflow: hidden;
	
}

figure{ 

	margin: 0;

}

figure.myslider {

	position: relative;
	width: 500%;
	font-size: 0;
	animation: 30s slideme infinite;
}

figure.myslider figure {

	width: 20%;
	height: auto;
	display: inline-block;
	position: inherit;
}

figure.myslider img {

	width: 100%;
	height: auto;
}

figure.myslider figure figcaption {

	position: absolute;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	color: #fff; 
	width: 100%;
	font-size: 1rem;
	padding: .6rem;
}
@keyframes slideme {

	0% {left: 0%;}
	20% {left: 0%;}
	25% {left: -100%;}
	45% {left: -100%;}
	50% {left: -200%;}
	70% {left: -200%;}
	75% {left: -300%;}
	95% {left: -300%;}
	100% {left: -400%;}

}


/*************** Portfolio slide for first page*******************/

/*** Firstmid container with children ends ***/

/*** Second container with children starts ***/
#Secondmidcontainer{

	background-color: none;
	/*height: 150px;*/
}

/*Skills styles*/
#SkillsView{
	display: inline-block;
	background-color: none;
	width: 550px;
	/*height: 280px;*/
	
}

#skills_heading{
	padding: 4px 4px 4px 4px;
	background-color: black;
	color: white;
	/*width: 150px;*/
	border-bottom: 1px solid grey;
	margin-bottom: 4px;

}


#skillspie{
	display: inline-block;
	width: 246px;
	/*height: 30px;*/
	background: none;
	margin-top: 5px;
	vertical-align: top;
}

/*******************************/

#outercircle #colorcircle , #outercircle #centercircle, #outercircle #letterpress {

	position: absolute;
	left: 50%;
	top: 50%;
}


#outercircle {
	position: relative;
	background-color: blue;
	width: 200px;
	height: 200px;
	border-radius: 100%;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, .1);
	background-color: transparent;
	
}

#colorcircle {

	position: relative;
	width: 170px;
	height: 170px;
	margin: -85px 0 0 -85px;
	border-radius: 100%;
	box-shadow: inset 0 2px 20px rgba(0, 0, 0, .5), 0 2px 20px rgba(255, 255, 255, 1);
	background: #61c0ec;
	background:-moz-linear-gradient(left/*#df3341 0%*/, #d4f355 0%, #61c0ec 100%);
	background:-webkit-linear-gradient(left/*#df3341 0%*/, #d4f355 0%, #61c0ec 100%);
	background:-o-linear-gradient(left/*#df3341 0%*/, #d4f355 0%, #61c0ec 100%);
	
	
}


#centercircle {

	width: 140px;
	height: 140px;
	border-radius: 100%;
	margin: -70px 0 0 -70px;
	box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
	background: #f2f6f5;
	background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
    background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
	
}

#letterpress {
	padding: 40px 10px 0 10px;
	
	width: 80px;
	height: 80px;
	display: inline-block;
	margin: -60px 0 0 -45px;
	background: none;
	text-align: center;
	font-weight: 300;
	font: 30px "HelveticaNeue-CondensedBold", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #555;
	text-shadow: 0 1px 1px #f8f8f8;
}

/********************************************************************************/


/********************************************************************************/





/**********************************/



#skillsbars{
	display: inline-block;
	width:296px;
	position:relative;
	font-size:12px;
	line-height:2em;

	
}

#skillsflow li h3 { 
	position:relative;
	margin-left:6px;
	padding-bottom: 1px;
	z-index: 1;
	color: white;
	font-weight: bold;
	
}

#skillsflow { 
	list-style-type: none;
	padding: 10px 0px;
	margin: 0;
}

#skillsflow li{

	list-style: none;
	margin-bottom:8px;
	background:#e9e5e2;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e1ddd9), to(#e9e5e2));
	background-image: -webkit-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: -moz-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: -ms-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: -o-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: linear-gradient(top, #e1ddd9, #e9e5e2); 
	height:20px; 
	
	-moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;	 
	-webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;	 
	box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;	
	
}

.bar{

	height: 18px;
	margin: 1px 2px;
	position:absolute;
	

}

.photoshop-design{
	width:95%; 
	-moz-animation:photoshop-design 2s ease-out;
	-webkit-animation:photoshop-design 2s ease-out;
	background-color: #66b3cc;

}

.studio-max{
	width:93%;
	-moz-animation:studio-max 2s ease-out;
	-webkit-animation:studio-max 2s ease-out;
	background-color: #66b3cc;
	
}

.rhino-3D {
	width:90%;
	-moz-animation:rhino-3D 2s ease-out;
	-webkit-animation:rhino-3D 2s ease-out;
	background-color: #66b3cc;
	
}

.html-css {
	width:85%;
	-moz-animation:html-css 2s ease-out;
	-webkit-animation:html-css 2s ease-out;
	background-color: #66b3cc;

}

.Illustrator-design{
	width:45%; 
	-moz-animation:Illustrator-design 2s ease-out;
	-webkit-animation:Illustrator-design 2s ease-out;
	background-color: #66b3cc;

}

.PHP-design{
	width:15%;
	-moz-animation:PHP-design 2s ease-out;
	-webkit-animation:PHP-design 2s ease-out;
	/*background-color: #f0bb4b;*/
	background-color: #66b3cc;

}

.Javascript-design {
	width:65%;
	-moz-animation:Javascript-design 2s ease-out;
	-webkit-animation:Javascript-design 2s ease-out;
	background-color: #66b3cc;

}

.Zbrush-design {
	width:35%;
	-moz-animation:Zbrush-design 2s ease-out;
	-webkit-animation:Zbrush-design 2s ease-out;
	background-color: #66b3cc;

}



@-moz-keyframes photoshop-design {0%  { width:0px;} 100%{ width:95%;}  }
@-moz-keyframes studio-max       { 0%  { width:0px;} 100%{ width:93%;}  }
@-moz-keyframes rhino-3D      { 0%  { width:0px;} 100%{ width:90%;}  }
@-moz-keyframes html-css   { 0%  { width:0px;} 100%{ width:85%;}  }
@-moz-keyframes Illustrator-design {0%  { width:0px;} 100%{ width:45%;}  }
@-moz-keyframes PHP-design      { 0%  { width:0px;} 100%{ width:15%;}  }
@-moz-keyframes Javascript-design     { 0%  { width:0px;} 100%{ width:65%;}  }
@-moz-keyframes Zbrush-design   { 0%  { width:0px;} 100%{ width:35%;}  }

@-webkit-keyframes photoshop-design       { 0%  { width:0px;} 100%{ width:95%;}  }
@-webkit-keyframes studio-max        { 0%  { width:0px;} 100%{ width:93%;}  }
@-webkit-keyframes rhino-3D      { 0%  { width:0px;} 100%{ width:90%;}  }
@-webkit-keyframes html-css   { 0%  { width:0px;} 100%{ width:85%;}  } 
@-webkit-keyframes Illustrator-design       { 0%  { width:0px;} 100%{ width:45%;}  }
@-webkit-keyframes PHP-design        { 0%  { width:0px;} 100%{ width:15%;}  }
@-webkit-keyframes Javascript-design      { 0%  { width:0px;} 100%{ width:65%;}  }
@-webkit-keyframes Zbrush-design   { 0%  { width:0px;} 100%{ width:35%;}  } 

/*contact form styles*/
#QuickContact{
	display: inline-block;
	vertical-align: top;
	background-color: none;
	width: 564px;
	margin: 0px 0px 0px 10px;
	padding: 0px 0px 4px 0px;


}



.contact_form ul {
	list-style: none;
	background-color: none;

}

.contact_form li {

	padding: 4px;
	border-bottom: 1px 
}

#contact_heading{

	padding: 4px 4px 4px 4px;
	background-color: black;
	color: white;
	border-bottom: 1px solid grey;
}

.contact_form label {

	background-color: none;
	display: inline-block;
	width: 120px;
	color: #555;
	text-shadow: 0px 1px 1px #f8f8f8;
	font: 16px "HelveticaNeue-CondensedBold", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.contact_form input {
	width: 300px;
	margin-top: 4px;
	padding: 3px;
}


#message {
	background-color: none;
	display: block;
	color: #555;
	text-shadow: 0px 1px 1px #f8f8f8;
	font: 16px "HelveticaNeue-CondensedBold", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.contact_form textarea {
	padding: 6px;
	width:400px;
	height: 100px;
	margin-left: 125px;
	
	background:#e9e5e2;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e1ddd9), to(#e9e5e2));
	background-image: -webkit-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: -moz-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: -ms-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: -o-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: linear-gradient(top, #e1ddd9, #e9e5e2); 
	/*height:20px; */
	/*border-radius:10px; */
	-moz-box-shadow: 0 1px 0px /*#bebbb9*/ #e1ddd9 inset, 0 1px 0 #fcfcfc;	 
	-webkit-box-shadow: 0 1px 0px /*#bebbb9*/ #e1ddd9 inset, 0 1px 0 #fcfcfc;	 
	box-shadow: 0 1px 0px /*#bebbb9*/ #e1ddd9 inset, 0 1px 0 #fcfcfc;
}

.contact_form button {
	margin-top: 4px;
	margin-left: 470px;
	background-color: #404040;
	border: none;
	color: #ffffff;
	padding: 4px 10px;

}

/*extra style interactivity***/

.contact_form input, .contact_form textarea {

	border: 1px solid #aaa;
	border-radius: 2px;

}

.contact_form input:focus, .contact_form textarea:focus {

	background: #fff;
	border: 1px solid #555;
	box-shadow: 0px 0px 3px #f8f8f8, 0 10px 15px #f8f8f8 inset;
}

.contact_form input:hover, .contact_form textarea:hover {

	background: #fff;
	border: 1px solid #555;
}

button.submit {
	
	background-color: #404040;
	border: none;
	color: #ffffff;
	padding: 4px 10px;
}

button.submit:hover {

	opacity: 0.85;
	filter: Alpha(opacity=75); /* transparency for IE8 and earlier*/
	cursor: pointer; 
}
/*extra style ends interactivity***/
/*contact form styles*/

/*** Second container with children ends ***/

/* Section styles ends here*/

/* Footer styles starts here*/

#main_footer{
	margin-top: 10px;
	background-color: none;
	height: 60px;
	color: #555;
	text-shadow: 0px 1px 1px #f8f8f8;
	font: 16px "HelveticaNeue-CondensedBold", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
/* Footer styles ends here*/

/************************************  Portfolio Page ********************************/

.portfoliocontainer {

	margin-top: 40px;
	background: none;
	
}


.portfolio_option{

	background: none;
	
}

.portfolio_option label{

	cursor: pointer;
	font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 16px;
	color: #555;
	text-shadow: 0px 1px 1px #f8f8f8;
	padding: 8px 10px 4px 4px;
	background-color: none;
	
	
}

.portfolio_option input.select-all-work:checked ~ label.label-everything,
.portfolio_option input.select_all_graphics:checked ~ label.label-graphics,
.portfolio_option input.select_all_webdesign:checked ~ label.label-webdesign,
.portfolio_option input.select_all_threed:checked ~ label.label-threed{
	cursor: pointer;
	color: red;
	text-shadow: 0px 1px 1px #f8f8f8;
	
}

.portfolio_option input{

	display: none; 
}

.portfolio_items{

	background: none;
	position: relative;
	/*margin: 0px auto;*/
	padding: 30px;
	margin-top: 20px;
}



.portfolio_items a{

	display: block;
	position: relative;
	padding: 10px;
	background: #fff;
	margin: 4px;
	width: 320px;
	height: 180px;
	
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.portfolio_items a span{

	display: block;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-weight: bold;
	padding: 20px;
	position: absolute;
	bottom: 10px;
	left: 10px;
	width: 300px;
	height: 0px;
	overflow: hidden;
	opacity: 0;
	transition: all 0.3s ease-in-out;
	
}

.portfolio_items a:hover span{
	height: 80%;
	opacity: 1;
}

.portfolio_items li img{
	display: block;
}

.portfolio_items li {

	margin-bottom: 10px;
	margin-right: 30px;
	display: inline-block;
	height: 180px;
	width: 320px;
	transition: opacity 0.6s ease-in-out;

}


.portfolio_option input.select-all-work:checked ~.portfolio_items li,
.portfolio_option input.select_all_graphics:checked ~ .portfolio_items .portfolio_item1,
.portfolio_option input.select_all_webdesign:checked ~ .portfolio_items .portfolio_item2,
.portfolio_option input.select_all_threed:checked ~ .portfolio_items .portfolio_item3 {

	opacity: 1;
}

.portfolio_option input.select_all_graphics:checked ~ .portfolio_items li:not(.portfolio_item1),
.portfolio_option input.select_all_webdesign:checked ~ .portfolio_items li:not(.portfolio_item2),
.portfolio_option input.select_all_threed:checked ~ .portfolio_items li:not(.portfolio_item3){

	/*opacity: 0.1;*/
	display: none;
	pointer-events: none;
	cursor: default;
}

.portfolio_option input.select_all_graphics:checked ~ .portfolio_items li:not(.portfolio_item1) span,
.portfolio_option input.select_all_webdesign:checked ~ .portfolio_items li:not(.portfolio_item2) span,
.portfolio_option input.select_all_threed:checked ~ .portfolio_items li:not(.portfolio_item3) span{

	display: none;
}

/************************************  Portfolio Page ends ********************************/




/*** current image pop up window starts here *****************************/


/*** applies to lightbox as well*/
 #cover{
	position: relative;
	width: 100%;
	max-width: 1400px;
	overflow: hidden;
}

#cover2{
	position: relative;
	width: 100%;
	max-width: 850px;
	overflow: hidden;


}	

/*** applies to lightbox as well ends*/

.picture_container, .picture_container2{
	position: relative;
	width: 300%;
	margin: 0;
	padding: 0;
	font-size: 0;
	text-align: left;
	background: yellow;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.picture_container img{
	
	width: 33.333334%;
	height: auto;	
}

.picture_container2 img{
	
	width: 33.333334%;
	height: auto;	
}


/*********** lightbox bigger slider styles starts here***********/
#a1, #a2 , #a3, #a4, #a5, #a6, #a7, #a8 , #a9, #a10{
	padding: 8px;
	background: #ffffff;
	position: absolute;
	left:50%;
	bottom: 5%;
	margin-left:-36px;
	border-radius: 20px;
	opacity: 0.7;
	cursor:pointer;
	border: 1px solid black;
	z-index: 999;
}

#b1, #b2 , #b3, #b4, #b5, #b6, #b7, #b8 , #b9, #b10{
	padding: 8px;
	background: #ffffff;
	position: absolute;
	left:50%;
	bottom: 5%;
	margin-left:-12px;
	border-radius: 20px;
	opacity: 0.7;
	cursor:pointer;
	border: 1px solid black;
	z-index: 999;
}

#c1, #c2 , #c3, #c4, #c5, #c6, #c7, #c8 , #c9, #c10{
	padding: 8px;
	background: #ffffff;
	position: absolute;
	left:50%;
	bottom: 5%;
	margin-left:12px;
	border-radius: 20px;
	opacity: 0.7;
	cursor:pointer;
	border: 1px solid black;
	z-index: 999;
}

#a1:hover, #a2:hover, #a3:hover, #a4:hover, #a5:hover,#a6:hover, #a7:hover, #a8:hover, #a9:hover, #a10:hover,  #b1:hover, #b2:hover, #b3:hover, #b4:hover, #b5:hover,#b6:hover, #b7:hover, #b8:hover, #b9:hover, #b10:hover, #c1:hover ,#c2:hover ,#c3:hover, #c4:hover, #c5:hover, #c6:hover, #c7:hover, #c8:hover, #c9:hover, #c10:hover{
	
	opacity: 1;

}

.radiobtn{

	display: none;
}

#pic_choicea1:checked ~ .picture_container, #pic_choicea2:checked ~ .picture_container, #pic_choicea3:checked ~ .picture_container, #pic_choicea4:checked ~ .picture_container, #pic_choicea5:checked ~ .picture_container , #pic_choicea6:checked ~ .picture_container, #pic_choicea7:checked ~ .picture_container, #pic_choicea8:checked ~ .picture_container , #pic_choicea9:checked ~ .picture_container, #pic_choicea10:checked ~ .picture_container      {
	margin-left: 0%;
}

#pic_choiceb1:checked ~ .picture_container, #pic_choiceb2:checked ~ .picture_container, #pic_choiceb3:checked ~ .picture_container , #pic_choiceb4:checked ~ .picture_container , #pic_choiceb5:checked ~ .picture_container, #pic_choiceb6:checked ~ .picture_container, #pic_choiceb7:checked ~ .picture_container, #pic_choiceb8:checked ~ .picture_container , #pic_choiceb9:checked ~ .picture_container, #pic_choiceb10:checked ~ .picture_container   {
	margin-left: -100%;
}

#pic_choicec1:checked ~ .picture_container , #pic_choicec2:checked ~ .picture_container, #pic_choicec3:checked ~ .picture_container, #pic_choicec4:checked ~ .picture_container, #pic_choicec5:checked ~ .picture_container, #pic_choicec6:checked ~ .picture_container, #pic_choicec7:checked ~ .picture_container, #pic_choicec8:checked ~ .picture_container , #pic_choicec9:checked ~ .picture_container, #pic_choicec10:checked ~ .picture_container  {
	margin-left: -200%;
}

#pic_choicea1:checked + #a1, #pic_choicea2:checked + #a2, #pic_choicea3:checked + #a3, #pic_choicea4:checked + #a4, #pic_choicea5:checked + #a5{
	opacity: 1;
	background: grey;
	
}

#pic_choiceb1:checked + #b1 , #pic_choiceb2:checked + #b2, #pic_choiceb3:checked + #b3, #pic_choiceb4:checked + #b4, #pic_choiceb5:checked + #b5{
	opacity: 1;
	background: grey;
	
}

#pic_choicec1:checked + #c1 , #pic_choicec2:checked + #c2, #pic_choicec3:checked + #c3, #pic_choicec4:checked + #c4, #pic_choicec5:checked + #c5{
	opacity: 1;
	background: grey;
	
}

/*********** lightbox smaller slider styles starts here***********/

#d1, #d2 , #d3, #d4, #d5{
	padding: 8px;
	background: #ffffff;
	position: absolute;
	left:50%;
	bottom: 5%;
	margin-left:-36px;
	border-radius: 20px;
	opacity: 0.7;
	cursor:pointer;
	border: 1px solid black;
	z-index: 999;
}

#e1, #e2 , #e3, #e4, #e5{
	padding: 8px;
	background: #ffffff;
	position: absolute;
	left:50%;
	bottom: 5%;
	margin-left:-12px;
	border-radius: 20px;
	opacity: 0.7;
	cursor:pointer;
	border: 1px solid black;
	z-index: 999;
}

#f1, #f2 , #f3, #f4, #f5{
	padding: 8px;
	background: #ffffff;
	position: absolute;
	left:50%;
	bottom: 5%;
	margin-left:12px;
	border-radius: 20px;
	opacity: 0.7;
	cursor:pointer;
	border: 1px solid black;
	z-index: 999;
}

#d1:hover, #d2:hover, #d3:hover, #d4:hover, #d5:hover,  #e1:hover, #e2:hover, #e3:hover, #e4:hover, #e5:hover, #f1:hover ,#f2:hover ,#f3:hover, #f4:hover, #f5:hover{
	
	opacity: 1;

}



#pic_choiced1:checked ~ .picture_container2, #pic_choiced2:checked ~ .picture_container2, #pic_choiced3:checked ~ .picture_container2, #pic_choiced4:checked ~ .picture_container2, #pic_choiced5:checked ~ .picture_container2    {
	margin-left: 0%;
}

#pic_choicee1:checked ~ .picture_container2, #pic_choicee2:checked ~ .picture_container2, #pic_choicee3:checked ~ .picture_container2 , #pic_choicee4:checked ~ .picture_container2 , #pic_choicee5:checked ~ .picture_container2  {
	margin-left: -100%;
}

#pic_choicef1:checked ~ .picture_container2, #pic_choicef2:checked ~ .picture_container2, #pic_choicef3:checked ~ .picture_container2, #pic_choicef4:checked ~ .picture_container2, #pic_choicef5:checked ~ .picture_container2 {
	margin-left: -200%;
}

#pic_choiced1:checked + #d1, #pic_choiced2:checked + #d2, #pic_choiced3:checked + #d3, #pic_choiced4:checked + #d4, #pic_choiced5:checked + #d5{
	opacity: 1;
	background: grey;
	
}

#pic_choicee1:checked + #e1 , #pic_choicee2:checked + #e2, #pic_choicee3:checked + #e3, #pic_choicee4:checked + #e4, #pic_choicee5:checked + #e5{
	opacity: 1;
	background: grey;
	
}

#pic_choicef1:checked + #f1 , #pic_choicef2:checked + #f2, #pic_choicef3:checked + #f3, #pic_choicef4:checked + #f4, #pic_choicef5:checked + #f5{
	opacity: 1;
	background: grey;
	
}

/*********** lightbox bigger & smaller sliders styles end here***********/



/*** image pop up window starts here ***some code still useful for contact pop up**************************/
	
.popup_box .box{
	width:-web-min-content;
	width:-moz-min-content;
	width: min-content;
	min-width: 200px;
	max-width: 1420px; 
	width: 100%;
	margin: 2% auto;
	padding: 10px;
	background-color: white;
	box-shadow: 0px 1px 26px -3px #777777;


}

.popup_box .picture_container{

	display: block;
	background: none;
	padding: 0px 0 0 0px;

	
	
	
}


.picture_container img {

	
}

.popup_box  .popup_desc {

	background: none;
	margin-top: 8px;

}

.popup_box .close {

	
	text-decoration: none;
	background: white;
	display: block;
	padding: 0px 0px 0px 5px;
	width: 20px;
	height: 20px;
	color: #555;
	float: right;
	
}

.popup_box {

	/** hide the popup box **/
	display: none;
	
	/**basic popup styling **/
	position: absolute;
	z-index: 8888;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	color: #333333;
	
}

.box{

	position: relative;
	margin: 3% auto;

}

.close {

	position: absolute;
	z-index: 2;
	right: 5px;
}


.popup_box:target{

	display: block;
	
}



/******* image pop up window old ends here *some code still useful for contact pop up****************************/

/**************** ***************  popup_box2 styles  starts here ******  ********/

.popup_box2 .box2{
	width:-web-min-content;
	width:-moz-min-content;
	width: min-content;
	min-width: 200px;
	max-width: 850px;
	width: 100%;
	margin: 2% auto;
	padding: 10px;
	background-color: white;
	box-shadow: 0px 1px 26px -3px #777777;


}

.popup_box2 .picture_container2{

	display: block;
	background: none;
	padding: 0px 0 0 0px;

}

.popup_box2 .post_container{

	display: block;
	background: none;
	padding: 10px 0 0 0px;
	
}


.popup_box2  .popup_desc2 {

	background: none;
	margin-top: 8px;

}
.popup_box2 .sent_confirmation{

	background: none;

}

.popup_box2 .close {

	
	text-decoration: none;
	background: white;
	display: block;
	padding: 0px 0px 0px 5px;
	width: 20px;
	height: 20px;
	color: #555;
	float: right;
	
}

.popup_box2 {

	/** hide the popup box **/
	display: none;
	
	/**basic popup styling **/
	position: absolute;
	z-index: 8888;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	color: #333333;
	
}

.box2{

	position: relative;
	margin: 3% auto;

}

.close {

	position: absolute;
	z-index: 2;
	right: 5px;
}


.popup_box2:target{

	display: block;
	
}


/**************** ***************  popup_box2 styles  ends here ******  ********/



/**** popup contact styles *****************/

#popup_contact_heading {
	max-width: 650px;
	padding: 4px 4px 8px 4px;
	background-color: none;
	color: #858585;
	border-bottom: 1px solid #aaa;
	margin-bottom: 14px;
	font: 18px "HelveticaNeue-CondensedBold", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #555;
	
}

.popup_box3 .box3{
	width:-web-min-content;
	width:-moz-min-content;
	width: min-content;
	min-width: 200px;
	max-width: 680px;
	width: 100%;
	margin: 2% auto;
	padding: 10px;
	background-color: white;
	box-shadow: 0px 1px 26px -3px #777777;


}



.popup_box3 .post_container{

	display: block;
	background: none;
	padding: 10px 0 0 0px;
	
}



.popup_box3 .sent_confirmation{

	background: none;

}

.popup_box3 .close {

	
	text-decoration: none;
	background: white;
	display: block;
	padding: 0px 0px 0px 5px;
	width: 20px;
	height: 20px;
	color: #555;
	float: right;
	
}

.popup_box3 {

	/** hide the popup box **/
	display: none;
	
	/**basic popup styling **/
	position: absolute;
	z-index: 8888;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	color: #333333;
	
}

.box3{

	position: relative;
	margin: 3% auto;

}




.popup_box3:target{

	display: block;
	
}

/**** popup contact additional ids ends here *****************/




#social {

/*	background: yellow; */
}



.findmeon  img{
	max-width: 512px;
	width: 4%;
	
}

#social ul a img{

	display: inline-block;
}


/******find me on styles ends here*******/