/*
orange for use on light background: #ff6700
orange for use on dark background: #ff8327
teals/teal-greys/teal-blacks: #2a3838, #1e2828, #607271, #3d7574
*/



/* general styles */
html,body{
	margin:0; background-color:#fff; color:#2a3838;
	font-family: 'Roboto', 'Open Sans', Arial; sans-serif; font-weight:500; font-size:15px; line-height:1.55em;
	text-rendering: optimizeLegibility;
	}
@media only screen and (min-width:480px){
html,body{ font-size:18px }
}
.orange_btn{
    font-family: 'Roboto'; font-weight:700; font-size:.92rem; letter-spacing:.05em; text-transform:uppercase; text-decoration:none;
    color:#fff; background:#ff6700; padding:.85rem 3rem; border-radius:9px; display:inline-block
}





/* header */
.abovehomehero{ /*this one is to set the background gradient that continues into home hero blue background (#f7fbfc) */
    background-image: linear-gradient(#fff, #f7fbfc)
}
.header{ padding:2rem; text-align:center }
.header a.logo{ display:block; padding:2rem 5rem }
.header span{ display:inline-block; padding:.5rem 2rem; font-size:1.1em }
.header a{ display:inline-block; padding:.5rem 2rem; text-decoration:none; font-size:1.1em }
.header a:hover, .header a:focus{ color:#3d7574; text-decoration:underline }
.header a.ftrs{ text-transform:uppercase; display:block }
.header .icon_phone{ padding-left:2.7rem; margin-left:1rem; background: url(/images/icon_phone.svg) no-repeat center left }
.header .icon_login{ padding-left:2.8rem; margin-left:1rem; background: url(/images/icon_login.svg) no-repeat center left }
@media only screen and (min-width:800px){
    .header a.ftrs{ display:inline-block }
}
@media only screen and (min-width:1000px){
    .header{ text-align:left; padding:2rem 0 }
    .header a.logo{ display:inline-block; padding:0 2rem; position:relative; top:12px; margin-right:15% }
    .header .icon_login{ padding-right:1rem }
}
@media only screen and (min-width:1200px){
    .header{ padding:0; max-width:1220px; margin:0 auto }
    .header a.logo{ padding:1rem 2rem 3.5rem 0; margin-right:400px }
}






/* Home page, hero section */
.hero-home{ background:#f7fbfc; overflow:auto; width:90%; padding:5%; text-align:center }
.hero-home h1{ font-family: 'Prompt'; font-weight:700; font-style:italic; color:#ff6700; font-size:2.2rem; line-height:1.25em }
.hero-home h1 span{ color:#588ba5; font-size:1.5rem; display:block }
#hero-h-imaged{
    padding-bottom:88%; background: url(/images/carivee_banner.svg) no-repeat bottom center; background-size:contain;
    font-family: 'Prompt'; font-weight:700; color:#4188a3; font-size:1.25rem; text-transform:uppercase
}
.hero-home .greyi{ font-family: 'Prompt'; font-weight:700; font-style:italic; color:#495655; font-size:.95rem; text-transform:uppercase }
.hero-home > .orange_btn{ margin:2rem 2rem 3.5rem 2rem }
@media only screen and (min-width:1250px){
    .hero-home{ padding:2rem 5% }
    .hero-home > *{ max-width:1050px; margin:0 auto }
    .hero-home > #hero-h-imaged{ margin-top:3rem; padding-top:33%; padding-bottom:1rem; background: url(/images/carivee_banner_large.svg) no-repeat top center; background-size:contain }
    .hero-home h1{ font-size:2.33rem; line-height:1.5em }
    .hero-home h1 span{ font-size:1.9rem }
}
@media only screen and (min-width:1400px){
    .hero-home > #hero-h-imaged{ padding-top:28%; padding-bottom:2rem }
}
@media only screen and (min-width:1600px){
    .hero-home > #hero-h-imaged{ padding-top:350px }
}





/* Features page */
.features{ background-color:transparent; position:relative; z-index:1; width:100%; overflow: auto }
.features h1{ color:#fff; font-family: 'Prompt'; font-weight:700; font-size:1.1rem; text-transform:uppercase; text-align:center; margin:8rem 2rem 7rem 2rem; line-height:1.5em }
.features:before{
    background:#4b8ea8 url(/images/blueshadow.svg) no-repeat top left; background-size:100%;
    position:absolute; z-index:1; content:''; display:block; top:0; left:0; right:0; min-height:500px }
.features:after{
    position:absolute; z-index:2; content:''; top:0; left:0; right:0; height:100%;
    background:transparent url(/images/chatbubbles.svg) no-repeat top center; background-size:100%;
}
.features>*{ position:relative; z-index:3 }
.features .features_white{ overflow:auto; background:#fff; box-shadow:-3px 5px 10px rgba(42,56,56,.2); max-width:1450px; padding:1rem; margin:0 1rem }
.features .features_white h2{ color:#5d7b84; font-family: 'Prompt'; font-weight:700; font-style:italic; font-size:1.35rem; margin:5rem 8%; padding-left:1.9rem }

.features .features_tbl{ margin:2rem 2% 3.5rem 2%; padding:0; border-spacing:0 .5rem; width:92% }
.features .features_tbl tbody{ margin:0; padding:0 }
.features .features_tbl th{ text-align:left; padding-bottom:1.15rem }
.features .features_tbl th.th-title{ color:#4188a3; font-family: 'Prompt'; font-weight:700; font-size:1.22rem; text-transform:uppercase; letter-spacing:.08em; padding:0 1rem 1.15rem 0 }
.features .features_tbl th:nth-child(2){ color:#448251 }
.features .features_tbl th:nth-child(3){ color:#ff6700 }
.features .features_tbl th:nth-child(2), .features .features_tbl th:nth-child(3){
    font-family: 'Prompt'; font-weight:700; font-style:italic; font-size:1.22rem
}
.features .features_tbl tr:nth-child(odd){ background:#f2f2f2 }
.features .features_tbl thead tr:nth-child(odd){ background:transparent }
.features .features_tbl td{ padding:1rem 0 }

.features .helptip{
    position:relative; display:inline-block; width:1.8rem; height:1.8rem; border-radius:1.8rem; background:#859997; color:#fff; cursor:pointer
}
.features .helptip > b{ /* question mark */
    position:relative; left:.65rem; top:.1rem
}
.features .helptip > span{ /* actual help tip */
    position:absolute; top:-5px; left:1rem; display:none; background:#4d6662; color:#fff; min-width:250px; padding:.5rem .5rem .5rem 1.5rem; box-shadow:1px 1px 5px #4d6662; font-size:.9rem; z-index:1975
}
.features .helptip:hover > span{
    display:inline-block
}
.features .helptip > span:before{ /* triangle */
    position:absolute; top:8px; left:-15px; display:block; width:0; height:0; content:'';
    border-top:15px solid transparent; border-bottom:15px solid transparent; border-right:20px solid #4d6662
}

@media only screen and (min-width:750px){
    .features .features_white{ margin:0 2rem }
    .features:before{ min-height:850px }
    .features h1{ font-size:1.15rem; margin:9rem 2rem 8rem 2rem; line-height:1.55em }
    
    .features .features_tbl{ margin:2rem 8% 5rem 8%; padding:0; border-spacing:0 .8rem; width:84% }
    .features .features_tbl td span{ margin:0 1.9rem }
    .features .features_tbl th.th-title{ padding:0 1rem 1.15rem 1.9rem }
    .features .features_tbl td{ min-width:7rem }
}
@media only screen and (min-width:1550px){
    .features .features_white{ padding:25px; margin:0 auto }
    .features:before{ min-height:1300px }
    .features h1{ font-size:1.25rem; margin:10.5rem 28% 9.5rem 28%; line-height:1.8em }
}








/* Home page features blue section */

.arrow-links {text-decoration: none; font-family: 'Roboto'; font-weight: 800; font-size: 1.3rem; color:#fff; display:flex }
.arrow-links::after {  display: flex; align-items: center; content: url(/images/link-arrow.svg); padding-left: 1.1rem;}
.align-right {margin-left: 2.53rem; margin-top: 3rem;}

.list-column { display: flex; justify-content: center; flex-direction: column; list-style-type: none; }
.list-column-item { display:flex; align-items: center; padding-bottom: 10%; flex-wrap: wrap;}
.list-column-item > h4 {font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 0;}
.list-column-item::before { content:''; background: url('/images/checkmark.png') center center no-repeat; display: flex; width: 1.7rem; height: 1.7rem; margin-right: 0.83rem; }
.break { flex-basis: 100%; height: 0; padding-left: 2.5rem; }
.row {padding-bottom: 5rem;}

.section-1 {font-family: 'Prompt'; font-weight:500; color:#fff; font-size:2rem; line-height:1.55em; display: flex; flex-direction: column; background: rgb(65,136,163); background: linear-gradient(147deg, #4188a3 50%, #4a8ea7 50%); min-height: 500px;}
.section-1 > div:first-child {margin: 6% auto;}
.section-1 > .row {display: flex; flex-direction: row; font-family: 'Roboto', sans-serif; font-weight:500; font-size:1.17rem; line-height:1.55em; color: #e6f2f4; }
.section-1 > .row > div:first-child { margin-top: 4%; padding-left: 5%; padding-right: 1%;}
.section-1 > .row > div > img { width: 90%; }

.section-2 {background: #8291a3; text-align: center; padding:1rem 0; color: #fff; font-family: 'Roboto'; font-weight:700; font-size: 1.2rem; margin-top:2px; letter-spacing: 0.1rem;}

@media only screen and (min-width:320px){
    .arrow-links::after {  display: flex; align-items: center; content: url(/images/link-arrow-small.png); padding-left: 1.1rem;}
    
    .section-1 > div:first-child {
            text-align: center;
            /* Jasna adding this to keep content within 1220px width */    margin: 6% auto;    max-width: 1220px;
    }
    
    .section-1 > .row { flex-direction: column; }
    .list-column-item::before { content:''; background: url('/images/checkmark_small.png') center center no-repeat; display: flex; width: 1.7rem; height: 1.7rem; margin-right: 0.83rem; }
    .align-right { margin-left: 4.53rem; }
    .section-1 > .row > div:nth-child(2) { padding-left: 2rem; }
    .section-2 { padding: 2.5rem 2rem; font-size: 1.2rem; line-height: 2rem; }    
}

@media only screen and (min-width:480px){
    .arrow-links::after {  display: flex; align-items: center; content: url(/images/link-arrow.svg); padding-left: 1.1rem;}
    .list-column-item::before { content:''; background: url('/images/checkmark.png') center center no-repeat; display: flex; width: 1.7rem; height: 1.7rem; margin-right: 0.83rem; }
    .align-right {margin-left: 2.53rem;}
    .section-1 > .row > div:nth-child(2) { padding-left: 2rem; }
    .section-2 { padding: 2.5rem 4rem; font-size: 1.2rem; line-height: 2rem; }    
}

@media only screen and (min-width:800px){
    .section-1 > .row { flex-direction: column; }
    .section-1 > .row > div:nth-child(2) { padding-left: 4rem; }
    .section-2 { padding:1.5rem 9rem; font-size:1.15rem; line-height: 2rem; }
}

@media only screen and (min-width:1000px){
    .section-1 > .row {
        flex-direction: row;
        /* Jasna adding this to keep content within 1220px width */    max-width: 1220px; margin: 0 auto;
    }
    
    .section-1 > .row > div:nth-child(2) { padding-left: 0rem; }
    .section-1 > .row > div:first-child { width: 62%; }   
}
@media only screen and (min-width:1200px){
    .section-1 > .row { flex-direction: row; }    
}

@media only screen and (min-width:1400px){
    .section-1 > .row { flex-direction: row; }    
}

@media only screen and (min-width:1600px){
    .section-1 > .row { flex-direction: row; }    
}

@media only screen and (min-width:1750px){
    .section-1 > .row { flex-direction: row; }    
}