html,
body {
    margin: 0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
}
html{
    background: rgb(255,255,255);
    background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(98,159,196,1) 300%);
    background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(98,159,196,1) 300%);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(98,159,196,1) 300%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#629fc4",GradientType=1);
}

.logo{
    margin:1em;
}

.section{          
    display: grid;
    grid-template-columns: 1fr 1fr;        
    grid-template-rows: max-content;
    max-width: 1180px;
    margin:0 auto;        
}

.maxcontent{
    max-width: 1180px;
    margin:0 auto;        

}

.section-two-columns{
    display: grid;
    grid-template-columns: 2fr 1fr !important;        
    grid-template-rows: max-content;
}

.section-one-columns{
    display: grid;
    grid-template-columns: 1fr !important;        
    grid-template-rows: max-content;
}

.content{
    
}
.icon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.big {
    font-size: 85px;
    display: flex;
    align-self: center;
    justify-content: center;
}
.icon-grid-desktop{
    display: inherit;
}
.icon-grid-mobile{
    display:none;
}
.background-bubble{
    background-image: url("bg-2.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.content-on-bottom{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.content-on-center{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
ul.faq {
list-style: none; /* Remove default bullets */
}

ul.faq li::before {
font-size: 28px;
content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: red; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.margined{
    margin-left:1.5em;
    margin-right:1.5em;
}

.center-on-mobile{
    text-align: left;
}

@media (max-width:768px){
    .content-background-clip{
        background: linear-gradient(-45deg, transparent 23%, #27a8fd 20px);
    }
    .icon-grid-desktop{
        display: none;
    }
    .icon-grid-mobile{
        display: grid;
    }
    .section{
        grid-template-columns: 1fr;
    }
    .one-on-mobile{
        grid-template-columns: 1fr !important;
    }

    .two-on-mobile{
        grid-template-columns: 1fr 1fr !important;
    }

    .center-on-mobile{
        text-align: center;
    }
    .hide-on-mobile{
        display: none;
    }
}

@media (min-width:768px){
    .three-on-desktop{
        grid-template-columns: 4fr 1fr 4fr !important;
    }
    .hide-on-desktop{
        display: none;
    }
    .two-om-dekstop{
        grid-template-columns: 1fr !important;
    }
    .content-background-clip{
        background: linear-gradient(-23deg, transparent 23%, #27a8fd 20px);
    }
}

.blue-title{
    color: #007fbb;
}
.white-title{
    color:white;
}
.text-center{
    text-align: center;
}
.bold{
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}


.comparebutton{
    text-decoration: none;
    color:black;
    font-weight: bold;
    background-color: #27a8fd;
    border-radius: 50px;
    padding:16px;
}

.group 			  { 
    position:relative; 
    margin-bottom:15px;     
  }
  input, select			{
    font-size:18px;
    padding:10px 10px 10px 5px;
    display:block;    
    border:none;
    border-bottom:1px solid #757575;
    background-color: transparent;
  }
  input:focus 		{ outline:none; }
  
  /* LABEL ======================================= */
  label 				 {
    color:#999; 
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }
  
  /* active state */
  input:focus ~ label, input:valid ~ label 		{
    top:-20px;
    font-size:14px;
    color:#5264AE;
  }
  
  /* BOTTOM BARS ================================= */
  .bar 	{ position:relative; display:block; }
  .bar:before, .bar:after 	{
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;
    background:#5264AE; 
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }
  .bar:before {
    left:50%;
  }
  .bar:after {
    right:50%; 
  }
  
  /* active state */
  input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
  }
  input{
      background-color: transparent;
  }
  
  /* HIGHLIGHTER ================================== */
  .highlight {
    position:absolute;
    height:60%; 
    width:100px; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
  }
  
  /* active state */
  input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
  }
  
  /* ANIMATIONS ================ */
  @-webkit-keyframes inputHighlighter {
      from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  }
  @-moz-keyframes inputHighlighter {
      from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  }
  @keyframes inputHighlighter {
      from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  }


  .form-section{
      display:none;
  }
  .next-form, .previous-form{     
      cursor: pointer; 
      padding:0.5em;
      background-color: transparent;
      border:solid 2px rgb(167, 167, 167);
      border-radius: 8px;
      color:rgb(167, 167, 167);
  }

  .next-form:hover,  .previous-form:hover{
    color:black;
    border:solid 2px black;
    transition: 0.5s;
  }


  .icon-link{
      opacity: 0.7;
      cursor: pointer;
  }
  .icon-link:hover{
      opacity: 1;
      transition: 0.5s;
  }