/*--------------------------------------------------------------------------
   

        Typebig Resume / CV

        0. YUI Library is used for CSS reset (http://yuilibrary.com/yui/docs/cssreset/)
        1. Body
        2. Typography
        3. Page Sections
                3.1. Topbar
                3.2. Intro
                3.3. Resume
                3.4. Works
                        3.4.1 jQuery Reveal Plugin
                3.5. Contact / References / Testimonials
                3.6. Footer


--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
        1. Body
--------------------------------------------------------------------------*/

body {
    color: #333;
    background: #fff;
    font: 14px/22px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
}




/*--------------------------------------------------------------------------
        2. Typography
--------------------------------------------------------------------------*/

/* Headings Default */
h1 { font-size: 17px; line-height: 20px; font-weight: bold; }
h2 { font-size: 18px; line-height: 27px; }
h3 { font-size: 14px; line-height: 22px; }
h4 { font-size: 13px; line-height: 23px; }
h6 { font-size: 12px; line-height: 14px; }

/* Links */
a, a:visited { color: #333; text-decoration: none; underline; outline: 0; }
a:hover, a:focus { color: #000; }
p a, p a:visited { line-height: inherit; }


/* Highlighted Text */
::selection { 
    background: #df4244; 
    color:#fff; 
    text-shadow: none; 
}

/* Firefox */
::-moz-selection { 
    background: #df4244; 
    color:#fff; 
    text-shadow: none; 
}

em, .italic { font-style: italic; }
strong { font-weight: bold; }
small { font-size: 80%; }

.font-color-primary {
    color: #44bbaa;
}

.font-color-gray {
    color: #656565;
}

.font-color-black {
    color: #000000;
}




/*--------------------------------------------------------------------------
        3. Page Sections
--------------------------------------------------------------------------*/

/* Common Elements */
img {
    max-width: 100%;
}

h3 {
    font: normal 300 12px/22px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px; 
}

h5 { 
    font: normal 11px/21px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 3px;
}




/*---------------------------------------------------
        3.1 Topbar

        * This is the fixed top navigation
---------------------------------------------------*/

/* Topbar (fixed) */
/* Please refer to responsive_custom.css for CSS in smaller viewport */
#section-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    overflow: visible;
    font: normal 16px/24px  'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#section-topbar a {
    color: #fff;
}

#topbar-inner {
    background: #111;
    line-height: 0;
    text-align: center;
}

/*
        Top Bar

        By default, top navigation bar uses "fixed" position
*/
#section-topbar ul#nav {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;

    border-right: 1px solid #222;

    /* For IE, the outcast */
    zoom:1;
    *display: inline;
}

#section-topbar ul#nav > li {
    display: block;
    float: left;
    padding: 0;
}


#section-topbar ul#nav a {
    display: block;
    font: normal 11px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 18px 20px 18px 20px;
    border-left: 1px solid #222;
}

#section-topbar ul#nav a:hover {
    background: #222;
    text-decoration: none;
    border-left: 1px solid #111;
}

#section-topbar ul#nav .active a {
    background: #df4244;
    border-left: 1px solid #111;
}

#section-topbar ul#nav .active a:hover {
    background: #df4244;
}
@media only screen and (max-width: 460px) {
    #section-topbar ul#nav img {
        width:25px;
    }
    #section-topbar ul#nav a {

        padding: 12px 12px 12px 12px;

    }	
}

/* jQuery UI tooltip for menu items */
.ui-tooltip {
    color: #eee;
    background: #222;
    padding: 10px 15px;
    font: normal 300 12px/22px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
}

body .ui-tooltip {
    border: none;
}




/*---------------------------------------------------
        3.2 Header

        Includes full-width background iamge and intro paragraph
---------------------------------------------------*/

#section-intro {
}

/* Profile Image (Full background) */
#section-profileImage  {
    background: #222 url('../images/profile_main3.jpg') no-repeat center center;
    background-size: cover;
    height: 510px;
}
#section-profileImage-Movie  {
    height: 510px;
    overflow: hidden;
    position: relative;
}

#section-profileImage #box-name {
    color: #333;
    font-size: 16px;
    line-height: 26px;
    margin-top: 60px;
    text-align: center;
}

#section-profileImage #box-name h2 {
    color: #fff;
    font: normal  36px/46px  'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
}


#section-profileImage #box-name p {
    color: #fff;
    font: normal 300 14px/24px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 10px;
}

#section-profileImage #box-name a {
    color: #fff;
}

#section-profileImage #box-name a:hover {
    color: #df4244;
}

/* About */
.logo {background-image: url('../images/anthony-wiktor-logo.png');width:334px; height:195px; margin:0 auto;}
.logo:hover {background-image: url('../images/anthony-wiktor-logo-hover.png');}
#section-about {
    color: #fff;
    background: #323232;
    padding: 40px 0;
}
#section-honors {
    color: #fff;
    background: #fff;
    padding: 20px 0;
}

#section-about h3 span.underline {
    padding-bottom: 3px;
    border-bottom: 1px solid #fff; line-height:29px;
}

p.intro {
    color: #fff;
    font: normal 13px/29px 'museo_slab500', 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a.link-print, a.link-pdf, a.link-li {
    color: #fff;
    font: normal 11px/21px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    padding: 8px 0 8px 40px;
    margin-bottom: 10px;
}

a.link-print {
    background: url('../images/icons/icon_print.png') no-repeat left center;
}

a.link-pdf {
    background: url('../images/icons/icon_pdf.png') no-repeat left center;
}

a.link-li {
    background: url('../images/icons/icon_li.png') no-repeat left center; opacity:0.6;
}
a.link-li:hover {
    opacity:1;
}

/*---------------------------------------------------
        3.3 Resume
---------------------------------------------------*/

#section-resume {
    color: #666;
    background: #fff;
    font: normal 16px/26px 'PT Serif', Georgia, serif;
    padding: 60px 0 20px 0;
}

#section-resume .section-title {
    color: #44bbaa;
    padding: 50px 0;
    display: none;
}

#section-resume h2 {
    color: #000;
    font: normal bold 300 12px/28px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#section-resume h3 {
    color: #000;
    font: normal 300 12px/28px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding-top: 16px;
    text-transform: uppercase;
}

#section-resume h3.no-padding {
    padding: 0;
}


#section-resume h3 span.underline {
    padding-bottom: 3px;
    border-bottom: 0px solid #777;
}

#section-resume h5 {
    color: #ccc;
}

#section-resume h5+p {
    margin-bottom: 15px;
}

#section-resume img.profile-image {

}

#section-resume .block {
    margin-bottom: 40px;
}

#section-resume .block.last {
    margin-bottom: 0px;
}

#section-resume #box-profile a.link-email,
#section-resume #box-profile a.link-phone {
    color: #666;
    font: normal 15px/25px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#section-resume #box-profile a.link-email:hover,
#section-resume #box-profile a.link-phone:hover {
    color: #44bbaa;
}

#section-resume .item {
    margin-bottom: 10px;
}

#section-resume .item > div {
    padding-top: 15px;
}

#section-resume .item.no-border > div,
#section-resume .item > div.no-border { 
    border-top: none;
}

#section-resume .item h4 {
    color: #df4244;
    font: normal 14px/24px 'museo_slab500', 'PT Serif', Georgia, serif;
}

#section-resume .item div h4 + p {
    color: #666;
    font: normal 14px/24px 'PT Serif', Georgia, serif;
    margin-top: 0;
}

#section-resume .item div p.desc {
    color: #656565;
    font: normal 13px/23px 'museo_slab500', 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 15px;
}

#section-resume .item div > p.date {
    color: #444;
    font: normal 13px/23px 'PT Serif', Georgia, serif;
}

#section-resume .item div > p.date span.label {
    display: inline-block;
    color: #aaa;
    background: #111;
    padding: 4px 8px;
    margin-top: 6px;
    font: normal 10px/20px 'museo_slab500', 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.box-skill {
    width: 33%;
    float: left;
    position: relative;
}

.box-skill .box-inner {
    padding: 20px 25px;
    background: #111;
    height: 200px;
    overflow: hidden;
}

.box-skill.even .box-inner {
    background-image: url('../images/alpha/bg_alpha15.png');
}

.box-skill h4 {
    color: #fff;
    font: normal 13px/23px 'museo_slab500', 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

    letter-spacing: 0px;
}

.box-skill.hoverClass h4 {
}

.box-skill div > p {
    color: #fff;
    font: normal 13px/23px 'museo_slab500', 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 15px;
}

.box-skill.hoverClass div > p {
    display: block;
}




/*---------------------------------------------------
        3.4 Works
---------------------------------------------------*/

/* Isotope grid */

#section-worksgrid {

}

#section-worksgrid a{
cursor: url(../images/cross.png), auto;

}

#section-worksgrid .item {
    line-height: 0; 
}

#section-worksgrid .item img {
    width: 100%; 
}

/**** Isotope Filtering ****/

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
    -ms-transition-property:     -ms-transform, opacity;
    -o-transition-property:      -o-transform, opacity;
    transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}





#section-works {
    color: #222;
    background: #f5f5f5;
    font: normal 16px/26px 'PT Serif', Georgia, serif;
    padding: 80px 0;
}

#section-works .item {
    color: #333;
    background: #fff;
    margin-bottom: 40px;
}

#section-works .item.last {
    margin-bottom: 0px;
}

#section-works a:hover .item {

}

#section-works .img-wrap {

    line-height: 0;
    position: relative;
}



#section-works .item .work-info {
    margin: 30px 40px 20px 0;
}

#section-works .item span.category {
    color: #ccc;
    font: normal 11px/21px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#section-works .item h4 {
    font-size: 17px;
    line-height: 28px;
    margin: 5px 0 0px 0;
    color:#df4244;
}

#section-works a:hover .item h4 {
    color: ##df4244;
}


#section-works .item p {margin-top:20px;
                        color: #aaa;
                        font: normal 13px/24px 'museo_slab500', 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#section-works a:hover .item p {
    color: #9b9b9b;
}



/*---------------------------------------------------
        3.4.1 jQuery Reveal Plugin
---------------------------------------------------*/

/* CSS for jQuery Reveal Plugin Maintained for Foundation. foundation.zurb.com Free to use under the MIT license. http://www.opensource.org/licenses/mit-license.php */
/* Reveal Modals ---------------------- */
.reveal-modal-bg { 
    position: fixed; 
    height: 100%; 
    width: 100%; 
    background: #000; 
    background: rgba(0, 0, 0, 0.55); 
    z-index: 40; 
    display: none; 
    top: 0; 
    left: 0; 
}

.reveal-modal { 
    background: #fff; 
    visibility: hidden; 
    display: none; 
    top: 100px; 
    left: 50%; 
    margin-left: -300px; 
    width: 600px; 
    position: absolute; 
    z-index: 41; 
    padding: 0; 
}

.reveal-modal .box-modal {
    padding: 20px 25px;
}

.reveal-modal .box-modal h4 {
    font: normal 14px/21px 'PT Serif', Georgia, serif;
    margin-bottom: 15px;
}

.reveal-modal .box-modal p {
    color: #aaa;
    font: normal 12px/22px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.reveal-modal a.link-details {
    display: block;
    color: #333;
    background: #f5f5f5;
    padding: 20px 25px;
    border-top: 1px solid #eee;
    font: normal 11px/21px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.reveal-modal a.link-details:hover {
    color: #fff;
    background: #44bbaa;
}

.reveal-modal a.close-reveal-modal {
    display: block;
    padding: 20px 25px;
    color: #aaa;
    background: #111;
    font: normal 11px/21px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: pointer;
}

.reveal-modal a.close-reveal-modal:hover {
    color: #44bbaa;
    background: #000;
}

@media print { .reveal-modal { border: solid 1px black; background: #fff; } }




/*---------------------------------------------------
        3.5 Contact / References / Testimonials
---------------------------------------------------*/

#section-contact {
    color: #fff;
    padding: 0px 0;
    background: #161616;
    padding: 80px 0;
}

#section-contact h3 {
    font-weight: bold;
    color: #333;
    margin-bottom: 25px;
}

#section-contact h3 span.underline {
    padding-bottom: 3px;
    border-bottom: 1px solid #333;
}

#section-contact p.desc {
    color: #777;
    margin-bottom: 40px;
}

/* Register Form */
#section-contact form {
    margin-bottom: 40px;
}

#section-contact form p,
#section-contact label,
#section-contact legend { 
    font: normal 13px/23px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#section-contact label {
    display: inline-block;
    float: left;
    width: 155px;
    margin: 6px 0;
}

#section-contact input, 
#section-contact textarea, 
#section-contact select { 
    width: 280px; 
    padding: 14px 20px; 
    color: #eee; 
    background: #333;
    margin: 0 0 35px 0; 
    border: 0;
    outline: none;
}

#section-contact input:focus, 
#section-contact textarea:focus, 
#section-contact select:focus { 
    color: #fff;
    background-color: #df4244;
}

#section-contact button.submit {
    font: bold 20px/30px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    display: block;
    cursor: pointer;
    color:#fff;
    background:#df4244;
    padding: 20px 28px;
    border: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
}

#section-contact button.submit:hover { 
    color: #df4244;
    background: #fff; 
}

#section-contact span.required { 
    color: #df4244;
    font-size: 13px;  
} /* Select the color of the * if the field is required. */


#contact-warning,
#contact-success {
    font: normal 12px/23px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#contact-warning {
    display: none;
    color: #fff;
    background: #dd3333;
    padding: 20px 25px;
    margin-bottom: 30px;
}

#contact-success {
    display: none;
    color: #77aa44;
    background: #111;
    padding: 20px 25px;
    margin-bottom: 30px;
}

/* HTML5 Placeholder */
::-webkit-input-placeholder {
    color: #df4244;
}

:-moz-placeholder {  
    color: #df4244;
}


#box-references {}

#box-references h3 {
    margin-bottom: 0; 
}

#box-references p.desc {
    font: normal 13px/24px 'museo_slab500', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#box-references .item {
    color: #666;
    margin-top: 20px;
}

#box-references .item h4 {
    color: #fff;
    font: normal 15px/25px 'museo_slab500', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 15px;
}

#box-references .item p {
    color: #888;
    font: normal 13px/24px 'museo_slab500', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-bottom: 30px;
}

#box-references .item p a {
    color: #bbb;
}

#box-references .item p a:hover {
    color: #fff;
}


#box-testimonials {

}

#box-testimonials .item {
    margin-top: 30px;
} 

#box-testimonials h3 {
    margin-bottom: 0; 
}

#box-testimonials blockquote p.quote {
    color: #eee;
    font: italic 13px/24px 'museo_slab500', 'PT Serif', Georgia, serif;
}

#box-testimonials blockquote h4 {
    color: #424242;
    font: normal 13px/24px 'museo_slab500', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 10px;
}

#box-testimonials blockquote p.position {
    color: #666;
    font: normal 11px/21px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;

    letter-spacing: 0px;
}




/*---------------------------------------------------
        3.6 Footer
---------------------------------------------------*/

#section-footer {
    color: #777;
    background: #111;
    font: normal 13px/23px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#section-footer p {
    margin-top: 32px;
}

#section-footer a { color: #666; }

#section-footer a:hover { color: #df4244; }


#section-footer ul#social {
    float: right;
    border-left: 1px solid #111;
}

#section-footer ul#social li {
    display: inline-block;
    float: left;
}

#section-footer ul#social li a {
    display: block;
    line-height: 0;
    padding: 30px;
}

@media only screen and (max-width: 767px) {
    #section-footer ul#social li a {
        background: #df4244;
    }

}

#section-footer ul#social li a:hover {
    background: #df4244;
}
#section-footer ul#social li.aiga a {

    padding: 30px 10px;
}

#section-footer ul#social li.aiga a:hover {
    background: #ffcb08;
    padding: 30px 10px;
}

#section-footer ul#social li.twitter a:hover {
    background: #03c8ff;
}

#section-footer ul#social li.beh a:hover {
    background: #157cf2;
}	

#section-footer ul#social li.linkedin a:hover {
    background: #1983bd;
}

#section-footer ul#social li.dribble a:hover {
    background: #ea4c89;
}	




@font-face {
    font-family: 'museo_slab500';
    src: url('../fonts/aw_slab_500-webfont.eot');
    src: url('../fonts/aw_slab_500-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/aw_slab_500-webfont.woff') format('woff'),
        url('../fonts/aw_slab_500-webfont.ttf') format('truetype'),
        url('../fonts/aw_slab_500-webfont.svg#museo_slab500') format('svg');
    font-weight: normal;
    font-style: normal;

}
.behance-out{ width:100%; background:#333; text-align: center;  }
.behance-out a { background: #333; display: block; padding: 45px 0; transition: all 0.5s ease 0s; }
.behance-out a:hover{background:#0087cb; padding: 60px 0; transition: all 0.5s ease 0s;}
.behance img{ max-width:100%; }


/***** new *****/
#section-worksgrid .item a { width: 100%; height: 50%; min-height: 185px; max-height: 315px; overflow: hidden; display: inline-block; }
#section-worksgrid .item img { opacity: 1; z-index: 10; position: relative; top: 0; left: 0; }
#section-worksgrid .item span { z-index: 20; position: absolute; width: 100%; height: 100%; 
           top: 0px; left: 0px;     opacity: 0;
    -webkit-transition: opacity 1.0s;
    -moz-transition:    opacity 1.0s;
    -o-transition:      opacity 1.0s; }
			#section-worksgrid .item:hover span { z-index: 20; position: absolute; width: 100%; height: 100%; 
            display: inline-block; top: 0px; left: 0px; opacity: 1; }