.notr .download-cr {opacity:0;}
.notr .ads-logo-agency,  .notr .stopb {opacity:0;} 
.notr .ads-logo-agency, .notr .mob-ad-logo {opacity:0;}
.notr .download-cr {opacity:0;}


:root {
    --width: 640px;

--main-bluet: #15ADF3;
--sec-bluet: #0B3A5C;
--at-blue:   #1b345e;
--at-dark-blue: #102342;
--at-yellow: #f8ab1a;
--at-dark-yellow: #d79417;

}

.moving-crd form {overflow:hidden;}

.pauseplaybutton {
  width: 42px;
}
.stopb {
  background: transparent;
  border: 0 !important;
  position: absolute;
  right: 30px;
  top: 16px;
  cursor: pointer;
  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}

.double-uploads {grid-template-columns: 1fr 1fr; 
  grid-column-gap:16px; column-gap:16px; display: grid;}


.double-uploads .img-upload {width:50px;}

.pause {
 -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
  /*animation-play-state: paused!important;*/
}

.pausekeeper div {height: 36px;
  background: var(--bordertopblue);
  color: #fff;
  display: flex;
border-radius:1px;
  align-items: center;
  justify-content: center;
  margin:auto;
  width: 130px;
  cursor:pointer;
  margin-top:48px;}

  .lds-default {
    display: none;
    position: absolute;
      top: -2px;
      transform: scale(.88);
      right: 17px;
      width: 80px;
      height: 80px;
  }
  
  .lds-default {
   
      top: -2px;
      transform: scale(0.53);
      right: 74px;
   
  }
  
  .lds-default div {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #e1e5eb;
    background: var(--main-bluet);
  
    border-radius: 50%;
    animation: lds-default 1.2s linear infinite;
  }
  
  .lds-default div:nth-child(1) {
    animation-delay: 0s;
    top: 37px;
    left: 66px;
  }
  
  .lds-default div:nth-child(2) {
    animation-delay: -0.1s;
    top: 22px;
    left: 62px;
  }
  
  .lds-default div:nth-child(3) {
    animation-delay: -0.2s;
    top: 11px;
    left: 52px;
  }
  
  .lds-default div:nth-child(4) {
    animation-delay: -0.3s;
    top: 7px;
    left: 37px;
  }
  
  .lds-default div:nth-child(5) {
    animation-delay: -0.4s;
    top: 11px;
    left: 22px;
  }
  
  .lds-default div:nth-child(6) {
    animation-delay: -0.5s;
    top: 22px;
    left: 11px;
  }
  
  .lds-default div:nth-child(7) {
    animation-delay: -0.6s;
    top: 37px;
    left: 7px;
  }
  
  .lds-default div:nth-child(8) {
    animation-delay: -0.7s;
    top: 52px;
    left: 11px;
  }
  
  .lds-default div:nth-child(9) {
    animation-delay: -0.8s;
    top: 62px;
    left: 22px;
  }
  
  .lds-default div:nth-child(10) {
    animation-delay: -0.9s;
    top: 66px;
    left: 37px;
  }
  
  .lds-default div:nth-child(11) {
    animation-delay: -1s;
    top: 62px;
    left: 52px;
  }
  
  .lds-default div:nth-child(12) {
    animation-delay: -1.1s;
    top: 52px;
    left: 62px;
  }
  
  @keyframes lds-default {
    0%,
    20%,
    80%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
  }
  

.color {
  line-height: 1;
  text-decoration: none;

  border: 1px solid #868e96c4;

  text-decoration: none;
  font-family: "Open Sans", sans-serif;
  cursor: pointer;
  outline: inherit;
  background-image: url(../img/bg-back-two.jpg);
  align-items: center;
  justify-content: center;
margin-bottom:16px;
position:absolute;
  height: 39px;
  top:0;
  width:calc(100% - 44px);
  display: flex;
  border-radius:7px;
  text-align: center;
  z-index:1;
  background: #2b2f3b;
  background:#000;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid #868e96c4 !important;
  color: var(--light);}

  .colorkeeper {position:relative; }

  .notvisible-button {z-index:5;}

  .colorkeeper .blue-button {z-index:2;pointer-events: none;}

  .colorcircle {display:none;}

  .visible-colorc {display:block;}


body {
    margin: 0;
}

#bridge {
    display: block;
    margin: auto;
    cursor: pointer;
}

.slidecontainer {
    width: 100%;
    display: flex;
    align-items: center;
  }
  

    .slider {
        -webkit-appearance: none;
        width: 100%;
        max-width:200px;
        height: 5px;
        border-radius: 8px;
        background: var(--verylightgray);
        outline: none;
       
      }
      
      .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 50%; 
        background: var(--dark);
        outline: 1px solid transparent;
        cursor: pointer;
        -webkit-transition: .2s;
        transition: all .2s;
      }
      .slider::-webkit-slider-thumb:hover {
        outline: 1px solid var(--dark);
        
      }
      
      .slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--dark);
        cursor: pointer;
      }

      .slider::-moz-range-thumb:hover {
        outline: 1px solid var(--dark);
        
      }
      
  
    .slide-keeper {
        line-height: 1.5;
        font-size: 16px;
        color: #333333;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        grid-gap: 8px;
    }

  .slbutton {position: relative; display:inline-block; overflow:hidden; transition: all .3s ease; 
      padding-left:12px; padding-right:12px; cursor:pointer;
    margin-left:1px;}

      .select-p-element {display:flex; align-items: center; padding-bottom:7px;}

      .select-p-element .slbutton:first-of-type {
        margin-left:9px;
      }
 /*
 underline animation:

    .slbutton {position: relative; display:inline-block;}
    .select-p-element {cursor:pointer; padding-bottom:4px;}
   .slbutton::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--main-bluet);
        opacity: 0;
        transform: scale(0);
        transition: all .3s ease;
      }
      
     .slbutton.selected-btn::after {
        transform: scale(1);
        opacity: 1;
        transform-origin: center;
      }
     
    */

 
     
      .slbutton.selected-btn {outline: 1px solid var(--gray);border-radius:24px;
        background:var(--lightgray);
      }

     

.agency-container {display: grid; grid-template-columns: auto 1fr; margin:auto;
width:calc(100% - 160px); max-width:1340px;  grid-gap:60px;
}
.agency-container.sc-970 {max-width:970px; margin:auto;grid-template-columns: 1fr;}
.agency-container form {    
    border-top: 10px solid var(--main-bluet);
border-radius: 10px;
box-sizing: border-box;
background: white;
max-width:640px;

box-shadow: 0 29px 60px 0 rgb(54 57 73 / 7%);
padding: 40px 40px !important;
padding-bottom: 60px !important;}
.agency-format-container {
min-height: 840px;
box-sizing: border-box;
height: 100vh;
padding-top: clamp(40px, 3.125vw, 60px);
position: relative;
}

.compare-sl .agency-format-container {min-height:1100px;}

.sc-970 form {margin: auto; max-width:970px;}
.two-buttons-in-cont {
    display: grid;
        grid-template-columns: 439px 439px;
        justify-content: space-between;
}

.agency-format-container.scratch-970 {
    min-height: 100vh;
    min-height: 1060px;
}

.agency-container form h1 {
font-weight: 700;
color: #333;
font-size: 24px;
line-height: 1.2;
font-weight: 600;
padding-bottom: 20px;
}
.agency-container form b {font-weight:600;}

.blue-button:hover, .blue-button:focus {
background: none;
background-image: url(../img/bg-back-two.jpg);
outline: 1px solid #000 !important;
color:white;
}

.img-upload {opacity:0;}

.blue-button {
margin-bottom: 16px;
color: white;
display: block;
font-size: 15px;
text-decoration: none;
line-height: 1.5;
text-align: center;
font-weight: 400;
transition: all .3s ease;
background-repeat: no-repeat;
border-radius: 7px;
position: relative;
padding: 10px 15px !important;
background-size: 647px 467px;
background: none;
transition: outline .4s ease;
outline: 1px solid transparent !important;
background-image: url(../img/bg-back-two.jpg);
border: 0 !important;
font-weight: 600;
}

.img-upload-button {
margin-top: -21px;
}  

input.blue-button {
border: 0 !important;
height: 22px;
font-size: 15px;
line-height: 1.5;
transition: outline .4s ease;
color: #fff;
width:calc(100% - 30px);
font-family: 'Open Sans', Arial, sans-serif;
}

input.blue-button::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-size: 15px;
line-height: 1.5;
color:#fff;
font-weight:600;
}
input.blue-button::-moz-placeholder { /* Firefox 19+ */
font-size: 15px;
line-height: 1.5;
color:#fff;
font-weight:600;
}
input.blue-button:-ms-input-placeholder { /* IE 10+ */
font-size: 15px;
line-height: 1.5;
color:#fff;
font-weight:600;
}
input.blue-button:-moz-placeholder { /* Firefox 18- */
font-size: 15px;
line-height: 1.5;
color:#fff;
font-weight:600;
font-family: 'Open Sans', Arial, sans-serif;
}

input.blue-button:focus::-webkit-input-placeholder { color:transparent; }
input.blue-button:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input.blue-button:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input.blue-button:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

.download-cr {
background: #13a9ee;
cursor: pointer;
grid-column: span 2;
height: 40px;
font-weight: 600;
font-size: 15px;
font-size: 16px;
letter-spacing: 0.053rem;
color: white;
border: 0;
border-radius: 6px;
width:100%;
display: flex;
outline: 1px solid transparent;
align-items: center;
justify-content: center;
transition: all .3s ease;
}

.download-cr:hover {
outline:1px solid var(--main-bluet);


}

.ads-logo-agency {
width: 280px;
width: clamp(280px, 15.4vw, 296px);
bottom: 40px;
bottom: clamp(40px, 3.125vw, 60px);
position: absolute;
left: 50%;
transform: translateX(-50%);
}


.ad-300-250-container {width:1000px!important; grid-gap:60px!important;}

.container-for-970-250 {grid-template-columns: 1fr;}


.agency-container.container-for-970-250{
    max-width: 970px;
    margin: auto;
    grid-template-columns: 1fr;
}


.container-for-970-250 form {
    margin: auto;
    max-width: 970px;
}

.container-for-970-250 .uploadfields {
	display: grid;
    grid-template-columns: 439px 439px;
    justify-content: space-between;
}
.compare-sl .slbutton {transition: outline .3s ease, background-color .3s ease, border-radius .3s ease; }

.container-for-970-250 #CTURL {background-size: 100%;}
.container-for-970-250 .slider {max-width: 300px;}
.md-text {display:none;}
@media only screen and (max-width: 1420px) {
.lg-text {display:none;}
.md-text {display:block;}
}
@media only screen and (max-width: 1300px) {
.agency-container {
width: calc(100% - 106px);
max-width: 1340px;
grid-gap: 42px;
}
.ad-300-250-container {
    width: 990px !important;
    grid-gap: 52px !important;
}
}
@media only screen and (max-width: 1350px) {
  .compare-sl .slbutton {font-size:14px;}
}
@media only screen and (max-width: 1300px) {
  .compare-sl .slbutton {font-size:16px;}
}
@media only screen and (max-width: 1250px) {
  .compare-sl .select-p-element {flex-wrap:wrap;}
  .compare-sl .slbutton {margin-left:9px; 
    border-radius:24px; font-size:15px;
    outline:1px solid var(--verylightgray); gap:9px;
  }
  .compare-sl .slbutton.selected-btn {outline: 1px solid var(--gray);}
  .compare-sl .slbutton:not(.container-for-970-250 .slbutton) {
    margin-top:11px;
  }

  .compare-sl .select-p-element:not(.container-for-970-250 .select-p-element)  {
    align-items: end; padding-bottom:16px;}

 
}
.mobile-message {display: none;}


.mobile-message p {
text-align: center;
display: block!important;
margin-top: 30px;

}

.mobile-message {    width: var(--content-width);  max-width:580px;   margin: auto;}
.nocall {margin:auto; width:64px; display:block;}
.mobile-message a:hover {color:var(--main-bluet);}

.mob-ad-logo {display: block;
margin: auto;
width: 246px;
margin-top: 54px;}

@media only screen and (max-width: 1180px) {
.mobile-message {
display: block!important;
}
.agency-container, .ads-logo-agency {display: none;}
}


.twolcirlce {
width: 55px;
height: 55px;
margin: 15px;
margin-left: 0;
margin-right: 28px;
align-items: center;
justify-content: center;
background-color: #32DE8A;
border-radius: 50%;
}

.modal-one {
opacity: 0;
pointer-events: none;
visibility: hidden;
position: fixed;
z-index: 100000000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(24, 24, 27, .94);
transition-duration: .4s;
transition-property: opacity;
transition-timing-function: cubic-bezier(.47, 0, .74, .71);
}

.visible-modal {
opacity: 1;
pointer-events: auto;
visibility: visible;
transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}

.modal-one {
opacity:0;
pointer-events:none;
visibility: hidden;
position: fixed; 
z-index: 100000000; 
left: 0;
top: 0;
width: 100%;
height: 100%; 
overflow: auto; 
background-color: rgb(0,0,0); 
background-color: rgba(24, 24, 27, .94);
transition-duration:.4s;
transition-property: opacity;
transition-timing-function: cubic-bezier(.47,0,.74,.71);
}

.visible-modal {opacity:1;
pointer-events:auto;
visibility: visible;
transition-timing-function: cubic-bezier(.22,.61,.36,1);
}
.modal-content {
background-color: #fefefe;
padding: 37px;
top:50%;
left:50%;
position: absolute;
box-sizing: border-box;
border: 1px solid rgba(24, 24, 27, .94);
border-top: 12px solid var(--main-bluet);
width: 680px;
border-radius: 10px;
transform: translateY(-44%) translateX(-50%) scale(.84);
transition: transform .4s cubic-bezier(.2,.8,.25,1);
}



.visible-modal .modal-content {  transform:  translateY(-50%) translateX(-50%)  scale(1);}


.close {
float: right;
margin-top: -30px;
padding: 12px;
margin-right: -25px;
font-weight: bold;
opacity: .86;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.modal-content b  {font-weight: 600;}
.modal-content h2 {color:var(--main-bluet); padding-bottom: 24px;}

.downloadmodal .modal-content-inner {display:none;}

.downloadmodal {pointer-events: none;}
.downloadmodal .close {opacity:0;}
.downloadmodal.download-complete {pointer-events: auto;}
.downloadmodal.download-complete .close {opacity:.86;}
.infomodal .modal-content-inner-two {
display: none;
}

.infomodal .modal-content-inner-two {display:none;}
.modal-content-inner-two {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
height: 100%;
}

.modal-content-inner-two .twolc {display:none;}
.download-complete .modal-content-inner-two .twolc {display:flex;}
.download-complete .modal-content-inner-two .onelc {display:none;}

.modal-content-inner-two {font-size: 18px;}

.mobile-message {display: none;}
.modal-content-inner-two {
height: 82px !important;
}


.lds-default {
display: none;
position: absolute;
top: -2px;
transform: scale(.88);
right: 17px;
width: 80px;
height: 80px;
}

.lds-default {

top: -2px;
transform: scale(0.53);
right: 74px;

}

.lds-default div {
position: absolute;
width: 6px;
height: 6px;
background: #e1e5eb;
background: var(--main-bluet);

border-radius: 50%;
animation: lds-default 1.2s linear infinite;
}

.lds-default div:nth-child(1) {
animation-delay: 0s;
top: 37px;
left: 66px;
}

.lds-default div:nth-child(2) {
animation-delay: -0.1s;
top: 22px;
left: 62px;
}

.lds-default div:nth-child(3) {
animation-delay: -0.2s;
top: 11px;
left: 52px;
}

.lds-default div:nth-child(4) {
animation-delay: -0.3s;
top: 7px;
left: 37px;
}

.lds-default div:nth-child(5) {
animation-delay: -0.4s;
top: 11px;
left: 22px;
}

.lds-default div:nth-child(6) {
animation-delay: -0.5s;
top: 22px;
left: 11px;
}

.lds-default div:nth-child(7) {
animation-delay: -0.6s;
top: 37px;
left: 7px;
}

.lds-default div:nth-child(8) {
animation-delay: -0.7s;
top: 52px;
left: 11px;
}

.lds-default div:nth-child(9) {
animation-delay: -0.8s;
top: 62px;
left: 22px;
}

.lds-default div:nth-child(10) {
animation-delay: -0.9s;
top: 66px;
left: 37px;
}

.lds-default div:nth-child(11) {
animation-delay: -1s;
top: 62px;
left: 52px;
}

.lds-default div:nth-child(12) {
animation-delay: -1.1s;
top: 52px;
left: 62px;
}

@keyframes lds-default {
0%,
20%,
80%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
}

.loaders {
position: absolute;
  z-index: 0;
  width: 40px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #15ADF3;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 infinite 1s linear;

}
@keyframes l3 {to{transform: rotate(1turn)}}

.lc-wli {

  position: relative;
width: 70px;
height: 70px;
display: flex;
align-items: center;
margin-right: 18px;
margin-left: 6px;
}


.warning {font-weight: 400!important;}
.select-p-element {position:relative;}
.star {display:none;}
.laps {display: none;}


.cb-container {
  display: flex;
      align-items: center;
      position: relative;
      padding-left: 35px;
      height: 25px;
      margin-bottom: 16px;
      cursor: pointer;
      font-size: 15px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
}

/* Hide the browser's default checkbox */
.cb-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 6px;
  height: 25px;
  width: 25px;
  background-color: #dfe5ed;


}


.cb-container:hover input ~ .checkmark {
  background-color: var(--main-bluet);
}

.cb-container input:checked ~ .checkmark {
  background-color: var(--main-bluet);
}


.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


.cb-container input:checked ~ .checkmark:after {
  display: block;
}


.cb-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media only screen and (max-width: 1350px) {
  .star {display:inline-block;}
  .laps {display: inline;}
  .desk {display:none;}
  .size b {cursor:pointer;}
  .warning{
    position: absolute;
    top: 0px;
    left: 239px;
    font-size: 14px;
    opacity:0!important;
  }

  .size:hover .warning {
    opacity:.9!important;
  }

  .speech-bubble {
    position: absolute;
    background: #26272b;
    padding: 6px 8px;
    color: #9fa2a7;
    color:var(--lightgray);
    border-radius: .4em;
    top: -47px;
    left: 0;
    opacity:0;
  }
  .size:hover .speech-bubble {
    opacity:.9!important;
  }
  
  .speech-bubble:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 40px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #26272b;
    border-bottom: 0;
    margin-left: -10px;
    margin-bottom: -10px;
  }
  
}

@media only screen and (max-width: 1250px) {
  .star {display:none;}
  .warning{
    display:none;
  }
}


.at-style .agency-container form {
  border-top: 10px solid var(--at-blue);
}

.at-style .blue-button {
  background-image: none!important;
  background-color:var(--at-blue)!important;
}


.at-style .blue-button:hover, .at-style .blue-button:focus {
  background: none;
  background-image: none!important;
  background-color:var(--at-dark-blue)!important;
  outline: 1px solid var(--at-dark-blue)!important;
  color: white;
}


.at-style .download-cr {
  background: var(--at-yellow);
}

.at-style .download-cr:hover {
  outline: 1px solid var(--at-dark-yellow);
  background-color: var(--at-dark-yellow);
}


.at-style .cb-container input:checked ~ .checkmark {
  background-color: var(--at-yellow);
}

.at-style .cb-container input:checked ~ .checkmark {
  background-color: var(--at-yellow);
}

.at-style .cb-container:hover input ~ .checkmark {
  background-color: var(--at-yellow);
}

.at-style .checkmark {
  background-color: var(--at-yellow);
}

.at-style .lds-default div {
background-color: var(--at-yellow);
}


.at-style .ads-logo-agency {width: clamp(230px, 17.969vw, 270px);}

.at-style .mob-ad-logo {width:176px;}

.at-style .mobile-message a:hover {color:var(--at-yellow);}


.at-style .nocall {width:60px;}