/*-------------------------------------------------------*/
/* Base styles	 */
/*-------------------------------------------------------*/
html {
    overflow-y:scroll;
}
body {
    background-image:url(../images/bg3.png);
    background-color: #E8E8E8;
    margin: 0px;
    padding: 0px;
    font-family:'Open Sans', Arial;
    font-size: 12px;
}
/*-------------------------------------------------------*/
/* Wrap */
/*-------------------------------------------------------*/
#container {
    margin:0 auto;
    width:860px;
    margin-bottom: 20px;
    margin-top: 30px;
}
#content {
    background-color:#FFF;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
/*-------------------------------------------------------*/
/* Generic Classes */
/*-------------------------------------------------------*/
.hidden {
    display: none;
}
.clear {
    clear:both;
}
/*-------------------------------------------------------*/
/* Typography */
/*-------------------------------------------------------*/
h1 {font-size: 37px;}
h2 {font-size: 30px;}
h3 {font-size: 20px;}
h4 {font-size: 15px;}
h5 {font-size: 13px;}
h6 {font-size: 12px;}

h3.main-heading {
    background-image:url('../images/plus.png');
    background-repeat: no-repeat;
    background-position:left 2px;
    margin:15px 2px;
}
h3.main-heading span {
    border-bottom:1px solid #999;
    padding-bottom:7px;
    color:#333;
    line-height:16px;
    margin-left:28px;
    display:block;
}
strong {
    font-weight: bold;
    color: #333;
}
/*-------------------------------------------------------*/
/* Top Section */
/*-------------------------------------------------------*/
div.top {
    height:60px;
    margin-bottom:20px;
    overflow:hidden;
}
/* Logo */
#logo {
    float:left;
    overflow:hidden;
    margin-left:10px;
    display:none;
}
#logo h2 {
    font-size:30px;
    font-weight:900;
    color: #444;
    line-height:40px;
}
#logo h4 {
    color:#666;
    line-height:20px;
}
/* Social icons */
.socialicons {
    float:right;
    margin-top:18px;
}
.socialicons li {
    float:left;
    display:inline;
    margin:0;
    padding:0;
    margin-right:2px;
}
.social-icons li:last-child {
    margin-right:0
}
.social-text {
    float:left;
    padding:9px;
    height:12px;
    background-color:#222;
    color:#FFF;
}
.social-facebook {
    float:left;
    width:30px;
    height:30px;
    background:#3b5998 url('../images/social_facebook.png') no-repeat 5px 5px;
}
.social-twitter {
    float:left;
    width:30px;
    height:30px;
    background:#22b1e5 url('../images/social_twitter.png') no-repeat 5px 5px;
}
.social-googleplus {
    float:left;
    width:30px;
    height:30px;
    background:#222 url('../images/social_googleplus.png') no-repeat 4px 3px;
}
.social-in {
    float:left;
    width:30px;
    height:30px;
    background:#0075a1 url('../images/social_in.png') no-repeat 4px 3px;
}
.social-tumblr {
    float:left;
    width:30px;
    height:30px;
    background:#3a546d url('../images/social_tumblr.png') no-repeat 4px 3px;
}
.social-pinterest {
    float:left;
    width:30px;
    height:30px;
    background:#ca2128 url('../images/social_pinterest.png') no-repeat 4px 3px;
}
.social-facebook:hover {
    background-color:#222;
}
.social-twitter:hover {
    background-color:#222;
}
.social-googleplus:hover {
    background-color:#d94a38;
}
.social-in:hover {
    background-color:#222;
}
.social-mail:hover {
    background-color:#f6c500;
}
.social-tumblr:hover {
    background-color:#222;
}
.social-pinterest:hover {
    background-color:#222;
}

/*-------------------------------------------------------*/
/* Profile Section */
/*-------------------------------------------------------*/
#profile {
    background-image:url(../images/header-shadow.png), url(../images/header-bg.png);
    background:url(../images/header-bg.png) repeat-x\0/; /* For ie8 */
    background-position:center bottom, left top;
    background-repeat:repeat-x;
    overflow:hidden;
    background-color:#00adee;		
}
/* About */
.about {
    float:left;
    margin-top:30px;
    /*width:490px;*/
    width:800px;
    min-height:230px;
    margin-left:20px;
}
.about .photo-inner {
    float:left;
    background:url(../images/photo-inner.png) no-repeat;
    width:192px;
    height:212px;
    padding:12px 0 0 20px;
}
.about .photo-inner img {
    background-color:#FFF;
}

.about h1 {
    color: #fff;
    font-size: 32px;
    font-weight: 300;
    line-height: normal;
    margin-bottom: 20px;
}
.about h3 {
    margin-top:5px;
    font-size:18px;
    color:#FFF;
    line-height:18px;
}
.about p {
    font-size:13px;
    margin-top:15px;
    color:#fff;
    line-height:20px;
}
.about em {
    font-style: italic;
}

/* Personal info */
.personal-info {
    float:left;
    margin-top:30px;
    width:310px;
    min-height:230px;
    margin-left:10px;
    background:url(../images/personal-info-sep.png) no-repeat left top;
    padding:20px 0 0 20px;
}
.personal-info li {
    font-size:14px;
    margin-bottom:10px;
    overflow: hidden;
}
.personal-info li label {
    color:#a87f09;
    background-color:#f4c024;
    float:left;
    padding:4px 7px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.personal-info li span {
    float:right;
    width:210px;
    color:#a87f09;
}
/*-------------------------------------------------------*/
/* Menu */
/*-------------------------------------------------------*/
.menu {
    height:100px;
    background-color:#fff;
    position:relative;
}
.tabs {
    height:116px;
    position: absolute;
    margin-top:-14px;
    padding-left:130px;
    z-index:100;
}
.tabs li {
    float:left;
    height:116px;
}
.tabs li > a {
    padding-top:80px;
    width:115px;
    height:35px;
    display:block;
    background-repeat:no-repeat;
    font-size:16px;
    color:#b9b9b9;
    text-align:center;
}
.tabs li.active {
    background:url('../images/tab-hover.png') no-repeat;
}
.tabs li.active a {
    color:#00adee;
}
.tabs li .tab-profile {
    background-image:url(../images/profile-icon.png);
    background-position:center 40px;
}
.tabs li .tab-photography {
    background-image:url(../images/photography-icon.png);
    background-position:center 35px;
}
.tabs li .tab-contact {
    background-image:url(../images/contact-icon.png);
    background-position:center 41px;
}
/* Active icons */
.tabs .active .tab-profile {
    background-image:url(../images/profile-icon-active.png);
}
.tabs .active .tab-photography {
    background-image:url(../images/photography-icon-active.png);
}
.tabs .active .tab-contact {
    background-image:url(../images/contact-icon-active.png);
}
/*-------------------------------------------------------*/
/* Resume Section */
/*-------------------------------------------------------*/
#resume {
    padding:20px;
    overflow:hidden;
}
.skills-section, .timeline-section {
    float:left;
}
/* Timeline Section */
.timeline-section {
    width:460px;
    padding-right:60px;
}
.timeline {
    padding-top:10px;
}
.timeline li {
    margin-bottom:20px;
}
.timeline li .timelineUnit {
    line-height:17px;
    margin-left:11px;
    color: #444;
    font-size:13px;
    border-left:1px solid #fadc66;
    padding-left:15px;
}
.timeline li .timelineUnit .timelineDate {
    line-height:17px;
    color: #f4c024;
    font-size:14px;
    margin-left:10px;
    font-weight: normal;
    padding:2px 6px;
    float:right;
}
.timeline li .timelineUnit h4 {
    line-height:24px;
    font-size:15px;
    color: #444;
}
.timeline li .timelineUnit h5 {
    line-height:18px;
    font-size:13px;
    color: #999;
}
.timeline li .timelineUnit p {
    color: #666;
    font-size:12px;
    margin-top:5px;
}
/* Skills Section */
.skills-section {
    width:300px;
}
.skills {
    margin-top:25px;
    overflow:hidden;
    height:100%;
}
.skills li {
    margin-bottom:15px;
    float:left;
    padding-left:30px;
}
.skills li h4 {
    width:140px;
    float:left;
    font-size:15px;
    color: #444;
}
.skills li .rat0, .skills li .rat1, .skills li .rat2, .skills li .rat3, .skills li .rat4, .skills li .rat5, .skills li .rat6, .skills li .rat7 {
    width:123px;
    height:14px;
    float:left;
}
.skills li .rat0 {
    background:url(../images/rats.png) no-repeat;
}
.skills li .rat1 {
    background:url(../images/rats.png) no-repeat 0px -14px;
}
.skills li .rat2 {
    background:url(../images/rats.png) no-repeat 0px -28px;
}
.skills li .rat3 {
    background:url(../images/rats.png) no-repeat 0px -42px;
}
.skills li .rat4 {
    background:url(../images/rats.png) no-repeat 0px -56px;
}
.skills li .rat5 {
    background:url(../images/rats.png) no-repeat 0px -70px;
}
.skills li .rat6 {
    background:url(../images/rats.png) no-repeat 0px -84px;
}
.skills li .rat7 {
    background:url(../images/rats.png) no-repeat 0px -98px;
}
#resume .button {
    margin-top:20px;
    float: right;
}
/*-------------------------------------------------------*/
/* Portfolio Section */
/*-------------------------------------------------------*/
#photography {
    padding:0 20px 20px 20px;
    overflow:hidden;
}
#photography .extra-text {
    font-size:20px;
    padding:24px 0;
    border-bottom:1px solid #ededed;
    color: #999;
    margin-bottom:20px;
}
/* Filter menu */
#photography-filter {

    overflow:hidden;
    padding:15px 0;
}
#photography-filter li a {
    float:left;
    margin-right:10px;
    color:#fff;
    background-color: #666;
    padding:6px;
    margin-bottom:5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px
}
#photography-filter li a:hover {
    background-color: #00adee;
}
#photography-filter li a.current {
    background-color: #00adee;
}
/* Images list */
#photography-list {
    width:820px;
}
#photography-list li {
    float:left;
    margin-right:25px;
    text-align:center;
    background-color:#f8f8f8;
    border-bottom:1px solid #e5e5e5;
    height:120px;
    margin-bottom:30px;
    width:180px;
}
#photography-list li:hover {
    height:120px;
}
#photography-list img {
    background-color:#FFF;
    height:120px; 
    width:180px;
}
#photography-list li:hover .title {
    color:#00adee;
}
#photography-list li .title {
    font-size:14px;
    margin-top:15px;
    font-weight: 400;
    color: #3A3A3A;
}
#photography-list li .categorie {
    font-size:11px;
    line-height:25px;
    color:#999;
}
/* adipoli */
.adipoli-wrapper {
    margin:auto;
    position:relative;
    display: inline-block;
}
.adipoli-wrapper>img {
    position: absolute;
    z-index: 1;
}
.adipoli-before {
    position: absolute;
    z-index: 5;
}
.adipoli-after {
    position: absolute;
    z-index: 10;
}
.adipoli-slice {
    display:block;
    position:absolute;
    z-index:15;
    height:100%;
}
.adipoli-box {
    display:block;
    position:absolute;
    z-index:15;
}
/*-------------------------------------------------------*/
/* Contact Section */
/*-------------------------------------------------------*/
#contact {
    padding:30px 0;
    overflow:hidden;
}
.contact-info, .contact-form {
    float:left;
    padding:0 20px;
}
.contact-info {
    width:250px;
}
.contact-form {
    width:530px;
}
/* Contact info */
.contact-info ul {
    float:left;
    margin-left:11px;
    border-left:1px solid #fadc66;
    padding-left:18px;
}
.contact-info ul li {
    font-size:13px;
    line-height:20px;
    color: #666;
    overflow: hidden;
}
/* Contact Form */
#contactform {
    padding-left:30px;
}
#contactform p {
    margin-bottom:15px;
}
#contactform p label {
    display:block;
    color:#999;
    margin-bottom:8px;
    font-size:13px;
}
#contactform .input {
    line-height: 20px;
    height: 20px;
    width:60%;
}
#contactform .textarea {
    width:95%;
}
.button {
    color:#fff;
    background-color: #666;
    padding:8px;
    border:none;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    cursor:pointer;
    font-size:13px;
}
.button:hover {
    background-color: #00adee;
}
#contactform .input, .textarea {
    padding:6px;
    background-color:#f5f5f5;
    border: 1px solid #CCC;
    color:#999;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font-size: 13px;
}
.success, .error {
    padding:10px;
    margin-bottom:10px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.success {
    background-color: #E3EBC6;
    color: #8FA442;
    border: 1px solid #C2D288;
}
.error {
    background-color: #f9e5e6;
    color: #b3696c;
    border: 1px solid #f7c7c9;
}
/* Google map */
#map {
    height: 300px;
    margin-bottom:25px;
    width: 100%;
    border-bottom:1px solid #CCC;
    border-top:1px solid #CCC;
}
/*-------------------------------------------------------*/
/* Footer */
/*-------------------------------------------------------*/
div.footer {
    margin-top:20px;
    height:20px;
}
div.footer .copyright {
    float:left;
    color:#333;
    padding-left:6px;
}
/*-------------------------------------------------------*/
/* Isotope filtering */
/*-------------------------------------------------------*/
.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope, .isotope .isotope-item {/* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:-moz-transform, opacity;
    transition-property:transform, opacity;
}


/*-------------------------------------------------------*/
/* Media Queries */
/*-------------------------------------------------------*/

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #container {
        width:750px;
    }
    /*-------------------------------------------------------*/
    /* Profile Section */
    /*-------------------------------------------------------*/
    /* About */
    .about {
        width:410px;
    }
    .about h1 {
        line-height:38px;
        font-size:30px
    }
    .about h3 {
        font-size:14px;
        line-height:14px;
    }
    /* Personal info */
    .personal-info {
        width:280px;
        margin-right:10px;
    }
    .personal-info li span {
        width:190px;
    }
    /*-------------------------------------------------------*/
    /* Resume */
    /*-------------------------------------------------------*/
    .timeline-section {
        width:380px;
        padding-right:30px;
    }
    .skills-section {
        width:300px;
    }
    /*-------------------------------------------------------*/
    /* Portfolio */
    /*-------------------------------------------------------*/
    #photography-list {
        width:750px;
    }
    #photography-list li {

        margin-right:60px;
    }
    /*-------------------------------------------------------*/
    /* Contact */
    /*-------------------------------------------------------*/
    .contact-info {
        width:250px;
    }
    .contact-form {
        width:420px;
    }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #container {
        width:470px;
    }
    /*-------------------------------------------------------*/
    /* Top Section */
    /*-------------------------------------------------------*/	
    /* Logo */
    #logo h2 {
        font-size:25px;
        font-weight:900;
        color: #444;
        line-height:30px;
    }
    #logo h4 {
        color:#666;
        line-height:15px;
    }
    /* Social icons */
    .socialicons {
        margin-top:9px;
    }
    .social-text {
        display:none;
    }
    /*-------------------------------------------------------*/
    /* Profile Section */
    /*-------------------------------------------------------*/
    /* About */
    .about {
        width:420px;
        display:block;
    }
    .about h1 {
        line-height:38px;
        font-size:30px
    }
    .about h3 {
        font-size:14px;
        line-height:14px;
    }
    /* Personal info */
    .personal-info {
        margin-top:0;
        display:block;
        width:420px;
        background:none;
        border-top:1px solid #fdc62a;
    }
    .personal-info li span {
        width:280px;
    }
    /*-------------------------------------------------------*/
    /* Menu */
    /*-------------------------------------------------------*/
    .tabs {
        padding-left:5px;
    }
    .timeline-section {
        width:420px;
        padding-right:60px;
    }
    /*-------------------------------------------------------*/
    /* Resume */
    /*-------------------------------------------------------*/
    .skills-section {
        width:420px;
    }
    .skills li h4 {
        width:260px;
    }
    /*-------------------------------------------------------*/
    /* Portfolio */
    /*-------------------------------------------------------*/
    #photography-list {
        width:450px;
    }
    #photography-list li {
        margin-right:40px;
    }
    /*-------------------------------------------------------*/
    /* Contact */
    /*-------------------------------------------------------*/
    .contact-info {
        width:420px;
    }
    .contact-form {
        margin-top:20px;
        width:420px;
    }


}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

    #container {
        width:300px;
        margin-top:10px;
    }
    /*-------------------------------------------------------*/
    /* Top Section */
    /*-------------------------------------------------------*/
    /* Logo */
    #logo h2 {
        font-size:25px;
        font-weight:900;
        color: #444;
        line-height:30px;
    }
    #logo h4 {
        color:#666;
        line-height:15px;
    }
    .socialicons {
        display:none; !important
    }
    /*-------------------------------------------------------*/
    /* Profile Section */
    /*-------------------------------------------------------*/
    div.top {
        height:50px;
        margin-bottom:5px;
    }
    /* About */
    .about {
        width:280px;
        display:block;
        margin:10px 0 15px 10px;
    }
    .about .photo-inner {
        margin-left:40px;
        background:url(../images/photo-inner.png) no-repeat;
        width:192px;
        height:212px;
        padding:12px 0 0 20px;
    }
    .about h1 {
        line-height:38px;
        font-size:30px;
        text-align:center;
    }
    .about h3 {
        font-size:14px;
        line-height:14px;
        text-align:center;
    }
    .about p {
        text-align:center;
    }
    /* Personal info */
    .personal-info {
        margin-top:0;
        display:block;
        width:280px;
        background:none;
        border-top:1px solid #fdc62a;
        margin-left:10px;
        min-height:220px;
        padding-left:0;
    }
    .personal-info li {
        font-size:13px;
    }
    .personal-info li span {
        width:200px;
    }
    /*-------------------------------------------------------*/
    /* Menu */
    /*-------------------------------------------------------*/
    .tabs {
        padding-left:0px;
    }

    .tabs li > a {
        width:75px;
        font-size:14px;

    }
    .tabs li.active {
        background: none;
    }
    /*-------------------------------------------------------*/
    /* Resume */
    /*-------------------------------------------------------*/
    #resume {
        padding:10px;
    }
    .timeline-section {
        width:280px;
        padding-right:60px;
    }
    .skills-section {
        width:280px;
    }
    .skills li h4 {
        width:120px;
    }
    /*-------------------------------------------------------*/
    /* Portfolio */
    /*-------------------------------------------------------*/
    #photography-list {
        width:280px;
    }
    #photography-list li {
        margin-left:40px;
    }
    /*-------------------------------------------------------*/
    /* Contact */
    /*-------------------------------------------------------*/

    .contact-info {
        width:280px;
    }
    .contact-form {
        margin-top:20px;
        width:280px;
    }
    .contact-info, .contact-form {
        padding:0 10px;
    }


}