/*
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

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

/*--------------------------------------------------------------
1.0 Stripe
--------------------------------------------------------------*/
.stripe{
    position: relative;
    padding: 3rem 0;
    z-index: 1;
}
.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;
}
.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;}
.background_image.background_parallax_1 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* 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;
}
.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 i{
    font-size: 3rem;
}
.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: 1024px) {
    .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;
    }
}
@media all and (max-width: 768px) { }
@media all and (max-width: 480px) { }