/*
Theme name: Qtheme
Theme url: http://www.craqdesignstudio.it
Version: 9.0
Author: <a href="http://www.craqdesignstudio.it" title="Craq Design Studio">Craq Design Studio</a>
Author url: http://www.craqdesignstudio.it
*/

/*--------------------------------------------------------------
TABLE OF CONTENTS:
----------------------------------------------------------------
1.0  Stripe
    1.1 Header
    1.2 Font
    1.3 Background
    1.4 Padding
    1.5 Border
    1.6 Align
    1.7 Icons
2.0 Box
    2.1 Width
    2.2 Height
    2.3 Padding
    2.4 Border
    2.5 Align
    2.6 Box Image / Video
3.0 Responsive

--------------------------------------------------------------*/
/*--------------------------------------------------------------
0.0 Stripe Classes

--------------------------------------------------------------*/
/*stripeHeader*/
#stripeHeader.stripe, #stripeTextHeader.stripe{padding-top: 0.5rem; }
#stripeHeader .stripeHeaderBox{
        width: 50%;
}
mark span {
    padding: 0.2rem 0.5rem;
    color: white;
    background: #339999;
        
}
#stripeHeader h1 {
        line-height: 70px;
        font-size: 55px;
    }
#bitac-intro {
    font-size: 24px;
    color: #A9A9A9;
    line-height: 2.8rem;
    font-weight: 400;
}
/*stripeSlogan*/
#stripeSlogan {
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 2rem 0;
    margin-top: 6rem;
}
#stripeSlogan .contentWrap{
    padding: 0 5rem;
}

/*stripeButtons*/
#stripeButtons {width: 1024px; max-width: 97%;}
#stripeButtons .stripeButton{
    display: block;
    max-width: 32%;
    padding: 20px;
    min-height: 100px;
    box-sizing: border-box;
    text-transform: uppercase;
}
#stripeButtons .stripeButton.active{
    background: white;
    color: #339999;
    border: 1px solid;
}
#stripeButtons .stripeButton:not(.active):hover{
    color: #339999;
    background-color: #FFFF66;
    transition: 0.5s ease;
        
}
/*stripePartners*/
#stripePartners .ruoloWrap {
    margin-bottom: 20px;
    border-bottom: 1px solid #cccccc;
}
#stripePartners .ruoloWrap .label {
    margin: 20px 0;
}
#stripePartners .ruoloWrap img {
    max-width: 100%;
}

#stripePartners .partnerLink{
    display: block;
    width: 32.4rem;
    min-width: 250px;
    margin-bottom: 20px;
}

/*stripefaq*/
.box_type_faq .faqLoop{
    padding-top: 10px;
    border-bottom: 1px solid #cccccc;
}
.box_type_faq .faqWrap{
    margin-left: 10px;
}
.box_type_faq .domanda, .box_type_faq .risposta {
    margin-bottom: 5px;
}
/*.box_type_faq p {display: none;}*/

/*stripeNewsletter*/
#stripeNewsletter {
    background: #efefef;
    display: none;
    justify-content: space-around;
    padding: 6rem 0;
}
#stripeNewsletter svg {
    margin-right: 15px;
    height: 50px;
    width: 50px;
}


/*--------------------------------------------------------------
1.0 Stripe
--------------------------------------------------------------*/
.stripe{
    position: relative;
    padding: 3rem 0;
    z-index: 1;
    max-width: 1024px;
    margin: auto;
    background-color: #ffffff;
}
.stripe.background_none{
    background: none;
}
.stripe .overlay{
    z-index: 2;
}
.stripe > * {
    position: relative;
    z-index: 3;
}
.stripeBoxes {
    display: flex;
    flex-wrap: wrap;
}
.stripe .buttonsContainer{
    margin-top: 2rem;
}

/* 1.1 Header
----------------------*/
.stripeHeader.withBoxes{
    margin-bottom: 3rem;
}
.stripeTitle,
.stripeSubtitle{
    display: flex!important;
    align-items: center;
}
.stripeTitle .inside *{
/*    font-size: 3.5rem;
    line-height: 3.5rem;*/
    margin-bottom: 0;
    color: #339999;
}
.stripeTitle .iconWrap .icon.material,
.stripeTitle .iconWrap .icon.awesome{
    font-size: 5rem;
}
.stripeTitle .iconWrap .icon.custom{
    padding: 4rem;
}
.stripeTitle .iconCover{
    margin-bottom: 1rem;
}

/* 1.2 Font
----------------------*/
.font_color_light,.font_color_light a{
    color: #ffffff;
}
.font_color_light .button .icon.customSVG svg path,
.font_color_light .button .icon.customSVG svg polygon{
    fill: #ffffff;
}

/* 1.3 Background
----------------------*/
.background_image{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.background_image.background_position_nw {background-position: left top;}
.background_image.background_position_n {background-position: center top;}
.background_image.background_position_ne {background-position: right top;}
.background_image.background_position_w {background-position: left center;}
.background_image.background_position_e {background-position: right center;}
.background_image.background_position_sw {background-position: left bottom;}
.background_image.background_position_s {background-position: center bottom;}
.background_image.background_position_se {background-position: right bottom;}

/* 1.4 Padding
----------------------*/
.stripe.padding_top_none{padding-top: 0;}
.stripe.padding_top_max{padding-top: 6rem;}
.stripe.padding_top_min{padding-top: 1.5rem;}
.stripe.padding_bottom_none{padding-bottom: 0;}
.stripe.padding_bottom_max{padding-bottom: 6rem;}
.stripe.padding_bottom_min{padding-bottom: 1.5rem;}

/* 1.5 Border
----------------------*/
.stripe.border_all{
    border-top: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
}
.stripe.border_top{border-top: 1px solid #d4d4d4;}
.stripe.border_bottom{border-bottom: 1px solid #d4d4d4;}

/* 1.6 Align
----------------------*/
.stripe.align_rule_center .stripeTitle,
.stripe.align_rule_center .stripeSubtitle,
.stripe.align_title_center .stripeTitle,
.stripe.align_subtitle_center .stripeSubtitle{
    text-align: center;
    justify-content: center;
}
.stripe.align_rule_center .stripeBoxes,
.stripe.align_rule_center .buttonsContainer,
.stripe.align_boxes_center .stripeBoxes,
.stripe.align_buttons_center .buttonsContainer{
    justify-content: center;
}
.stripe.align_rule_right .stripeTitle,
.stripe.align_rule_right .stripeSubtitle,
.stripe.align_title_right .stripeTitle,
.stripe.align_subtitle_right .stripeSubtitle{
    text-align: right;
    justify-content: flex-end;
}
.stripe.align_rule_right .stripeBoxes
.stripe.align_rule_right .buttonsContainer,
.stripe.align_boxes_right .stripeBoxes,
.stripe.align_buttons_right .buttonsContainer{
    justify-content: flex-end;
}
.stripe.align_boxes_justify .stripeBoxes{
    justify-content: space-between;
}
.stripe.vertical_align_middle .stripeBoxes{
    align-items: center;
}
.stripe.vertical_align_bottom .stripeBoxes{
    align-items: flex-end;
}
.vertical_align_symmetric .box .inside{
    display: flex;
    flex-direction: column;
}

/* 1.7 Icons
----------------------*/
.iconWrap{
    display: inline-flex;
    align-items: center;
}
.iconWrap .icon{
    margin-right: 0.5rem;
}
.iconWrap .icon.material,
.iconWrap .icon.awesome{
    font-size: 1.5rem;
}
.iconWrap .icon.custom{
    position: relative;
    width: 0;
    height: 0;
    padding: 0.75rem;
    background: center center no-repeat;
    background-size: contain;
}
.iconWrap_right{
    flex-direction: row-reverse;
}
.iconWrap_right .icon{
    margin-right: 0;
    margin-left: 0.5rem;
}
.iconWrap_above{
    flex-direction: column;
}
.iconWrap_above .icon{
    margin-right: 0;
    margin-bottom: 0.25rem;
}
.iconWrap_under{
    flex-direction: column-reverse;
}
.iconWrap_under .icon{
    margin-right: 0;
    margin-top: 0.25rem;
}

/*--------------------------------------------------------------
2.0 Box
--------------------------------------------------------------*/
.box{
    box-sizing: border-box;
    display: flex;
}
.box:not(.row1){
    margin-top: 3rem;
}
.box.content_wrap_none > .contentWrap{
    padding: 0;
}
.box.content_wrap_left > .contentWrap{
    padding-right: 0;
}
.box.content_wrap_right > .contentWrap{
    padding-left: 0;
}
.box .inside{
    width: 100%;
    box-sizing: border-box;
}
.box .inside > * {
    margin-top: 2rem;
}
.box .inside > *:first-child {
    margin-top: 0;
}
.box img{
    max-width: 100%;
}
.boxHeader h3 {
    margin: 0;
    padding: 0;
    color: #339999;
}
.boxHeader .iconWrap .icon.material,
.boxHeader .iconWrap .icon.awesome{
    font-size: 4rem;
}
.boxHeader .iconWrap .icon.custom{
    padding: 3rem;
}
.boxHeader .iconCover{
    margin-bottom: 2rem;
}

/* 2.1 Width
----------------------*/
.box {box-sizing: content-box;}
.box_w_1 {width: 100%;}
.box_w_12 {width: 50%;}
.box_w_13 {width: 33.3%;}
.box_w_23 {width: 66.6%;}
.box_w_14 {width: 25%;}
.box_w_34 {width: 75%;}

.stripe.align_wrapper_all .box_first, .stripe.align_wrapper_left .box_first {padding-left: 5%;}
.stripe.align_wrapper_all .box_last, .stripe.align_wrapper_right .box_last {padding-right: 5%;}

.stripe.align_wrapper_all .box_w_1 {width: calc( 100% - 10% );}
.stripe.align_wrapper_all .box_w_12 {width: calc( calc( 100% - 10% ) * 0.5 );}
.stripe.align_wrapper_all .box_w_13 {width: calc( calc( 100% - 10% ) * 0.3333333 );}
.stripe.align_wrapper_all .box_w_23 {width: calc( calc( 100% - 10% ) * 0.6666666 );}
.stripe.align_wrapper_all .box_w_14 {width: calc( calc( 100% - 10% ) * 0.25 );}
.stripe.align_wrapper_all .box_w_34 {width: calc( calc( 100% - 10% ) * 0.75 );}

.stripe.align_wrapper_left .box_w_1, .stripe.align_wrapper_right .box_w_1 {width: calc( 100% - 5% );}
.stripe.align_wrapper_left .box_w_12, .stripe.align_wrapper_right .box_w_12 {width: calc( calc( 100% - 5% ) * 0.5 );}
.stripe.align_wrapper_left .box_w_13, .stripe.align_wrapper_right .box_w_13 {width: calc( calc( 100% - 5% ) * 0.3333333 );}
.stripe.align_wrapper_left .box_w_23, .stripe.align_wrapper_right .box_w_23 {width: calc( calc( 100% - 5% ) * 0.6666666 );}
.stripe.align_wrapper_left .box_w_14, .stripe.align_wrapper_right .box_w_14 {width: calc( calc( 100% - 5% ) * 0.25 );}
.stripe.align_wrapper_left .box_w_34, .stripe.align_wrapper_right .box_w_34 {width: calc( calc( 100% - 5% ) * 0.75 );}

/* 2.2 Height
----------------------*/
.box_h_max{height: 45rem; overflow: hidden;}
.box_h_medium{height: 25rem; overflow: hidden;}
.box_h_min{height: 10rem; overflow: hidden;}

/* 2.3 Padding
----------------------*/
.box.padding_top_default{padding-top: 2rem;}
.box.padding_top_max{padding-top: 4rem;}
.box.padding_top_min{padding-top: 1rem;}
.box.padding_bottom_default{padding-bottom: 2rem;}
.box.padding_bottom_max{padding-bottom: 4rem;}
.box.padding_bottom_min{padding-bottom: 1rem;}

/* 2.4 Border
----------------------*/
.box.border_all{
    border-top: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
}
.box.border_top{border-top: 1px solid #d4d4d4;}
.box.border_bottom{border-bottom: 1px solid #d4d4d4;}

/* 2.5 Align
----------------------*/
.box.align_rule_center .boxHeader,
.box.align_rule_center .boxContent,
.box.align_title_center .boxHeader,
.box.align_subtitle_center .boxContent{
    text-align: center;
}
.box.align_rule_center .buttonsContainer,
.box.align_buttons_center .buttonsContainer{
    justify-content: center;
}
.box.align_rule_right .boxHeader,
.box.align_rule_right .boxContent,
.box.align_title_right .boxHeader,
.box.align_subtitle_right .boxContent{
    text-align: right;
}
.box.align_rule_right .buttonsContainer,
.box.align_buttons_right .buttonsContainer{
    justify-content: flex-end;
}
.box.align_rule_justify .boxContent{
    text-align: justify;
}
.box.vertical_align_middle{
    align-self: center;
}
.box.vertical_align_bottom{
    align-self: flex-end;
}

/* 2.6 Box Image / Video
----------------------*/
.boxContent .lightbox{
    position: relative;
    display: block;
}
.lightboxAction{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 4rem;
    height: 4rem;
    justify-content: center;
    align-items: center;
    border-radius: 4rem;
    transition: 0.5s ease;
    text-align: center;
}
.lightboxAction i{
    font-size: 1.5rem;
}
.lightboxAction,
.lightbox:hover .lightboxAction.dark{
    background: rgba(255,255,255,0.7);
    color: #000000;
}
.lightboxAction.dark,
.lightbox:hover .lightboxAction {
    background: rgba(0,0,0,0.7);
    color: #ffffff;
}

/* 2.7 Box Slide
----------------------*/
.boxSlider{
    position: relative;
}
.boxSlider .qsliderArrows{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 2;
    text-align: inherit;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 1%;
}
.boxSlider .qsliderArrows .qsliderPrev {
    left: -30px;
}
.boxSlider .qsliderArrows .qsliderNext {
    left: 30px;
}
.boxSlider .qsliderArrows i{
    font-size: 10rem;
    color: white;
    position: relative;
    opacity: 0.5rem;
}
.boxSlider .qsliderDots{
    position: absolute;
    z-index: 1;
    width: 100%;
    text-align: center;
    bottom: 1rem;
}
.boxSlider .qsliderDots li{
    margin: 0 0.3rem;
}
.boxSlider .slide{
    position: relative;
    min-height: 30rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.boxSlider .slide a.lightbox{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.boxSlider .slide .slideCaptionWrap{
    position: absolute;
    width: 100%;
    top: 4rem;
}
.boxSlider .slide .slideCaption .inside {
    width: 50%;
    background: rgba(255,255,255,0.6);
    padding: 2rem;
}

/*--------------------------------------------------------------
3.0 Responsive
--------------------------------------------------------------*/
.stripe_view_mobile{
    display: none;
}
@media all and (max-width: 1060px) {
    #stripeTextHeader h1 {
        padding: 0 1.5rem;
    }

}
@media all and (max-width: 768px) { 
        .box:not(.box_w_1){
        width: 100%!important;
/*        padding-left: 5%!important;
        padding-right: 5%!important;*/
        margin-top: 4rem;
    }
    .stripeBoxes .box:first-child{
        margin-top: 0;
    }
    .stripe_view_desktop{
        display: none;
    }
    .stripe_view_mobile{
        display: block;
    }
    
/*    #stripeHeader .boxText{
        padding-left: 5%;
    }
    #stripeHeader .boxSlider{
        padding-right: 5%;
    }*/
    #stripeHeader .boxText {
        position: absolute;
        z-index: 9;
        background: transparent;
        
    }
    #stripeHeader h1 {
        line-height: 65px;
    }
    #stripeSlogan {padding: 1rem 0;}
    #stripeSlogan h2 {font-size: 30px;}
    #stripeHeader .stripeHeaderBox{
        width: 100%;
    }
    #stripeSlogan {
        position: absolute;
        z-index: 9;
        bottom: 0;
    }
    #stripeButtons {
        max-width: 100%;
    }
    #stripeButtons .buttonsWrap{display: block; padding: 0 1.5rem;}
    #stripeButtons .stripeButton{
        width: 100%!important;
        max-width: 100%;
    }
    #stripeButtons .stripeButton:not(:last-of-type){
        margin-bottom: 30px;
    }
    #stripePartners .ruoloWrap {
        width: 100%;
        border-bottom: 0;
    }
}
@media all and (max-width: 480px) { 
    
    #stripePartners .ruoloWrap img{
        max-width: 100%;
    }
    #stripeHeader h1 {
        font-size: 36px;
        line-height: 46px;
    }
    #stripeSlogan h2 {
        font-size: 24px;
        line-height: 24px;
    }
}