/*RESET*/
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, font, 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 {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

/**************** MAIN ****************/
body { font-size: 1.05em; line-height: 1.25em; font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; background: #ffffff; color: #555; margin: 0 auto;}
h1 {font-size: 5em; color: #991b32; line-height: 1.15em; margin: 130px 0 20px 0; font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;}
h3 {margin-bottom: 40px; font-size: 150%; text-align: center; color: #000000; line-height: 1.15em; margin-top: 40px; font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;}
p {line-height: 1.65em; margin-bottom: 20px; font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';}
.resmal {text-align: center; font-size: 14px; line-height: 1.40em; color: #949292;}
a {color: #000000; text-decoration: none; font-weight: bold; transition: border-color .2s ease-out,color .2s ease-out; transition-property: border-color, color; transition-duration: 0.2s, 0.2s; transition-timing-function: ease-out, ease-out; transition-delay: initial, initial; }
a:hover {color: #f3f906;}
/* css img hover opacity */
.ito {max-width: 266px; margin: 0 auto;}
.ito img {opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.ito:hover img {opacity: .5;}
.ito4 {max-width: 140px; margin: 0 auto;}
.ito4 img {opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.ito4:hover img {opacity: .5;}
.ito2 {max-width: 500px; margin: 0 auto;}
.ito3 {max-width: 266px; margin: 0 auto;}
/* img {max-width: 100%; height: auto !important; border: 0;} */
img,object,embed {max-width: 100%; height: auto;}
object,embed {height: 100%;}
img {-ms-interpolation-mode: bicubic;}
#map_canvas img,.map_canvas img {max-width: none!important;}

/**************** HEADER ****************/
header {background: url(../images/header-bg-yellow3.png); background-repeat: repeat-x; width: 100%; height: 85px; position: absolute; top: 0; left: 0; border-bottom: 4px solid #5e5c01; z-index: 100;} /* position: fixed; for stick nav */	
#headcont {max-width: 1180px; margin: 0 auto;}
#logo {margin: 12px 15px 12px 20px; float: left; width: 431px; height: 61px; background: url(../images/logo-square-lrg.png) no-repeat center; display: block; opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
#logo:hover {opacity: .5;}
nav {float: right; padding: 22px 20px;}
#menu-icon {display: hidden; width: 40px; height: 40px; background: #ffffff url(../images/menu-icon2.png) center; opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
a:hover#menu-icon {background-color: #5e5f5e; border-radius: 4px 4px 0 0; opacity: .5;}
ul {list-style: none;}
li {display: inline-block; float: left; padding: 10px;}
.current {color: #f17f94;}
/** added **/
.headnav {font-family: 'Source Sans Pro', 'Helvetica', 'Arial', 'sans-serif';}
.footnav {font-family: 'Source Sans Pro', 'Helvetica', 'Arial', 'sans-serif';}

/**************** BODY ****************/
section {margin: 0 auto; width: 100%;}
#bannercont {width: 100%; background: url(../images/home_banner2.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover;}
#bannercont1 {width: 100%; background: url(../images/section-bg1.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover;}
#bannercont2 {width: 100%; background: url(../images/section-bg2.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover;}
#bannercont3 {width: 100%; background: url(../images/section-bg3.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover;}
#bannercont4 {width: 100%; background: url(../images/section-bg4.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover;}
#bannercont5 {width: 100%; background: url(../images/section-bg5.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover;}
#bannercontinn {max-width: 1140px; margin: 80px auto 40px; position: relative; padding: 0 20px 0 20px;}
#bannercontinn2 {max-width: 1140px; margin: 80px auto 0px; position: relative; padding: 70px 20px 70px 20px;}
#avatar {margin-top: 30px;}
#avatar2 {margin-top: 40px; padding-right: 6px;}
/* #slogan {font-size: 2em; line-height: 1.50em; color: #000000; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);} */
#slogan {font-size: 2.5em; line-height: 1.50em; color: #ffffff; text-shadow: 0 1px 0 #000000; margin-top: 20px;}
#bodycontinn {max-width: 1140px; margin: 0 auto; position: relative; padding: 0 20px 0 20px;}
#bodycontinn2 {max-width: 900px; margin: 0 auto; position: relative; padding: 0 20px 0 20px;}
#bodycontinn4 {max-width: 900px; margin: 0 auto; position: relative; padding: 25px 20px 25px 20px;}
#bodycontinn3 {max-width: 850px; margin: 0 auto; position: relative; padding: 25px 20px 40px 20px;}
.homecirc {border: 1px solid #cccccc; margin-bottom: 10px;}
.homecirc2 {margin-bottom: 10px; max-width: 105px;}
#circalign {text-align: center;}
.yelbg {background: #fdfdf5;}
.xtrapad {margin-bottom: 50px;}
.xtrapad2 {padding-top: 25px;}
.xtrapad3 {padding-bottom: 5px;}
.contem {text-decoration: underline;}
.titlenm {font-style: italic; text-align: center; font-size: 14px; line-height: 1.40em; color: #949292; margin: 0px; padding: 0px;}
.heading-separator {width: 45px; height: 2px; display: block; margin: auto; border-radius: 99px; background: #f3f906;} 
.notoppad {margin-bottom: 40px; font-size: 150%; text-align: center; color: #000000; line-height: 1.15em; margin-top: 0px; font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;}

/**************** FOOTER ****************/
footer {position: relative; clear: both;}
#footercont {width: 100%; background: url(../images/texture-footer.png); background-repeat: repeat; height: 100px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc;}
#footercontinn {max-width: 1140px; margin: 0 auto; position: relative; padding: 38px 20px 0 20px;}
.footlist {list-style: none; margin: 0; padding: 0; text-align: left;}
.footlist li {display: inline; padding: 0 10px 0 10px;}
.footlist a {color: #5e5f5e; text-decoration: none; font-weight: bold; display: inline-block;}
.footlist a:hover {color: #a8a403;}
#footernavl {text-align: left;}
#footernavr {text-align: right;}
#copyright {color: #a8a403;}

/**************** ABOUT ****************/
#random {font-size: 150%; text-align: left; color: #991b32; line-height: 1.15em; margin-left: 60px; margin-top: 35px;}
#random2 {font-size: 150%; text-align: left; color: #991b32; line-height: 1.15em; margin-top: 23px;}
#random3 {font-size: 150%; text-align: left; color: #991b32; line-height: 1.15em; margin-top: 20px; margin-bottom: 35px;}
.likes {font-size: 1.3em; line-height: 1.2em; margin-left: 60px;}
.likes2 {font-size: 1em; line-height: 1em; }
#likeslist {width: 36.3%;}
#likesimg {width: 60.5%; text-align: center; margin-bottom: -8px !important; padding-bottom: 0px;}
#design {text-align: left; width: 60.5%; margin-left: 0px;}
#technical {text-align: left; width: 36.3%; float: right;}
#sksoftware {margin-bottom: 40px;}
#skillswarpper {border-radius: 10px; background: url(../images/texture-footer.png); background-repeat: repeat; padding: 20px 0px 0px 45px;}
#avatar2cont {text-align: right;}

/**************** MEDIA QUERY ****************/
@media only screen and (max-width : 1168px) {
	h1 {font-size: 4.5em; color: #991b32; line-height: 1.15em; margin: 100px 0 20px 0 ;}
}

@media only screen and (max-width : 1083px) {
	#random {font-size: 150%; text-align: center; color: #991b32; line-height: 1.15em; margin-left: 0px; margin-top: 35px;}
	#random2 {font-size: 150%; text-align: center; color: #991b32; line-height: 1.15em; margin-top: 40px;}
	#random3 {font-size: 150%; text-align: center; color: #991b32; line-height: 1.15em; margin-top: 20px; margin-bottom: 60px;}
	.likes {font-size: 1.3em; line-height: 1.2em; margin-left: 0px;}
	.likes2 {font-size: 1.3em; line-height: 1.2em; margin-left: 0px;}
	#likeslist {width: 100%; text-align: center; margin-left: 0px;}
	#likesimg {width: 93.5%; text-align: center; margin-bottom: -8px !important; padding-bottom: 0px;}
	#design {text-align: center; width: 100%;}
	#technical {float: right; text-align: center; width: 100%;}
	#skillswarpper {border-radius: 10px; background: url(../images/texture-footer.png); background-repeat: repeat; padding: 0px;}
	#avatar2 {margin-top: 30px; padding-right: 0px;}		
}

@media only screen and (max-width : 1040px) {	
	#logo {margin: 12px 20px; float: left; width: 74px; height: 61px; background: url(../images/logo-square.png) no-repeat center; display: block; opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
	div#slider {overflow: hidden; max-height: 600px; padding: 50px 0px 0px 0px;}
}

@media only screen and (max-width : 1024px) {
	h1 {font-size: 4.5em; color: #991b32; line-height: 1.15em; margin: 50px 0 20px 0 ;}
	#slogan {font-size: 2em; line-height: 1.50em;}	
}

@media only screen and (max-width : 960px) {
	#slogan {font-size: 1.7em; line-height: 1.15em;}
}

@media only screen and (max-width : 835px) {
	h1 {font-size: 4.5em; color: #991b32; line-height: 1.15em; margin: 50px 0 20px 0 ;}	
	#slogan {font-size: 1.7em; line-height: 1.15em;}
}

@media only screen and (max-width : 767px) {
    .control-label {margin-bottom: 5px !important;}
}

@media only screen and (max-width : 768px) {
	h1 {font-size: 4.5em; color: #991b32; line-height: 1.15em; margin: 50px 0 20px 0 ;}
}

@media only screen and (max-width : 700px) {
	h1 {font-size: 4.5em; color: #991b32; line-height: 1.15em; margin: 50px 0 20px 0 ;}
	#slogan {font-size: 1.5em; line-height: 1.15em;}
	header {position: absolute;}
	#menu-icon {display:inline-block;}
    .headnav {font-family: 'Source Sans Pro', 'Helvetica', 'Arial', 'sans-serif';}
    .headnav a {color: #ffffff; text-decoration: none; font-weight: bold;}
    .headnav a:hover {color: #f3f906;}
	nav ul, nav:active ul {display: none; position: absolute; padding: 20px; background: url(../images/mob-bg.png); background-repeat: repeat; border: 5px solid #5e5f5e; right: 20px; top: 60px; width: 50%; border-radius: 4px 0 4px 4px;}
	nav li {text-align: center; width: 100%; padding: 10px 0; margin: 0;}
	nav:hover ul {display: block;}
	h1 {font-size: 2.5em; color: #991b32; line-height: 1.15em; margin: 60px 0 20px 0 ;}	
}

@media only screen and (max-width : 615px) {
	#footernavl {display: none;}
	#footernavr {text-align: center; width: 94%}		
}

@media only screen and (max-width : 600px) {
		h1 {font-size: 2.5em; color: #991b32; line-height: 1.15em; margin: 30px 0 20px 0 ;}
}

@media only screen and (max-width : 570px) {
		h1 {font-size: 2em; color: #991b32; line-height: 1.15em; margin: 30px 0 20px 0 ;}
		#slogan {font-size: 1.5em; line-height: 1.15em;}
		.likes {font-size: 1.1em; line-height: 1.2em; margin-left: 0px;}
		.likes2 {font-size: 1.1em; line-height: 1.2em; margin-left: 0px;}
}

@media only screen and (max-width : 500px) {
		#slogan {font-size: 1.5em; line-height: 1.15em;}
		#sksoftware {margin-top: 25px; margin-bottom: 20px;}
		.likes {font-size: 1em; line-height: 1em; margin-left: 0px;}
		.likes2 {font-size: 1em; line-height: 1em; margin-left: 0px;}
		#random3 {font-size: 150%; text-align: center; color: #991b32; line-height: 1.15em; margin-top: 20px; margin-bottom: 20px;}	
}

@media only screen and (max-width : 400px) {
		h1 {font-size: 2em; color: #991b32; line-height: 1.15em; margin: 20px 0 ;}
		#avatar {margin-top: 0px;}
		#slogan {font-size: 1.5em; line-height: 1.15em;}
		#random {font-size: 150%; text-align: center; color: #991b32; line-height: 1.15em; margin-left: 0px; margin-top: 10px;}
		#sksoftware {margin-top: 5px; margin-bottom: 25px;}
		#avatar2cont {text-align: center;}
		#avatar2 {margin-top: 0px; padding-right: 6px;}
}