.afh-rq {background-image: url(/directory/images/addheader/rq.png)}
.afh-bdo {background-image: url(/directory/images/addheader/bdo.png)}
.afh-warface {background-image: url(/directory/images/addheader/warface.png)}
.afh-cr { background-image: url(/directory/images/addheader/cr.png)}
.afh-coc { background-image: url(/directory/images/addheader/coc.png)}
.afh-bs { background-image: url(/directory/images/addheader/bs.png)}
.afh-lol { background-image: url(/directory/images/addheader/lol.png)}
.afh-csgo {background-image: url("/directory/images/addheader/csgo.png")}
.afh-dota2 {background-image: url("/directory/images/addheader/dota2.png") }
.afh-battlenet {background-image: url("/directory/images/addheader/wow.png")}
.afh-wow {background-image: url("/directory/images/addheader/wow.png")}
.afh-hearthstone {background-image: url("/directory/images/addheader/hearthstone.png")}
.afh-overwatch {background-image: url("/directory/images/addheader/overwatch.png")}
.afh-wot {background-image: url(/directory/images/addheader/wot.png)}
.afh-wows {background-image: url(/directory/images/addheader/wows.png)}
.afh-wowp {background-image: url(/directory/images/addheader/wowp.png)}
.afh-warframe {background-image: url("/directory/images/addheader/warframe.png")}
.afh-crossout {background-image: url("/directory/images/addheader/crossout.png")}
.afh-skyforge {background-image: url("/directory/images/addheader/skyforge.png")}
.afh-fortnite {background-image: url(/directory/images/addheader/fortnite.png)}
.afh-pubg-mobile {background-image: url(/directory/images/addheader/pubg-mobile.png)}
.afh-war-thunder {background-image: url("/directory/images/addheader/war-thunder.png")}
.afh-tanki-online {background-image: url("/directory/images/addheader/tanki-online.png")}
.afh-destiny2 {background-image: url("/directory/images/addheader/destiny2.png")}
.afh-cod-mobile {background-image: url("/directory/images/addheader/cod-mobile.png")}
.afh-escapefromtarkov {background-image: url("/directory/images/addheader/escapefromtarkov.png")}
.afh-freefire {background-image: url("/directory/images/addheader/freefire.png")}
.afh-pokemongo {background-image: url("/directory/images/addheader/pokemongo.png")}
.afh-genshin-impact {background-image: url("/directory/images/addheader/genshin-impact.png")}
.afh-valorant {background-image: url("/directory/images/addheader/valorant.png")}
.afh-lostark {background-image: url("/directory/images/addheader/lostark.png")}
.afh-hots {background-image: url("/directory/images/addheader/hots.png")}
.afh-mlbb {background-image: url("/directory/images/addheader/mlbb.png")}
.afh-minecraft {background-image: url("/directory/images/addheader/minecraft.png")}
.afh-psn {background-image: url("/directory/images/addheader/psn.png")}
.afh-another-games {background-image: url(/directory/images/addheader/another-games.png)}

div.wpcf7 {
    position: relative;
}
.addform-area {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 20px;
}
.af-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 150px;
    background-repeat: no-repeat;
    background-position: bottom right;
}
.addform {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30px 40px 10px;
    margin-bottom: 40px;
    background: #fff;
    box-shadow: rgb(0 0 0 / 5%) 0px 2px 20px 0px;
    border-radius: 20px;
}
.addform-col-1,
.addform-col-2,
.addform-col-3 {
    display: inline-block;
    position: relative;
    margin-bottom: 30px;
}
.addform-col-1 {width: 100%}
.addform-col-2 {width: calc(50% - 20px)}
.addform-col-3 {width: calc(33.3% - 20px)}

.addform p {
    margin-bottom: 10px;
    /* color: #8a8f9c; */
}
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea {
    margin: 0;
}
.wpcf7 input,
.wpcf7 select {
    font-weight: 500;
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus  {
    border-color:#c2d2e0;
}
.wpcf7 textarea {
    min-height: 200px;
    margin-top: 10px;
    font-size: 18px;
}
.wpcf7-form-control-wrap.select:after {
    position: absolute;
    top: 0;
    right: 0;
    padding: 16px 15px;
    font-family: 'Fontawesome';
    content: '\f078';
    color: #dce5ec;
    transition: .2s top;
}
.high-input .wpcf7-form-control-wrap.select:after {
    padding: 18px 15px;
}
.wpcf7-form-control-wrap.select:hover:after {
    top: 2px;
}
.input-value:after {
    position: absolute;
    bottom: 1px;
    right: 0;
    padding: 13px 15px;
    border-left: 1px solid #DCE5EC;
    content: attr(data-value);
    color: #8a8f9c;
}
.input-value input,
.wpcf7-form-control-wrap select {
    padding-right: 50px;
}
.high-input.input-value input {
    padding-right: 70px;
}
.high-input input {
    font-size: 20px;
    font-weight: normal;
}
.high-input.input-value:after {
    font-size: 20px;
}
.additionally,
.af-counter {
    color: #AFBBC5;
}
.af-counter {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 5px;
    font-size: 14px;
}
span.wpcf7-list-item,
span.wpcf7-list-item label,
span.wpcf7-list-item input {
    cursor: pointer;
}
.wpcf7-display-none,
div.wpcf7 div.ajax-error {
    display: none;
}

/* Add Form > Checkbox */
.wpcf7-checkbox {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    user-select: none;
}

.wpcf7-checkbox label > input {
  position: absolute;
  z-index: -1;
  visibility: hidden;
}
.wpcf7-checkbox label > span {
    display: inline-block;
    position: relative;
    margin: 5px;
    color: #8a8f9c;
    background: #e3eaf0;
    border-radius: 5px;
    padding: 0 19px;
    line-height: 28px;
    transition: .2s, background 0s, color 0s;
}
.wpcf7-checkbox label > span:hover,
.wpcf7-checkbox label > input:checked + span {
    color: #fff;
    background: #69adfa;
}
.wpcf7-checkbox label > input:checked + span {
    padding-right: 14px;
    padding-left: 24px;
}
.wpcf7-checkbox label > span:before {
    position: absolute;
    left: 3px;
    content: '\f00c';
    font-family: 'Fontawesome';
    font-size: 10px;
    transition: inherit;
    opacity: 0;
}
.wpcf7-checkbox label > input:checked + span:before {
    left: 8px;
    opacity: 1;
}

/* Add Form > File upload */
.file-upload .addform-col-2 {
    margin-bottom: 30px;
}
input.wpcf7-file {
    width: 100%;
    max-height: 54px;
    padding: 15px;
    padding-right: 40px!important;
    background: #eceff3;
    border-radius: 8px;
    color: #8a8f9c;
}
.delimg {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 20px;
    line-height: 53px;
}
.delimg:after {
    font-family: 'Fontawesome';
    content: '\f00d';
    font-size: 16px;
    color: #8a8f9c;
    font-weight: 100;
}
.delimg:hover:after {
    color: #f66261;
}
.file-upload .addimg {
    display: block;
    background: #eceff3;
    padding: 10px;
    text-align: center;
    font-weight: 500;
    border-radius: 8px;
}
.file-upload .addimg:hover,
input.wpcf7-file:hover {
    background: #dce5ec;
}
.addimg:before {
    content: '\f067';
    font-family: 'Fontawesome';
    font-weight: 100;
    margin-right: 10px;
}

/* Add Form > Contact */
span.contactselect {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    z-index: 1;
}
span.contactselect select {
    height: 100%;
    border: unset;
    padding-right: 30px;
}
.af-contactselect span.contactselect:after {
    right: 0;
    padding-left: 0;
    padding-right: 0!important;
}
.af-contactselect .contact input {
    padding-left: 145px;
}
.additionally-contactselect {
    padding: 10px;
    margin-bottom: 20px;
    background: #eceff3;
    text-align: center;
    border-radius: 8px;
}
.additionally-contact:before {
    font-family: 'Fontawesome';
    font-weight: 100;
    margin-right: 10px;
    content: '\f30d';
    color: #dce5ec;
}

/* Add Form > Submit */
.acceptance {
    margin-bottom: 20px; 
}
.acceptance label {
    display: block;
    width: 100%;
    background: #eceff3;
    padding: 15px;
    font-weight: 500;
    text-align: center;
    border-radius: 8px;
}
.acceptance label:hover {
    background: #dce5ec;
}
.additionally-guard {
    margin-bottom: 40px;
}
.af-submit {
    margin-bottom: 40px;
    position: relative;
}

/* Add Form > Submit Response */
div.wpcf7 .screen-reader-response {
    display: none;
}
div.wpcf7-response-output {
    position: relative;
    padding: 10px 0;
    font-size: 20px;
    text-align: center;
}
div.wpcf7-mail-sent-ok {
    background: #fafafa;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
div.wpcf7-response-output:before {    
    font-family: 'Fontawesome';
    font-weight: 100;
    margin-right: 10px;
}
div.wpcf7-mail-sent-ok:before {    
    content: '\f00c';
    color: #0bca00;
}
div.wpcf7-spam-blocked:before,
div.wpcf7-mail-sent-ng:before,
div.wpcf7-validation-errors:before {    
    content: '\f06a';
    color: #f66261;
}

/* Add Form > Valid tip */
.wpcf7-form-control-wrap {
    position: relative;
    display: block;
}
span.wpcf7-not-valid-tip {
    position: absolute;
    bottom: -15px;
    left: 0px;
    max-width: 305px;
    background: #f66261;
    box-shadow: -5px 3px 13px rgba(255, 0, 0, 0.1);
    border-radius: 3px;
    padding: 5px 20px;
    font-size: 13px;
    color: #fff;
    z-index: 1;
    cursor: default;
}
span.wpcf7-not-valid-tip:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 8px;
    width: 0;
    height: 0;
    border-width: 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent #f66261;
}

/* Progress loader */
.progress-loader {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    width: 100%;
    background: #fafafa;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    text-align: center;
    transition-delay: .5s;
    transition: opacity .3s;
}
.active.progress-loader {
    visibility: visible;
    opacity: 1;
}
.progress-loader-square {
	display: inline-block;
	position: relative;
	top: 3px;
	height: 45px;
	width: 45px;
}
.active .progress-loader-square .square {
    height: 16.5px;
    width: 16.5px;
    top: -11px;
    margin-right: 5.5px;
    margin-bottom: 5.5px;
    animation-duration: 6000ms;
    background: #DCE5EC;
    float: left;
    position: relative;
    opacity: 0;
    -webkit-animation: progress-loader 4s infinite;
    animation: progress-loader 4s infinite;
}
.progress-loader-square .square:nth-child(1) {-webkit-animation-delay: 1.8s;animation-delay: 1.8s;animation-delay: 0ms}
.progress-loader-square .square:nth-child(2) {-webkit-animation-delay: 2.1s;animation-delay: 2.1s;animation-delay: 300ms}
.progress-loader-square .square:nth-child(3) {-webkit-animation-delay: 2.4s;animation-delay: 2.4s;animation-delay: 600ms}
.progress-loader-square .square:nth-child(4) {-webkit-animation-delay: 2.7s;animation-delay: 2.7s;animation-delay: 900ms;background: #FFC500;}
@-webkit-keyframes progress-loader { 0% {opacity: 0} 5% {opacity: 1;top: 0} 50.9% {opacity: 1;top: 0} 55.9% {opacity: 0;top: inherit} }

/* Modal */
.modal .wpcf7 .addform-col-1,
.modal .wpcf7 .addform-col-2,
.modal .wpcf7 .addform-col-3 {
    padding: 0;
}
.modal .wpcf7 h3 {
    margin-bottom: 20px;
}
.modal .wpcf7 textarea {
    margin-top: 0;
}
.additionally-modalinfo {
    font-size: 16px!important;
    color: #272e40;
}
.modal .wpcf7 .af-submit {
    margin-bottom: 0;
}
.af-submit input {
    width: 100%;
}
.modal .wpcf7 div.wpcf7-mail-sent-ok,
.modal .wpcf7 .progress-loader {
    background: #fff;
}
.modal .wpcf7 div.wpcf7-response-output {
    padding-bottom: 0;
}
.modal .wpcf7-checkbox {
    margin: 0;
    font-size: initial;
}
.modal .wpcf7-checkbox label > span {
    margin: 0;
    padding: 5px 19px;
    width: 100%;
    text-align: center;
}
/* Phone Adaptation - ph */
@media screen and (max-width: 560px)
{
     .addform-area {
         padding: 20px;
         margin-top: -40px;
     }
     .af-header {
         height: 70px;
         background-size: 80%;        
     }
     .af-title {
         line-height: 70px;
     }
     .af-counter {
         padding: 5px;
     }
     .addform {
         padding: 0;
         padding-top: 20px;
         margin-bottom: 15px;
         box-shadow: unset;
         background: unset;
         border-radius: unset;
         border-top: 1px solid #DCE5EC;
     }
     .addform-col-1, .addform-col-2, .addform-col-3 {
         margin-bottom: 15px;
     }
     .addform-col-2.af-price,
     .file-upload .addform-col-2 {
         width: 100%;
     }
     .addform-col-2,
     .addform-col-3 {
         width: calc(50% - 5px);
     }
     .addform p {
         margin-bottom: 5px;
         font-size: 14px;
     }
     .wpcf7 input:not(.button),
     .wpcf7 select,
     .wpcf7 textarea {
         padding: 10px;
         font-weight: normal;
     }
     .addform h3 {
         font-size: 20px;
         font-weight: 500;
     }
     .high-input input {
         font-size: 16px;
     }
     .input-value input,
     .wpcf7-form-control-wrap select {
         padding-right: 35px;
     }
     .input-value:after,
     .high-input.input-value:after {
         padding: 10px;
         font-size: 16px;
     }
     .high-input .wpcf7-form-control-wrap.select:after,
     .wpcf7-form-control-wrap.select:after {
         padding: 14px 15px;
         font-size: 14px;
     }
     .file-upload .addform-col-2 {
         margin-bottom: 10px;
     }
     .delimg {
         padding: 0 15px;
         line-height: 44px;
     }
     span.contactselect select {
         padding-right: 25px;
     }
     .af-contactselect .contact input {
         padding-left: 125px;
     }
     span.wpcf7-not-valid-tip {
         padding: 3px 10px;
         font-size: 11px;
     }
     .additionally,
     .acceptance label {
         font-size: 14px;
     }
     .acceptance label {
         padding: 10px;
     }
     .af-submit,
     .additionally-contactselect {
         margin: 0;
     }
     .additionally-guard {
         margin-bottom: 20px;
     }
     .additionally-contact {
         display: none;
     }
     div.wpcf7-response-output {
         font-size: 18px;
     }
     .modal .wpcf7 h3 {
         margin-bottom: 15px;
     }
}