html, button, input, select, textarea {
    color:#222;
}
body {
    font-size:1em;
    line-height:1.4;
}
::-moz-selection {
    background:#b3d4fc;
    text-shadow:none;
}
::selection {
    background:#b3d4fc;
    text-shadow:none;
}

.header h1 {
	color: #b31a1e !important;
	text-shadow: 0 -4px #f97523, 4px 0 #f97523, 0 4px #f97523, -4px 0 #f97523;
	
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #ccc;
    margin:1em 0;
    padding:0;
}
img {
    vertical-align:middle;
}
fieldset {
    border:0;
    margin:0;
    padding:0;
}
textarea {
    resize:vertical;
}
.chromeframe {
    margin:0.2em 0;
    background:#ccc;
    color:#000;
    padding:0.2em 0;
}
a:hover, a:active, a:focus, a {
    outline:0;
    text-decoration:none;
}
a, img {
    border:none;
    outline-style:none;
	font-style: italic;
}
body {
    background:url('../img/pattern-header.gif') repeat;
    font-family:'Open Sans', sans-serif;
    font-style:normal;
    font-weight:300;
}
#preloader {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#b22529;
    z-index:99;
}
#status {
    width:230px;
    height:160px;
    position:absolute;
    left:47%;
    top:50%;
    background-image:url('../img/load.gif');
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

/* === Header Section === */

#header-container {
    height:auto;
    width:100%;
    /* background:url('../img/header_monster.jpg') no-repeat bottom center; */
}

.nav-container-fixed {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#17999e;
    z-index:2;
}
.nav-container-normal,.nav-container-no-move {
	position:relative;
	background-color: #17999e;
}
.nav-container {
    position:relative;
}
.header {
    padding:0 30px;
    position:relative;
}
.header-social {
    height:30px;
    padding-top:105px;
    z-index:1;
}
.header-social ul {
    margin:0;
    padding:0;
    list-style:none;
}
.header-social ul li {
    float:left;
}
.header-social ul li a > div {
    webkit-transition:background 0.2s ease-in;
    moz-transition:background 0.2s ease-in;
    ms-transition:background 0.2s ease-in;
    o-transition:background 0.2s ease-in;
    transition:background 0.2s ease-in;
}
.social-box {
    background:#FFF url('../img/social-shadow.png') no-repeat bottom left;
    width:30px;
    height:30px;
    z-index:11;
}
.twitter-btn {
    background:url('../img/social-icons.png') 0 0;
    width:30px;
    height:30px;
}
.facebook-btn {
    background:url('../img/social-icons.png') -30px 0;
    width:30px;
    height:30px;
}
.dribble-btn {
    background:url('../img/social-icons.png') -60px 0;
    width:30px;
    height:30px;
}
.pinterest-btn {
    background:url('../img/social-icons.png') -90px 0;
    width:30px;
    height:30px;
}
.google-btn {
    background:url('../img/social-icons.png') -120px 0;
    width:30px;
    height:30px;
}
.header-social ul li a:hover .twitter-btn {
    background:#FFF url('../img/social-icons.png') 0 -30px;
}
.header-social ul li a:hover .facebook-btn {
    background:#FFF url('../img/social-icons.png') -30px -30px;
}
.header-social ul li a:hover .dribble-btn {
    background:#FFF url('../img/social-icons.png') -60px -30px;
}
.header-social ul li a:hover .pinterest-btn {
    background:#FFF url('../img/social-icons.png') -90px -30px;
}
.header-social ul li a:hover .google-btn {
    background:#FFF url('../img/social-icons.png') -120px -30px;
}
.header-social ul li a:hover > div {
    webkit-transition:background 0.2s ease-in;
    moz-transition:background 0.2s ease-in;
    ms-transition:background 0.2s ease-in;
    o-transition:background 0.2s ease-in;
    transition:background 0.2s ease-in;
}
.header-portrait {
    height:auto;
    float:left;
    position:relative;
}
.photo-frame {
    padding:10%;
    background:#FFF;
    height:auto;
}
.photo-frame img {
    width:100%;
}
.photo-shadow {
    background:url('../img/shadow_2.png') no-repeat top left;
    position:absolute;
    left:-30px;
    top:0px;
    width:30px;
    height:323px;
}
.header-carusel {
    position:relative;
    width:60%;
    float:left;
    padding-left:55%;
}
.carusel-shadow {
    position:absolute;
    left:0px;
    bottom:-30px;
    height:30px;
    z-index:1;
    display:block;
}
#my-slider {
    margin-bottom:0px !important;
}
.header h1 {
    /* color:#FFF; */
    font-family:'Skranji', cursive;
    font-style:normal;
    font-weight:300;
    font-size:600%;
    position:absolute;
    right:30px;
    top:74px;
    margin:0;
    opactiy:0;
    animation-duration:3s;
    animation-name:slidein;
}
@-moz-keyframes slidein {
    0% {
    padding-right:300px;
    opactiy:0;
}
to {
    padding-right:0px;
    opactiy:1;
}
}
.carusel {
margin-top: 4px;
    height:auto;
    background:#17999e;
    padding:6.5%;
    position:relative;
    z-index:2;
}
.main-nav {
    webkit-transition:all 0.2s ease-in-out;
    moz-transition:all 0.2s ease-in-out;
    ms-transition:all 0.2s ease-in-out;
    o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}
.main-nav ul {
    margin:0;
    padding:0;
}
.main-nav li a {
    position:relative;
}
.main-nav a {
    display:block;
    margin-bottom:10px;
    padding:25px 0;
    text-align:center;
    text-decoration:none;
    color:#FFF;
    height:100px;
}
.main-nav a:hover, .main-nav a:visited {
    color:#FFF;
	background-color: #fb5c1f;
}
.main-nav a:hover {
    text-decoration:underline;
    webkit-transition:all 0.5s ease-in;
    moz-transition:all 0.5s ease-in;
    ms-transition:all 0.5s ease-in;
    o-transition:all 0.5s ease-in;
    transition:all 0.5s ease-in;
}
.about-text, .resume-text, .portfolio-text, .contact-text {
    font-family:'Skranji', cursive;
    font-style:normal;
    font-weight:300;
    font-size:24px;
    width:100%;
    position:absolute;
    top:36px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(Opacity=100);
    -khtml-opacity:1;
    -moz-opacity:1;
    opacity:1;
    webkit-transition:all 0.3s ease-in-out 0s;
    moz-transition:all 0.3s ease-in-out 0s;
    ms-transition:all 0.3s ease-in-out 0s;
    o-transition:all 0.3s ease-in-out 0s;
    transition:all 0.3s ease-in-out 0s;
}
.main-nav li a:hover .about-text, .main-nav li a:hover .resume-text, .main-nav li a:hover .portfolio-text, .main-nav li a:hover .contact-text {
    top:10px;
    left:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
    -khtml-opacity:0;
    -moz-opacity:0;
    opacity:0;
    webkit-transition:all 0.2s ease-out 0s;
    moz-transition:all 0.2s ease-out 0s;
    ms-transition:all 0.2s ease-out 0s;
    o-transition:all 0.2s ease-out 0s;
    transition:all 0.2s ease-out 0s;
    -webkit-transform:rotate(-40deg);
    -moz-transform:rotate(-40deg);
    -ms-transform:rotate(-40deg);
    transform:rotate(-40deg);
}
.nav-icon {
    left:37%;
    position:absolute;
    top:80px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
    -khtml-opacity:0;
    -moz-opacity:0;
    opacity:0;
    webkit-transition:all 0.3s ease-in-out 0s;
    moz-transition:all all 0.3s ease-in-out 0s;
    ms-transition:all 0.3s ease-in-out 0s;
    o-transition:all 0.3s ease-in-out 0s;
    transition:all 0.3s ease-in-out 0s;
    -webkit-transform:rotate(120deg);
    -moz-transform:rotate(120deg);
    -ms-transform:rotate(120deg);
    transform:rotate(120deg);
}
.main-nav li a:hover .nav-icon {
    text-decoration:none;
    top:30px;
    font-size:46px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(Opacity=100);
    -khtml-opacity:1;
    -moz-opacity:1;
    opacity:1;
    webkit-transition:all 0.3s ease-in-out 0s;
    moz-transition:all all 0.3s ease-in-out 0s;
    ms-transition:all 0.3s ease-in-out 0s;
    o-transition:all 0.3s ease-in-out 0s;
    transition:all 0.3s ease-in-out 0s;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
}
.main-nav .active-icon a {
    background:#7e917e !important;
}

/* === About Section === */

#about {
    background:#71726c url('../img/pattern-about.gif') repeat;
    clear:both;
    width:100%;
    overflow:hidden;
    position:relative;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    -o-transform:translate3d(0, 0, 0)}
.clouds_one {
    z-index:-1;
    background:url("../img/about-cloud-1.png") repeat-x;
    position:absolute;
    right:0;
    top:100px;
    height:499px;
    width:1477px;
    -webkit-animation:cloud_one 50s linear infinite;
    -moz-animation:cloud_one 50s linear infinite;
    -o-animation:cloud_one 50s linear infinite;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    -o-transform:translate3d(0, 0, 0)}
.clouds_two {
    z-index:-1;
    background:url("../img/about-cloud-2.png") repeat-x;
    position:absolute;
    right:0;
    top:206px;
    height:499px;
    width:1477px;
    -webkit-animation:cloud_two 100s linear infinite;
    -moz-animation:cloud_two 100s linear infinite;
    -o-animation:cloud_two 100s linear infinite;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    -o-transform:translate3d(0, 0, 0)}
 @-webkit-keyframes cloud_one {
    0% {
    right:0}
 100% {
    right:100%}
}
 @-webkit-keyframes cloud_two {
    0% {
    right:0}
 100% {
    right:100%}
}
 @-moz-keyframes cloud_one {
    0% {
    right:0}
 100% {
    right:100%}
}
 @-moz-keyframes cloud_two {
    0% {
    right:0}
 100% {
    right:100%}
}
.about h1 {
    font-family: 'Skranji', cursive;
    font-weight: 300;
    color: #fb5c1f;
}

.about-monster {
    background:url('../img/about_monster.png') no-repeat bottom left;
}

.about-mitze {
    background:url('../img/mitze.png') no-repeat bottom left;
}

.about {
    margin:0 auto;
    padding:0 60px;
    width:800px;
    color:#ced4b3;
}
.about a {
    color:#ced4b3;
    webkit-transition:all 0.2s linear;
    moz-transition:all 0.2s linear;
    ms-transition:all 0.2s linear;
    o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.about a:hover {
    color:#fff;
    webkit-transition:all 0.2s linear;
    moz-transition:all 0.2s linear;
    ms-transition:all 0.2s linear;
    o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.about-photo {
    float:left;
    background:#17999e;
    margin-bottom:40px;
    margin-right:5%;
    position:relative;
}
.about-photo img {
    width:100%;
}
.tape-left {
    background:url('../img/tape.png') no-repeat top left;
    width:89px;
    height:89px;
    position:absolute;
    top:-30px;
    left:-30px;
}
.tape-right {
    background:url('../img/tape.png') no-repeat bottom right;
    width:89px;
    height:89px;
    position:absolute;
    bottom:-30px;
    right:-30px;
}
.about-address {
    clear:right;
    float:right;
    width:30%;
    text-align:right;
}
.about-me-text {
    text-align:justify;
    line-height: 1.8;
    clear:both;
    padding:50px;
	margin-bottom:100px;
	background-color: #77800e;
}
.btn {
    background:#8a8e77;
    padding:5px 20px;
    color:#c4caa8;
}
.btn:hover {
    background:#adae82;
    color:#c4caa8;
}
.btn i {
    padding:0 0 0 20px;
}

/* === Resume Section === */

#resume {
    background:#adae82 url('../img/pattern-resume.gif') repeat;
    width:100%;
    overflow:hidden;
    position:relative;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    -o-transform:translate3d(0, 0, 0)}
.resume-monster {
    background:url('../img/resume_monster.png') no-repeat bottom left;
}
.stars_one {
    z-index:-1;
    background:url("../img/resume-star-1.png") repeat-x;
    position:absolute;
    left:0;
    top:100px;
    height:499px;
    width:1477px;
    -webkit-animation:stars_one 50s linear infinite;
    -moz-animation:stars_one 50s linear infinite;
    -o-animation:stars_one 50s linear infinite;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    -o-transform:translate3d(0, 0, 0)}
.stars_two {
    z-index:-1;
    background:url("../img/resume-star-2.png") repeat-x;
    position:absolute;
    left:0;
    top:0;
    height:499px;
    width:1477px;
    -webkit-animation:stars_two 100s linear infinite;
    -moz-animation:stars_two 100s linear infinite;
    -o-animation:stars_two 100s linear infinite;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    -o-transform:translate3d(0, 0, 0)}
 @-webkit-keyframes stars_one {
    0% {
    left:0}
 100% {
    left:100%}
}
 @-webkit-keyframes stars_two {
    0% {
    left:0}
 100% {
    left:100%}
}
 @-moz-keyframes stars_one {
    0% {
    left:0}
 100% {
    left:100%}
}
 @-moz-keyframes stars_two {
    0% {
    left:0}
 100% {
    left:100%}
}
.resume h1 {
    font-family:'Skranji', cursive;
    font-weight:300;
    color:#FFF;
    text-align:right;
}
.resume h2 {
    color:#FFF;
    font-family:'Skranji', cursive;
    font-style:normal;
    font-weight:300;
    margin-bottom:-10px !important;
    margin-top:0px !important;
}
.resume {
    margin:0 auto;
    padding:0 60px 100px 60px;
    width:800px;
    color:#717f7f;
}
.resume a {
    color: #005e97;
    webkit-transition:all 0.2s linear;
    moz-transition:all 0.2s linear;
    ms-transition:all 0.2s linear;
    o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.resume a:hover {
    color:red;
    webkit-transition:all 0.2s linear;
    moz-transition:all 0.2s linear;
    ms-transition:all 0.2s linear;
    o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.resume-column-left {
    background:url('../img/resume-column-shadow.png') no-repeat bottom left;
    padding-bottom:30px;
    float:left;
    width:35%;
    margin-right:5%;
}
.resume-column-right {
    width:60%;
    float:left;
}
.column-left, .column-right {
    padding:30px;
    background:#FFF;
}
.resume-article {
    background:url('../img/resume-box-shadow.png') no-repeat bottom left;
    padding-bottom:30px;
    float:left;
}
.resume h3 {
    font-family:'Skranji', cursive;
    font-size:24px;
    font-weight:300;
}
.resume h3 span {
    background:#a3cdcc;
    padding:10px;
    color:#FFF;
    font-size:14px;
    padding:5px 20px;
    margin:3px 20px 0 0;
    float:left;
}
.resume p {
    font-size:16px;
    margin:20px 0;
}
.skill span {
    height:15px;
    margin:4px 0 0 0;
    width:95px;
}
.skills ul {
    font-size:16px;
    padding:0px;
}
.skill {
    margin-bottom:5px;
    font-size:16px;
    padding:2px 0;
}
.skill:last-child {
    padding-bottom:0px;
}
.skill-square-0 {
    background:url("../img/skills-sprite.png") repeat 0 0;
}
.skill-square-1 {
    background:url("../img/skills-sprite.png") repeat 0 -15px;
}
.skill-square-2 {
    background:url("../img/skills-sprite.png") repeat 0 -30px;
}
.skill-square-3 {
    background:url("../img/skills-sprite.png") repeat 0 -45px;
}
.skill-square-4 {
    background:url("../img/skills-sprite.png") repeat 0 -60px;
}
.skill-square-5 {
    background:url("../img/skills-sprite.png") repeat 0 -75px;
}
.skill-round-0 {
    background:url("../img/skills-sprite.png") repeat 95px 0;
}
.skill-round-1 {
    background:url("../img/skills-sprite.png") repeat 95px -15px;
}
.skill-round-2 {
    background:url("../img/skills-sprite.png") repeat 95px -30px;
}
.skill-round-3 {
    background:url("../img/skills-sprite.png") repeat 95px -45px;
}
.skill-round-4 {
    background:url("../img/skills-sprite.png") repeat 95px -60px;
}
.skill-round-5 {
    background:url("../img/skills-sprite.png") repeat 95px -75px;
}
.skill-star-0 {
    background:url("../img/skills-sprite.png") repeat 190px 0;
}
.skill-star-1 {
    background:url("../img/skills-sprite.png") repeat 190px -15px;
}
.skill-star-2 {
    background:url("../img/skills-sprite.png") repeat 190px -30px;
}
.skill-star-3 {
    background:url("../img/skills-sprite.png") repeat 190px -45px;
}
.skill-star-4 {
    background:url("../img/skills-sprite.png") repeat 190px -60px;
}
.skill-star-5 {
    background:url("../img/skills-sprite.png") repeat 190px -75px;
}

/* === Portfolio Section === */

.portfolio-content {
    text-align:center;
}
#portfolio {
    background:#FFF url('../img/pattern-portfolio.gif') repeat;
    width:100%;
    overflow:hidden;
    position:relative;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    -o-transform:translate3d(0, 0, 0)}
.portfolio h1 {
    font-family:'Skranji', cursive;
    font-weight:300;
    color:#708b8a;
}
.portfolio {
    padding:0 60px 100px 60px;
    margin:0 auto;
    width:800px;
    color:#717f7f;
}
.portfolio a {
    color:#717f7f;
    webkit-transition:all 0.2s linear;
    moz-transition:all 0.2s linear;
    ms-transition:all 0.2s linear;
    o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.portfolio a:hover {
    color:red;
    webkit-transition:all 0.2s linear;
    moz-transition:all 0.2s linear;
    ms-transition:all 0.2s linear;
    o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
#portfolio-nav {
    display:table;
    table-layout:fixed;
    text-align:center;
    margin-bottom:26px;
}
#portfolio-nav li {
    display:table-cell;
    width:auto;
    padding-right:3px;
    height:auto;
    vertical-align:bottom;
}
.portfolio-categ {
    margin-bottom:30px;
    margin:0;
    padding:0;
    width:100%;
}
.portfolio-categ li a {
    color:#FFF;
    background:#7E917E;
    display:block;
    min-height:100%;
    padding:10px;
}
.portfolio-categ li a:hover {
    color:#FFF;
    background:#9bc3c2;
}
.portfolio-categ li:hover {
    cursor:pointer;
}
.portfolio-categ .active {
    color:#FFF;
    background:#ADAE82 !important;
}
.portfolio-categ .active a {
    color:#FFF;
    background:#ADAE82 !important;
}
.portfolio-categ li:last-child {
    padding-right:0 !important;
}
.portfolio-gallery {
    margin-bottom:100px;
    padding-top:20px;
    text-align:center;
    width:100%;
}
.portfolio-gallery li {
    overflow:hidden;
    position:relative;
    margin:6px;
    display:inline-block;
    margin-bottom:10px;
    border:30px solid #A3CDCC;
}
.portfolio-gallery li a {
    color:#FFF;
    line-height:1.9;
    display:block;
    left:0;
    position:absolute;
    text-align:center;
    top:36%;
    width:190px;
    webkit-transition:all 0.35s linear;
    moz-transition:all 0.35s linear;
    o-transition:all 0.35s linear;
    transition:all 0.35s linear;
}
.portfolio-gallery li a:hover {
    color:#FFF;
}
.portfolio-gallery img {
    width:190px;
    text-align:center;
}
.portfolio .sign {
    font-size:36px;
    webkit-transition:all 0.3s ease-in-out 0s;
    moz-transition:all all 0.3s ease-in-out 0s;
    ms-transition:all 0.3s ease-in-out 0s;
    o-transition:all 0.3s ease-in-out 0s;
    transition:all 0.3s ease-in-out 0s;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
}
.portfolio .sign:hover {
    webkit-transition:all 0.3s ease-in-out 0s;
    moz-transition:all all 0.3s ease-in-out 0s;
    ms-transition:all 0.3s ease-in-out 0s;
    o-transition:all 0.3s ease-in-out 0s;
    transition:all 0.3s ease-in-out 0s;
    -webkit-transform:rotate(1800deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
}
.itemZoom {
    opactiy:0;
    opacity:0;
    filter:alpha(opacity = 0);
}
.item {
    background:#A3CDCC;
    width:190px;
    height:190px;
}
.pencil_one {
    z-index:-1;
    background:url("../img/portfolio-pencil-1.png") repeat-x;
    position:absolute;
    right:0;
    top:100px;
    height:499px;
    width:1477px;
    -webkit-animation:pencil_one 50s linear infinite;
    -moz-animation:pencil_one 50s linear infinite;
    -o-animation:pencil_one 50s linear infinite;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    -o-transform:translate3d(0, 0, 0)}
.pencil_two {
    z-index:-1;
    background:url("../img/portfolio-pencil-2.png") repeat-x;
    position:absolute;
    right:0;
    top:506px;
    height:499px;
    width:1477px;
    -webkit-animation:pencil_two 100s linear infinite;
    -moz-animation:pencil_two 100s linear infinite;
    -o-animation:pencil_two 100s linear infinite;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    -o-transform:translate3d(0, 0, 0)}
 @-webkit-keyframes pencil_one {
    0% {
    right:0}
 100% {
    right:100%}
}
 @-webkit-keyframes pencil_two {
    0% {
    right:0}
 100% {
    right:100%}
}
 @-moz-keyframes pencil_one {
    0% {
    right:0}
 100% {
    right:100%}
}
 @-moz-keyframes pencil_two {
    0% {
    right:0}
 100% {
    right:100%}
}

/* === Contact Section === */

#contact {
    background:#262626 url('../img/pattern-contact.gif') repeat;
    width:100%;
    overflow:hidden;
    position:relative;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    -o-transform:translate3d(0, 0, 0)}
.contact-monster {
    padding-bottom:100px;
}
.contact h1 {
    font-family:'Skranji', cursive;
    font-weight:300;
    color:#FFF;
    text-align:right;
}
.contact {
    margin:0 auto;
    width:800px;
    color:#FFF;
    padding:0 60px 100px 60px;
}
.contact a {
    color:#FFF;
    webkit-transition:all 0.2s linear;
    moz-transition:all 0.2s linear;
    ms-transition:all 0.2s linear;
    o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.contact a:hover {
    color:#adae82;
    webkit-transition:all 0.2s linear;
    moz-transition:all 0.2s linear;
    ms-transition:all 0.2s linear;
    o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.contact-left {
    float:left;
}
.contact h2 {
    font-family:'Skranji', cursive;
    font-weight:300;
    font-size:24px;
    margin-top:0px;
}
.contact-right {
    float:right;
    background:#e7640e;
    padding-bottom:30px;
}
#my-map {
    height:350px;
    width:490px;
}
.map-address {
    line-height:2.0;
    cursor:pointer;
    color:#FFF;
    webkit-transition:all 0.2s linear;
    moz-transition:all 0.2s linear;
    ms-transition:all 0.2s linear;
    o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.map-address:hover {
    color:#adae82;
    webkit-transition:all 0.2s linear;
    moz-transition:all 0.2s linear;
    ms-transition:all 0.2s linear;
    o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.blocks p {
    margin-bottom:15px;
    position:relative;
}
.form-button {
    display:block;
    height:47px;
    line-height:31px;
    padding:0 20px;
    outline:none;
    text-transform:uppercase;
    background:#adae82;
    border:none;
    color:#FFF;
    font-size:16px;
    font-family:'Open Sans', sans-serif;
    font-style:normal;
    font-weight:300;
    float:right;
    webkit-transition:all 0.2s linear;
    moz-transition:all 0.2s linear;
    ms-transition:all 0.2s linear;
    o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.form-button:hover {
    background:#8a8e77;
    color:#c4caa8;
    webkit-transition:all 0.2s linear;
    moz-transition:all 0.2s linear;
    ms-transition:all 0.2s linear;
    o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.form-input, .form-textarea {
    padding:5px 10px;
    height:27px;
    color:#fff;
    background:#b09308;
    z-index:2;
    margin:0 10px 10px 0;
    border:none;
}
.form-input {
    width:200px;
}
.form-textarea {
    height:150px;
    width:200px;
}
.blocks label {
    width:100px;
    line-height:37px;
    text-align:right;
    margin-right:15px;
    font-weight:bold;
    color:#666;
}
.blocks label.error, .blocks label.ok {
    padding:0 10px;
    text-align:left;
    width:auto;
    white-space:nowrap;
    z-index:1;
    margin-bottom:10px;
    font-style:normal;
    font-weight:300;
    position:absolute;
    top:0;
    left:220px;
}
.blocks label.ok {
    color:#FFF;
    font-size:20px;
    background:#94ae82;
}
.blocks label.error {
    color:#fbd4c7;
    background:#bc8172;
}

/* === Footer Section === */

.footer {
    clear:both;
}
.footer-social {
    height:30px;
    margin-left:30px;
    z-index:1;
}
.footer-social ul {
    margin:0;
    padding:0;
    list-style:none;
}
.footer-social ul li {
    float:right;
}
.footer-social ul li a > div {
    webkit-transition:background 0.2s ease-in;
    moz-transition:background 0.2s ease-in;
    ms-transition:background 0.2s ease-in;
    o-transition:background 0.2s ease-in;
    transition:background 0.2s ease-in;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.3)";
    filter:alpha(opacity=0.3);
    -khtml-opacity:0.3;
    -moz-opacity:0.3;
    opacity:0.3;
}
.footer-social ul li a:hover .twitter-btn {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(Opacity=100);
    -khtml-opacity:1;
    -moz-opacity:1;
    opacity:1;
    background:url('../img/social-icons.png') 0 -30px;
}
.footer-social ul li a:hover .facebook-btn {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(Opacity=100);
    -khtml-opacity:1;
    -moz-opacity:1;
    opacity:1;
    background:url('../img/social-icons.png') -30px -30px;
}
.footer-social ul li a:hover .dribble-btn {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(Opacity=100);
    -khtml-opacity:1;
    -moz-opacity:1;
    opacity:1;
    background:url('../img/social-icons.png') -60px -30px;
}
.footer-social ul li a:hover .pinterest-btn {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(Opacity=100);
    -khtml-opacity:1;
    -moz-opacity:1;
    opacity:1;
    background:url('../img/social-icons.png') -90px -30px;
}
.footer-social ul li a:hover .google-btn {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(Opacity=100);
    -khtml-opacity:1;
    -moz-opacity:1;
    opacity:1;
    background:url('../img/social-icons.png') -120px -30px;
}
.footer-social ul li {
    width:30px;
    height:30px;
    z-index:11;
}
.footer-copyright {
    color:#5d5d5d;
    float:left;
}
.footer-container {
    webkit-transition:all 0.5s ease-in;
    moz-transition:all 0.5s ease-in;
    ms-transition:all 0.5s ease-in;
    o-transition:all 0.5s ease-in;
    transition:all 0.5s ease-in;
}
.footer-container footer {
    color:white;
    padding:20px 0;
}
.ie7 .title {
    padding-top:20px;
}
.envelope_one {
    z-index:-1;
    background:url("../img/contact-envelope-1.png") repeat-x;
    position:absolute;
    left:0;
    top:100px;
    height:499px;
    width:1477px;
    -webkit-animation:envelope_one 50s linear infinite;
    -moz-animation:envelope_one 50s linear infinite;
    -o-animation:envelope_one 50s linear infinite;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    -o-transform:translate3d(0, 0, 0)}
.envelope_two {
    z-index:-1;
    background:url("../img/contact-envelope-2.png") repeat-x;
    position:absolute;
    left:0;
    top:0;
    height:499px;
    width:1477px;
    -webkit-animation:envelope_two 100s linear infinite;
    -moz-animation:envelope_two 100s linear infinite;
    -o-animation:envelope_two 100s linear infinite;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    -o-transform:translate3d(0, 0, 0)}
 @-webkit-keyframes envelope_one {
    0% {
    left:0;
}
 100% {
    left:100%}
}
 @-webkit-keyframes envelope_two {
    0% {
    left:0}
 100% {
    left:100%}
}
 @-moz-keyframes envelope_one {
    0% {
    left:0}
 100% {
    left:100%}
}
 @-moz-keyframes envelope_two {
    0% {
    left:0}
 100% {
    left:100%}
}

/* === Styles for devices from 0 to 300px of width === */

@media only screen and (min-width:0px) {
    .about-text, .resume-text, .portfolio-text, .contact-text {
    font-size:14px;
}

#header-container {
    background:url('../img/header_monster_sml.jpg') no-repeat bottom center;
}

.main-nav li a:hover .nav-icon {
    font-size:18px;
}
.contact aside, .contact-left {
    width:100%;
    margin-right:0px;
}
/** #my-map iframe, #my-map object, #my-map embed { **/
#my-map , #my-map object, #my-map embed {
    width:100%;
}
#my-map {
    width:100%;
    position:relative;
    margin:0;
    padding:0;
}
.contact-right {
    width:100%;
    padding:0;
    float:none;
}
.footer {
    padding-top:10px;
    font-size:12px;
}
.footer-copyright {
    padding-top:5px;
}
.map-address {
    padding:2%;
    text-align:center;
}
.map-address:hover {
    background:#3c3c3c;
}
.form-input, .form-textarea {
    padding:1%;
    width:99%;
}
.blocks label.error, .blocks label.ok {
    position:static;
    padding:2%;
}
h1, .resume h1, .contact h1 {
    margin:0.4em 0;
    text-align:center;
    font-size:3.2em;
}
.portfolio h1, .about h1 {
    font-size:3.2em;
}
.portfolio-gallery {
    margin-bottom:0px;
}
.main-nav a {
    float:left;
    margin-bottom:0;
    padding:0;
    width:25%;
}
.header h1 {
    top:25px;
    font-size:250%;
}
.wrapper {
    width:90%;
    padding:0 5%;
    margin:0 auto;
}
.header-portrait {
    width:100%;
    webkit-transition:all 0.2s ease-in-out;
    moz-transition:all 0.2s ease-in-out;
    ms-transition:all 0.2s ease-in-out;
    o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}
.header-carusel {
    display:none;
}
.carusel-shadow {
    background:url('../img/shadow_3.png') no-repeat bottom left;
    width:230px;
}
.about, .resume, .portfolio, .contact {
    padding:0 5%;
    width:90%;
}
.main-nav li:first-child a {
    margin-left:0;
}
.main-nav li:last-child a {
    margin-right:0;
}
.main-nav ul li {
    display:inline;
}
.oldie .main-nav a {
    margin:0 0.7%;
}
.about {
    text-align:center;
}
.about-me-text {
    clear:none;
    text-align:center;
    padding-top:10px;
    background:none;
    margin-bottom:0;
}
.about-address {
    float:left;
    width:100%;
    padding-bottom:0px;
    text-align:center;
}
.about-photo {
    height:auto;
    padding:5%;
    width:90%;
}
#header-container {
    padding-bottom:30px;
}
.resume h3 {
    font-size:18px;
}
.resume-column-left,.resume-column-right {
    width:100%;
}
.skill span {
    float:none;
    display:block;
}
.resume h3 span {
    padding:2% 5%;
    width:90%;
    margin-bottom:10px;
}
.resume p {
    font-size:14px;
}
#portfolio-nav li {
    display:table-row;
}
.footer-copyright {
    float:none;
    text-align:center;
}
.stars_one,.clouds_one,.stars_two,.clouds_two,.envelope_one,.envelope_two,.pencil_one,.pencil_two {
    display:none;
}
.contact-monster,.resume-monster {
    padding-bottom:0px;
    background:none;
}
}

/* === Styles for devices from 300px to 480px of width === */

@media only screen and (min-width:300px) {
	
	#header-container {
	    background:url('../img/header_monster_sml.jpg') no-repeat bottom center;
	}
	
	.header h1
	{
	 top: 75px;
	}

	.skill span {
	    float:right;
	}
	.resume h3 span {
	    padding:2% 5%;
	    width:90%;
	    margin-bottom:10px;
	}
	#portfolio-nav li {
	    display:table-row;
	}
}

/* === Styles for devices from 480px to 700px of width === */

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

#header-container {
    background:url('../img/header_monster_sml3.jpg') no-repeat bottom center;
}

.header-social ul li {
    float:right;
}

.photo-shadow {
display:none;	
}


.about-text, .resume-text, .portfolio-text, .contact-text {
	font-size:24px;
}

.about-text {
	color: #ef8156;
}
.resume-text {
	color: #84f3ff;
}
.portfolio-text {
	color: #ff81d8;
}
.contact-text {
	color: #e3cf3d;
}

.main-nav li a:hover .nav-icon {
    font-size:46px;
}
.main-nav {
    width:100%;
    height:100px;
}
h1 {
    margin:1.2em 0;
    text-align:left;
}
.resume h1, .contact h1 {
    margin:1.2em 0;
    text-align:right;
    font-size:4.1em;
}
.portfolio h1, .about h1 {
    font-size:4.1em;
}
.header-portrait {
    width:35%;
}
.header-carusel {
    display:block;
}
.header h1 {
    top:25px;
    font-size:300%;
    webkit-transition:all 0.2s ease-in-out;
    moz-transition:all 0.2s ease-in-out;
    ms-transition:all 0.2s ease-in-out;
    o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}
.skill span {
    float:none;
    display:block;
}
.resume-column-left {
    width:35%;
}
.resume-column-right {
    width:60%;
}
.about {
    text-align:left;
}
.footer-copyright {
    text-align:left;
    float:left;
}
}

/* === Styles for devices from 700px to 900px of width === */

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

#header-container {
    background:url('../img/header_monster_sml2.jpg') no-repeat bottom center;
}

.header-social ul li {
    float:left;
}

.photo-shadow {
display:block;
}

    .header h1 {
    font-size:400%;
    top:74px;
}
.about-me-text {
    text-align:left;
    background:none;
    margin-bottom:100px;
}
.about-address {
    text-align:left;
    width:240px;
    padding-bottom:100px;
}
.resume h3 {
    font-size:24px;
}
.resume h3 span {
    padding:5px 20px;
    width:auto;
}
.resume p {
    font-size:16px;
}
#portfolio-nav li {
    display:table-cell;
}
}

/* === Styles for devices of width above 900px === */

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

#header-container {
    background:url('../img/header_monster.jpg') no-repeat bottom center;
}

.wrapper {
    width:800px;
    padding:0 30px;
    margin:0 auto;
}
.about-photo {
    height:auto;
    padding:4%;
    width:56%;
}
.about-me-text {
    text-align:justify;
	clear:both;
	color: #fff;
	background-color: #fb5c1f;
}
.about-address {
    padding-bottom:0px;
}
.carusel-shadow {
    background:url('../img/shadow_1.png') no-repeat bottom left;
    width:480px;
}
.skill span {
    float:right;
}
.portfolio-gallery {
    margin-bottom:100px;
}
.contact-monster {
    padding-bottom:100px;
}
.resume-monster {
    background:url('../img/resume_monster.png') no-repeat bottom left;
}
.contact-left {
    width:220px;
    margin-right:30px;
    float:left;
}
.contact-right {
    width:490px;
    padding:30px;
    float:right;
}
#my-map {
    height:350px;
    width:490px;
}
.footer {
    padding-top:40px;
    font-size:16px;
}
.footer-copyright {
    padding-top:0px;
}
.map-address {
    padding:0;
    text-align:left;
}
.map-address:hover {
    background:#555;
}
.form-input, .form-textarea {
    padding:5px 10px;
    margin:0 10px 10px 0;
}
.form-input {
    width:200px;
}
.form-textarea {
    height:150px;
    width:200px;
}
.blocks label.error, .blocks label.ok {
    position:absolute;
    padding:0 10px;
}
.stars_one,.clouds_one,.stars_two,.clouds_two,.envelope_one,.envelope_two,.pencil_one,.pencil_two {
    display:block;
}
}
.ir {
    background-color:transparent;
    border:0;
    overflow:hidden;
    text-indent:-9999px;
}
.ir:before {
    content:"";
    display:block;
    width:0;
    height:150%;
}
.hidden {
    display:none !important;
    visibility:hidden;
}
.visuallyhidden {
    border:0;
    clip:rect(0 0 0 0);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip:auto;
    height:auto;
    margin:0;
    overflow:visible;
    position:static;
    width:auto;
}
.invisible {
    visibility:hidden;
}
.clearfix:before, .clearfix:after {
    content:" ";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    zoom:1;
}

/* === Styles for print === */

@media print {
    * {
    background:transparent !important;
    color:#000 !important;
    box-shadow:none !important;
    text-shadow:none !important;
}
a, a:visited {
    text-decoration:underline;
}
a[href]:after {
    content:" (" attr(href) ")";
}
abbr[title]:after {
    content:" (" attr(title) ")";
}
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
    content:"";
}
pre, blockquote {
    border:1px solid #999;
    page-break-inside:avoid;
}
thead {
    display:table-header-group;
}
tr, img {
    page-break-inside:avoid;
}
img {
    max-width:100% !important;
}

@page {
    margin:0.5cm;
}
p, h2, h3 {
    orphans:3;
    widows:3;
}
h2, h3 {
    page-break-after:avoid;
}