/*---------------RESET----------------*/

html.active-menu .grecaptcha-badge,
html.active-menu  #cookie-bar{
    display: none !important;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline;    outline: none;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {    line-height: 1;overflow-x: hidden; position: relative;}
ol, ul {    list-style: none;}
blockquote, q {    quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {    content: '';    content: none;}
table {    border-collapse: collapse;    border-spacing: 0;}
a{cursor: pointer}
*::after, *::before {
    box-sizing: border-box;
}

/*---------------RESET ENDS----------------*/
/* *********************************************************************************************************************
 * Main container for all
 */
.wrapper {    max-width: 96%;    margin: 0 auto;    padding: 0 1%;}
.row {    clear: both;    padding: 0 10px; margin:0 -15px;}
.container{    width:100%;}
/* *********************************************************************************************************************
 * Common columns definitions
 */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
    float: left;    margin: 0 3% 0 0; box-sizing: border-box;
}
.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
    margin: 0;
}
.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0;}

.col-md-1{ width:8.33%; }
.col-md-2{ width:16.66%;}
.col-md-3{ width:25%;}
.col-md-4{ width:33.33%;}

.col-md-5{ width:41.6667%;}
.col-md-6{ width:50%;}
.col-md-7{ width:58.3333%;}
.col-md-8{ width:66.6667%;}

.col-md-9{ width:75%;}
.col-md-10{ width:83.3333%;}
.col-md-11{ width:91.6667%;}
.col-md-12{ width:100%;}
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
    float: left;
    box-sizing: border-box;
    padding: 0 15px;
}

.col-md-offset-6{ margin-left: 50%;}

/*--------------- GENERAL SETTINGS----------------*/
.clear{clear:both;}
.right{float: right;}
.left{float: left;}
.text-left{ text-align: left;}
.text-center{ text-align: center;}
.text-right{ text-align: right;}
.hidden{display: none !important;}
.p_relative {  position: relative;}
.v-height20{ display: block; height: 20px}
.v-height10{ display: block; height: 10px}
.helper {    display: inline-block;    height: 100%;   vertical-align: middle;}
i { font-style: italic; }
/*--------------- GENERAL SETTINGS ENDS----------------*/
/*--------------- FONT STEEINGS----------------*/
@font-face {
    font-family: 'merriweather';
    src: url('../fonts/merriweather/Merriweather-Light.eot');
    src: url('../fonts/merriweather/Merriweather-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/merriweather/Merriweather-Light.woff') format('woff'),
        url('../fonts/merriweather/Merriweather-Light.ttf') format('truetype'),
        url('../fonts/merriweather/Merriweather-Light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'neris-light';
    src: url('../fonts/neris/Neris-Light-webfont.svg') format('svg'),url('../fonts/neris/Neris-Light-webfont.eot')format('embedded-opentype'),
        url('../fonts/neris/Neris-Light-webfont.woff') format('woff'),url('../fonts/neris/Neris-Light-webfont.ttf') format('truetype');
}
@font-face {
    font-family: 'neris-black';
    src: url('../fonts/neris/neris-black/Neris-Black-webfont.eot');
    src: url('../fonts/neris/neris-black/Neris-Black-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/neris/neris-black/Neris-Black-webfont.woff') format('woff'),
        url('../fonts/neris/neris-black/Neris-Black-webfont.ttf') format('truetype'),
        url('../fonts/neris/neris-black/Neris-Black-webfont.svg#nerisblack') format('svg');
}
@font-face {
    font-family: 'neris-semibold';
    src: url('../fonts/neris/neris-semi-bold/Neris-SemiBold-webfont.eot');
    src: url('../fonts/neris/neris-semi-bold/Neris-SemiBold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/neris/neris-semi-bold/Neris-SemiBold-webfont.woff') format('woff'),
        url('../fonts/neris/neris-semi-bold/Neris-SemiBold-webfont.ttf') format('truetype'),
        url('../fonts/neris/neris-semi-bold/Neris-SemiBold-webfont.svg') format('svg');
}
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gotham/ufonts.com_gotham_extralight.eot') format('embedded-opentype'),
        url('../fonts/gotham/ufonts.com_gotham-extralight.woff') format('woff'),  url('../fonts/gotham/ufonts.com_gotham-extralight.woff2') format('woff'),
        url('../fonts/gotham/ufonts.com_gotham-extralight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'neris-thin';
    src: url('../fonts/neris/Neris-Thin-webfont.svg') format('svg'),url('../fonts/neris/Neris-Thin-webfont.ttf')format('truetype'),
        url('../fonts/neris/Neris-Thin-webfont.eot')format('embedded-opentype'),url('../fonts/neris/neris.thin.otf')format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Vani';
    src: url('../fonts/Vani.eot');
    src: url('../fonts/vani/Vani.eot') format('embedded-opentype'),
        url('../fonts/vani/Vani.woff') format('woff'),
        url('../fonts/vani/Vani.ttf') format('truetype');
}
@font-face {
    font-family: 'GothamRounded-Medium';
    src: url('../fonts/gotham-rounded/GothamRounded-Medium.eot') format('embedded-opentype'),
        url('../fonts/gotham-rounded/GothamRounded-Medium.ttf') format('truetype'),
        url('../fonts/gotham-rounded/GothamRounded-Medium.woff')format('woff'),
        url('../fonts/gotham-rounded/GothamRounded-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GothamRounded-book';
    src: url('../fonts/gotham-rounded-book/gotham-rounded-book.otf') format('opentype');
    src: url('../fonts/gotham-rounded-book/gotham-rounded-book.ttf') format('truetype'),
        url('../fonts/gotham-rounded-book/gotham-rounded-book.woff') format('woff'),
        url('../fonts/gotham-rounded-book/gotham-rounded-book.eot') format('embedded-opentype'),
        url('../fonts/gotham-rounded-book/gotham-rounded-book.svg') format('svg');
}
.f-vani{font-family: 'Vani';}
.f-meriwethr{font-family: 'merriweather'}
.f-nrslight{font-family: 'neris-light'}
.f-nrsblack{font-family:'neris-black'}
.f-nrssemibld{font-family:'neris-semibold'}
.f-nrsthin{font-family: 'neris-thin'!important;}
.f-gothm{font-family:'Gotham'}
.f-Gothm{font-family:'Gotham'}
.f-gothm-r{font-family:'GothamRounded-Medium'!important;}
.f-gothm-b{font-family:'GothamRounded-book'!important}
.ff-p{font-family: 'Poppins', sans-serif;} 
/*---------------FONT SIZE SETTINGS ----------------*/
h1{font-size: 3.419em;}
h2{font-size: 2.804em}
h3 {  font-size: 2.616em;}
h4 {  font-size: 1.833em;}
h5 {  font-size: 2.059em;}
h6 {  font-size: 1.9em;}
a {
    color: #135F95;
    cursor: pointer;
    text-decoration: none;
}
.thick {  font-family: neris-black;  font-weight: 400;  }
.thick-white {  color: #ffffff;  font-family:neris-semibold;  font-weight: 400;}
.normal-plus{font-weight:600}
.normal{font-weight:400}
.thin{font-weight:100;}
.f-small{font-size: 0.8em}
.f-small-2{font-size: 0.7em}
.text-10{ font-size:10px !important; }
.text-15{ font-size:15px !important; }
.text-16{ font-size:16px !important; }
.text-20{ font-size:20px !important; }
.text-19{ font-size:19px !important; }
.text-22{ font-size:22px !important; }
.text-25{ font-size:25px !important; }
.text-28{ font-size:28px !important; }
.text-30{ font-size:30px !important; }
.text-35{ font-size:35px !important; }
.text-45{ font-size:45px !important; }
.word-pre{ white-space:pre;}
/*---------------FONT COLOR SETTINGS ----------------*/
.lgt-blue{color: #33ccff;}
.blue{color:#1c9ee4;}
.orange{color:#ffc64a;}
.black{color:#000;}
.white{color:#fff;}
.darkorange{color: #ff7200;}
.darkgrey{color: #424242}
.grey{color: #948d8d}
.grey2{color: #7a7a7a}
.violet{color: #ba77a8}
.green{color: #0c5e80;}
.dark-lime-green{ color: #8fce41; }
.light-green{ color: #14964a;}
.darkblue{color:#0c5e80;}
.froly{color:#ef3f37;}
.pink{color:#D0656D;}
.dark-pink{color:#c5163f;}
.lgt-pink{color: #ea7781}
.ps-blue{color: #1d7cbd}
.red{color: #ee2019  !important}
.odoo-pink{color: #ba77a8}
.ic-blue{color: #2b9cd1}
.ic-yellow{color: #f8be20}
.ic-red{color: #d2656d}
.yellow{
    color: #ffaf04;
}
/*---------------BACKGROUND COLOR SETTINGS ----------------*/
.bg-grey{background-color: gray;}
.bg-black{background-color: #000; }
.bg-white{background-color: #fff;}
.bg-drkgrey{background-color: #333333;}
.bg-lgtgrey{background-color: #f7f7f7;}
.bg-light-orange{background-color:#f8b337;}
.bg-light-orange { background-color:#f8e89a;}
.bg-light-yellow { background-color: #f8e89a;}
.bg-blue{ background-color:#5c97bf;}
.bg-orange{ background:#EC9633;}
.bg-dark-orange{ background:#CE5E14;}
.bg-blue{ background:#6399D9;}
.bg-dark-blue{ background:#4184B1;}
.bg-pink{ background-color:#c5163f;}
.bg-light-pink{ background-color:#D0656D; }
.bg-br-blue {  background-color: #2b9cd1 !important;}
.bg-magenta{background-color:#84132e;}
.bg-orange2{background-color:#eb9532;}
.bg-lgt-blue{background-color: #ebf1f2;}
.bg-darkyellow{background-color: #e6b03b;}
.bg-yellow { background-color: #ebb633 !important;}
.bg-geraldine{ background-color: #fd8c81;}
.bg-darkpink{background-color: #d2656d;}
.bg-darkblue{background-color: #3f83b1;}
.bg-pictionblue{ background-color: #28b6e4;}
.bg-jgreen{ background-color: #28bdc3;}
.bg-green{ background-color: #3c717d;}
.bg-darkblue{ background-color: #1d7cbe;}
.bg-brown{ background-color: #d18745;}
.bg-light-grey1{ background-color: #BEBEBE;}
.bg-light-grey2{ background-color: #EFEFEF;}
.bg-light-grey3{ background-color: #dadada;}
.bg-lightgreen{ background-color: #d8e08e;}
.bg-lightblue{ background-color: #8ec5d0;}
.bg-lightrose{ background-color: #dea0a0;}

/*---------------BACKGROUND image SETTINGS ----------------*/
.bg-dot{
    background: url(../images/dot-bg.jpg);
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
}
.bg-transparent1{
    background-image: url(../images/transparent1.png);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-transparent3{
    background-image: url(../images/transparent3.png);
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-gray-connect{
    background-image: url(../images/bg-grey-connect.jpg);
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-support{
    background-image: url(../images/bg-support.jpg);
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-mac{
    background-image: url(../images/bg-mac.jpg);
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-java{
    background-image: url(../images/bg-java.jpg);
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
}
/*---------------BORDER COLOR SETTINGS ----------------*/
.brdr-darkgreen{ border-color: #336e7b!important;}
.brdr-yellow1{ border-color: #ffc64a!important;}
.brdr-gerald{ border-color: #f2766a!important;}
.brdr-blue1{ border-color: #4084b1!important;}
.brdr-red{border-left:4px solid #d70e07 !important;}
.brdr-orange{border-left:4px solid #eb9532 !important;}
.brdr-yellow{border-left:4px solid #ebb633 !important;}
.brdr-blue{border-left:4px solid #4084b1 !important;}
.brdr-green{border-left:4px solid #336e7b !important;}
.brdr-green2{border-left:4px solid #3999ae !important;}
.brdr-b-pink{ border-top: 6px solid #c5163f;}
.brdr-b-blue {  border-top: 6px solid #2b9cd1;}
.brdr-b-yellowt {  border-top: 6px solid #ebb633;}

.brdr-bot-violet{border-bottom: 4px solid #BA77A8 !important;}
.brdr-bot-blue{border-bottom:4px solid #2B9CD1 !important;}
.brdr-bot-yellow{border-bottom:4px solid #F8BE20 !important;}
.brdr-bot-red{border-bottom:4px solid #D2656D !important;}
.brdr-bot-orange{border-bottom:4px solid #FF6600 !important;}
.brdr-bot-light-blue{ border-bottom:4px solid #6399D9!important; }
.brdr-bot-dark-blue{ border-bottom:4px solid #009BBD !important;}
.brdr-bot-light-yellow{ border-bottom:4px solid #FFC64A !important; }

.border-t{ border-top: 4px solid}
.bb-0{ border-bottom:0px !important; }
.w100{width: 100% !important;}


.gray-border{ border: 1px solid #ddd}
.padding-0{ padding: 0 !important;}
.padding-20{ padding: 20px;}
.padding-10{ padding: 10px;}
.padding-lg{ padding: 100px 0;}
.padding-sm{ padding: 50px 0!important;}

.padding-b-0{ padding-bottom: 0 !important;}
.padding-t-0{ padding-top: 0 !important;}
.padding-r-0{ padding-right: 0 !important;}
.padding-l-0{ padding-left: 0 !important;}

.py1{
    padding-top: 15px;
    padding-bottom: 15px;
}
.px1{
    padding-left: 15px;
    padding-right: 15px;
}
.px2{
    padding-left: 2vw;
    padding-right:2vw;
}
.px4{
    padding-left: 4vw;
    padding-right: 4vw;
}
.m-top-0{ margin-top: 0 !important;}
.margin-20{ margin: 20px;}
.margin-10{ margin: 10px;}
.margin-0{ margin: 0 !important;}
.list-style2 li {font-family: arial;    padding: 5px 0;}
.mt-20{ margin-top:20px;}
.mt-50{ margin-top:50px;}
.mb-20{ margin-bottom:20px;}
.mb-50{ margin-bottom:50px;}
.ml-auto{ margin-left:auto; }
.text-center {    text-align: center;}
.lh-2{ line-height:2; }

/*-------cost of make an app---------------*/
.animate-plus{
    visibility:hidden;
}
.animate-plus.animated{
    visibility:visible;
}

.container-fixed .page{
    width: 100%;
    display: grid;
    align-items: center;
    text-align: center;
    padding: 120px 15px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.cz-est-logo img {
    width: 130px;
    padding: 20px;
}
.logo {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 180px;
    padding: 10px 15px;
}
.main-image-wrap{
    width:140px;
    margin: auto;
}
img{
    width:100%;
}
.container-fixed h1 {
    margin-bottom: 15px;
    text-transform: uppercase;
}
.container-fixed h2 {
    line-height: 1.5;
}
.get-started-btn{
    display: block;
    max-width: 130px;
    font-weight:600;
    margin-left: auto;
    margin-right: auto;
}
.container-fixed button, .get-started-btn{
    background: #1a1a1a;
    border: 1px solid #1a1a1a;
    padding: 14px 24px;
    font-size: 15px;
    color: #fff;
    border-radius: 8px;
    margin-top: 20px;
    cursor: pointer;
    letter-spacing: 1px;
}
.container-fixed button:hover, .get-started-btn:hover{
    background: #000;
}
.container-fixed button.icon-button {
    display: inline-block;
    cursor: pointer;
    outline: 0;
    border-radius: 100px;
    background: #fff;
    border: 2px solid #fff;
    width: 160px;
    height: 160px;
    box-shadow: 3px 3px 1px #adadad;
    transition:all .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    padding: 0;
}
.container-fixed button.icon-button:hover {
  background: #f2f2f2;
  box-shadow: none;
  border: 2px dashed #505050;
  transition: all .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.content-section {
    display: grid;
    grid-template-columns: 4fr 6fr;
}
.content-right{
    text-align: left;
}
.content-right .question-answers .answer-not-selected:first-child{
    margin-left: 0;
}
.content-right .question-answers{
    justify-content: flex-start;
}
.container-fixed .content-right p{
    /*max-width: initial;*/
    margin-left: 0;
}
.question-header:after {
    content: " ";
    width: 50%;
    height: 2px;
    background: #fff;
    display: block;
    opacity: 0.2;
    /* padding: 12px; */
    margin-top: 45px;
}
.question-answers {
    display: block;
    margin: 20px 0 0;
    justify-content: center;
    align-items: center;
}
.icon-button img {
    width: auto;
    height: 100px;
}
.question-answers .answer-not-selected {
    display: inline-block;
    vertical-align: top;
    margin:  .5em 25px;
}

.bg-fixed {
    position: absolute;
    top: 0;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    width: 100vw;
    height: 100vh;
}
.bg-fixed p {
    display: block;
    height: 100%;
    width: 100%;
}
.bg-fixed img{
    display: none;
}
.results {
    border-radius: 16px;
    background: #fff;
    margin: 40px auto;
    overflow: hidden;
}
.r-header {
    padding: 30px 50px 15px;
    border-radius: 16px;
    /* background: #9AB938; */
    background: url(../images/light-red-bg.webp) no-repeat ;
    background-size: cover;
    background-position: center 35%;
    box-shadow: 1px 1px 20px 0px #ddd;
}
.container-fixed .page{
    height: 100vh;
    padding: 15px;
}
.results h1 {
    font-size: 20px;
}
.results-page .container-fixed .page{
    overflow-y: scroll;
}
.results-summary {
    display: none;
    list-style: none;
    margin: 0 0 1em;
    padding: 0 1em;
    color: #3d3935;
    background: #fff;
    border-radius: 5px;
}
.result {
    display: flex;
    padding: 1em 0;
    border-top: 1px solid #eaeaea;
    align-items: center;
}
.result .result-image {
    width: 80px;
    margin-right: 2em;
}
.result .result-body {
    display: block;
    text-align: left;
}
.result .result-question {
    font-size: 20px;
    display: block;
}
.result-answer {
    font-size: 22px;
    font-weight: bold;
    padding-top: 12px;
    display: inline-block;
    font-family: neris-semibold;
    vertical-align: sub;
}
.result .result-change {
    font-size: 14px;
    color: #2b2b2b;
    cursor: pointer;
    font-family: neris-semibold;
}
.result-change  {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
}
.result-change  input[type="submit"] {
    display: inline-block;
    border: none;
    background: none;
    color: #9c9c9c;
    cursor: pointer;
    background-image: url(../images/edit.png);
    background-size: cover;
    height: 14px;
    width: 14px;
    margin-left:5px;
}
.result-change  input[type="submit"]:hover {
    text-decoration: underline;
    color: #000;
}
.prev-btn {
    z-index: 1;
    margin-right: 10px;
}
.total{
    z-index: 1;
}
.total  label{
    padding: 8px 16px;
    border-radius: 3px;
    margin: 0;
    border: 1px solid #fff;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: bold;
    background-color: #fff;
    font-family: neris-semibold;
    color: #444;
    display: block;
}
.prev-btn button {
    background: #e3e3e3;
    border: none;
    padding: 10px 10px;
    border-radius: 3px;
    margin: 0;
    text-transform: uppercase;
    color: #444;
    font-size: 12px;
    font-weight: bold;
}
.results-page .prev-btn button {
    background: #ffffff;
    border: none;
    padding: 15px 20px;
    border-radius: 10px;
    margin: 0;
    text-transform: uppercase;
    color: #ec605f;
    font-size: 14px;
    font-weight: bold;
}
.prev-btn button:hover{
    background: #a9a9a9;
    color: #fff;
}
.container-fixed .answer  p.text-primary {
    text-transform: uppercase;
    font-size: 12px;
    font-family: neris-black;
    padding: 12px 0;
    color: #3e3e3e;
}
.vignatte{
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.14) 83%, rgba(0,0,0,0.25) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.14) 83%,rgba(0,0,0,0.25) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.14) 83%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#40000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.results-container.show{
    display: block;
}
.results-container.hide{
    display: none;
}
.cover-phone{
    display:inline-block;
    text-align:center;
    position:relative;
}
.cover-phone .inner-section {
    position: absolute;
	background: #e9e7e7;
	top: 32%;
	left: 0;
	overflow: hidden;
	backface-visibility: hidden;
	font-size: 0;
	width: 50%;
	right: 0;
	margin: 0pt auto;
}
.cover-phone .inner-section.iphone {
	top: 25%;
}
.cover-phone .inner-section img{
    position:relative;
    z-index:2;
}
.cover-phone .inner-section span{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

.cover-phone img.phone{
    max-width:100%;
}
label.text-up {
    position: absolute;
    font-size: 26px;
    color: #3e3e3e;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 20%;
    font-family: neris-semibold;
}
.cover-phone .inner-section.iphone label.text-up {
	bottom:23%;
}
.cover-phone .inner-section.android span{
    background:url("../images/make-an-app/green-wave.gif") no-repeat center top #9DCE6D;
    background-size:contain;
}
.cover-phone .inner-section.iphone span{
    background:url("../images/make-an-app/gray-wave.gif") no-repeat center top #4d4d4d;
    background-size:contain;
}
.cover-phone .inner-section.android-iphone{
    background:#fff;
}
.cover-phone .inner-section.android-iphone span{
    background:url("../images/make-an-app/light-gray-wave.gif") no-repeat center top #868686;
    background-size:contain;
}

a.black.py1.toggle {
    color: #fff;
    font-family: 'Poppins';
    margin: 10px auto 0 ;
    border-radius: 3px;
    font-size: 22px;
}

/*----------FAQ---------------*/
.faq {
    position: absolute;
    z-index: 3;
    bottom: 50px;
    color: #464646;
    font-family: neris-thin;
}
.faq button {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 15px;
    background: none;
    border: none;
    font-family: neris-black;
    font-size: 35px;
    text-transform: uppercase;
    outline: none;
    padding: 0;
    margin: 0;
}
.faq button:hover{
    background: none;
    color: #191919;;
}
.faq button i{
    text-shadow:   1px 1px 3px #0a0a0a;
}
.faq-content {
    position: relative;
    left: 60px;
    top: 5px;
    background: #F2F2F2;
    padding: 30px;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: 0px 1px 2px #828282;
}
.faq-content::before {
    content: ' ';
    display: inline-block;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid #F2F2F2;
    vertical-align: middle;
    margin-left: .7rem;
    transform: translateY(-2px);
    transition: transform .2s ease-out;
    left: -23px;
    top: 14px;
    position: absolute;
}
.faq-content::after {
    content: ' ';
    display: inline-block;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid #a7a4a4;
    vertical-align: middle;
    margin-left: .7rem;
    transform: translateY(-2px);
    transition: transform .2s ease-out;
    left: -24px;
    top: 14px;
    position: absolute;
    z-index: -1;
}
.faq-content > div {
    max-width:500px;
    max-height: 530px;
    overflow-y: auto;
}
.faq-content h2 {
    font-size: 26px;
    text-transform: uppercase;
    padding: 20px;
}
.wrap-collabsible {
    margin-bottom: 1.2rem 0;
    border-bottom: 1px solid #ddd;
}
.faq input[type='checkbox'] {
    display: none;
}
.lbl-toggle {
    display: block;
    font-size: 18px;
    text-align: left;
    padding: 15px 20px;
    cursor: pointer;
    line-height: 1.3;
    transition: all 0.25s ease-out;
    position: relative;
    font-weight: bold;
}
.lbl-toggle:hover {
    color: #252525;
}
.lbl-toggle::after {
    content: ' ';
    display: inline-block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;
    vertical-align: middle;
    margin-left: .7rem;
    transform: translateY(-50%) rotate(90deg);
    transition: transform .2s ease-out;
    right: 10px;
    top: 50%;
    position: absolute;
}
.toggle:checked + .lbl-toggle::after {
    transform: rotate(-90deg) translateX(3px);
}
.collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}
.toggle:checked + .lbl-toggle + .collapsible-content {
    max-height: 350px;
}
.toggle:checked + .lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.collapsible-content .content-inner {
    padding: .5rem 1rem;
    text-align: left;
    padding-left: 30px;
    color: #777;
    margin: -10px 0 10px;
}
/*------------faq-------------*/
.parallax{ background-size: cover;}
a.hire-btn {
    background: transparent;
    text-transform: uppercase;
    color: #4d4d4d;
    padding: 12px;
    font-weight: bold;
    width: 300px;
    margin: 0 auto 15px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #4d4d4d;
    display: inline-block;
}
a#build_app_send_mail {
    color: #4d4d4d;
    padding: 12px;
    border: 1px solid #4d4d4d;
    margin: 15px;
    width: 300px;
    box-sizing: border-box;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
}
div#build_app_send_mail_pop {
    padding: 15px;
    background: #fff;
    width: 270px;
    margin: auto;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 1px #969696;
}
/* input#name {
    padding: 12px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    margin: 10px auto;
    width: 250px;
    box-sizing: border-box;
} */
input#name + label, input#email + label,input + label.error{
    color: #ee2019;
    margin-bottom: 15px;
    display: block;
    text-align: left;
}
/* input#email {
    padding: 12px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    width: 250px;
    box-sizing: border-box;
    margin-bottom: 10px;
} */
a.submit-btn {
    display: block;
    padding: 20px 24px;
    width: 250px;
    margin: 30px auto 30px;
    font-size: 24px;
    color: #fff;
    font-family: poppins;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: #f5755b;
    background: linear-gradient(to left,#ff595b,#fe7358,#ff8f57);
    border: 1px solid #f5755b;
    margin-right: 0;
}
a.submit-btn:hover{
  background:linear-gradient(to right,#ff595b 0,#f44 50%,#ff8f57 100%);
  color: #fff;
  border-color: #b3b3b3;
}
.results h1 {
    text-transform: initial;
    color: #fff;
    font-family: neris-thin;
}
.results-page .container-fixed .results p {
    color: #fff;
    line-height: 1;
    font-family: neris-semibold;
}
.results .error {
    display: block;
    width: 300px;
    margin: 10px auto 12px;
    color: red;
}
.results + div{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.results + div #build_app_send_mail_pop{
    margin-left: 15px;
}
.type .main-image-wrap { width: 350px; }

.foreground {
  background: url('../images/make-an-app/bg-dot-line.webp');
  width: 110%;
  height: 110%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .5s cubic-bezier(0.22, 0.61, 0.36, 1);
  background-size: cover;
}
.background {
    background: url('../images/make-an-app/bg-android-page.png') ;
    width: 110%;
    height: 110%;
    position: absolute;
    top: 0;
    left: -5%;
    transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
    background-size: cover;
    background-repeat: no-repeat;
}
.background2 {
    background: url('../images/make-an-app/bg-ios-page.png') ;
    width: 110%;
    height: 110%;
    position: absolute;
    top: 0;
    left: -5%;
    transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
    background-size: cover;
    background-repeat: no-repeat;
}
.background3 {
    background: url('../images/make-an-app/bg-android-ios-page.png') ;
    width: 110%;
    height: 110%;
    position: absolute;
    top: 0;
    left: -5%;
    transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.faq input[type='checkbox'] {
    display: none;
}
.container-fixed h1 { font-size: 4vh;max-width: 1000px; line-height: 1.2}
.m-auto{margin: auto;}
.prev-total{
    display: flex;
    align-items: center;
    position: absolute;
    top: 15px;
    right: 15px;
}
.make-an-app.results-page .prev-btn {
    text-align: left;
    position: absolute;
    top: 15px;
}
.estimate-wrapper {
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 34%);
    border-radius: 25px;
    background: #fff;
    margin: 60px auto 30px;
    width: fit-content;
    max-width: 1300px;
    padding: 5px 50px 4px;
    box-sizing: border-box;
}
.fade {
    opacity: .6;
}
.estimate-wrapper  .row{
    padding: 0 0;
}
label.radio-label {
    display: inline-block;
    position: relative;
    padding: 18px 30px;
    padding-left: 60px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
    text-align: left;
    font-family: 'Poppins';
    line-height: 1.2;
    background: #EEEEEE;
    border-radius: 15px;
  }
label.radio-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
label.radio-label  .checkmark {
    position: absolute;
    top: 18px;
    left: 20px;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #bcbcbc;
}

/* On mouse-over, add a grey background color */
label.radio-label:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
label.radio-label input:checked ~ .checkmark {
  background-color: #F5755B;
  border: 1px solid #F5755B;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
label.radio-label .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
label.radio-label input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
label.radio-label .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	/* background: white; */
}
.estimate-wrapper .form-wrapper input[type="text"]{
    padding: 15px 25px;
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    margin: 0 auto 10px;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.4em;
}
.estimate-wrapper .form-wrapper input:-internal-autofill-selected{
    background: #fff;
}
.estimate-wrapper .form-wrapper input[type="text"]:focus-visible{
    border: 1px solid #5c5c5c;
    outline: none;
}
.hire-dev {
    box-shadow: 1px 1px 10px -2px rgb(0 0 0 / 54%);
    border-radius: 15px;
    background: #fff;
    margin: 28px auto 15px;
    width: auto;
    padding: 25px 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1300px;
}
.hire-dev h3 {
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: 500;
}
a.btn.btn-hire {
    display: inline-block;
    border: 1px solid #f5755b;
    padding: 15px 30px;
    margin-left: 15px;
    border-radius: 8px;
    color: #f5755b;
    font-size: 22px;
    font-family: 'Poppins';
    font-weight: 500;
}
a.btn.btn-hire:hover{
    border: 1px solid #555;
    background-color:#555 ;
    color: #fff;
}
.android-cost .r-header {
    /* background: url(../images/light-green-bg.png) no-repeat; */
    background-size: cover;
    background-position: center 35%;
}
/* .android-cost label.radio-label input:checked ~ .checkmark {
    background-color: #9AB938;
    border: 1px solid #9AB938;
}
.results-page .container-fixed .android-cost  .results p {
    color: #9AB938;
} */
.email-wrapper, .phone-wrapper, .name-wrapper{
    position: relative;
}
.email-wrapper i, .phone-wrapper i,.name-wrapper i{
    position: absolute;
    left: 24px;
    top: 17px;
    font-size: 22px;
    color: #505050;
}
.email-wrapper input, .phone-wrapper input,.name-wrapper input{
    padding-left: 60px !important; 
}
.results-page .content-section {
    display: grid;
    grid-template-columns: 3fr 7fr;
}
.results-page .content-section .image-wrapper{
    margin-right: 30px;
}
.results-page .content-section .image-wrapper img{
    max-width: 100%;
}
@media (min-width:1024px) {
    .results h1 {
        text-transform: initial;
        font-size: 40px !important;
        color: #fff;
        font-family: 'Poppins';
        max-width: initial;
        font-weight: 500;
    }
    .results-page .container-fixed .results p {
        font-size: 40px;
        color: #ec5b5e;
        line-height: 1;
        font-family: Poppins;
        font-weight: 600;
        background: #ffffff;
        padding: 10px 50px;
        display: inline-block;
        border-radius: 10px;
    }
    .question-answers {
        display: flex;
    }
    .container-fixed h2 {
        max-width:1000px;
        font-size: 18px;
    }
    .main-image-wrap{
        width:400px;
        margin: auto;
    }
    .bg-fixed img {
        display: block;
        height: 100%;
        position: absolute;
        z-index: -23;
        transition: all .3s ease;
        transition-duration: 3s;
        object-fit: cover;
    }
    .estimate-wrapper h4 {
        margin-bottom: 30px;
    }
}
@media (max-width:1024px){
    .container-fixed h2{
        font-size: 18px;
    }
    .col-md-6 {
        width: 100%;
    }
    .hire-dev h3 ,label.radio-label,.estimate-wrapper .form-wrapper input[type="text"]{
        font-size: 14px;
    }
    a.btn.btn-hire {
        padding: 15px 15px;
        font-size: 14px;
    }
    label.radio-label .checkmark{
        top: 14px;
    }
    .email-wrapper i, .phone-wrapper i,.name-wrapper i {
        left: 24px;
        top: 14px;
        font-size: 20px;
    }
}
@media (max-width:1400px) {
    .container-fixed button.icon-button{
        width:130px;
        height: 130px;
    }
    .icon-button img {
        height: 60px;
    }

}
@media (max-width:1280px) {
    .content-section {
        grid-template-columns: auto;
        justify-content: center;
        grid-gap: 30px;
        padding: 50px 0 0;
    }
    .content-right .question-answers {
        justify-content: center;
    }
    .content-right {
        text-align: center;
        display: block;
    }
    .question-header:after{
        display: none;
    }
    .results-page .container-fixed .results p{ font-size: 40px;}
    label.radio-label {  font-size: 18px;  } 
}
@media (min-width:768px) and (max-height:768px) {
    .main-image-wrap {  width: 45vh;    }
    .content-left .main-image-wrap { width: 25vh;}
    .container-fixed h1 { font-size: 4vh;}
    .question-answers{ margin:0;}
    .container-fixed h2 {    font-size: 3vh;}
    .question-header:after{
        display: none;
    }
    .container-fixed button.icon-button {
        width: 20vh;
        height: 20vh;
        padding: 0;
    }
    .icon-button img {
        height: 60%;
    }
}

@media (max-width:1280px) and (max-height:1024px) {
    .content-left .main-image-wrap {
        width: 12vh;    margin: 60px auto 0;
    }
    
}
@media (max-width:1280px) and (max-height:768px) {
    .content-left .main-image-wrap { width: 12vh;}
    .type .main-image-wrap { width: 45vh;}
    label.text-up { font-size: 3vh; }
    .main-image-wrap { margin: 60px auto 0;}
}
@media (max-width:768px) {
    .container-fixed h1 {
        font-size: 22px;
    }
    .container-fixed button.icon-button {
        width: 100px;
        height: 100px;
    }
    .container-fixed button{
        padding: 10px 10px;
    }
    .prev-btn button{
        padding: 10px 10px;
    }
    .icon-button img {
        height: 50px;
    }
    .question-answers .answer-not-selected{
        margin: 10px;
    }
    .answer-not-selected:first-child {
        margin-left: 10px;
    }
    .container-fixed .page{
        overflow-y: scroll;
        display: block;
        height: auto;
        min-height: 100vh;
    }
    .bg-fixed { height: auto; display: block; overflow: hidden;}
    .faq {left: 15px; top: 64px;    }
    .container{ overflow: hidden;}
    .faq-content {
        left: 40px;
        top: 5px;
        padding: 5px;
        width: 80%;
        max-height: 480px;
        border-radius: 8px;
    }
    .faq-content::before {
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #F2F2F2; left: -20px;  top: 15px;
    }
    .faq-content::after {
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #a7a4a4;
        left: -21px;
        top: 15px;
    }
    .faq-content h2 {  font-size: 12px; padding: 10px;}
    .lbl-toggle { font-size: 14px; padding: 15px 10px; padding-right: 25px;}
    .faq button{ font-size: 25px; padding: 0; margin: 0; left:0;top: 10px;}
    .faq button::after {    right: -5px; top: 15px;}
    .collapsible-content .content-inner { font-size: 12px; }
    .estimate-wrapper {  padding: 5px 20px 3px;  width:100%;  }
    .estimate-wrapper h4 { font-size: 20px; }
    .results {   margin: 20px auto;    }
    .result { display: grid; align-items: center;  justify-items: center; }
    .result .result-image {    width: 40px; }
    a.hire-btn,input#name,input#email,a.submit-btn,.results .error
    ,a.black.py1.toggle, a#build_app_send_mail {font-size: 14px; box-sizing: border-box;}
    a#build_app_send_mail{ font-size: 12px;}
    .result .result-question { font-size: 16px; line-height: 1.3;}
    .result-answer { font-size: 14px; }
    .result .result-body{ text-align: center;}
    a.black.py1.toggle {  font-size: 14px; }
    .content-right{ overflow: hidden; }
    div#build_app_send_mail_pop{  width: 230px; }
    a.hire-btn{ margin:0 auto 5px;}
    .result-change { justify-content: center; }
    .results-page .content-section { grid-template-columns: 1fr;}
    .results-page .content-section .image-wrapper img {  max-width: 200px;}
    label.radio-label {   font-size: 14px;  }
    .hire-dev{ display:block;}
    a.btn.btn-hire { margin-top: 20px; }
    a.submit-btn{ margin-right: auto;}
    .make-an-app .email-success {   width: 200px; margin-top: 70px;}
    .make-an-app .email-success .main-image-wrap {width: 140px; height: 140px;}
}

@media (max-width:480px) {
    .container-fixed h1 { font-size: 16px; }
    .results .div#build_app_send_mail_pop { margin: 0 !important;}
    .type .main-image-wrap { width: 250px; }
    .prev-total {      top: 75px;
        left: 50%;
        right: 0;
        transform: translateX(-50%);
        width: 100%;
        z-index: 9;
        justify-content: center; }
    .logo{ left: 50%;  transform: translateX(-50%); }
    .container-fixed h2 { font-size: 14px; }
    .icon-button img {  height: 30px;  }
    .container-fixed button.icon-button {width: 60px;height: 60px;}
    .make-an-app.results-page .prev-btn {  top: 75px;  }
    .estimate-wrapper{ margin-top: 120px;}
    .results-page .prev-btn button {    padding: 10px; border-radius: 7px;font-size: 12px;}
}
@media (max-height:480px) {
    .container-fixed .page {    height: auto; overflow-y: auto;  height: 100vh;   }
    .bg-fixed{ height: auto; min-height: 100vh;  }
}
.error-msg-name{color:red;}

.result_page_text_android{
    border-color: #ffff !important;
    color: #fff !important;
}
.result_page_text_ios{
    border-color: #424242 !important;
    color: #444 !important;
}
#arrow_breakdown {padding-left:5px;}
@media (max-width:464px){
    .results + div{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .results + div a:first-child{
        order:1;
    }
    .results + div a:nth-child(2){
        order:3;
    }
    .results + div #build_app_send_mail_pop{
        order:2;
        margin-bottom: 16px;
    }
}
@media (max-width: 360px){
    .faq {    top:110px; }
}
/*-------cost of make an app ends--------*/