/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@import 'https://fonts.googleapis.com/css?family=Roboto+Slab:300,700';
@import 'https://daneden.github.io/animate.css/animate.min.css';

@font-face {
	font-family:'Questa';
	src: url('../fonts/Questa-Regular_gdi.eot');
	src: url('../fonts/Questa-Regular_gdi.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Questa-Regular_gdi.woff') format('woff'),
		url('../fonts/Questa-Regular_gdi.ttf') format('truetype'),
		url('../fonts/Questa-Regular_gdi.otf') format('opentype'),
		url('../fonts/Questa-Regular_gdi.svg#Questa-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-00FE;
}

@font-face {
	font-family:'ProximaNova';
	src: url('../fonts/ProximaNovaCond-Bold_gdi.eot');
	src: url('../fonts/ProximaNovaCond-Bold_gdi.eot?#iefix') format('embedded-opentype'),
		url('../fonts/ProximaNovaCond-Bold_gdi.woff') format('woff'),
		url('../fonts/ProximaNovaCond-Bold_gdi.ttf') format('truetype'),
		url('../fonts/ProximaNovaCond-Bold_gdi.otf') format('opentype'),
		url('../fonts/ProximaNovaCond-Bold_gdi.svg#ProximaNovaCond-Bold') format('svg');
	font-weight: 700;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-00FE;
}




body, html {
	color: #666;
	font-family: 'Questa';
	font-size: 22px;
}

body {
	background-attachment:fixed;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  position: relative;
}


h1{color: #666;}
h2{font-size:1.5em;}



a {color:#8fc73e; transition: all 0.2s ease-in;} /*green*/
a:hover, a:focus, a:target {color:#184685; text-decoration: none;} /*blue*/

img {-webkit-backface-visibility: hidden; backface-visibility: hidden;}

strong {font-family: 'ProximaNova';}

/*--navbar--*/

.navbar {background: #fff;  transition:all .3s;}
.navbar .container {position: relative;}
.navbar-fixed-top {border-width: 0; z-index: 999999;}
.navbar-brand {height: 100px; padding: 20px;}
.navbar-brand .img-responsive {height: 100%;}
ul.navbar-nav, ul.navbar-nav li {margin-bottom: 0;}
.navbar-toggle .icon-bar {background:#666; height: 3px;}
.navbar-nav>li {border-top:4px solid #fff; transition: all 0.3s ease-out;}
.navbar-nav>li>a {font-size: 18px; color:#666; font-family: 'Questa'; transition: all 0.3s ease-out;}
.navbar-nav>li>a:hover, .nav>li>a:focus {background: transparent; color:#184685;}
.navbar-nav>li.active {border-top: 4px solid #8fc73e;}
.navbar-nav>li.active> a {color: #000;}

.navbar-nav>.lang {padding: 0 20px;}
.navbar-nav>.lang>a{font-family: 'ProximaNova'; text-transform: uppercase; display: inline-block; padding: 40px 0;}


.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {background: transparent;}



@media (min-width: 768px){
  .navbar-right .dropdown-menu {right: auto;left: 0;}
  .dropdown:hover .dropdown-menu {
    display: block;
 }
}

@media (max-width: 767px){
  .lang {right:20px; left:auto; top:15px;}
  .navbar-brand{height:auto; padding: 13px 10px; float:right;}
  .navbar-brand .img-responsive {max-height:37px;}
  .navbar-toggle {margin-top: 10px; margin-bottom: 10px;}
  .dropdown-menu {margin-top: 0px;}
}

@media (min-width: 768px) and (max-width: 991px){
  .navbar-brand{height:auto; padding: 10px 15px;}
  .navbar-brand .img-responsive {max-height:37px;}
  .navbar-toggle {margin-top: 10px; margin-bottom: 10px;}
  .navbar-nav>li>a {
   	padding: 15px 40px;
    font-size: 18px;

  }
}

@media (min-width: 992px) and (max-width: 1199px){
  .lang {left: 90px; top:36px;}
  .navbar-brand{padding: 15px}
  .navbar-brand .img-responsive {max-height:64px;}
  .navbar-nav>li>a {
    padding: 37px 12px;
    font-size: 15px;
  }
  .lang {top: auto; left: auto;}
  .navbar-nav>.lang {padding: 0 10px;}
  .navbar-nav>.lang>a {font-size: 13px;}
}

@media (min-width: 1200px) and (max-width: 1439px) {
	.navbar-nav>li>a {
    	padding: 40px 18px;
		font-size: 16px;
	}
}

@media (min-width: 1440px){
  .navbar-nav>li>a {
    padding: 40px 25px;    
  }
}



/*--Custom navbar collapse--*/

   @media screen and (max-width: 992px) {
   		  .navbar-brand {float: right;}
          .navbar-toggle {z-index:999; display: block;}
          .navbar-collapse .navbar-nav>li>a {color:#666; text-shadow:none; -webkit-text-shadow:none; white-space: nowrap; }
          .navbar-nav>.lang {padding: 0 40px;}
          .navbar-nav>li>a:hover, .nav>li>a:focus {background: transparent; color:#184685;}
          .navbar-nav>li.active {border-top:none;}
          .navbar-nav>li.active a {color: #8fc73e;}

          .side-collapse-container{
              width:100%;
              position:relative;
              left:0;
              transition:left .4s;
          }
          .side-collapse-container.out{
              left:0;
          }
          .side-collapse {
              top:0px;
              bottom:0;
              left:0;
              width:200px;
              padding-top: 48px;
              background: #fff;
              text-align: left;
              position:fixed;
              overflow:hidden;
              transition:width .4s;
          }
          .side-collapse.in {
              width:0;
          }

          .navbar-header {
        float: none;
	    }
	    .navbar-toggle {
	        display: block;
	    }
	    .navbar-collapse {
	        border-top: 1px solid transparent;
	        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	    }
	    .navbar-collapse.collapse {
	        display: none!important;
	    }
	    .navbar-nav {
	        float: none!important;
	        margin: 7.5px -15px;
	    }
	    .navbar-nav>li {
	        float: none;
	    }	    
	    /* since 3.1.0 */
	    .navbar-collapse.collapse.in { 
	        display: block!important;
	    }
	    .collapsing {
	        overflow: hidden!important;
	    }





      }

/*--general helpers*/

.section {
	padding: 120px 0;
	background:#fff;
}

.section-header {margin-bottom: 120px;}

.img-main {
	margin: 30px auto;
}


/*--homepage--*/

.scroll {
	color:#fff;
	position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
}
.scroll img{ animation-iteration-count: 2;}


/*--negozio--*/
#negozio h1 {font-size:90px;}
#negozio p {font-size:30px;}

.box h3 {
	width:100%;
	background:#184685;
	height: 60px;
    color: #fff;
    margin: 0;
    font-size: 25px;
    font-family: 'ProximaNova';
    line-height: 60px;
    transition: all 0.3s ease-out;
    border-top:4px solid #184685;
    border-bottom:4px solid #184685;
}

.box {margin-bottom: 30px;}

.box img {transition: all 0.3s ease-out;}

a:hover .box img {opacity:0.6;}

a:hover .box h3 {border-top: 4px solid #8fc73e ;}

.full-img-header {
	padding:0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 180px 90px;
    position: relative;
}

.full-img-header h2 {
	color:#fff;
	font-size: 90px;
	text-align: left;
	text-shadow: 0px 0px 5px #000;
}

#belle-arti .full-img-header {
	background-image: url('../img/belle-arti-header.jpg')
}

#ufficio .full-img-header {
	background-image: url('../img/ufficio-header.jpg');
	background-position: bottom;
}


#centro-stampa .full-img-header {
	background-image: url('../img/centro-stampa-header.jpg');
	background-position: left bottom;
}

#digital-fineart .full-img-header {
	background-image: url('../img/digital-fineart-header.jpg');
	background-position: left;	
}

.btn-wrap {
	position: absolute; 
	right:0;
	top:90px;
	width: 550px;
	height: 100px;
	transition: all 0.3s ease-out;
	overflow: hidden;
}

.btn-green {
	background:#8fc73e;
	color:#fff;
	height: 100%;	
	transition: all 0.3s ease-out;
}

.btn-green h4{
	font-family: 'ProximaNova';
	font-size: 30px;	
	text-transform: uppercase;
	line-height: 100px;
	margin: 0;
	transition: all 0.2s ease-out;
}

.btn-green h4 img {
	position: relative;
	top:-2px;
	margin-left: 15px;
	transition: all 0.4s ease-out;
}

.btn-white {
	background:#fff;
	padding: 20px 30px;	
	height: 100%;
	transition: all 0.3s ease-out;
}

.btn-white img {
	height: 60px;
	margin: auto;
}

@media (min-width: 992px) {

	.btn-wrap:hover .btn-green{
		width: 55%;
	}

	.btn-wrap:hover .btn-white{
		width: 45%;
		padding: 20px 10px;
	}

	.btn-wrap:hover .btn-green h4 {
	transform: translateX(20px);
}

}



.btn-wrap.bottom-btn-wrap {
	position: relative;
    right: 0;
    top: 0;
    width: auto;
}

.btn-wrap.bottom-btn-wrap .btn-white {
	padding:0;
}

.btn-wrap.bottom-btn-wrap .btn-white img {
	height: 100px;
	margin: auto;
}

.big-card {
	margin-top:-75px;
	padding-left: 0;
	padding-right: 0;	
}

.big-card h3 {
	font-family: 'Roboto Slab';
	font-weight: 700;
	font-size: 40px;
	color: #fff;
	line-height: 75px;
	margin: 0 30px;
}

.big-card hr {
	margin: 0;
    height: 10px;
    background: black;
    border: 0;

}

.big-card ul {
	padding: 30px 30px 105px;
    width: 60%;
    margin: auto;
    text-align: left;
}

.big-card ul>li {
	font-family: 'ProximaNova';
	font-size: 25px;
	text-transform: uppercase;
}

.big-card ul>li.noli {
	list-style: none;
	text-transform: none;
	margin-left: -30px;
}

.big-card ul li a {text-decoration: underline; color:#184685;}
.big-card ul li img {margin-left: 10px;}

.big-card ul>li:nth-of-type(odd) {color:#184685;}
.big-card ul>li:nth-of-type(even) {color:#8fc73e;}

.row > .big-card:nth-of-type(odd) hr, .row > .big-card:nth-of-type(odd) h3 {background:#184685;}
.row > .big-card:nth-of-type(even) hr, .row > .big-card:nth-of-type(even) h3 {background:#8fc73e;}

.img-card {position: relative; height: 400px; margin:0; padding: 0; overflow: hidden; background-size: cover; background-position:center;}

#img-card-1{background-image:url('../img/piccoloformato.jpg');}
#img-card-2{background-image:url('../img/visual.jpg');}
#img-card-3{background-image:url('../img/lorycad-img.jpg');}

.img-text {display: table;}

.img-text .img-card-inner {display: table-cell; vertical-align: middle; padding: 3%;}

@media (max-width: 768px) {
	.full-img-header h2 {
		text-align: center;
	}	

	.big-card {
		margin-top:0;
		padding-left: 0;
		padding-right: 0;	
	}

	.big-card h3 {
		margin: 0;
	}

	.big-card ul {
		text-align: center;
		list-style: none;
	}

	.btn-wrap {
	    bottom: 0;
	    top: inherit;
    	width: 100%;
    }

    .btn-wrap:hover .btn-green{
		width: 50%;
	}

	.btn-wrap:hover .btn-white{
		width: 50%;
	}

  .scroll {display: none;}
}

@media (max-width: 1199px) { 
	.big-card ul {
		padding: 30px 30px 105px;
    	width: 90%;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.btn-wrap {width: 350px; height: 70px;}
	.btn-white {padding:10px 0;}
	.btn-white img {height: 50px;}
	.btn-green h4 {font-size: 16px; line-height: 70px;}
	.btn-green h4 img {margin-left: 2px; height: 25px;}
	.btn-wrap:hover .btn-green h4 {transform: none;}

	.btn-wrap.bottom-btn-wrap .btn-white img {height: 70px;}	
}


#ufficio .big-card {margin-top: 0;}

.brand .img-responsive {
	margin: auto; 
	max-height: 48px;
	position: relative;
  	top: 50%;
  	transform: translateY(-50%);
}

.brand .img-brand {height:96px;}

.brand {padding: 0 60px;}

.text-box-wrapper {padding: 0 60px;}

.text-box {padding-top: 30px;}
.text-box p{margin-bottom: 30px;}

#belle-arti-brand.brand .img-responsive {
	max-height: 96px;
}

#belle-arti #fidelity {
	padding-top: 90px;
	font-family: 'ProximaNova';
}

#fidelity .blue {color:#184685;}

#belle-arti-brand.brand .img-brand {height:128px;}

#centro-stampa h2.heading {  
  font-weight: 300;
  font-size: 50px;
  margin:0 0 30px;
}

#digital-fineart-brand .img-responsive {
	max-height: 100%;
}

@media (max-width: 768px) { 
  .btn-white img {height:auto;}

  .brand {padding: 0 15px;}

  .text-box-wrapper {padding: 0 15px;}

  #ufficio-brand-xs {padding: 0;}
}

@media (min-width: 1200px) and (max-width: 1600px) { 
	#ufficio-brand-wrap {display: none;}
	#ufficio-brand-xs-wrap {display: block !important;}
}

#digital-fineart .text-box h2 {
	font-family: 'Roboto Slab';
	font-weight: 300;
	font-size: 50px;
	margin:0 0 30px;
}

#digital-fineart .btn-white {
	padding: 10px 30px;
}

#digital-fineart .btn-white img {height: 80px;}

#storia {background: #ddd; padding-bottom: 120px;}

#storia h1 {font-size:90px; margin-top: 120px; margin-bottom: 30px;}
#storia p {font-size:30px;}

/*--timeline--*/

.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
}

    .timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 3px;
        background-color: #aaa;
        left: 50%;
        margin-left: -1.5px;
    }

    .timeline > li {
        margin-bottom: 20px;
        position: relative;
    }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li > .timeline-panel {
            width: 46%;
            float: left;
            border: none;
            border-radius: 2px;
            padding: 20px;
            position: relative;            
            box-shadow: none;
        }

            /*.timeline > li > .timeline-panel:before {
                position: absolute;
                top: 26px;
                right: -15px;
                display: inline-block;
                border-top: 15px solid transparent;
                border-left: 15px solid #ccc;
                border-right: 0 solid #ccc;
                border-bottom: 15px solid transparent;
                content: " ";
            }

            .timeline > li > .timeline-panel:after {
                position: absolute;
                top: 27px;
                right: -14px;
                display: inline-block;
                border-top: 14px solid transparent;
                border-left: 14px solid #fff;
                border-right: 0 solid #fff;
                border-bottom: 14px solid transparent;
                content: " ";
            }
*/
        .timeline > li > .timeline-badge {
            color: #fff;
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 1.4em;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -10px;
            background-color: #999999;
            z-index: 100;
            border-top-right-radius: 50%;
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
            border-bottom-left-radius: 50%;
        }

        .timeline > li.timeline-inverted > .timeline-panel {
            float: right;
        }

            .timeline > li.timeline-inverted > .timeline-panel:before {
                border-left-width: 0;
                border-right-width: 15px;
                left: -15px;
                right: auto;
            }

            .timeline > li.timeline-inverted > .timeline-panel:after {
                border-left-width: 0;
                border-right-width: 14px;
                left: -14px;
                right: auto;
            }


.timeline-title {
    margin-top: 0;
    color: #999;
    font-size: 40px;    

}

.timeline .timeline-title, .timeline li .timeline-body{
	text-align: right;
}

.timeline .timeline-inverted .timeline-title, .timeline .timeline-inverted .timeline-body{
	text-align: left;
}


.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0;
}

    .timeline-body > p + p {
        margin-top: 5px;
    }

.timeline-body .img-responsive {margin-top:30px; max-width: 500px; width: 100%;}

.timeline .timeline-body .img-responsive{
	float:right;
}

.timeline .timeline-inverted .timeline-body .img-responsive{
	float: left;
}


@media (max-width: 767px) {
    ul.timeline:before {
        left: 40px;
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline > li > .timeline-badge {
        left: 30px;
        margin-left: 0;
        top: 50%;
    }

    ul.timeline > li > .timeline-panel {
        float: right;
    }

    ul.timeline > li > .timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto;
    }

    ul.timeline > li > .timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
    }

    .timeline .timeline-title, .timeline li .timeline-body, .timeline .timeline-inverted .timeline-title, .timeline .timeline-inverted .timeline-body{
	text-align: left; 
	}

	.timeline .timeline-body .img-responsive, .timeline .timeline-inverted .timeline-body .img-responsive {float: left;}

	.timeline-body .img-responsive {max-width: 100%;}

}

/*--contatti--*/

#contatti {position: relative;}

#map {width:100%; height:600px;}

.contact-info {
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 60%;
	margin:60px;
	z-index: 99999;
	background:#fff;
} 

.contact-mail, .contact-hour, .contact-invoice {
  position: absolute;
  top:0;
  bottom: 0;
  left: 37%;
  right: 15%;
  margin:60px;
  padding: 60px;
  z-index: 9999;
  background:#fff;
}

.contact-mail {
  font-size: 18px;
}

.contact-mail p {
  line-height: 35px;
    font-size: 20px;}

.contact-mail.fadeInLeft, .contact-hour.fadeInLeft {
  z-index: 10000;
}


.contact-hour {background:#fff;}

.contact-table {display: table; margin:auto; height: 100%}

.contact-table-inner {display: table-cell; vertical-align: middle;}

.contact-info h2 {
	font-size: 40px;
	margin-bottom: 30px;
}

#contatti .small {font-size: 16px;}

#contatti .fa {font-size: 14px;}

#contatti .contact-close .fa {
  position: absolute;
  top: 20px;
  right:20px;
  font-size: 22px;
  color: #999;
}

#street-view {background:#eee;padding:60px 0;}

#street-view img {max-height: 96px; display: inline-block;}

#facebook {background:#fff; padding: 60px 0;}

#fb-iframe iframe {width:100%; max-width: 500px; margin:auto;}

#facebook .text-box {display:table; height: 600px;}

#facebook .text-box-inner {vertical-align: middle; display: table-cell;}

#facebook h3 {font-family: 'ProximaNova'; font-size: 30px; color:#184685; margin: 30px 0; transition: all 0.2s ease-in;}

#facebook h3 img {margin-right: 10px;}

#facebook a:hover h3 {color: #8fc73e;}

#footer {
	background: #184685;
	border-bottom: 6px solid #8fc73e;
	padding: 60px 0;
}

#footer a:hover {color:#aaa;}

#footer p {color:#fff; font-size: 16px; font-family: 'ProximaNova'; margin-bottom: 0;}

#footer .img-responsive {margin: auto; max-height: 66px;}

.contact-xs {background: #fff; padding: 60px 0;}

@media (max-width: 1439px) {
	.big-card .piccolo-formato {font-size: 30px;}
  .contact-mail, .contact-hour { right:0;}
}

@media (max-width: 1200px) {
	.big-card .piccolo-formato {font-size: 26px;}
}

@media (max-width: 991px) {
	#negozio h1, #storia h1 {font-size: 60px;}
	#negozio p, #storia p {font-size: 24px;}
	section{padding: 90px 0;}
	.full-img-header h2 {font-size: 60px;}

	.big-card h3 {font-size: 30px; margin: 0 15px;}
	.big-card ul>li {font-size: 22px;}	
	.big-card .piccolo-formato {font-size: 21px;}

	#digital-fineart .btn-white img {height: 50px;}

	#contatti {padding: 0; margin:0;}
	.contact-info {margin:0; right: 50%;}
  .contact-mail, .contact-hour {margin: 0; left:50%; right:0;}

  .contact-mail p {
    line-height: 28px;
    font-size: 20px;
  }

  .contact-mail .pull-right {float:none !important;}
	#map {width: 50%; float:right;}

}

@media (max-width: 768px) { 
	#negozio {display: none;}
	#belle-arti {padding-top: 0;}
	section{padding: 60px 0;}
	#full-img-header {padding: 160px 90px;}
	.full-img-header h2 {font-size: 60px;}

	.big-card h3 {font-size: 30px; margin: 0;}
	.big-card hr {display: none;}

	#digital-fineart .btn-white img {height: 70px;}

	#facebook .text-box {display:table; height: 300px;}

	#fb-iframe iframe {width:400px; float: none; margin:auto !important;}

	.contact-info p {font-size: 18px;}

   .contact-mail p {
    line-height: 28px;
    font-size: 18px;
  }

  #map {width: 100%; float:left;}

	#footer .img-responsive {margin:20px auto;}

  #street-view img {margin: auto;}


}