/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input{margin:0 auto;padding:0;}h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th{font-size:1em;font-weight:normal;font-style:normal;}ul,ol{list-style:none;}fieldset,img{border:none;}caption,th{text-align:left;}table{border-collapse:collapse;border-spacing:0;}
html {
margin-bottom: 1px;
overflow: -moz-scrollbars-vertical !important;
overflow-y: scroll;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body { font: 13px/18px "Open Sans Unicode", "Open Sans", Verdana, Arial, sans-serif; background-color: #646461; background: #fff; color: #333; -webkit-font-smoothing: antialiased;}
*/p { margin-bottom: 18px; }
a { color: #808080; text-decoration: underline; outline-style: none; }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
/* adds animation for all transitions */
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
margin: 0;
padding: 0;
-webkit-text-size-adjust: none;
}
/*Layout*/
#pagewrap {
margin: 0 auto;
width: 100%;
clear: both;
}
@media only screen and (min-width: 960px){
#toggle-nav, #toggle-nav-label, #menu-header, #drawer {display:none;}
#header {display: block;}
#page-wrap {
margin-left: 0px;
margin-top: 0px !important;
width: 100%;
height: calc(100% - 50px);
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#header-wrap {width: 100%; height: 55px; background-image: url("images/header-bg.png"); background-repeat: repeat-x; float: left; position: relative;}
#header {width: 960px; height: 55px; text-align: center ;position: relative; margin: 0 auto; }
.nav-menu{width:960px; height: 55px; display: block;}
.nav-menu ul{list-style-type: none; height: 55px; padding:16px 0px; }
.nav-menu li {display: inline-block; font-family: "Open Sans";font-size: 16px; margin-top:0;}
.nav-menu a {text-decoration: none; color: #bbbbbb; border-radius: 1px; padding: 16px 35px !important; line-height: 1.5; }
.nav-menu a:hover{background-image: url('images/nav-bg-hov.png') ; background-repeat: repeat-x; padding:16px 35px !important;color: #fff;}
#banner-wrap {100%;width: 100%; height:auto !important; background-color: #00a1b1; text-align: center; float: left;}
#banner {width: 960px; height:auto !important; background-color: #00a1b1; padding-top: 40px; text-align: center;}
#profile {width: 40%; height: 112px; }
#profile img{width: 350px; height: auto; }
#intro {width: 600px; height: auto; margin-top: 40px;}
#intro p {font-family: "Oxygen"; font-size: 18px; color: #fff; margin-top: 30px;width: 600px;line-height: 1.5;}
.flash {width: 100%;position: relative; left: 0; top: 50px;}
#slideshow {width:100%; position: relative;}
#slideshow img{width:95%; height: auto; padding-bottom:30px;}
#about-wrap { width: 100%; height: auto; float:left;}
#about { width: 600px; height: auto; text-align: center; line-height: 2; padding-top: 45px;}
#about p{font-family: "Oxygen"; font-size: 15px; color: #555;}
#portfolio-wrap {margin-top: 50px;width: 100%; height: auto; float: left; text-align: center; background-color: #fafafa;}
#portfolio {width: 960px; height: auto; margin-top: 40px; }
#portfolio h1 {font-family: "Open Sans"; font-size: 24px; font-weight: bold; color: #ff5c2f;}
#portfolio .gallery {margin-top: 40px;}
#portfolio .gallery a{position: relative;}
#educ-skills-exp-wrap {width: 100%; height: 411x; text-align: center; background-color: #008eb1; margin-top: 50px; float: left; position: relative;}
#educ-skills-exp {width: 960px; height: 411px; position: relative; margin: 0 auto;}
#educ-skills-exp .info {width: 300px; height: 411px; display:inline-block; position: relative; float: left; padding:50px 0; text-align: left;}
#educ-skills-exp .info ul{list-style-type: none; margin-top: 40px;}
#educ-skills-exp .info h3{font-family: "Open Sans"; font-weight: bold; font-size: 24px; color: #fff;}
#educ-skills-exp .info li{font-family: "Oxygen"; font-size: 15px; color: #fff; line-height: 1.75;}
#educ-skills-exp .info #bullet:before { content:url('images/bullet.png'); vertical-align: -10%; margin-right: 10px;}
#educ-skills-exp .info #bar1:after {content:url('images/bar1.png'); float:right;}
#educ-skills-exp .info #bar2:after {content:url('images/bar2.png'); float:right;}
#educ-skills-exp .info #bar3:after {content:url('images/bar3.png'); float:right;}
#educ-skills-exp .info #bar4:after {content:url('images/bar4.png'); float:right;}
#educ-skills-exp .info #bar5:after {content:url('images/bar5.png'); float:right;}
#educ-skills-exp .info p{font-family: "Oxygen"; font-size: 15px; color: #fff; line-height: 1.75; margin-top: 30px;}
#educ-skills-exp .info #course {font-family: "Oxygen"; font-size: 20px; font-weight: bold; color: #fff; line-height: 1.75;}
#educ-skills-exp .info #school_name {font-family: "Oxygen"; font-size: 18px; color: #fff; line-height: 1.75;}
#educ-skills-exp .info #job_title {font-family: "Oxygen"; font-size: 20px; font-weight: bold;color: #fff; line-height: 2;}
#educ-skills-exp .info #company {font-family: "Oxygen"; line-height: 2;font-size: 18px; color: #fff; line-height: 2;}
#educ-skills-exp .exp { margin-left: 0;}
#educ-skills-exp .education { margin-left: 30px;}
#educ-skills-exp .skills{ margin-left: 30px;}
#contact-form-wrap {width: 100%; height:600px; float: left; margin: 0 auto;}
#contact-form {width: 960px; height:600px; background-color: #fff; margin: 0 auto; text-align: center;}
#contact-form h1 {font-family: "Open Sans"; font-size: 24px; font-weight: bold; padding-top:60px; color: #ff5c2f;}
#contact-form h1:before { content: url('images/contact-icn.png'); vertical-align: -50%; margin-right: 15px;}
#contact-form form {max-width: 600px; margin-top: 30px; }
input[type="text"] {float: left; width:100%; text-align: center; height: 40px; margin-bottom: 16px;color: #777;border: .5px solid #cdcdcd; border-radius: 3px;}
textarea[name="message"] {min-height: 150px; min-width: 600px; text-align: center; font-size: 13px;color: #777;border: .5px solid #cdcdcd; border-radius: 3px;}
input[type="text"]:focus, input[type="text"].focus {border: .5px solid #3d3d3d;}
textarea[name="message"]:focus, input[type="text"].focus {border: .5px solid #3d3d3d;}
input[type="submit"] {height: 55px; width: 200px; background-color: #ff5c2f; color: #fff; font-family: "Open Sans"; font-size: 18px; font-weight: bold; text-transform: uppercase; margin-top: 16px; border: none; border-radius: 5px;}
input[type="submit"]:hover {background-color: #008eb1; }
#footer-wrap {width: 100%; height: 340px; background-color: #383838; text-align: center; float: left;}
#footer {width: 960px; height: 340px; background-color: #383838; text-align: center;}
footer {}
footer ul{list-type-style: none; padding-top: 50px;}
footer ul li{ display: inline; padding: 0 5px;}
footer ul .spacer:before{ content: url('images/spacer.png');vertical-align: -50%;padding-right:10px;}
footer ul a{font-family: "Open Sans"; font-size: 15px;text-decoration: none; display: inline; padding: 0 15px; color:#8b8b8b;}
footer ul a:link, footer ul a:visited, footer ul a:hover {text-decoration: none; display: inline; padding: 0 15px; color:#8b8b8b;}
footer ul #active a:active, footer ul a:hover {text-decoration: none; display: inline; padding: 0 15px; color:#00a1b1;}
#footer p {font-family: "Open Sans"; font-size: 15px; color: #8b8b8b; margin-top: 15px; }
#footer p #dot {font-size: 30px; vertical-align: -15%;}
#footer .social {margin-top: 30px; width: 53px ; height: 53px; display: inline-block;margin: 40px 5px 0 5px;}
#footer #fb {background-image: url('images/fb.png');}
#footer #tw{background-image: url('images/tw.png');}
#footer #in{background-image: url('images/in.png');}
#footer #fb:hover {background-image: url('images/fb_hov.png');}
#footer #tw:hover {background-image: url('images/tw_hov.png');}
#footer #in:hover {background-image: url('images/in_hov.png');}
}
@media only screen and (min-width: 768px) and (max-width: 960px){
#toggle-nav {
position:absolute;
opacity: 0;
}
#toggle-nav-label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
left: 0;
width: 50px;
height:50px;
background-color: #00a1b1;
display: block;
z-index:999 !important;
position: fixed;
}
#toggle-nav-label:before {
content:'';
display: block;
position: absolute;
height: 2px;
width: 24px;
background: #fff;
left: 13px;
top: 18px;
box-shadow: 0 6px 0 #fff, 0 12px 0 #fff;
}
#menu-header {
width: 100%;
position: fixed;
left: 0;
background: #efefef;
padding: 10px 10px 10px 60px;
line-height: 30px;
z-index: 99;
font-family: "Open Sans";
font-size: 20px;
}
/* */
#drawer {
position: fixed;
top: 0;
left: -300px;
height: 100% ;
width: 300px;
background-color: #444;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
text-align: left;
z-index:99;
}
#page-wrap {
margin-left: 0px;
top: 50px;
width: 100%;
height: calc(100% - 50px);
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#toggle-nav:checked ~ #toggle-nav-label {
width: calc(100%-300px);
background: #ff5c2f;
}
#toggle-nav:checked ~ #toggle-nav-label,
#toggle-nav:checked ~ #menu-header {
left: 250px;
}
#toggle-nav:checked ~ #drawer {
left:0;
}
#toggle-nav:checked ~ #page-wrap {
margin-left: 300px !important;
}
#toggle-nav, #toggle-nav-label, #menu-header, #drawer {display:true;}
#header-wrap {display: none ;}
#page-wrap {
margin-left: 0px;
margin-top: 0px !important;
width: 100%;
height: calc(100% - 50px);
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#drawer ul{list-style: none; margin-top: 0px;}
#drawer ul li a{text-decoration: none; color: #bbbbbb; background-color: #444; width:100%; display: block; padding-left: 10px !important; height: 50px;}
#drawer ul li a:link, #drawer ul li a:visited, #drawer ul li a:hover {text-decoration: none; color: #bbbbbb; background-color: #444; width:100%;display: block;padding: 16px 5px;}
#drawer ul li a:active, #drawer ul li a:hover {text-decoration: none; color: #fff; background-color: #ff5c2f; width:100%;display: block; padding: 16px 20px !important;}
#banner-wrap { width: 100%; height:auto !important; }
#banner {width: 100%; height:auto !important; background-color: #00a1b1; padding-top: 40px; text-align: center;}
#profile {width: 40%; height: 112px; margin-top: 60px; text-align: center; position: relative;}
#profile img{width: 100%; height: auto; margin: 0 auto;}
#intro {width: 95%; height: auto; margin-top: 10px;}
#intro p {font-family: "Oxygen"; font-size: 14px; color: #fff; margin-top: 0px;width: 100%;line-height: 1.5;}
.flash {position: relative; left: 0; top: 50px;}
#slideshow {width:95%; position: relative;}
#slideshow img{width:100% !important; height: auto; padding-bottom:30px;}
#about-wrap { width: 100%; height: auto; float:left;}
#about { width: 85%; height: auto; text-align: center; line-height: 2; padding-top: 45px;}
#about p{font-family: "Oxygen"; font-size: 15px; color: #555;}
#portfolio-wrap {margin-top: 50px;width: 100%; height: auto; float: left; text-align: center; background-color: #fafafa;}
#portfolio {width: 100%; height: auto; margin-top: 40px; }
#portfolio h1 {font-family: "Open Sans"; font-size: 24px; font-weight: bold; color: #ff5c2f;}
#portfolio .gallery {margin-top: 40px;}
#portfolio .gallery a{position: relative;}
#educ-skills-exp-wrap {width: 100%; height: auto; text-align: center; background-color: #008eb1; margin-top: 50px; float: left; position: relative;}
#educ-skills-exp {width: 95%; height: auto; position: relative; margin: 0 auto; text-align: center;}
#educ-skills-exp .info {width: 70%; height: auto; display:inline-block; position: relative; margin:50px 0 0 0; text-align: left;}
#educ-skills-exp .info ul{list-style-type: none; margin-top: 30px;}
#educ-skills-exp .info h3{font-family: "Open Sans"; font-weight: bold; font-size: 24px; color: #fff;}
#educ-skills-exp .info li{font-family: "Oxygen"; font-size: 15px; color: #fff; line-height: 1.75;}
#educ-skills-exp .info #bullet:before { content:url('images/bullet.png'); vertical-align: -10%; margin-right: 10px;}
#educ-skills-exp .info #bar1:after {content:url('images/bar1.png');padding-left: 30px; float: right;}
#educ-skills-exp .info #bar2:after {content:url('images/bar2.png');padding-left: 30px; float: right;}
#educ-skills-exp .info #bar3:after {content:url('images/bar3.png');padding-left: 30px; float: right;}
#educ-skills-exp .info #bar4:after {content:url('images/bar4.png');padding-left: 30px; float: right;}
#educ-skills-exp .info #bar5:after {content:url('images/bar5.png');padding-left: 30px; float: right;}
#educ-skills-exp .info p{font-family: "Oxygen"; font-size: 15px; color: #fff; line-height: 1.75; margin-top: 30px;}
#educ-skills-exp .info #course {font-family: "Oxygen"; font-size: 20px; font-weight: bold; color: #fff; line-height: 1.75;}
#educ-skills-exp .info #school_name {font-family: "Oxygen"; font-size: 18px; color: #fff; line-height: 1.75;}
#educ-skills-exp .info #job_title {font-family: "Oxygen"; font-size: 20px; font-weight: bold;color: #fff; line-height: 2;}
#educ-skills-exp .info #company {font-family: "Oxygen"; line-height: 2;font-size: 18px; color: #fff; line-height: 2;}
#educ-skills-exp .exp { margin-left: 30px;}
#educ-skills-exp .education { margin-left: 30px;}
#educ-skills-exp .skills{ margin-left: 30px; padding-bottom: 50px;}
#contact-form-wrap {width: 100%; height:auto; float: left; margin: 0 auto;}
#contact-form {width: 95%; height:auto; background-color: #fff; margin: 0 auto; text-align: center;}
#contact-form h1 {font-family: "Open Sans"; font-size: 24px; font-weight: bold; padding-top:60px; color: #ff5c2f;}
#contact-form h1:before { content: url('images/contact-icn.png'); vertical-align: -50%; margin-right: 15px;}
#contact-form form {max-width: 600px; margin-top: 30px; padding-bottom: 60px; }
input[type="text"] {float: left; width:100%; text-align: center; height: 40px; margin-bottom: 16px;color: #777;border: .5px solid #cdcdcd; border-radius: 3px;}
textarea[name="message"] {min-height: 150px; min-width: 600px; text-align: center; font-size: 13px;color: #777;border: .5px solid #cdcdcd; border-radius: 3px;}
input[type="text"]:focus, input[type="text"].focus {border: .5px solid #3d3d3d;}
textarea[name="message"]:focus, input[type="text"].focus {border: .5px solid #3d3d3d;}
input[type="submit"] {height: 55px; width: 200px; background-color: #ff5c2f; color: #fff; font-family: "Open Sans"; font-size: 18px; font-weight: bold; text-transform: uppercase; margin-top: 16px; border: none; border-radius: 5px;}
input[type="submit"]:hover {background-color: #008eb1; }
#footer-wrap {width: 100%; height: auto; background-color: #383838; text-align: center; float: left;}
#footer {width: 95%; height: auto; background-color: #383838; text-align: center;padding-bottom: 60px;}
footer {}
footer ul{list-type-style: none; padding-top: 50px;}
footer ul li{ display: inline; padding: 0 5px;}
footer ul .spacer:before{ content: url('images/spacer.png') ;vertical-align: -50%;padding-right:10px; display: none;}
footer ul a{font-family: "Open Sans"; font-size: 15px;text-decoration: none; display: inline; padding: 0 15px; color:#8b8b8b;}
footer ul a:link, footer ul a:visited, footer ul a:hover {text-decoration: none; display: block; padding: 0 15px; color:#8b8b8b;}
footer ul #active a:active, footer ul a:hover {text-decoration: none; display: block; padding: 0 15px; color:#00a1b1;}
#footer p {font-family: "Open Sans"; font-size: 15px; color: #8b8b8b; margin-top: 15px; }
#footer p #dot {font-size: 30px; vertical-align: -15%;}
#footer .social {margin-top: 30px; width: 53px ; height: 53px; display: inline-block;margin: 40px 5px 0 5px;}
#footer #fb {background-image: url('images/fb.png');}
#footer #tw{background-image: url('images/tw.png');}
#footer #in{background-image: url('images/in.png');}
#footer #fb:hover {background-image: url('images/fb_hov.png');}
#footer #tw:hover {background-image: url('images/tw_hov.png');}
#footer #in:hover {background-image: url('images/in_hov.png');}
}
@media only screen and (min-width: 481px) and (max-width: 768px){
#toggle-nav {
position:absolute;
opacity: 0;
}
#toggle-nav-label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
left: 0;
width: 50px;
height:50px;
background-color: #00a1b1;
display: block;
z-index:999 !important;
position: fixed;
}
#toggle-nav-label:before {
content:'';
display: block;
position: absolute;
height: 2px;
width: 24px;
background: #fff;
left: 13px;
top: 18px;
box-shadow: 0 6px 0 #fff, 0 12px 0 #fff;
}
#menu-header {
width: 100%;
position: fixed;
left: 0;
background: #efefef;
padding: 10px 10px 10px 60px;
line-height: 30px;
z-index: 99;
font-family: "Open Sans";
font-size: 20px;
}
/* */
#drawer {
position: fixed;
top: 0;
left: -300px;
height: 100% ;
width: 300px;
background-color: #444;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
text-align: left;
z-index:99;
}
#page-wrap {
margin-left: 0px;
top: 50px;
width: 100%;
height: calc(100% - 50px);
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#toggle-nav:checked ~ #toggle-nav-label {
width: calc(100%-300px);
background: #ff5c2f;
}
#toggle-nav:checked ~ #toggle-nav-label,
#toggle-nav:checked ~ #menu-header {
left: 250px;
}
#toggle-nav:checked ~ #drawer {
left:0;
}
#toggle-nav:checked ~ #page-wrap {
margin-left: 300px !important;
}
#toggle-nav, #toggle-nav-label, #menu-header, #drawer {display:true;}
#header-wrap {display: none ;}
#page-wrap {
margin-left: 0px;
margin-top: 0px !important;
width: 100%;
height: calc(100% - 50px);
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#drawer ul{list-style: none; margin-top: 0px;}
#drawer ul li a{text-decoration: none; color: #bbbbbb; background-color: #444; width:100%; display: block; padding-left: 10px !important; height: 50px;}
#drawer ul li a:link, #drawer ul li a:visited, #drawer ul li a:hover {text-decoration: none; color: #bbbbbb; background-color: #444; width:100%;display: block;padding: 16px 5px;}
#drawer ul li a:active, #drawer ul li a:hover {text-decoration: none; color: #fff; background-color: #ff5c2f; width:100%;display: block; padding: 16px 20px !important;}
#banner-wrap { width: 100%; height:auto !important; }
#banner {width: 100%; height:auto !important; background-color: #00a1b1; padding-top: 40px; text-align: center;}
#profile {width: 60%; height: 112px; margin-top: 60px;}
#profile img{width: 100%; height: auto;}
#intro {width: 85%; height: auto; margin-top: 10px;}
#intro p {font-family: "Oxygen"; font-size: 14px; color: #fff; margin-top: 0px;width: 100%;line-height: 1.5;}
.flash {position: relative; left: 0; top: 50px;}
#slideshow {width:95%; position: relative;}
#slideshow img{width:100% !important; height: auto; padding-bottom:30px;}
#about-wrap { width: 100%; height: auto; float:left;}
#about { width: 85%; height: auto; text-align: center; line-height: 2; padding-top: 45px;}
#about p{font-family: "Oxygen"; font-size: 15px; color: #555;}
#portfolio-wrap {margin-top: 50px;width: 100%; height: auto; float: left; text-align: center; background-color: #fafafa;}
#portfolio {width: 100%; height: auto; margin-top: 40px; }
#portfolio h1 {font-family: "Open Sans"; font-size: 24px; font-weight: bold; color: #ff5c2f;}
#portfolio .gallery {margin-top: 40px;}
#portfolio .gallery a{position: relative;}
#educ-skills-exp-wrap {width: 100%; height: auto; text-align: center; background-color: #008eb1; margin-top: 50px; float: left; position: relative;}
#educ-skills-exp {width: 95%; height: auto; position: relative; margin: 0 auto; text-align: center;}
#educ-skills-exp .info {width: 70%; height: auto; display:inline-block; position: relative; margin:50px 0 0 0; text-align: left;}
#educ-skills-exp .info ul{list-style-type: none; margin-top: 30px;}
#educ-skills-exp .info h3{font-family: "Open Sans"; font-weight: bold; font-size: 24px; color: #fff;}
#educ-skills-exp .info li{font-family: "Oxygen"; font-size: 15px; color: #fff; line-height: 1.75;}
#educ-skills-exp .info #bullet:before { content:url('images/bullet.png'); vertical-align: -10%; margin-right: 10px;}
#educ-skills-exp .info #bar1:after {content:url('images/bar1.png');padding-left: 30px; float: right;}
#educ-skills-exp .info #bar2:after {content:url('images/bar2.png');padding-left: 30px; float: right;}
#educ-skills-exp .info #bar3:after {content:url('images/bar3.png');padding-left: 30px; float: right;}
#educ-skills-exp .info #bar4:after {content:url('images/bar4.png');padding-left: 30px; float: right;}
#educ-skills-exp .info #bar5:after {content:url('images/bar5.png');padding-left: 30px; float: right;}
#educ-skills-exp .info p{font-family: "Oxygen"; font-size: 15px; color: #fff; line-height: 1.75; margin-top: 30px;}
#educ-skills-exp .info #course {font-family: "Oxygen"; font-size: 20px; font-weight: bold; color: #fff; line-height: 1.75;}
#educ-skills-exp .info #school_name {font-family: "Oxygen"; font-size: 18px; color: #fff; line-height: 1.75;}
#educ-skills-exp .info #job_title {font-family: "Oxygen"; font-size: 20px; font-weight: bold;color: #fff; line-height: 2;}
#educ-skills-exp .info #company {font-family: "Oxygen"; line-height: 2;font-size: 18px; color: #fff; line-height: 2;}
#educ-skills-exp .exp { margin-left: 30px;}
#educ-skills-exp .education { margin-left: 30px;}
#educ-skills-exp .skills{ margin-left: 30px; padding-bottom: 50px;}
#contact-form-wrap {width: 100%; height:auto; float: left; margin: 0 auto;}
#contact-form {width: 95%; height:auto; background-color: #fff; margin: 0 auto; text-align: center;}
#contact-form h1 {font-family: "Open Sans"; font-size: 24px; font-weight: bold; padding-top:60px; color: #ff5c2f;}
#contact-form h1:before { content: url('images/contact-icn.png'); vertical-align: -50%; margin-right: 15px;}
#contact-form form {max-width: 100%; margin-top: 30px; padding-bottom: 60px; }
input[type="text"] {float: left; width:100%; text-align: center; height: 40px; margin-bottom: 16px;color: #777;border: .5px solid #cdcdcd; border-radius: 3px;}
textarea[name="message"] {min-height: 150px; min-width: 100%; text-align: center; font-size: 13px;color: #777;border: .5px solid #cdcdcd; border-radius: 3px;}
input[type="text"]:focus, input[type="text"].focus {border: .5px solid #3d3d3d;}
textarea[name="message"]:focus, input[type="text"].focus {border: .5px solid #3d3d3d;}
input[type="submit"] {height: 55px; width: 200px; background-color: #ff5c2f; color: #fff; font-family: "Open Sans"; font-size: 18px; font-weight: bold; text-transform: uppercase; margin-top: 16px; border: none; border-radius: 5px;}
input[type="submit"]:hover {background-color: #008eb1; }
#footer-wrap {width: 100%; height: auto; background-color: #383838; text-align: center; float: left;}
#footer {width: 95%; height: auto; background-color: #383838; text-align: center;padding-bottom: 60px;}
footer {}
footer ul{list-type-style: none; padding-top: 50px;}
footer ul li{ display: inline; padding: 0 5px;}
footer ul .spacer:before{ content: url('images/spacer.png') ;vertical-align: -50%;padding-right:10px; display: none;}
footer ul a{font-family: "Open Sans"; font-size: 15px;text-decoration: none; display: inline; padding: 0 15px; color:#8b8b8b;}
footer ul a:link, footer ul a:visited, footer ul a:hover {text-decoration: none; display: block; padding: 0 15px; color:#8b8b8b;}
footer ul #active a:active, footer ul a:hover {text-decoration: none; display: block; padding: 0 15px; color:#00a1b1;}
#footer p {font-family: "Open Sans"; font-size: 15px; color: #8b8b8b; margin-top: 15px; }
#footer p #dot {font-size: 30px; vertical-align: -15%;}
#footer .social {margin-top: 30px; width: 53px ; height: 53px; display: inline-block;margin: 40px 5px 0 5px;}
#footer #fb {background-image: url('images/fb.png');}
#footer #tw{background-image: url('images/tw.png');}
#footer #in{background-image: url('images/in.png');}
#footer #fb:hover {background-image: url('images/fb_hov.png');}
#footer #tw:hover {background-image: url('images/tw_hov.png');}
#footer #in:hover {background-image: url('images/in_hov.png');}
}
@media only screen and (max-width: 480px){
#toggle-nav {
position:absolute;
opacity: 0;
}
#toggle-nav-label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
left: 0;
width: 50px;
height:50px;
background-color: #00a1b1;
display: block;
z-index:999 !important;
position: fixed;
}
#toggle-nav-label:before {
content:'';
display: block;
position: absolute;
height: 2px;
width: 24px;
background: #fff;
left: 13px;
top: 18px;
box-shadow: 0 6px 0 #fff, 0 12px 0 #fff;
}
#menu-header {
width: 100%;
position: fixed;
left: 0;
background: #efefef;
padding: 10px 10px 10px 60px;
line-height: 30px;
z-index: 99;
font-family: "Open Sans";
font-size: 20px;
}
/* */
#drawer {
position: fixed;
top: 0;
left: -300px;
height: 100% ;
width: 300px;
background-color: #444;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
text-align: left;
z-index:99;
}
#page-wrap {
margin-left: 0px;
top: 50px;
width: 100%;
height: calc(100% - 50px);
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#toggle-nav:checked ~ #toggle-nav-label {
width: calc(100%-300px);
background: #ff5c2f;
}
#toggle-nav:checked ~ #toggle-nav-label,
#toggle-nav:checked ~ #menu-header {
left: 250px;
}
#toggle-nav:checked ~ #drawer {
left:0;
}
#toggle-nav:checked ~ #page-wrap {
margin-left: 300px !important;
}
#toggle-nav, #toggle-nav-label, #menu-header, #drawer {display:true;}
#header-wrap {display: none ;}
#page-wrap {
margin-left: 0px;
margin-top: 0px !important;
width: 100%;
height: calc(100% - 50px);
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#drawer ul{list-style: none; margin-top: 0px;}
#drawer ul li a{text-decoration: none; color: #bbbbbb; background-color: #444; width:100%; display: block; padding-left: 10px !important; height: 50px;}
#drawer ul li a:link, #drawer ul li a:visited, #drawer ul li a:hover {text-decoration: none; color: #bbbbbb; background-color: #444; width:100%;display: block;padding: 16px 5px;}
#drawer ul li a:active, #drawer ul li a:hover {text-decoration: none; color: #fff; background-color: #ff5c2f; width:100%;display: block; padding: 16px 20px !important;}
#banner-wrap { width: 100%; height:auto !important; }
#banner {width: 100%; height:auto !important; background-color: #00a1b1; padding-top: 40px; text-align: center;}
#profile {width: 80%; height: 112px; margin-top: 60px;}
#profile img{width: 100%; height: auto;}
#intro {width: 85%; height: auto; margin-top: 10px;}
#intro p {font-family: "Oxygen"; font-size: 14px; color: #fff; margin-top: 0px;width: 100%;line-height: 1.5;}
.flash {position: relative; left: 0; top: 50px;}
#slideshow {width:95%; position: relative;}
#slideshow img{width:100% !important; height: auto; padding-bottom:30px;}
#about-wrap { width: 100%; height: auto; float:left;}
#about { width: 85%; height: auto; text-align: center; line-height: 2; padding-top: 45px;}
#about p{font-family: "Oxygen"; font-size: 15px; color: #555;}
#portfolio-wrap {margin-top: 50px;width: 100%; height: auto; float: left; text-align: center; background-color: #fafafa;}
#portfolio {width: 100%; height: auto; margin-top: 40px; }
#portfolio h1 {font-family: "Open Sans"; font-size: 24px; font-weight: bold; color: #ff5c2f;}
#portfolio .gallery {margin-top: 40px;}
#portfolio .gallery a{position: relative;}
#educ-skills-exp-wrap {width: 100%; height: auto; text-align: center; background-color: #008eb1; margin-top: 50px; float: left; position: relative;}
#educ-skills-exp {width: 95%; height: auto; position: relative; margin: 0 auto; text-align: center;}
#educ-skills-exp .info {width: 100%; height: auto; display:block; position: relative; margin:50px 0 0 0; text-align: left;}
#educ-skills-exp .info ul{list-style-type: none; margin-top: 30px;}
#educ-skills-exp .info h3{font-family: "Open Sans"; font-weight: bold; font-size: 24px; color: #fff;}
#educ-skills-exp .info li{font-family: "Oxygen"; font-size: 15px; color: #fff; line-height: 1.75;}
#educ-skills-exp .info #bullet:before { content:url('images/bullet.png'); vertical-align: -10%; margin-right: 10px;}
#educ-skills-exp .info #bar1:after {content:url('images/bar1.png'); float:right;}
#educ-skills-exp .info #bar2:after {content:url('images/bar2.png'); float:right;}
#educ-skills-exp .info #bar3:after {content:url('images/bar3.png'); float:right;}
#educ-skills-exp .info #bar4:after {content:url('images/bar4.png'); float:right;}
#educ-skills-exp .info #bar5:after {content:url('images/bar5.png'); float:right;}
#educ-skills-exp .info p{font-family: "Oxygen"; font-size: 15px; color: #fff; line-height: 1.75; margin-top: 30px;}
#educ-skills-exp .info #course {font-family: "Oxygen"; font-size: 20px; font-weight: bold; color: #fff; line-height: 1.75;}
#educ-skills-exp .info #school_name {font-family: "Oxygen"; font-size: 18px; color: #fff; line-height: 1.75;}
#educ-skills-exp .info #job_title {font-family: "Oxygen"; font-size: 20px; font-weight: bold;color: #fff; line-height: 2;}
#educ-skills-exp .info #company {font-family: "Oxygen"; line-height: 2;font-size: 18px; color: #fff; line-height: 2;}
#educ-skills-exp .exp { margin-left: 0px;}
#educ-skills-exp .education { margin-left: 0px;}
#educ-skills-exp .skills{ margin-left: 0px; padding-bottom: 50px;}
#contact-form-wrap {width: 100%; height:auto; float: left; margin: 0 auto;}
#contact-form {width: 95%; height:auto; background-color: #fff; margin: 0 auto; text-align: center;}
#contact-form h1 {font-family: "Open Sans"; font-size: 24px; font-weight: bold; padding-top:60px; color: #ff5c2f;}
#contact-form h1:before { content: url('images/contact-icn.png'); vertical-align: -50%; margin-right: 15px;}
#contact-form form {max-width: 100%; margin-top: 30px; padding-bottom: 60px; }
input[type="text"], input[type="integer"] {float: left; width:100%; text-align: center; height: 40px; margin-bottom: 16px;color: #777;border: .5px solid #cdcdcd; border-radius: 3px;}
textarea[name="message"] {min-height: 150px; min-width: 100%; text-align: center; font-size: 13px;color: #777;border: .5px solid #cdcdcd; border-radius: 3px;}
input[type="text" ]:focus, input[type="integer"].focus {border: .5px solid #3d3d3d;}
textarea[name="message"]:focus, input[type="text"].focus {border: .5px solid #3d3d3d;}
input[type="submit"] {height: 55px; width: 200px; background-color: #ff5c2f; color: #fff; font-family: "Open Sans"; font-size: 18px; font-weight: bold; text-transform: uppercase; margin-top: 16px; border: none; border-radius: 5px;}
input[type="submit"]:hover {background-color: #008eb1; }
#footer-wrap {width: 100%; height: auto; background-color: #383838; text-align: center; float: left;}
#footer {width: 95%; height: auto; background-color: #383838; text-align: center;padding-bottom: 60px;}
footer {}
footer ul{list-type-style: none; padding-top: 50px;}
footer ul li{ display: inline; padding: 0 5px;}
footer ul .spacer:before{ content: url('images/spacer.png') ;vertical-align: -50%;padding-right:10px; display: none;}
footer ul a{font-family: "Open Sans"; font-size: 15px;text-decoration: none; display: inline; padding: 0 15px; color:#8b8b8b;}
footer ul a:link, footer ul a:visited, footer ul a:hover {text-decoration: none; display: block; padding: 0 15px; color:#8b8b8b;}
footer ul #active a:active, footer ul a:hover {text-decoration: none; display: block; padding: 0 15px; color:#00a1b1;}
#footer p {font-family: "Open Sans"; font-size: 15px; color: #8b8b8b; margin-top: 15px; }
#footer p #dot {font-size: 30px; vertical-align: -15%;}
#footer .social {margin-top: 30px; width: 53px ; height: 53px; display: inline-block;margin: 40px 5px 0 5px;}
#footer #fb {background-image: url('images/fb.png');}
#footer #tw{background-image: url('images/tw.png');}
#footer #in{background-image: url('images/in.png');}
#footer #fb:hover {background-image: url('images/fb_hov.png');}
#footer #tw:hover {background-image: url('images/tw_hov.png');}
#footer #in:hover {background-image: url('images/in_hov.png');}
}