@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}


h1{
    color: #383838;
    font-family: "proxima-nova";
    font-size: 48px;
    line-height: 60px;
    font-weight: bold;
    margin: 35px 0;
 }

 h2{
    color: #383838;
    font-family: "proxima-nova";
    font-size: 32px;
    line-height: 32px;
    font-weight: bold;    
    margin: 10px 0; 
 }

h3{
    color: #383838;
    font-family: "proxima-nova";
    font-size: 28px;
    line-height: 28px;
    font-weight: bold;  
    margin: 8px 0;  
}

h4{
    color: #383838;
    font-family: "proxima-nova";
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
    margin: 5px 0;    
}

p {
    color: #4b4b4b;
    font-size: 17px;
    line-height: 25px;
    margin: 15px 0;
}

.q6-input {
    margin-top: 10px;
    margin-bottom: 5px;
    position: relative;
}

.q6-input.q6-input--horizontal-switch{
    display: flex;
    align-items: center;
}

.q6-input.q6-input--horizontal-switch .q6-input__label{
    margin-right: 8px;
}

input[type=text].q6-input__field, 
input[type=tel].q6-input__field, 
input[type=password].q6-input__field,
textarea {
    width: 100%;
    padding: 12px 14px;
    margin: 0;
    display: inline-block;
    box-sizing: border-box;
    outline: none;
    border: 1px solid #e1e5ee;
    line-height: initial;

    font-family: "proxima-nova", sans-serif;
    font-weight: 600;
    font-size: 18px;

    border-radius: 6px;
    color: #171717; 
}

input[type=text]:disabled.q6-input__field, 
input[type=tel]:disabled.q6-input__field, 
input[type=password]:disabled.q6-input__field,
textarea:disabled,
.q6-select:disabled{
    /* background: #e8eaed; */

    background: #f7f8fa;
    border-color: #f7f8fa;    
}

.q6-input--search{
    min-width: 365px;
}

.q6-input__field--view{
    font-family: "proxima-nova", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: initial;
    color: #366fe0;    
    padding: 12px 14px;
    padding-left: 0;    
    border: 1px solid transparent;
}

.q6-button--shadow {
    box-shadow: 0px 3px 13px 1px rgba(105, 109, 112, 0.41);
}

.q6-button.q6-white-text.q6-blue-background:hover{
    background-color: #265cc5;
    border-color: #265cc5;
}

.q6-button.q6-white-background.q6-blue-border.q6-blue-text:hover {
    background-color: #3270e9;
    color: white;
}

.q6-button--close-window{
    position: absolute;
    right: 15px;
    top: 15px;
    padding: 0;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    min-width: 0;
    border: none;
    background-color: #e9effd;
    background-image: url(../img/blue_plus_icon.png);
    background-size: 14px 14px;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(45deg);    
}
.q6-button--close-window:hover {
    background-color: #d8e7ff;
}

.q6-button.q6-white-text.q6-blue-background:disabled,
.q6-button.q6-white-text.q6-blue-background:disabled:hover {
    background: #858c92;
    cursor: not-allowed;
    border-color: #858c92    
}

.q6-button.q6-button--round{
    display: inline-block;
    line-height: 30px;
    background-color: #e9effb;
    margin: 7px 0;
    padding: 0 17px;
    border-radius: 20px;
    color: #3270e9;
    font-weight: 500;
    text-decoration: none;
    font-size: 15px;
    position: relative;
    transition: all 0.2s ease;
    box-sizing: border-box;
    border: none;
}

.q6-button.q6-button--round:hover {
    background-color: #d8e7ff;
    box-shadow: 0px 1px 6px 1px rgba(105, 109, 112, 0.1);
}

.q6-button.q6-button--round:disabled{
    background: #f7f8fa;
    color: #bec4d2;
    cursor: not-allowed;
}
.q6-button.q6-button--round:disabled:hover {
    background: #f7f8fa;
    box-shadow: none;
}

.q6-button.q6-button--back{
    padding-left: 37px;
    font-weight: 500;
}

.q6-button.q6-button--back:after{
    content: '';
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    left: 22px;
    transform: rotate(135deg);
    top: calc(50% - 5px);
    height: 9px;
    width: 9px;
    border-bottom: 1px solid #3270eb;
    border-right: 1px solid #3270eb;
    transition: all 0.2s ease;
}

.q6-button.q6-button--back:hover:after {
    left: 18px;
}


.q6-button.q6-button--settings {
    display: flex;
    align-items: center;
    justify-content: center;
}

.q6-button.q6-button--settings:before {
    content: "";
    margin-right: 5px;
    display: inline-block;
    width: 14px;
    height: 14px;
    background-size: 14px 14px;
    background-image: url(../img/gear.svg);
}

.q6-button.q6-button--remove{
    line-height: 24px;
    font-weight: 400;
    background-color: #fcede9;
    color: #e03636;
}

.q6-button.q6-button--remove:before {
    content: "";
    margin-right: 5px;
    display: inline-block;
    width: 12px;
    height: 12px;
    background-size: 12px 12px;
    background-image: url(../img/profiles_delete_icon.svg);
}

.q6-button.q6-button--remove:hover{
    background-color: #fde6df;
    box-shadow: 0px 1px 6px 1px rgba(105, 109, 112, 0.1);
}

.q6-button.q6-button--copy,
.q6-button.q6-button--edit {
    line-height: 24px;
    font-weight: 400;
    background-color: #e9f0fc;
    color: #3b76eb;
    position: relative;
}

.q6-button.q6-button--copy:before {
    content: "";
    margin-right: 5px;
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url(../img/profiles_copy_icon.svg);
}

.q6-button.q6-button--copy:disabled:before {
    background-image: url(../img/copy_icon_disabled.svg);
}

.q6-flash-message {
    position: absolute;
    left: 0px;
    right: 0;
    top: 0;
    /* bottom: 0; */
    min-width: 58px;
    z-index: 1;

    border-radius: 20px;
    background-color: #e9f0fc;
    opacity: 0;

    color: #3b76eb;
    line-height: 24px;
    font-weight: 400;    

    font-size: 15px;
    text-align: center;    

    cursor: default;
    pointer-events: none;    
}

.q6-input__label {
    color: #171717;
    font-size: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;
  
    font-family: "proxima-nova", sans-serif;
    margin: 4px 0;

    white-space: nowrap;
}

.q6-input__label label{
    font-weight: normal;
    margin-bottom: 0; 
} 

.q6-input.q6-input--password{
    position: relative;
}

.q6-input.q6-input--project-name{
    max-width: 290px;
}

.q6-input.q6-input--email{
    max-width: 300px;
}

.q6-input.q6-input--address {
    max-width: 640px;
}

.q6-input.q6-input--vat{
    max-width: 125px;
}

.q6-input.q6-input--region-name,
.q6-input.q6-input--bucket-name,
.q6-input.q6-input--access-id,
.q6-input.q6-input--access-key{
    flex: 1;
    min-width: 260px;
}


.q6-input.q6-input--cors-origin{
    flex:1;
}

.q6-input.q6-input--bucket-name .q6-button.q6-button--edit {
    position: absolute;
    right: 14px;
    bottom: 5px;
}



.q6-input.q6-input--api-key,
.q6-input.q6-input--transfer-method{
    position: relative;
    min-width: 260px;
}

.q6-input.q6-input--enter-project-name{
    min-width: 320px;
}

.q6-input.q6-input--public-ip{
    min-width: 200px;    
}

.q6-input.q6-input--api-key .q6-button.q6-button--copy,
.q6-input.q6-input--transfer-method .q6-button.q6-button--copy{
    position: absolute;
    right: 14px;
    bottom: 5px;    
}


.q6-tutorial-inputs-block .q6-input__label > a {
    color: #9ea2ae;
    cursor: pointer;
}


.q6-pass-eye-button{
    position: absolute;
    width: 20px;
    height: 15px;
    right: 15px;
    bottom: 17px;
    cursor: pointer;
    background-image: url(../img/eye_gs.svg);
    background-repeat: no-repeat;  
    transition: all .3s ease;
}

.q6-pass-eye-button:hover{
    opacity: 0.8;
}

.q6-input.q6-input--password .q6-input__field{
    padding-right: 45px;
}

.q6-input__error-pass{
    position: absolute;
    color: #e13b3b;
    font-size: 13px;
    margin-top: 2px;
}

.q6-input__field--error{
    border-color: #e34d4d !important; 
}

.q6-input-and-buttons--inline{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
}

.q6-input-and-buttons--inline > .q6-button{
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 10px;
    margin-right: 20px;
    line-height: initial;
}

.q6-input-and-buttons--inline > .q6-button:last-of-type{
    margin-right: 0;
}

.q6-input-and-buttons--inline > .q6-button.q6-button--round {
    line-height: 30px;
    margin-bottom: 8px;
}

.q6-input-and-buttons--inline .q6-input{
    margin: 0;
    margin-right: 20px;
    margin-top: 10px;
}

.q6-input-and-buttons--inline .q6-input:last-of-type{
    margin-right: 0;
}

.q6-input-and-buttons--inline .q6-input + .q6-button{
    margin-left: 20px;
}

.q6-input-and-buttons--inline .q6-checkbox{
    margin-right: 20px;
}

.q6-input-and-buttons--inline .q6-checkbox:last-of-type{
    margin-right: 0;
}

.q6-input-and-buttons--inline-view .q6-input{
    min-width: 150px;
    flex: 0;
}

.q6-input-and-buttons--inline-view__button-container{
    flex: 1;
    text-align: right;    
}

.q6-input-and-buttons--inline-view__button-container .q6-button{
    margin-bottom:0;
}


.q6-input__label--with-question{
    justify-content: flex-start;
}

.q6-input__label--with-question .q6-question-icon{
    margin: 0;
    margin-left: 10px;
    cursor: pointer;
}

.q6-input__field--action-btns{
    position: relative;  
    max-width: -moz-fit-content;
    max-width: fit-content;
    padding-right: 30px;
}

.q6-input__field--action-btns.q6-input__field--action-btns__two-btns{
    padding-right: 60px;
}

.q6-input__field--action-btns .q6-tutorial-profile-actions{
    position: absolute;
    top: calc(50% - 12px);
    right: 0;    
}


/* round switch */
.q6-switch-container{
    height: 48px;
    display: flex;
    align-items: center;
}

.q6-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    min-width: 44px;
    height: 24px;
    margin: 0;
}
  
.q6-switch input {
    display: none;
}
  
.q6-switch__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e8eaed;
    -webkit-transition: .1s;
    transition: .1s;
    border-radius: 34px;
}
  
.q6-switch__slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 5px;
    bottom: 4px;
    background-color: #9ea2ae;
    -webkit-transition: .1s;
    transition: .1s;
    border-radius: 50%;
}
  
input:checked + .q6-switch__slider {
    background-color: #e9f0fc;
}
  
input:checked + .q6-switch__slider:before {
    -webkit-transform: translateX(19px);
    -ms-transform: translateX(19px);
    transform: translateX(19px);
    background-color: #306eea;
}
/* round switch */

.q6-switch-input{
    display:flex;
    margin-bottom: 20px;
}

.q6-switch-input .q6-input{
    margin:0;
    margin-top: 5px;
}

.q6-switch-input .q6-switch{
    margin-right:20px;
}

.q6-switch-input > div{
    flex:1;
}

.q6-switch-input__title{
    color: #525252;
    font-size: 17px;
    font-weight: 600;
    line-height: 25px;    
}

.q6-switch-input input[type=text].q6-input__field{
    padding: 7px 14px;
}


/* checkbox with images and text */
.q6-checkboxes-container{
    display: flex;
    flex-wrap: nowrap;    
}

.q6-image-text-checkbox{
    height: 48px;
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #838383;
    background-color: #f9f9f9;
    border: 1px solid #dae0ea;
    box-sizing: border-box;   
    border-radius: 7px;
    padding: 10px;
    padding-right:45px;
    padding-left: 50px;
    position: relative;
    cursor: pointer;
}

input:checked + .q6-image-text-checkbox {
    background-color: #f5f9ff;
    border-color:#306eea;
    color: #171717;
}

input:checked + .q6-image-text-checkbox:after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background-image: url(../img/checked_blue.png);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    right: 10px;
    top: 13px;
}

.q6-image-text-checkbox-container{
    margin: 0;
    margin-right: 15px;
}

.q6-image-text-checkbox-container:last-of-type{
    margin-right: 0;
}

.q6-image-text-checkbox-container input {
    display: none;
}

.q6-image-text-checkbox--web:before{
    content: "";
    position: absolute;
    width: 27px;
    height: 24px;
    background-image: url(../img/device_web.png);
    background-size: 27px 24px;
    background-repeat: no-repeat;
    left: 13px;
    top: 11px;
    opacity: 0.6;   
}

input:checked + .q6-image-text-checkbox--web:before{
    opacity: 1; 
}

.q6-image-text-checkbox--mobile:before{
    content: "";
    position: absolute;
    width: 27px;
    height: 24px;
    background-image: url(../img/device_mobile.png);
    background-size: 27px 24px;
    background-repeat: no-repeat;
    left: 13px;
    top: 11px;
    opacity: 0.6;   
}

input:checked + .q6-image-text-checkbox--mobile:before{
    opacity: 1; 
}

.q6-image-text-checkbox--ott:before{
    content: "";
    position: absolute;
    width: 27px;
    height: 24px;
    background-image: url(../img/device_ott.png);
    background-size: 27px 24px;
    background-repeat: no-repeat;
    left: 13px;
    top: 11px;
    opacity: 0.6;   
}

input:checked + .q6-image-text-checkbox--ott:before{
    opacity: 1; 
}
/* checkbox with images and text */

/* checkbox */
.q6-checkbox {
    display: block;
    position: relative;
    padding-left: 30px;
    margin: 10px 0;
    cursor: pointer;
    font-size: 15px;
    line-height: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 100;
    color: #171717;
}

.q6-checkbox input {
    display: none;
}

.q6-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    border: 1px solid #e1e5ee;
    border-radius: 3px;
    transition: all 0.1s ease;
    box-sizing: border-box;
}

.q6-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    box-sizing: border-box;
}

.q6-checkbox:hover input ~ .q6-checkmark {
    background-color: #ededed;
}

.q6-checkbox input:checked ~ .q6-checkmark {
    background-color: #306eea;
}

.q6-checkbox input:disabled ~ .q6-checkmark {
    border-color: #f7f8fa;
    background: #f7f8fa;
}

.q6-checkbox input:disabled:checked ~ .q6-checkmark {
    border-color: #9b9b9b;
    background: #9b9b9b;
}

.q6-checkbox input:checked ~ .q6-checkmark:after {
    display: block;
}

.q6-checkbox .q6-checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.q6-checkbox--with-question{
    display: flex;
    align-items: center;    
}

.q6-checkbox--with-question .q6-question-icon {
    margin: 0;
    margin-left: 10px;
    cursor: pointer;
    margin-bottom: 2px;
}
/* checkbox */


.q6-anchor-link{
    position: absolute;
    top: -90px;
}


.q6-select {
    background: white;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    margin: 0!important;
    display: inline-block;
    box-sizing: border-box;
    outline: none;
    border: 1px solid #bcbcbc;
    padding: 12px 14px;
    padding-right: 20px;
    line-height: initial;

    color: #171717;
    font-family: "proxima-nova", sans-serif;
    font-weight: 600;
    font-size: 18px;
    padding-left: 20px;
    padding-right: 26px;
    border-radius: 6px;
    border-color: #e1e5ee;    
}

.q6-custom-select {
    position: relative;
}

.q6-custom-select:after {
    position: absolute;
    right: 10px;
    top: calc(50% - 3px);
    display: inline-block;
    width: 0;
    height: 0;
    content: "";
    border-top: 5px solid #17172b;
    border-right: 5px solid transparent;
    border-bottom: 0;
    border-left: 5px solid transparent;
}

/********************* FEATURES  ***********************/
.q6-feature-item{
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.q6-feature-item p{
    margin: 0;
}

.q6-feature-item__icon{
    background-image: url(../img/features_icons.png);
    background-repeat: no-repeat;
    margin-right: 15px;
    width: 29px;
    height: 26px;
    min-width: 29px;
}

.q6-feature-item__icon--pay{
    background-image: url(../img/pricing/cards_p.svg); 
    background-size: 25px 26px;
    background-position: center top;
}

.q6-feature-item__icon--speed{
    background-image: url(../img/pricing/video_p.svg); 
    background-size: 23px 24px;
    background-position: center top;
}

.q6-feature-item__icon--shield{
    background-image: url(../img/pricing/shield_p.svg);
    background-size: 21px 22px;
    background-position: center top;
}

.q6-feature-item__icon--support{
    background-image: url(../img/pricing/24_p.svg);
    background-size: 25px 25px;
    background-position: center top;
}

.q6-feature-item__icon--gift{
    background-image: url(../img/pricing/gift_gs.svg); 
    background-size: 22px 22px;
    background-position: center top;
}

.q6-feature-item__icon--manager{
    background-image: url(../img/pricing/support_gs.svg); 
    background-size: 20px 25px;
    background-position: center top;      
}

.q6-feature-item__icon--api{
    background-image: url(../img/pricing/cloud_settings_gs.svg); 
    background-size: 26px 23px;
    background-position: center top;     
}

.q6-feature-item__icon--price{
    background-image: url(../img/pricing/money_gs.svg); 
    background-size: 15px 24px;
    background-position: center top;  
}
/********************* FEATURES  ***********************/

/********************* PRICING   ***********************/
.q6-promo-saving-links{
    color: #4b4b4b;
    font-size: 16px;
    line-height: 25px;    
}

.q6-promo-saving-links > div{
    margin-right: 15px;
    cursor: pointer;
    display: inline-flex;
    color: #9da3af;
}

.q6-promo-saving-links > div:last-of-type{
    margin-right: 0;
}

.q6-question-icon{
    width: 13px;
    min-width: 13px;
    height: 13px;

    background-image: url(../img/question.svg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 5px;
}

.q6-dollar-icon{
    width: 16px;
    min-width: 16px;
    height: 16px;
    background-image: url(../img/pricing/price_p.svg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 5px;
    margin-top: 3px;
}
/********************* PRICING   ***********************/


/********************* STRIPE    ***********************/
.StripeElement {
    width: 100%;

    padding: 12px 14px;
    padding-right: 26px;
    
    margin: 0;
    display: inline-block;
    box-sizing: border-box;
    outline: none;
    line-height: initial;
    color: #171717;
    font-family: "proxima-nova", sans-serif;
    font-weight: 600;
    font-size: 18px;
    border-radius: 6px;
    border: 1px solid #e1e5ee;

    height: 48px;
    background: white;
}

.StripeElement:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 14px;
    right: 10px;
    bottom: 24px;
    top: initial;
    background-image: url(../img/lock_icon.png);
    background-size: 12px 14px;
    background-repeat: no-repeat;
}
/********************* STRIPE    ***********************/

/********************* SECURED INPUT  ******************/
.q6-input.q6-lock-icon {
    position: relative;
}

.q6-lock-icon:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 14px;
    right: 10px;
    bottom: 18px;
    background-image: url(../img/lock_icon.png);
    background-size: 12px 14px;
    background-repeat: no-repeat;
}

.q6-input.q6-lock-icon input[type=text].q6-input__field{
    padding-right: 25px;
}
/********************* SECURED INPUT  ******************/

.q6-demo-links-buttons > a{
    display: inline-block;
    line-height: 30px;
    background-color: #e9effb;
    margin: 7px 0;
    margin-right: 20px;
    padding: 0 25px;
    border-radius: 20px;
    padding-right: 50px;
    color: #3270e9;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
    position: relative;
    transition: all 0.2s ease;
    min-width: 200px;
    box-sizing: border-box;
}

.q6-demo-links-buttons > a:after {
    content: '';
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    right: 27px;
    top: calc(50% - 5px);
    height: 9px;
    width: 9px;
    border-bottom: 1px solid #3270eb;
    border-right: 1px solid #3270eb;
    transform: rotate(-45deg);
    transition: all 0.2s ease;
}

.q6-demo-links-buttons > a:hover:after {
    right: 22px;
}

.q6-demo-links-buttons.q6-demo-links-buttons--back > a{
    padding-right: 25px;
    padding-left: 50px;
}

.q6-demo-links-buttons.q6-demo-links-buttons--back > a:after {
    left: 27px;
    transform: rotate(135deg);
}

.q6-demo-links-buttons.q6-demo-links-buttons--back > a:hover:after {
    left: 22px;
}

.q6-demo-links-buttons > a:last-of-type{
    margin-right: 0;
}

.q6-demo-links-buttons > a:hover{
    background-color: #d8e7ff;
    box-shadow: 0px 1px 6px 1px rgba(105, 109, 112, 0.1);   
}

.q6-demo-links-buttons--vertical{
    display: flex;
    flex-direction: column;    
}

.q6-demo-links-buttons--vertical > a{
    min-width: 220px;
    width: 220px;
}

@media screen and (max-width: 1024px){

    h1 {
        margin: 25px 0;
    }    

    h2 {
        margin: 15px 0;
    }    

    h3 {
        margin: 5px 0;
    }    
}

@media screen and (max-width: 780px){
    h1 {
        font-size: 38px;
        line-height: 50px;
        margin: 20px 0;
    }
}

@media screen and (max-width: 480px){
    h1, h2 {
        font-size: 30px;
        line-height: 40px;
        margin: 10px 0;
    }

    h3 {
        font-size: 25px;
        line-height: 25px;
    }      

    .q6-demo-links-buttons > a {
        width: 100%;
        box-sizing: border-box;
    }    
}