@import url('components/header.css');
@import url('components/button.css');
@import url('components/footer.css');
@import url('components/configurator.css');

/* color theme  #00254A; */
.color_theme{
    color:#00254A;
}
.color_theme2{
    color:#00a5db;
}
/* FAQ */
.item-faq{
    width: 100%;
    display: flex;
    flex-direction: row;
}
.item-faq .title{
    position: relative;
    padding: 10px 42px 10px 15px;
    background: -moz-linear-gradient(0% 50% 0deg, rgba(242, 242, 242, 1) 1.1%, rgba(242, 242, 242, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(242, 242, 242, 1) 1.1%, rgba(242, 242, 242, 1) 100%);
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0.011, rgba(242, 242, 242, 1)), color-stop(1, rgba(242, 242, 242, 1)));
    background: -o-linear-gradient(0deg, rgba(242, 242, 242, 1) 1.1%, rgba(242, 242, 242, 1) 100%);
    background: -ms-linear-gradient(0deg, rgba(242, 242, 242, 1) 1.1%, rgba(242, 242, 242, 1) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#F2F2F2' ,GradientType=0)";
    background: linear-gradient(90deg, rgba(242, 242, 242, 1) 1.1%, rgba(242, 242, 242, 1) 100%);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#F2F2F2', GradientType=1);
    cursor: pointer;
    margin-top: 10px;
}
.item-faq .answer {
    font-weight: initial;
    padding: 10px 0px;
    display:none;
}
.item-faq .arrow {
    position: absolute;
    width: 20px;
    top: 4px;
    right: 10px;
    font-size: 18px;
}
/* FAQ */

/* components */
#BgPoppup{
    position:fixed;
	left:0;
	top:0;
	z-index:900;
	display:none;
	width:100%;
	cursor:pointer;
	height:100%;
    background-color: rgba(0, 0, 0, 0.424);
}
#waitBgPop{
	position: fixed;
	top:50%;
	left:50%;
	padding:40px;
	transform: translate(-50%, -50%);
	text-align:center;
	border-radius:10px;
}
#gotop{
	position: fixed;
	bottom: 40px;
	z-index: 800;
	padding: 2px;
	cursor: pointer;
	width: 40px;
	height: 40px;
	right: 30px;
	text-align:center;
	color:#00254A;
	display:none;
	border:solid 1px #CCC;
	background-color:#FFF;
}
H1, H2, H3{
    width:100%;
    font-style: normal;
    font-weight: 700;
    font-size: calc(4rem / 1.2);
    align-items: center;
    text-align: center;
    letter-spacing: 1px;
    color: #162351;
    margin:40px 0 0 0;
}
H3{
    text-align: left;
    font-size: calc(3rem / 1.2);
    line-height: 30px;
}
.hHook, .item-try-it{
    font-weight: 700;
    font-size: 20px;
    align-items: center;
    text-align: center;
    letter-spacing: 1px;
    margin-bottom:80px;
    color: #666655;
}
.item-header-h{
    width: fit-content;
    color: #FFF;
    text-align: left;
    padding:15px;
    margin-top: 65px;
    top:0;
    font-size: calc(4rem / 1);
}
.item-header-h > .color{
    color:#59d9fb;
}
.cell-widget{
    position: relative;
    color:#FFF;
    width:100%;
    min-height: 347px;
    border-radius: 20px;
    background: linear-gradient(250.01deg, #42A5CF 11.89%, #032A79 62.95%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.cell-widget.item-lg{
    min-height: 380px;
}
.cell-widget .item-title{
    color:#FFF;
    margin:0;
    line-height: 30px;
}
.cell-widget .item-text{
    margin-top:30px;
    font-size:14px;
}
.bg-FFF0C8{
    background:#FFF0C8;
}
.bg-e7fdd8{
    background:#e7fdd8;
}
.bg-E5FAFF{
    background:#E5FAFF;
}
.text-widget{
    width:100%;
    margin-top: 40px;
    font-size: 14px;
    line-height: 29px;
    letter-spacing: 0.35px;
    color: #00254A;
}
.widgetOHi{
    overflow: hidden;
    position: relative;
}
.psTb{
    position: absolute;
    right:0;
    bottom:0;
}
section{
    margin-top:40px;
}
.item-iddle{
    position: absolute;
    bottom: -12px;
    left: 50%;
    display: flex;
    transform: translateX(-50%);
}
.curve-theme{
    background-size: cover;
    background-position:center bottom;
    background-repeat: no-repeat;
    background-image:url('../../images/defaults/bgCurveTheme.svg');
}
#grounds{
    margin-top:0px;
}
.item-explain{
    padding-top:60px;
    width:100%;
    min-height:500px;
    font-size:12px;
    background-image: url('../../images/defaults/bgCurveTheme.svg');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}
.item-explain .title{
    width:100%;
    text-align: center;
    font-size: calc(4rem / 1.2);
}
.item-explain .fa-check{
    color:#0faad3;
    margin-right:5px;
}
.item-explain .item-column{
    padding:20px;
}
.item-explain .item-included{
    color:#7991B0;
    margin-top: 10px;
}
.item-note{
    position: absolute;
    left:50%;
    bottom:35px;
    transform: translateX(-50%);
}
.note, .stars{
    font-weight:600;
    width:100%;
    text-align:center;
    font-size: calc(0.8em /1);
}

#grounds .pic-grounds{
    max-height: 300px;
}

.item-content{
    position: relative;
    display: flex;
    margin-top: 80px;
    justify-content: space-between;
}
.item-content > .item-column{
    position: relative;
    width: calc(100% / 2);
    padding: 0 15px;
}
.svg-flex-end{
    display:flex;
    justify-content: end;
    align-items: end;
}
/* components */

/* slider */
.slider{
    width:100%;
    position: relative;
    min-height:500px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
}
.slider .item-slider{
    height: inherit;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
.slider .item-wrapped{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* slider */

/* carroussel raison */
.item-crsl{
    width:100%!important;
    max-height:212px;
}
.crlCntH{
    padding:0 7.5px;
}
.crlBoxHome {
    padding: 15px;
    min-height:210px;
    width: 100%;
    white-space: initial;
    color: #FFF;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
.picBoxCrl {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-color: #FFF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 10px;
}
.blueBoxW {
    background: -moz-linear-gradient(8.15% 106.46% 45deg, rgb(1 40 120) 15.91%, rgb(67 169 210) 100%);
    background: -webkit-linear-gradient(45deg, rgb(1 40 120) 15.91%, rgb(67 169 210) 100%);
    background: -webkit-gradient(linear, 8.15% 106.46%, 91.85% -6.46%, color-stop(0.1591, rgba(2, 3, 3, 1)), color-stop(1, rgba(0, 105, 170, 1)));
    background: -o-linear-gradient(45deg, rgb(1 40 120) 15.91%, rgb(67 169 210) 100%);
    background: -ms-linear-gradient(45deg, rgb(1 40 120) 15.91%, rgb(67 169 210) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#020303', endColorstr='#0069AA' ,GradientType=0)";
    background: linear-gradient(45deg, rgb(1 40 120) 15.91%, rgb(67 169 210) 100%);
}
/* carroussel raison */

/* stepper */
.stepper{
    display: flex;
    justify-content: center;
    align-items: center;
}
.stepper > .circle-step{
    height:20px;
    width:20px;
    border-radius:50%;
    background-color:#D9D9D9;
}
.stepper > .circle-step.done, .stepper > .line-step.done{
    background-color:#00a5db;
}
.stepper > .line-step{
    background-color:#D9D9D9;
    height:4px;
    width:50px;
    margin:4px 0px;
}
/* stepper */

/* load box */
.load_bg, .load_bg.active {
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: load_bg_animation;
	animation-timing-function: linear;
	background: #f6f7f8;
	background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
	background-size: 800px 104px;
	position: relative;
	width: 100%;
	min-height: 20px;
	border-radius: 4px;
 }
 
 
 @keyframes load_bg_animation{
	0%{background-position:-468px 0}
	100%{background-position:468px 0}
 }
 
 
 .load_bg.big {
	height: inherit;
 }
/* load box */

/* coookie */
.cookie_window{
	position: fixed;
    left: 30px;
    bottom: 50px;
    height: auto;
    border-radius: 8px;
    width: 350px;
    background-color: #FFF;
    font-size: 14px;
    color: #665;
    box-shadow: 0px 0px 5px #665;
    z-index: 1900;
	display: none;
}
.logoCookie{
	position: absolute;
    right: 10px;
    top: 10px;
}
.Pl_cookie{
    float:left;
    width:100%;
    height:auto;
    max-height: 180px;
    padding:10px;
}
.loveCookie{
	font-family: sans-serif;
    font-size: 20px;
}
.button_Pl_cookie, .lBtn_cookie, .rBtn_cookie{
	float:left;
	width:50%;
	padding:10px 0px;
	color:#000;
	border-left:solid 1px #CCC;
	border-top:solid 1px #CCC;
	font-size: 14px;
	text-align: center;
	cursor:pointer;
}
.lBtn_cookie{
	border-radius: 0px 0px 0px 8px;
}
.rBtn_cookie{
	border-radius: 0px 0px 8px 0px;
}
.button_Pl_cookie:hover, .lBtn_cookie:hover, .rBtn_cookie:hover{
	color:#FFF;
    background: -moz-linear-gradient(7.51% 107.77% 45deg, #002676 0%, rgb(68 171 211) 100%);
    background: -webkit-linear-gradient(45deg, #002676 0%, rgb(68 171 211) 100%);
    background: -o-linear-gradient(45deg, #002676 0%, rgb(68 171 211) 100%);
    background: -ms-linear-gradient(45deg, #002676 0%, rgb(68 171 211) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#020303', endColorstr='#1B2438' ,GradientType=0)";
    background: linear-gradient(45deg, #002676 0%, rgb(68 171 211) 100%);
}
/* cookie */

.form-control{
    border-radius: 8px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: solid 4px #E4E4E4;
    height:40px;
}

/* alert */
.alert-success, .alert-danger{
    text-align: center;
    padding: 8px 15px;
    border-radius: 10px;
}
.alert-success{
    border: solid 2px #c0d9a9;
}
.alert-danger{
    border: solid 2px #d0716f;
}
/* alert */

/**  * * * * * * * *  media * * * * * * * * **/

@media only screen and (max-width: 1023px){
    .item-header-h {
        font-size: calc(3rem / 1);
    }
    .item-explain {
        padding-top: 30px;
        min-height:400px;
    }
    .hHook{
        margin-bottom:40px;
    }
}
@media only screen and (max-width: 767px){
    #header{
        padding:0;
    }
    .breadcrumb {
        font-size: 12px;
    }
    .item-content{
        margin-top: 30px;
        border-radius: 20px;
        padding-bottom: 20px;
    }
    .item-content.item-bg-green{
        background:#e7fdd8;
    }
    .item-content.item-bg-blue{
        background:#E5FAFF;
    }
    .item-content.item-bg-white{
        background:#FFF;
    }
    .item-content.item-bg-brown{
        background:#FFF0C8;
    }
    .item-content, .slider .item-slider{
        display: table;
    }
    .item-content > .item-column {
        width: 100%;
    }
    .item-img-screen {
        height: 60%;
        max-height: 300px;
        max-width: 100%;
    }
    .item-header-h{
        margin-top:20px;
        text-align: center;
        width: initial;
        font-size: calc(3rem / 1);
        line-height: 40px;
    }

    H2{
        font-size:24px;
        margin-top: 20px;
    }
    H3{
        font-size:20px;
    }
    H3.item-cast{
        position: absolute;
        top: 5px;
        left: 0;
        z-index: 60;
        text-align:center;
        margin:0;
    }
    H3.item-cast.item-green{
        color: #104E06;
    }
    H3.item-cast.item-brown{
        color: #967923;
    }

    .hHook {
        margin:0;
        font-size:14px;
        color:#162351;
    }
    .item-column .cell-widget{
        min-height: initial;
    }
    .text-widget{
        text-align: justify;
        margin:20px 0;
        color:#00254A;
    }
    .item-column .cell-widget.widgetOHi{
        min-height: 236px;
    }

    .crlCntH{
        max-width: 260px;
    }

    .item-faq{
        margin: 30px 0;
        flex-direction: column;
    }
    .item-try-it{
        margin-top:30px;
        font-size: 20px;
    }
    .item-explain{
        padding-top:0;
        min-height:initial;
    }
    .item-explain .title{
        font-size:22px;
        font-weight:600;
    }
    .item-explain .item-column{
        padding:0 5px;
    }
    #grounds{
        margin-top:30px;
    }
    #grounds .pic-grounds{
        max-height: 196px;
    }
    #grounds .item-text{
        text-align: justify;
        line-height: 29px;
        margin-top:50px;
        color: #00254A;
    }

    /* configurator mob */
    /* configurator mob */
}