/*
Theme Name: Calibra 
Theme URI: http://calibra.co/
Description: Calibra theme based on Salient
Author: Matteo Sorba 
Author URI: http://calibra.co/
Template: salient
Version: 0.2
*/



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



/* -------------------------------------------------------- Metto una riga rossa sotto l'header nav solo quando diventa bianco -*/
/*
body[data-hhun="1"] #header-outer.detached:not(.side-widget-open) {
    border-bottom: 5px solid #d72427 !important;
    border-color: rgba(215, 36, 39, 0.3); 
} 

*/

/* -------------------------------------------------------- Cerco di togliere i bordi che normalemnte sono sull'header nav -*/
body[data-hhun="1"] #header-outer.transparent {
    border-bottom: none;
}

/* html body #header-outer[data-transparent-header="true"].transparent { */
body[data-hhun="1"] #header-outer.transparent.at-top {
    border-bottom: none;    
}


/* ------------------------------------------ Titoli bianchi delle call-to-action al fondo delle actions -*/
.nectar-fancy-box h2 {
    color: #fff !important;
}

/* ------------------------------------------ Selector della sezione action -*/
/*
.portfolio-filters {
    float: none; 
    width: 50%;
    margin-left: 0px!important;
}

.portfolio-filters a{
    font-size: 22px;
    padding: 25px 20px 25px 20px;
}

#sort-portfolio span {
    font-family: "calibra-demi";
    font-size: 25px;
}
*/
/* ------------------------------------------ Typography -*/

.dark {
  color: #4a4a4a!important;
}


.lead-text {
    font-size: 21px;
    line-height: 31px;
}


.subheader {
    letter-spacing: 1px;
    padding-top: 5px;
}

/* ------------- Aggiungo font size  -*/

    
#text-3 .textwidget {
    border-top: 1px solid white;
/*    padding-top: 20px;*/
}    



.right-text {
    text-align: right;
}

.left-text {
    text-align: left;
}

.extra-separator {
  font-size: 5em;
  color: #fafafc;
}



.swiper-slide .content p {
   font-family: 'calibra-regular' !important;
}

/*
.swiper-slide .content {
    width: 60%;
}

.swiper-slide .content p {
    width: 85%;
}


.swiper-slide .content h2 {
    position: relative;
    margin-bottom: 10px;
}
*/


/* ------------------------------------------ Triangolino rosso negli slider via css -*/
/*
.swiper-slide .content span:before {
    content: "\f04b";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #d72427;
    font-size: 30px;
   padding-right: 0.5em;
    position: absolute;
    top: -25%;
    left: 50%;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
*/
/*
.swiper-slide .content {
	width: 70%;
}
*/

/*
body #slide-out-widget-area .inner .off-canvas-menu-container li a,
body #slide-out-widget-area.fullscreen .inner .off-canvas-menu-container li a {
    opacity: 1 ;
}
*/



/* ---------------------------------------------------------- Button and C2A -*/

/* ----------------------- Tutti i bottoni con il border radius */
/*
.ascend.nectar-button.see-through,
body.ascend.nectar-button.see-through,
.swiper-slide.button a,
body.ascend.nectar-button.see-through-2,
.ascend.nectar-button.see-through-2,
.ascend.nectar-button,
#to-top {
        border-radius: 4px!important;


}
*/
/*
input[type=submit], button[type=submit], input[type="button"] {
    background-color: #333333;
    padding: 7px 11px;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    -webkit-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
    width: auto;
    font-size: 16px; 
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;
    font-weight: 600;
}

input[type=submit]:hover, button[type=submit]:hover, input[type="button"]:hover {
    background-color: #27CFC3;
}

*/
/*
.ascend .nectar-button.see-through,
body.ascend .nectar-button.see-through,
.swiper-slide .button a,
body.ascend .nectar-button.see-through-2,
.ascend .nectar-button, #to-top   
.ascend .nectar-button.see-through,
body.ascend .nectar-button.see-throughi.medium,
.swiper-slide .button .medium a,
.nectar-button.medium.see-through a,
body.ascend .nectar-button.see-through-2.medium,
.ascend .nectar-button.medium,
#to-top {
        border-radius: 4px!important;
}

.nectar-button.see-through.medium a {
 text-transform: none!Important;
 border-radius: 4px!important;
 text-transform: none!Important;
/*
    font-size: 15px;
    letter-spacing: 1px!important;
    text-transform:none!important;
*/

.call-to-action object {
     vertical-align: bottom;
     
}

/*----------------------------------------------------------- Menù  slider widget -*/
/*
#slide-out-widget-area.fullscreen .inner li a,
#slide-out-widget-area .off-canvas-social-links li a,
#slide-out-widget-area.slide-out-from-right .inner .off-canvas-menu-container li a,
#slide-out-widget-area .menuwrapper li small {
    opacity: 1;
}

*/
/*

#slide-out-widget-area .inner > div:first-of-type {
    margin-top: 35px;
}
*/


body .portfolio-items .work-info-bg {
  background-color: #fff;
}


/*----------------------------------------------------------- Loghi clienti -*/


/* ------------------------------------------------------------------ Shadow -*/
/* -- 
.box-shadow-left {
-webkit-box-shadow: -10px 0px 12px 0px rgba(100, 100, 100, 0.30);
-moz-box-shadow:    -10px 0px 12px 0px rgba(100, 100, 100, 0.30);
box-shadow:         -10px 0px 12px 0px rgba(100, 100, 100, 0.30);
}

.box-shadow-right {
-webkit-box-shadow: -10px 0px 12px 0px rgba(0, 0, 0, 0.30);
-moz-box-shadow:    -10px 0px 12px 0px rgba(0, 0, 0, 0.30);
box-shadow:         -10px 0px 12px 0px rgba(0, 0, 0, 0.30);
}


.box-shadow-top {
-webkit-box-shadow: 0px -70px 50px -70px rgba(0,0,0,0.15);
-moz-box-shadow: 0px -70px 50px -70px rgba(0,0,0,0.15);
box-shadow: 0px -70px 50px -70px rgba(0,0,0,0.15);
}

.box-shadow-top-inset {
-webkit-box-shadow: inset 0px 70px 50px -70px rgba(0,0,0,0.15);
-moz-box-shadow: inset 0px 70px 50px -70px rgba(0,0,0,0.15);
box-shadow: inset 0px 70px 50px -70px rgba(0,0,0,0.15);
}


.box-shadow-bottom {
-webkit-box-shadow: 0px 70px 50px -70px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 70px 50px -70px rgba(0,0,0,0.15);
box-shadow: 0px 70px 50px -70px rgba(0,0,0,0.15);
}

.box-shadow-bottom-inset {
-webkit-box-shadow: inset 0px -70px 50px -70px rgba(0,0,0,0.15);
-moz-box-shadow: inset 0px -70px 50px -70px rgba(0,0,0,0.15);
box-shadow: inset 0px -70px 50px -70px rgba(0,0,0,0.15);
}
-- */





/*==================================================
 * Card Shadow Effect
 * ===============================================*/
.card-shadow
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.card-shadow:before, .card-shadow:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.card-shadow:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}


/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{
	-webkit-box-shadow: 0 10px 6px -6px #777;
	   -moz-box-shadow: 0 10px 6px -6px #777;
	        box-shadow: 0 10px 6px -6px #777;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

/*==================================================
 * Effect 3
 * ===============================================*/
.effect3
{
  position: relative;
}
.effect3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

/*==================================================
 * Effect 4
 * ===============================================*/
.effect4
{
  position: relative;
}
.effect4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}  

/*==================================================
 * Effect 5
 * ===============================================*/
.effect5
{
  position: relative;
}
.effect5:before, .effect5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

/*==================================================
 * Effect 6
 * ===============================================*/
.effect6
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.effect6:after
{
	right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}

/*==================================================
 * Effect 7
 * ===============================================*/
.effect7
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.effect7:after
{
	right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}

/*==================================================
 * Effect 8
 * ===============================================*/
.effect8
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.effect8:after
{
	right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}  

/*
@import url("../salient/style.css");
*/