/* ==========================================================================
#f9f9f6 - fiche creme
#f5f5f2 - texte creme
#959593 - texte gris clair
#646462 - texte gris moyen
#272725 - fond + Texte gris foncé
#1ac6e3 - bleu
   ========================================================================== */
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles
   ========================================================================== */

html, button, input, select, textarea { color: #222; }
body { font-size: 1em; line-height: 1.4; }
::-moz-selection { background: #1ac6e3; text-shadow: none; }
::selection { background: #1ac6e3; text-shadow: none; }
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; }


/* ==========================================================================
   Flexslider Styles
   ========================================================================== */

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: 0; padding: 0; }
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block; }
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0; background: #f9f9f6; border: 0px; position: relative; zoom: 1; }
.flex-viewport { max-height: 550px; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides {zoom: 1; }
.carousel li { margin: 0px; }

/* ==========================================================================
   Main styles
   ========================================================================== */


/* fonts */

body { font-family: 'lato', 'Helvetica', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing:subpixel-antialiased; }
.work_thumb_subtitle, #homepage_iphone, #resume_content, #resume_credits, #resume_infos, #single h2, #single h3 { font-family: 'Gentium Basic', Georgia, serif; }

/* layout */

p {margin: 0;}
h1, h2, h3, p { padding:0px; }
a:link, a:visited { color: #f9f9f6; text-decoration: none; }
img { max-width: 100%; vertical-align: middle; -ms-interpolation-mode: bicubic; }
html { overflow-x: hidden; height: 100%; }
body { background-color:#272725; color: #f9f9f6; height: 100%; }
#container { padding:15px; }


/* iPhone splash */  

#homepage_iphone { background-color: #f9f9f6; position: absolute; width: 100%; height: 100%; }

#borderBottom, #borderTop, #borderLeft, #borderRight { z-index: 1000; background-color: #272725; position: fixed; }
#borderBottom {height: 10px; bottom: 0; width: 100%; }
#borderTop {height: 10px; top: 0; width: 100%; }
#borderLeft {height: 100%; top: 0; width: 10px; }
#borderRight { height: 100%; right: 0; width: 10px; }

#iphone_logo { background-image: url(../img/iphone_logo.png); background-size: 100px 100px; width: 100px; height: 100px; margin: 0px auto; margin-top: 20%; }
#tel, #mail { width: 100%; bottom: 31.2%; position:absolute; text-align: center; }
#tel { padding-bottom:24px; }
#tel a { color:#272725; font-size: 1.15em; }
#mail a { color:#272725; font-size: 0.95em; }
#tel a:hover { color:#1ac6e3; }
#mail a:hover { color:#1ac6e3; }
#iphone_rotate_container { width: 100%; bottom: 11.4%; position:absolute;  }
#iphone_rotate { background-image: url(../img/iphone_rotate.png); background-size: 70px 70px; width: 70px; height: 70px; margin: 0px auto; }

#homepage_iphone { display: none; }


/* Index */

#homepage { background-color: #f9f9f6; }

#logo { opacity:0; background-image: url(../img/iphone_logo.png); position:absolute; z-index:10; width: 100px; height: 100px; margin-left: 8%; margin-top: 10%; }

.flexslider ul li p img { width:100%; height:auto; }

.col { width:20%; float: left; }
#work { z-index: 100; }
#work_thumb { z-index: 10; }
.work_thumb img { width:100%; height:auto; }
.work_thumb_legend { color:white; background-color: #252525; height: 50px; }
.work_thumb_title {  display:block; padding-top:16px;  font-size:0.9em; text-align:center; }
.work_thumb_subtitle { display:block; font-size:.75em; text-align:center; color:#959593; margin-bottom:16px; }

#resume { clear:both; }
.col_1 { width:40%; float: left; }
.col_2 { width:40%; float: left; }
.col_3 { width:0%; clear:both; }

#resume_p_biografia { background-image:url('../../../uploads/biografia.jpg') ;background-size: cover; width: 100%; height: 750px; margin-left: 0px; margin-top: 101px; }
#resume_p_press { background-image:url('../../../uploads/press2.jpg') ;background-size: cover; width: 100%; height: 750px; margin-left: 0px; margin-top: 101px; }
#resume_p_palmares { background-image:url('../../../uploads/palmares.jpg') ;background-size: cover; width: 100%; height: 750px; margin-left: 0px; margin-top: 101px; }
#resume_p_premi { background-image:url('../../../uploads/riconoscimenti.jpg') ;background-size: cover; width: 100%; height: 1250px; margin-left: 0px; margin-top: 101px; }
#resume_p_libro { background-image:url('../../../uploads/libro.jpg') ;background-size: cover; width: 100%; height: 750px; margin-left: 0px; margin-top: 101px; }
#resume_p_librowonder { background-image:url('../../../uploads/librowonder.jpg') ;background-repeat: no-repeat; width: auto; height: 873px; margin-left: 0px; margin-top: 101px; }
#resume_p_contatti { background-image:url('../../../uploads/contatti3.jpg') ;background-size: cover; width: 100%; height: 750px; margin-left: 0px; margin-top: 101px; }
#resume_p { background-image:url('../../../uploads/logo.png') ; width: 85px; height: 100px; margin-left: 70%; margin-top: 101px; }
#resume_trait { width: 0px; height: 60px; background-color: #272725; margin: 0px auto; float: right; margin-top: -63px; margin-right: 20px; }

#resume_title { font-size: 1.85em; line-height: 1.25em; font-weight: 700; color: #272725; margin-top: 100px; margin-bottom: 60px; margin-left: 30px;}
#resume_content {  font-size: 1.15em; line-height: 1.5em; color: #464646; width:530px; padding-bottom: 50px;margin-left: 30px; }

#resume_social { padding-top: 50px; padding-bottom: 50px; }
#resume_social a { font-size: 1.10em; font-weight: 700; color: #272725; margin-right: 100px;  }
#resume_social a:hover { color:#1ac6e3;  }
#resume_social a img { margin-top: -6px; margin-right: 5px; }

#resume_arrows { float:left;  padding-top: 47px; color: #272725; margin-right: 17px; margin-left: 13px;  }
#resume_infos { padding-bottom: 100px; padding-top: 50px; }
#resume_adress {  margin-bottom: 22px; }
#resume_tel { margin-bottom: 16px;  }

#resume_arrows, #resume_infos, #resume_adress, #resume_tel { line-height: 1.15em; font-size: 0.95em;  }

#resume_adress a, #resume_tel a, #resume_mail a { color:#272725; font-size: 0.95em; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; }
#resume_adress a:hover, #resume_tel a:hover, #resume_mail a:hover { color:#1ac6e3; }

#resume_credits { font-size: 0.75em; color: #babaaf; margin-bottom: 30px; }


/* Single */

#single { background-color: #f9f9f6; }
#container .lightblue { background-color: #e1f0f0; }

#artworks { padding:15px ; padding-top: 140px; }
.new { text-align:center; width: 100%;  }
.new img { padding-bottom: 70px; }

.old img { width:33.2%; float: left; padding-right: 1px; padding-bottom: 1px; }
#footer { clear: both; height: 14px; }

#cross a { background-image: url(../img/nav_cross.png); background-size: 140px 140px; width: 140px; height: 140px; z-index:20; position: fixed; left: 10px; }
#left a { background-image: url(../img/nav_left.png);  background-size: 140px 140px; width: 140px; height: 140px; z-index:20; position: fixed; right: 150px; }
#right a { background-image: url(../img/nav_right.png); background-size: 140px 140px; width: 140px; height: 140px; z-index:20; position: fixed; right:10px; }

#cross a:hover { background-image: url(../img/nav_cross_hover.png); }
#left a:hover { background-image: url(../img/nav_left_hover.png); }
#right a:hover { background-image: url(../img/nav_right_hover.png); }

#single h1 { text-align: center; font-size: 1.85em; line-height: 1em; font-weight: 600; color: #272725; margin-top: 100px; padding-bottom: 1px; margin-bottom: 0px; }
#single h2 { text-align: center; font-size: 1.15em; line-height: 1.2em; font-weight: 100; color: #464646; padding-bottom: 0px; }
#single h3 { text-align: center; font-size: 0.75em; line-height: 1em; font-weight: 100; color: #464646; padding-bottom: 30px; }
#single h4 { text-align: center; font-size: 0.75em; line-height: 1em; font-weight: 100; color: #464646; padding-bottom: 0px;  }

.addthisme { width: 100%; width: 140px; margin-left: auto; margin-right: auto; padding-top:85px; padding-bottom: 100px; }

#artworks form { min-height: 800px; }
#artworks form p { font-size: 1.15em; color: #272725; line-height: 4em; text-align: center; }

/* ==========================================================================
   Preload rollovers
   ========================================================================== */

#preload-01 { background: url(../img/nav_cross_hover.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(../img/nav_left_hover.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(../img/nav_right_hover.png) no-repeat -9999px -9999px; }


/* ==========================================================================
   CSS Animations
   ========================================================================== */

.animate_fade {
   transition: opacity .1s ease-in-out;
   -moz-transition: opacity .1s ease-in-out;
   -webkit-transition: opacity .1s ease-in-out;
   -o-transition: opacity .1s ease-in-out;
   }

.animate_fade:hover {
    opacity: 0.75;
  }

#logo { 
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: .5s;

  -moz-animation-duration: 1s;
  -moz-animation-delay: .5s;

  -o-animation-duration: 1s;
  -o-animation-delay: .5s;

  -ms-animation-duration: 1s;
  -ms-animation-delay: .5s;
  
  animation-duration: 1s;
  animation-delay: .5s;
}

.flex-viewport { 
  -o-transition: all .5s ease;
  -webkit-transition: all .5s ease; 
  -moz-transition: all .5s ease; 
  transition: all .5s ease; 
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; }
.ir:before { content: ""; display: block; width: 0; height: 100%; }
.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; }


/* ==========================================================================
   Media Queries
   ========================================================================== */


@media screen and (device-aspect-ratio: 40/71), screen and (device-aspect-ratio: 2/3) and (-webkit-min-device-pixel-ratio: 2) {
#iphone_logo, #logo { background-image: url(../img/iphone_logo%402x.png); }
#iphone_rotate { background-image: url(../img/iphone_rotate%402x.png); }
#cross a { background-image: url(../img/nav_cross%402x.png); }
#left a { background-image: url(../img/nav_left%402x.png); }
#right a { background-image: url(../img/nav_right%402x.png); }
#cross a:hover { background-image: url(../img/nav_cross_hover%402x.png); }
#left a:hover { background-image: url(../img/nav_left_hover%402x.png); }
#right a:hover { background-image: url(../img/nav_right_hover%402x.png); }
}


/* --- If <= 1400 = 4 colonnes */
@media only screen and (max-width: 1400px) {
.col, .col_1 { width:25%; } 
.col_2 { width: 50%; }
#resume_p { margin-left: auto; margin-right: 20px; }
.old img { width:49.9%; }
}

/* --- If <= 1200 = 3 colonnes */
@media only screen and (max-width: 1200px) {
.col, .col_1 { width:33.3333%; }
.col_2 { width:66.6666%; }
#logo  { margin-left: 6%; margin-top: 8%; }
#resume_content { padding-right: 80px;}
.old img { width:49.7%; }
#resume_p,#resume_p_biografia,#resume_p_press,#resume_p_palmares,#resume_p_contatti,#resume_p_libro,#resume_p_premi { visibility: hidden; }

}

/* --- If <= 1024 = 2 colonnes */
@media only screen and (max-width: 1024px) {
#container { padding:10px; }
.col { width:50%; }
.col_1, .col_3 { width: 20%; }
.col_2 { width:74%; }
#resume_trait, #resume_p,#resume_p_biografia,#resume_p_press,#resume_p_palmares,#resume_p_contatti,#resume_p_libro,#resume_p_premi  { visibility: hidden; }
#resume { margin: 0px auto; }
#resume_title { font-size: 1.65em; line-height: 1.15em; }
#resume_content{   width:auto; padding-right: 80px; }
#resume_social a { margin-right: 70px; }

#logo  { margin-left: 4%; margin-top: 6%; }
.old img { width:100%; }
#artworks { padding:10px; padding-top: 140px; }
#footer { height: 9px; }
}

/* --- If <= 740 = iphone landscape */
@media only screen and (max-width: 740px) {
#logo {display: none;}
.col_1, .col_3 { width: 10%; }
.col_2 { width:90%; }
.flexslider { display: none; }
#resume_title { font-size: 1.25em; line-height: 1.15em;  margin-top: 120px; }
#resume_social a { margin-right: 30px; font-size: 1em; }


#artworks { padding-top: 100px; }
#cross a { width: 100px; height: 100px; left: 10px; background-position: -20px;  }
#left a { width: 100px; height: 100px; right: 110px; background-position: -20px;  }
#right a { width: 100px; height: 100px; right: 10px; background-position: -20px;  }


#left a { width: 100px; right: 110px; background-position: -20px; }
}

/* --- If <= 460 = iphone portrait */
@media only screen and (max-width: 460px) {
#container { padding:0px; }
#homepage { display: none; }
body { background-color:#f9f9f6; }
#homepage_iphone { display: block; }

#artworks { padding-top: 100px; }
#cross a { width: 80px; height: 100px; left: 10px; background-position: -30px;  }
#left a { width: 80px; height: 100px; right: 90px; background-position: -30px;  }
#right a { width: 80px; height: 100px; right: 10px; background-position: -30px;  }
}


/* ==========================================================================
   Print styles
   ========================================================================== */

@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; }
}