@font-face{
	src:url(../font/segoeuil.ttf);
	font-family: 'segoeuil';
}
@font-face{
	src:url(../font/segoeui.ttf);
	font-family: 'segoeui';
}
@font-face{
	src:url(../font/Impact.ttf);
	font-family: 'Impact';
}
html{
	height: 100%;
	width: 100%;
}
body {
	margin: 0px;
	padding: 0px;
	font-family: 'segoeui';
	font-size: 14px;
	line-height:25px;
	font-weight: 500;
	background-color: #fff;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	color: #58585b;
}

	/*========== DEFAULT BROWSER STYLE==========*/
	/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
article,aside,audio,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,meter,nav,output,progress,section,source,video,main{display:block}mark,rp,rt,ruby,summary,time{display:inline}
a, abbr, acronym, address, applet, article, aside, audio,b, blockquote, big, body,center, canvas, caption, cite, code, command,datalist, dd, del, details, dfn, dl, div, dt, em, embed,fieldset, figcaption, figure, font, footer, form, header, hgroup, html,i, iframe, img, ins,kbd, keygen, legend, li, meter,nav,object, ol, output, pre, progress,q, s, samp, section, small,source, strike, strong, sub, sup,table, tbody, tfoot, thead, th, tr, tdvideo, tt,u, ul, var{
    /*background: transparent;*/
    border: 0 none;
    margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
    vertical-align: top;
}
/*ul,ol
{
	list-style: none;
}*/
ol,ul {
	padding-left: 30px;
}
q 
{
	quotes: none;
}
b
{
	font-weight: bold;
}
img{
	vertical-align:top; 
}
input:focus, textarea:focus, keygen:focus, select:focus {
	outline-offset:0px;
}
input,button{
	outline: none;
	border:0;
}
button::-moz-focus-inner{
	border:0;
}

h1,h2,h3
{
	margin-top: 0px;
	margin-bottom: 0px;
}
/*==========END DEFAULT BROWSER STYLE========== */
/*==========       BASIC CLASSES     ==========*/

/* ========================================= */
/* =============SPACE CLASSES============== */
/* ========================================= */
.space1{
	margin-top: 1px !important;
}
.space2{
	margin-top: 2px !important;
}
.space5{
	margin-top: 5px !important;
}
.space10{
	margin-top: 10px !important;
}
.space12{
	margin-top: 12px !important;
}
.space15{
	margin-top: 15px !important;
}
.space20{
	margin-top: 20px !important;
}
.space25{
	margin-top: 25px;
}
.space30{
	margin-top: 30px !important;
}
.space40{
	margin-top: 40px;
}
.space50{
	margin-top: 50px;
}
.space55{
	margin-top: 55px;
}
.space60{
	margin-top: 60px;
}
.space70{
	margin-top: 70px;
}
.space80{
	margin-top: 80px;
}
.space100{
	margin-top: 100px;
}
.space120{
	margin-top: 120px;
}
.space150{
	margin-top: 150px;
}
.space200{
	margin-top: 200px;
}
.space250{
	margin-top: 250px;
	margin-left: -62px;
}
/* ========================================= */
/* =============PADDING CLASSES============== */
/* ========================================= */
.pad0{
	padding: 0px !important;
}
.pad-left
{
	padding-left: 0px;
}
.pad-right
{
	padding-right: 0px;
}
.pad40
{
	padding-left: 40px;
}
.pad-bot
{
	padding-bottom: 40px;
}

.padleft30{
	padding-left: 30px;
}
.padleft60{
	padding-left: 60px;
}
.padleft90{
	padding-left: 90px;
}
.padright30{
	padding-right: 30px;
}
.padright60{
	padding-right: 60px;
}
.padright90{
	padding-right: 90px;
}
.padtop30{
	padding-top: 30px;
}
.padtop60{
	padding-top: 60px;
}
.padtop90{
	padding-top: 90px;
}

/* ========================================= */
/* =============MARGIN CLASSES============== */
/* ========================================= */
.mbtm0{
	margin-bottom: 0px !important;
}
.mtop0{
	margin-top:0px;
}
.mtop10{
	margin-top:10px;
}
.mtop50{
	margin-top:50px;
}
.mbtm10{
	margin-bottom:10px;
}
.mbtm40{
	margin-bottom:40px;
}
.mleft10{
	margin-left:10px;
}
.mright10{
	margin-right:10px;
}
.mleft10{
	margin-left:10px;
}
.mleft20{
	margin-left: 30px;
}
.nomargin
{
	margin: 0px !important;
}
.mauto img{
	margin: 0px auto !important;
}
.mautomargin{
	margin: 0px auto !important;
}
.f300{
	font-weight: 300 !important;
}
.f600{
	font-weight: 600 !important;
}
.f700
{
	font-weight: 700 !important;
}
.f800
{
	font-weight: 800 !important;
}
.f900
{
	font-weight: 900 !important;
}
.square
{border-radius: 0px;}

/* ========================================= */
/* =============COLOR CLASSES============== */
/* ========================================= */
a
{
color: #5b5b5b;

}
.text-white
{
	color: #ffffff !important;
}
.text-black{
	color: #000000 !important;
}
.text-sky{
	color: #09bdd2;
}
.capital
{
	text-transform: uppercase;
}
.underline
{
	text-decoration: underline;
}
.blueclr
{
	color: #3771b2;
}
.blackclr
{
	background-color: black;
}

/* ========================================= */
/* =============BUTTON CLASSES============== */
/* ========================================= */
::-webkit-input-placeholder {
   color: #595959 !important;
}

:-moz-placeholder { /* Firefox 18- */
    color: #595959 !important;
}

::-moz-placeholder {  /* Firefox 19+ */
    color: #595959 !important;
}

:-ms-input-placeholder {  
 color: #595959 !important;
}
/* ============================================ */
/* ============================================ */
/* ============================================ */
a:focus{
text-decoration: none;
}
p {
padding: 0;
margin-bottom: 8px;
line-height: 22px;
font-size: 14px;
} 
body a:hover{
	text-decoration: none;
	cursor: pointer;	
}
a:focus,.btn:focus,.btn:active:focus,
button:focus,input[type="file"]:focus, 
input[type="radio"]:focus, 
input[type="checkbox"]:focus{
	outline: none;
}

/* ========================================= */
/* =============SideNav CLASSES============= */
/* ========================================= */

.sidenav {
	overflow: hidden;
	position: fixed;
	top: 0;
	background-color: black;
	width: 16.66666667%;
	padding-left:0px !important;
	height: 100%;
}

.navdiv {
	width: 100%;
}

.navdiv ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.nav li {
	padding-left: 0px !important;
	padding-right: 0px !important;
}
.nav li a {
    display: block;
    color: white;
    text-decoration: none;
}

/* Change the link color on hover */
.nav li a:hover {
    background-color: #555;
    color: white;
}


/*------------ new page css ---------------*/
 
 header ul.list-inline li{
 	padding: 0px 12px;
 	text-align: center;
 }
 header{
 	padding: 30px 0px;
 	color: #000;
 	font-family: 'segoeuil';
 }

 hr {
    margin-top: 15px;
    margin-bottom: 30px;
    border: 0;
    border-top: 2px solid #58585b;
}
#welcome{
	width: 100%;
	padding-bottom: 50px;
}

#brand{
	padding-bottom: 50px;
}
#redesign{
	padding-bottom: 20px;
}
#motion-redesign{
	padding-bottom: 90px;
}
#about-me{
	position: relative;
}
.stroke-img{
	position: absolute;
	top: 30%;
    left: 28%;
}
#about-me .media{
	padding: 0px 40px;
}
pre{
	font-size: 18px;
	font-family: 'segoeui';
	color: #58585b;
	background: transparent;
}


#about-me{
	padding-bottom: 80px;
}
#contact h2{
	text-align: center;
	font-family: 'segoeuil';
	font-size: 28px;
	color: #000;
}
#contact h2 img{
	vertical-align: middle;
}
#resume li a{
	font-size: 30px;
	color: #3179be;
	font-family: 'segoeuil';
}
#resume ul.list-inline{
	padding: 100px 0px;
}
#resume li{
	vertical-align: middle;
}
#resume li:last-child{
	padding-left: 50px;
}
footer{
	padding: 20px 180px;
}
footer li a{
	color: #000;
	font-size: 18px;
}
footer .list-inline li{
	padding: 0px 15px;
}
footer p{
	color: #000;
}

/*------------ image class ----------------*/


.navlogo{
	padding: 20px;
}
.image{
	position: relative;
	cursor: pointer;
}
.overlay{
	position: absolute;
    background: #fff;
    top: 0px;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: 400ms ease-in-out;
    padding: 27.4% 0;
}
.image:hover .overlay{
	opacity: 1;
}
.overlay h1{
	font-family: 'Impact';
	display: inline-block;
	position: relative;
	color: #000;
	border-bottom: 2px solid #000;
}
/*.overlay h1:after{
	content: '';
    position: absolute;
    border-bottom: 2px solid #000;
    width: 83px;
    bottom: -4px;
    left: 0;
    right: 0;
    margin: 0 auto;
}*/
.overlay p{
	font-family: 'segoeuil';
	font-size: 18px;
	padding-top: 10px;
	color: #000;
}


/*------------ inner page ----------------*/

#banner h1{
	font-family: 'segoeuil';
	font-size: 30px;
    padding-top: 30px;
    line-height: 40px;
    color: #000;
}
#banner{
	padding-top: 150px;
	padding-bottom: 100px;
}
#iphone-family{
	padding: 100px 0px 150px;
}
#iphone-family h3{
	padding: 250px 0px;
	line-height: 30px;
	font-family: 'segoeuil';
	color: #000;
}
/*----------- media query --------------*/


@media(min-width: 991px){
	.stroke-img {
	    left: 20%;
	}
	footer {
	    padding: 20px 50px;
	}
	header {
		display: none; 
	}
}

@media(max-width: 991px){
	
	header {
		display: block;
	}
	.sidenav {
		display: none;
	}
	
	.stroke-img {
	    top: 20%;
	    width: 80%;
	}
	#banner {
	    padding-top: 0;
	    padding-bottom: 0;
	}
	#banner h1{
		padding-bottom: 50px;
		padding-top: 50px;
	}
	#iphone-family img{
		display: block;
		margin: 50px auto;
		width: 53%;
	}
	#banner .space200 {
	    margin-top: 100px;
	}
	#iphone-family h3 {
	    padding: 100px 0px;
	}
	footer {
	    padding: 20px 8px;
	}
	footer li a {
	    font-size: 16px;
	}
	#about-me h4{
		text-align: center;
	}
	.padleft30 {
	    padding-left: 0px;
	}
	.padleft60 {
	    padding-left: 0px;
	}
	.padleft90 {
	    padding-left: 0px;
	}
	.image{
		padding-top: 30px;
	}
	.space250 {
	    margin-top: 250px;
	    margin-left: 0;
	}
	header ul.list-inline li {
	    padding: 0px 22px;
	}
	.space80 {
	    margin-top: 25px;
	}
	.title{
		text-align: center;
	}
	.container{
		padding-left: 70px;
    	padding-right: 70px;
	}
	header .container{
		padding-left: 15px;
		padding-right: 15px;
	}
	hr{
		margin-bottom: 0;
	}
	.space30 {
	    margin-top: 0px !important;
	}
	#brand {
	    padding-bottom: 100px;
	}
	#design{
		padding-bottom: 100px;
	}
	#motion-redesign{
		padding-bottom: 100px;
	}
	.stroke-img{
		display: none;
	}
	#about-me .media {
	    padding: 0;
	}
	#about-me .media .media-left{
		display: block;		
		padding-right: 0;
	}
	#about-me .media .media-left img{
		margin: 0 auto;
   		display: block;
   		width: 60%;
	}
	#about-me .media .media-body{
		text-align: center;
	}
	.space250 {
	    margin-top: 50px;
	    margin-left: 0;
	}
	#about-me .container{
		padding-left: 15px;
		padding-right: 15px;
	}
	#about-me .title{
		padding: 0px 70px;
	}
	#about-me hr{
		margin-left: 56px;
		margin-right: 56px;
	}
	#about-me .media-body h2{
		padding-top: 20px;
	}
	footer{
		text-align: center;
	}
	footer .pull-right{
		float: none !important;
	}
	#about-me .row.visible-xs li a{
		font-size: 30px;
		color: #3179be;
		font-family: 'segoeuil';		
	}
	#about-me .row.visible-xs li{
		padding-top: 50px;
	}
	#about-me {
	    padding-bottom: 60px;
	}
	#contact{
		padding-bottom: 50px;
	}
	footer p{
		margin-top: 0px;
	}
}

@media(max-width: 767px){
	header {
		display: block;
	}
	.sidenav {
		display: none;
	}
	header ul.list-inline li {
	    padding: 0px 20px;
	}
	#banner h1{
		padding-top: 35px;
		padding-bottom: 35px;
		font-size: 19px;
		line-height: 26px;
	}
	#banner .space200 {
	    margin-top: 25px;
	}
	#iphone-family img {
	    width: 100%;
	}
}

@media(max-width: 375px){
	header {
		display: block;
	}
	.sidenav {
		display: none;
	}
	header ul.list-inline li {
	    padding: 0px 18px;
	}

}

@media(max-width: 360px){
	header {
		display: block;
	}
	.sidenav {
		display: none;
	}
	header ul.list-inline li {
	    padding: 0px 10px;
	}
	.title {
	    font-size: 20px;
	}
	footer .list-inline li {
	    padding: 0px 7px;
	}
	.container {
	    padding-left: 50px;
	    padding-right: 50px;
	}
}