/* last modify date 24.07.24 */

/* check cdn cache reset (tmp comment) */

/* embedding special fonts */

@import url("https://supportyourapp.com/res/font/fonts.css");
@import url("https://supportyourapp.com/res/tiny-slider/tiny-slider.css");
@import url("https://supportyourapp.com/res/css/pages/team-page.css");
@import url("https://supportyourapp.com/res/css/pages/blog-page.css");
@import url("https://supportyourapp.com/res/css/pages/trendbook.css");
@import url('https://supportyourapp.com/res/css/pages/social-media.css');
@import url('https://supportyourapp.com/res/css/pages/mission-vision.css');
@import url('https://supportyourapp.com/res/css/pages/office-art.css');

html {height: 100%;-webkit-font-smoothing: subpixel-antialiased;}
body {margin:0;padding:0;color:#000;font-family: var(--main-font), sans-serif;font-weight: 500; letter-spacing: var(--main-letter-spacing); background:#fff; background-repeat:no-repeat; background-position: left top; font-size: 13px; -webkit-font-smoothing:antialiased;font-smoothing:antialiased; color: #1d1d1f}
a {color: #0059c7;}
h1, h2, h3, h4 {font-weight: bold; font-family: var(--main-font), sans-serif; }
/* input {-webkit-appearance: none;} */
h1:focus,h2:focus,h3:focus { box-shadow: 0 0px 10px #b6b4ab; outline: none}

/* Flex */
.flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;display: flex;-moz-align-items:center;-ms-align-items:center;-webkit-align-items:center;align-items:center;}
.flex-container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;display: flex; }
.flex-center { -ms-justify-content:center;-webkit-justify-content:center;-moz-justify-content:center;justify-content:center;align-items:center;-moz-align-items:center;-ms-align-items:center;-webkit-align-items:center;}
.flex-align-center {align-items:center;}
.flex-align-start {align-items:flex-start}
.flex-align-end {align-items:flex-end}
.flex-align-stretch {align-items: stretch}
.flex-justify-start {justify-content: flex-start;}
.flex-justify-around {justify-content:space-around;-webkit-justify-content:space-around;-moz-justify-content:space-around;}
.flex-justify-between {justify-content:space-between;-webkit-justify-content:space-between;-moz-justify-content:space-between;}
.flex-justify-center {justify-content: center;}
.flex-justify-evenly {justify-content:space-evenly;-webkit-justify-content:space-evenly;-moz-justify-content:space-evenly;}
.flex-justify-end {justify-content:flex-end;-webkit-justify-content:flex-end;-moz-justify-content:flex-end;}
.flex-self-end {align-self: flex-end;}
.flex-self-start {align-self: flex-start;}
.flex-vertical {flex-direction: column;}
.flex-stretch {align-items: stretch;}
.flex-wrap { flex-wrap: wrap}
.flex-basis-30 {flex-basis: 30%}
.flex-column {flex-direction: column;}
.order-1 {order: 1}
.order-2 {order: 2}
.order-3 {order: 3}
.order-4 {order: 4}
.order-5 {order: 5}
.order-6 {order: 6}
.order-7 {order: 7}
.order-8 {order: 8}
.order-9 {order: 9}
.order-10 {order: 10}

.gap2 {gap: 2px;}
.gap3 {gap: 3px;}
.gap4 {gap: 4px;}
.gap5 {gap: 5px;}
.gap6 {gap: 6px;}
.gap7 {gap: 7px;}
.gap8 {gap: 8px;}
.gap9 {gap: 9px;}
.gap10 {gap: 10px;}
.gap11 {gap: 11px;}
.gap12 {gap: 12px;}
.gap13 {gap: 13px;}
.gap14 {gap: 14px;}
.gap15 {gap: 15px;}
.gap16 {gap: 16px;}
.gap17 {gap: 17px;}
.gap20 {gap: 20px;}
.gap22 {gap: 22px;}
.gap24 {gap: 24px;}
.gap27 {gap: 27px;}
.gap32 {gap: 32px;}
.gap48 {gap: 48px !important;}
.gap60 {gap: 60px;}
.gap65 {gap: 65px;}

.flex-1 {flex: 1;}
.flex-2 {flex: 2;}
.flex-3 {flex: 3;}

/* Grid */
.grid {display: grid;}
.grid-inline {display: inline-grid;}
.row2-f1 {grid-template-rows:1fr auto;}
.row2-f2 {grid-template-rows: auto 1fr;}
.col-inline-m350 {grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));}
.col-inline-m450 {grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));}
.grid-order {display: grid;grid-template-columns: auto;grid-template-rows: auto;}


/* common styles */
.inactive {background-color: #ebebeb}
.bdisabled {background-color: #cdcdcd!important; color: #222!important; -webkit-animation: bounce-light 1.5s infinite; animation: bounce-light 1.5s infinite; background-image: none;}

span.error {display: block !important; background-color: red; padding: 10px 10px;  color: #fff; /*position: absolute; */top: 0;left: 0; -moz-animation: opacity .3s;-webkit-animation: opacity .3s;animation: opacity .3s; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; font-size: 1em; max-width: 400px;box-sizing: border-box;}
.valid {background-color: #b9ffd1!important; color: #006423;}
input[disabled] {border-color: #cdcdcd!important;background-color: #cdcdcd!important; color: #222!important;outline-width: 0;outline: none;}
p { line-height: 1.5em}
.lh05 {line-height: 1em}
.lh1 {line-height: 1em}
.lh12 {line-height: 1.2em}
.lh15 {line-height: 1.5em}
.lh2 {line-height: 2em}
.lh19 {line-height: 19.5px;}
.f12 {font-size: 12px}
.f13 {font-size: 13px}
.f15 {font-size: 15px}
.f16 {font-size: 16px}
.f17 {font-size: 17px}
.f18 {font-size: 18px}
.f19 {font-size: 19px}
.f20 {font-size: 20px}
.f21 {font-size: 21px}
.f22 {font-size: 22px}
.f24 {font-size: 24px}
.f25 {font-size: 25px}
.f27 {font-size: 27px}
.f28 {font-size: 28px}
.f30 {font-size: 30px}
.f35 {font-size: 35px}
.f40 {font-size: 40px}
.f50 {font-size: 50px}
.f60 {font-size: 60px}
.f65 {font-size: 65px;}
.f70 {font-size: 70px}
.f80 {font-size: 80px}
.f85 {font-size: 85px}
.f-lh18 {line-height: 18px;}
.f-lh19-5 {line-height: 19.5px;}
.f-lh22-5 {line-height: 22.5px;}
.f-lh24 {line-height: 24px;}
.f-lh27 {line-height: 27px;}
.f-lh30 {line-height: 30px;}
.f-lh31 {line-height: 31px;}
.f-lh42 {line-height: 42px;}
.f-lh54 {line-height: 54px;}
.f-lh71-5 {line-height: 71.5px;}
.f-lsp05 {letter-spacing: 0.5px;}

@media screen and (max-width: 390px) {
	.f50 {font-size: 30px !important}
	.f22 {font-size: 18px}
	.f20 {font-size: 18px}
}

@media screen and (max-width: 360px) {
	.f22 {font-size: 16px}
	.f20 {font-size: 16px}
}

@media screen and (max-width: 325px) {
	.f27 {font-size: 22px}
	.f20 {font-size: 14px}
	.f18 {font-size: 14px}
}


.fbold,strong {font-family:var(--main-font);font-weight: bold;}
.fmedium {font-family: var(--main-font); font-weight: 500;}
.fbook {font-family:var(--main-font); font-weight: normal;}
.fitalic {font-style: italic}
.fcapitalize {text-transform: capitalize;}
.tuppercase {text-transform: uppercase}
.tlowercase {text-transform: none!important}
.cwhite {color: white}
.cwhitetransparent30 {color: rgba(255,255,255,.3)}
.cblack {color: #1d1d1f;}
.cred {color: red}
.cyellow {color: #ffde00}
.cgrey {color: #777;}
.footer-cgrey {color: #D9D9D9; opacity: 0.5;}
.cbordo {color: #752323}
.cblue {color: #3582ba}
.cgreen {color: #6dae39}
.cfacebook {color:#4468ad;}
.bblack {border-bottom: 2px solid black}
.w25 {width: 25%}
.w30 {width: 30%}
.tile-mini.w25,.tile.w25 {flex-basis: 24%; box-sizing: border-box}
.tile-mini.w30,.tile.w30 {flex-basis: 29%; box-sizing: border-box}
.w50 {width: 50%}
.tile-mini.w50,.tile.w50 {flex-basis: 49%; box-sizing: border-box}
.w100 {width: 100%}
.h100 {height: 100%}
.tile-mini.w100,.tile.w100 {flex-basis: 99%; box-sizing: border-box}
.tajustify {text-align: justify;}
.tacenter {text-align: center}
.taleft {text-align: left}
.taright {text-align: right}
.bcenter {display:-webkit-box;-webkit-box-pack: center;-webkit-box-align: center;}
.mwidth800 {max-width: 800px}
.mwidth700 {max-width: 700px}
.mwidth600 {max-width: 600px}
.mwidth550 {max-width: 550px}
.mwidth500 {max-width: 500px}
.mwidth450 {max-width: 450px}
.mwidth400 {max-width: 400px}
.mwidth350 {max-width: 350px}
.mwidth300 {max-width: 300px}
.mwidth250 {max-width: 250px}
.mwidth200 {max-width: 200px}
.mheight30 {min-height: 30px}
.mheight200 {min-height: 200px}
.mheight220 {min-height: 220px}
.mheight250 {min-height: 250px!important}
.mheight300 {min-height: 300px}
.mheight420 {min-height: 420px}
.mheightauto {min-height: auto!important}
.minwidth200 {min-width: 200px;}
.minwidth150 {min-width: 150px!important;}
.minwidth250 {min-width: 250px!important;}
.minwidth300 {min-width: 350px!important;}
.minwidth350 {min-width: 350px!important;}
.minwidth450 {min-width: 450px!important;}
.minwidth500 {min-width: 500px!important;}
.clear-ul {margin-top: 0; margin-bottom: 0; padding-left: 0}
.clear-ul>li {padding: 0; list-style: none}
.mauto {margin: auto;}
.mt0 {margin-top: 0em}
.mt05 {margin-top: .5em}
.mt1 {margin-top: 1em}
.mt2 {margin-top: 2em}
.mt3 {margin-top: 3em}
.mt16 {margin-top: 16px;}
.mt17 { margin-top: 17px;}
.mt24 {margin-top: 24px;}
.mt32 {margin-top: 32px;}
.mt40 { margin-top: 40px !important;}
.mb0 {margin-bottom: 0em!important}
.mb05 {margin-bottom: .5em}
.mb1 {margin-bottom: 1em}
.mb2 {margin-bottom: 2em}
.mb3 {margin-bottom: 3em}
.mb16 {margin-bottom: 16px;}
.mb24 {margin-bottom: 24px;}
.mb32 {margin-bottom: 32px;}
.mb40 {margin-bottom: 40px;}
.ml0 {margin-left: 0em!important}
.ml1 {margin-left: 1em}
.ml2 {margin-left: 2em}
.ml3 {margin-left: 3em}
.ml16 {margin-left: 16px;}
.mr0 {margin-right: 0em!important}
.mr1 {margin-right: 1em}
.mr2 {margin-right: 2em}
.mr3 {margin-right: 3em}
.mr16 {margin-right: 16px;}
.m0 {margin: 0;}
.p6p {padding: 6% 1em}
.p0 {padding: 0px;}
.p1 {padding: 1em}
.p15 {padding: 1.5em}
.p2 {padding: 2em}
.p3 {padding: 3em}
.p4 {padding: 4em}
.p6 {padding: 6em}
.pb0 {padding-bottom: 0px;}
.pb05 {padding-bottom: .5em}
.pb05 {padding-bottom: .5em}
.pb1 {padding-bottom: 1em}
.pb2 {padding-bottom: 2em}
.pb3 {padding-bottom: 3em}
.pt0 {padding-top: 0em}
.pt05 {padding-top: .5em}
.pt1 {padding-top: 1em}
.pt2 {padding-top: 2em}
.pt3 {padding-top: 3em}
.pr1 {padding-right: 1em}
.pr2 {padding-right: 2em}
.pr3 {padding-right: 3em}
.pl0 {padding-left: 0em}
.pl1 {padding-left: 1em}
.pl2 {padding-left: 2em}
.pl3 {padding-left: 3em}
.pl30p {padding-left: 25%}
.pl34px {padding-left: 65px;}
.p32 {padding: 32px; box-sizing: border-box;}
.p32-16 {padding: 32px 16px; box-sizing: border-box;}
.p64 {padding: 64px;}
.p64-16 {padding: 64px 16px; box-sizing: border-box;}
.p64-32 {padding: 64px 32px; box-sizing: border-box;}

.text-page-contents {
	position: relative;
	overflow: hidden;
}

@media screen and (max-width: 580px) {
	.p32 {padding: 32px 16px;}
	.p64 {padding: 64px 16px;}
	.p64-32 {padding: 64px 16px;}

	.text-page-contents .f60 {
		font-size: 45px;
	}

	.text-page-contents {
		padding: 16px !important;
	}

	.text-page-contents .mt40 {
		margin-top: 32px !important;
		margin-bottom: 24px !important;
	}
}

@media screen and (max-width: 450px) {
	.text-page-contents .f60 {
		font-size: 35px;
	}
	
	.text-page-contents .f50 {
		font-size: 30px !important;
	}
}

@media screen and (max-width: 390px) {
	.text-page-contents .f60 {
		font-size: 27px;
	}
}

.underline {border-bottom: 5px solid black; display: inline-block}
.invert {filter: invert(1)}
.tdnone {text-decoration: none;}
.dnone {display: none;}
.tdunderline {text-decoration: underline;}
em {font-style: normal;}
.ttnone { text-transform: none!important}
.psticky {position: -webkit-sticky; position: sticky;top: 0px;}
.pfixed { position: fixed}
.dblock {display: block}
.dcontents {display: contents}
.dinlineblock {display: inline-block;}
.prelative { position: relative}
.ohidden {overflow: hidden;}
.top17 {top:17px}
.top94 {top:94px}
.drop-shadow {filter: drop-shadow(0 10px 10px rgba(0,0,0,.2))}
.box-shadow { box-shadow: 0 10px 10px rgba(0,0,0,.2);}
.box-shadow-30 { box-shadow: 0 15px 30px rgba(0,0,0,.3);}
.img-border-white {border: 2px solid white;}
.border-bottom-grey { border-bottom: 1px solid #bbb}
.border-top-grey { border-top: 1px solid #bbb}
.transition-childred>* {transition: all .3s ease;}
.open-main-cta,.cpointer {cursor: pointer;}/* used to render click event with javascript */
.cdefault {cursor: default;}
.inner-shadow {box-shadow: inset 0 0 40px rgba(0,0,0,.3);}
.bsizing-bb {box-sizing: border-box;}
.zi1 {z-index: 1}
.zi2 {z-index: 2}
.zi3 {z-index: 3}
.zi4 {z-index: 4}
.zi5 {z-index: 5}

.bgrey {background-color:#edeced;}
.affiliate-grey {background-color:#EEECED;}
.byellow,
.yellow-circle::after {background-color:#ffde00;}
.marine-circle::after {background-color:#54CED6;}
.b-yellow-bdf {position: relative; z-index: -1; transform-style:preserve-3d}
.b-yellow-bdf::before {content: ""; position: absolute; width: 120%; height: 150%; background-color:#ffde0044;  z-index: -1; transform: translateZ(-1px); top: -25%; left: -10%; -webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);-webkit-mask-image: url("https://supportyourapp.com/img/mask.png");-webkit-mask-size: 100% 100%;mask-image: url("https://supportyourapp.com/img/mask.png");mask-size: 100% 100%;}
.bdark,
.channels-list li::after,.channels-list li::before {background-color:#231f20; color: white;}
.bblack {background-color:black; color: white;}
.bwhite {background-color:#fff; }
.bcherry {background-color:#c13664; color: white;}
.bsepia {background-color: #f0eece;}
.bpink {background-color: #F3849B;}
.b-yellow-blurred {
	border-radius: 8px;
	background: rgba(255, 221, 0, 0.20);
	-webkit-backdrop-filter: blur(7.5px);
	backdrop-filter: blur(7.5px);
	padding: 8px;
	box-sizing: border-box;
}

.bmarine,
.marine-triangle::after {background-color:#4cccd3;}
.green-triangle::after {background-color:#6FAC3A;}
.blightmarine,
.lightmarine-circle::after {background-color:#d6f5f7;}
.bred {background-color:#c43538; color: white;}
.bgreen {background-color: #6dae39; color: white;}
.bgreenswans {background-color: #D0ECE4;}
.blightgreen {background-color: #e1f0d5;}
.blightblue {background-color: #dcecf8;}
.bblue {background-color: #3582ba; color: white;}
.baqua {background-color: #75CBD4;}
.brose {background-color:#f3859b;}
.blightrose {background-color:#f6dede;}
.bpine {background-color:#d0ece4;}
.bbordo { background-color: #c03764; color: white;}
.bcrypto { background-color: #F78307;}
.bfacebook {background-color:#a1bbec;}
.bshopify {background-color:#9ab957; color: white;}
.binstagram {background-image:linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%); color: white;}
/* .binstagram {background-image:linear-gradient(45deg, #fdecbf 0%, #f3b9a3 50%, #cf9fd1 100%);} */
.bsystemwallpaper {background-image:linear-gradient(180deg, #787fb7 0%, #f5b2b8 33%, #f5c8a5 66%, #f5d7e2 100%);}

.formated-table td {border-bottom: 1px solid #000; padding: 5px 0;}
.formated-table td::nth-of-type(1) {border-bottom: 1px solid #000;}

.byellowgrey {background-image:linear-gradient(45deg, #ffde00, #edeced);}
.bgreyyellow {background-image:linear-gradient(45deg, #edeced, #ffde00);}
.bmarinegrey {background: linear-gradient(45deg, #4cccd3, #edeced);}
.bredgrey {background: linear-gradient(45deg, #c43538, #edeced)}
.bgreengrey {background: linear-gradient(45deg, #6dae39, #edeced)}
.bbluegrey {background: linear-gradient(45deg, #3582ba, #edeced)}
.bbluegrayyellow {background: rgb(150,218,223); background: linear-gradient(150deg, rgba(150,218,223,1) 0%, rgba(237,236,237,1) 50%, rgba(246,228,118,1) 100%);}



.left-right-2children:nth-of-type(even)>*:nth-child(1),.left-right-2children:nth-of-type(odd)>*:nth-child(2) {order:1}
.left-right-2children:nth-of-type(even)>*:nth-child(2),.left-right-2children:nth-of-type(odd)>*:nth-child(1) {order:2}


.dimmer-black {position: relative; overflow: hidden;}
.dimmer-black>* {position: relative; z-index: 2}
.dimmer-black::before {content: "";position: absolute;z-index: 1;width: 100%; height: 100%;background-color: rgba(0,0,0,.5);top: 0; left: 0;transition: all .3s ease-in-out;}
.dimmer-black:hover::after {filter:blur(5px)}

.author-info {display: inline-block;}
.author-pic {display: inline-block; position: relative; overflow: hidden; border-radius: 100px; margin-right: 1em; }
.author-pic img {width: 60px; height: 60px;}

/* buttons */
.button {display: inline-block; text-decoration: none; text-transform: uppercase; border: 2px solid; padding: 8px 16px; cursor: pointer; border-radius: 4px; position: relative; transform:translateZ(1px);transform-style: preserve-3d;transform: translateZ(100px);transition: all .3s ease; font-family: var(--main-font); font-weight: bold;}
.button:active {transform: scale(.99)}
.b-blue {color: #0059c7!important; border-color: #0059c7;}
.b-black {color: black; border-color: black;}
.b-white {color: white; border-color: white;}
.b-white-filled {color: black; border-color: white;}
.b-yellow {color: black; border-color: black;}
.b-blue-filled {color: white; border-color: #0059c7;}
.b-black-filled {color: #fbde39; border-color: black;}
.b-black-cwhite-filled {color: white; border-color: black;}
.b-black::before,.b-blue::before,.b-yellow::before,.b-yellow::after,.b-blue-filled::after,.b-black-filled::after,.b-black-cwhite-filled::after,.b-black-cwhite-filled::before,.b-blue-filled::before,.b-black-filled::before,.b-white::before, .b-white-filled::before, .b-white-filled::after {content:"";position:absolute; width:100%; height:0%; transition: all .3s ease; background-color: #000; top: 0%; left: 0; z-index: 0;cursor: pointer;transform: translateZ(-1px);z-index: -1}
.b-yellow::after,.b-blue-filled::after,.b-black-filled::after,.b-black-cwhite-filled::after,.b-white-filled::after {height: 100%;border-radius:0; z-index: -2}
.b-yellow::after,.b-yellow.b-input{background-color:#ffde00;}
.b-white::before, .b-white-filled::after {background-color:white;}
.b-blue-filled::after,.b-blue-filled.b-input {background-color:#0059c7;}
.b-black-filled::after,.b-black-filled.b-input {background-color:black}
.b-black-cwhite-filled::after {background-color: black;}
.b-black:not(.b-input):hover::before,.b-blue:not(.b-input):hover::before,.b-yellow:not(.b-input):hover::before,.b-blue-filled:not(.b-input):hover::before,.b-black-filled:not(.b-input):hover::before,.b-black-cwhite-filled:not(.b-input):hover::before,.b-white:not(.b-input):hover::before, .b-white-filled:hover::before {height:100%; border-radius:0%;}
.b-black:not(.b-input):hover,.b-blue:not(.b-input):hover,.b-yellow:not(.b-input):hover, .b-white-filled:hover {color: white!important;}
.b-white:not(.b-input):hover {color: black!important;}
.b-blue-filled:not(.b-input):hover {color: #0059c7!important;}
.b-black-filled:not(.b-input):hover {color: #000!important;}
.b-black-cwhite-filled:not(.b-input):hover {color: black !important;}
.b-blue::before {background-color:#0059c7;}
.b-blue-filled::before {background-color: #fbde39;}
.b-black-filled::before {background-color:#fbde39;}
.b-black-cwhite-filled::before {background-color: white;}
.b-xl {padding: 12px 28px;}
.b-ml {padding: 12px 25px 9px 25px;}
.b-ml:not(.pictogram-left).pictogram {padding-right: 15px;}
.b-contact-us {padding: 10px 23px 8px;}
.b-bdf {-webkit-backdrop-filter:blur(10px);}
.on-top { transform-style: preserve-3d; z-index: 10;}
.b-input {}
.bg-faq-grey {
	background-color: #EEECED;
}
.b-padd {padding: 12px 28px !important; box-sizing: border-box;}
.btn-transparent {background-color: transparent;}

.btn-special {display: inline-block; text-decoration: none; padding: 16px 50px 14px; cursor: pointer; border-radius: 4px; position: relative; transform:translateZ(1px);transition: all .3s ease; font-family: var(--main-font);font-weight: bold; box-shadow: 0 10px 20px rgba(0,0,0,.3);transition: all .3s ease-in-out; position: relative;}
.btn-special:hover { transform: scale(0.99); box-shadow: 0 5px 10px rgba(0,0,0,.2);}
.btn-special-blue {background-color: #005cb6;}
.btn-special-li {background-color: #007AB6;}
.btn-special-fb {background-color: #5070A9;}

.pictogram>span {display: flex; align-items: center; gap: 14px;}
.pictogram>span>small {white-space: nowrap;}
.pictogram:not(.pictogram-left)>span::after,.pictogram-left>span::before {content: ''; width: 16px; height: 16px; display: inline-block; background-repeat: no-repeat; background-position: center center; margin: -4px 5px -4px 10px;transition: filter .3s ease;filter:invert(0); position: relative;}
.b-white.pictogram>span::after,.btn-special.pictogram>span::after,.b-white.pictogram>span::before,.btn-special.pictogram>span::before {filter:invert(1);}
.pictogram:not(.btn-special):hover>span::after {filter:invert(1);}
.b-white.pictogram:hover>span::after {filter:invert(0);}
.sound-pictogram>span::after,.sound-pictogram>span::before { background-image: url('https://supportyourapp.com/img/sound-pictogram.svg');}
.chat-pictogram>span::after,.chat-pictogram>span::before { background-image: url('https://supportyourapp.com/img/chat-pictogram.svg');}
.phone-pictogram>span::after,.phone-pictogram>span::before { background-image: url('https://supportyourapp.com/img/phone-pictogram.svg');}
.pause-pictogram>span::after,.pause-pictogram>span::before { background-image: url('https://supportyourapp.com/img/pause-pictogram.svg');}
.linkedin-pictogram>span::after,.linkedin-pictogram>span::before { background-image: url('https://supportyourapp.com/img/linkedin.svg');}
.facebook-pictogram>span::after,.facebook-pictogram>span::before { background-image: url('https://supportyourapp.com/img/facebook.svg');}
.team-vacanciec-btn {
	width: 348px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
	margin-bottom: 20px;
	padding: 12px 20px;
	box-sizing: border-box;
	border-radius: 10px;
	background-color: #265BB0;
	font-weight: bold;
}


.share-button {border-radius:50px!important; padding-left: 40px;}
.share-button::after {content: ""; width: 31px; height: 31px; filter:grayscale(100%) brightness(470%); position: absolute; top: -1px; left: -1px;}
.share-li::after { background-image:url(https://supportyourapp.com/img/linkedin.svg);}
.share-fb::after { background-image:url(https://supportyourapp.com/img/facebook.svg);}
.share-in::after { background-image:url(https://supportyourapp.com/img/instagram.svg);}
.share-tw::after { background-image:url(https://supportyourapp.com/img/twitter.svg);}
.share-button:hover {color: #fff!important}
.share-button::before {background-color: #000; height: 100%; width: 0%; border-radius:50px!important;left: 15px;}
.share-button:hover::before{ border-radius:50px!important;height: 100%; width: 100%;left: 0px}
.b-black.share-button::after {filter:grayscale(1) brightness(1) contrast(3.5);background-color: #fff;border: 2px solid #000;border-radius: 50px; top: -1px;left: -1px; background-size: 30px 30px;background-position: center center;transition: all .3s ease-in-out;width: 28px; height: 28px;}


/* round-arrow icon button yellow*/
.round-arrow {padding-right: 40px;}
.round-arrow::after, .round-arrow::before {background-image:url(https://supportyourapp.com/img/round-arrow.svg);background-position: right center; background-repeat: no-repeat; background-size: 40px 15px;}
.round-arrow::before { filter: invert(1);background-color: #fff}
.big-cta {font-size: 17px; padding: 14px 120px 11px 20px;background-image:url(https://supportyourapp.com/img/zig-zag-arrow.svg); background-position: right center; background-repeat: no-repeat; background-size: 80px 7px; transition: all .3s ease-in-out;}
.big-cta:hover {background-size: 70px 8px;}
.mobile-get-a-quote { display: none;}

/* ------ MAIN PAGE styles ------- */

.tmh0 {min-height: 0;}

.support-your-app-wrapper {padding: 16px 0 16px 16px; position: relative;}

/* TILE styles */
.tile {margin-top: 16px; margin-right: 16px; min-width: 100px;min-height: 100px; position: relative;} /* universal tile styles if any */
.tmh0 {min-height: 0;}
.tmh300 {min-height:300px;}
.tmh250 {min-height: 250px;}
.tmaxh300 {max-height: 300px;}
.content-tile {padding:2em; box-sizing: border-box;}
.img-tile {overflow:hidden;}
.img-tile img {width:100%;}
.img-wrp { width:100%; background-repeat: no-repeat; background-position: center center;background-size: cover;}
.img-wrapper > img {width: 100%; height: 100%; object-fit: cover;}
.tile-row>*:not(.tile-container) {margin-right: 17px}
.photo-tiles {min-height: 50%}
.tile-mini {margin-top: 0px; margin-right: 2px;margin-bottom: 2px;position: relative;}
.tile.tile-mini-container {margin-right: 15px;margin-bottom: -2px;position:relative}
.tile-mheight-auto {min-height:intrinsic};

/* tiles with small icons inside */
.tile-icons {padding-left:0; margin-top: 0; margin-bottom: 0 /*removing UL predefined styles*/}
.tile-icons>li {min-height: intrinsic; min-width: 250px; list-style: none; box-sizing: border-box;}
.w100.tile-icon-color::before,.w100.tile-icon-color>h3 { display: inline-flex;}
.tile-icons>li a:not(.href),.tile-icons>li div.a { width:200px; position:relative; text-decoration:none;min-width:200px;}
.tile-icons>li span {display: block; padding-left: 20px}
.tile-icons>li a:not(.href):hover::before,.tile-icons>li div.a:hover::before, .tile-icon-color:hover::before {transform: rotateZ(-90deg)}
.tile-icons.flex-vertical li { min-height: 50px; padding-left: 3em}
.tile-icons-absolute li::before{ position: absolute!important; left: 0%;}
.custom-li-setting > p {
	padding-left: 54px;
}

/* - Colored services icons - */
.no-icon::before{background-image: none;transform-origin: 48% center; width: 0; min-width: 0; margin: 0; height: 0; min-height: 0;}
.bordo-circle::before{background-image: url(https://supportyourapp.com/img/color-icons/bordo-circle.svg);transform-origin: 48% center}
.green-triangle::before{background-image: url(https://supportyourapp.com/img/color-icons/green-triangle.svg);}
.marine-circle::before{background-image: url(https://supportyourapp.com/img/color-icons/marine-circle.svg); transform-origin: 62% center}
.yellow-square::before{background-image: url(https://supportyourapp.com/img/color-icons/yellow-square.svg);}
.blue-septagon::before{background-image: url(https://supportyourapp.com/img/color-icons/blue-septagon.svg);transform-origin: 40% center}
.bordo-demisquare::before{background-image: url(https://supportyourapp.com/img/color-icons/bordo-demisquare.svg);}
.marine-star::before{background-image: url(https://supportyourapp.com/img/color-icons/marine-star.svg);transform-origin: 45% center}
.red-rombus::before{background-image: url(https://supportyourapp.com/img/color-icons/red-rombus.svg);}
.yellow-demicircle::before{background-image: url(https://supportyourapp.com/img/color-icons/yellow-demicircle.svg);transform-origin: 38% center }

/* ----- */

.main-slide .video-tile,.main-pitch {min-width: 550px}
.main-slide .video-tile {min-height: 500px}
.main-slide {min-height:550px;}
.main-cta {
	padding: 34px;
}

.main-slide input {border-color: #000}

.cta-kicker {position: relative}
.cta-kicker::before {content: "*"; position: absolute; left: -15px;top: -3px;font-size: 20px;}

.main-cta .big-cta {margin-top: 14px}

.video-overlay {position: fixed; z-index: 1000; top: 10%; left: 10%; width: 80%; height: 80%; transform: translateZ(1000px); box-shadow: 0 20px 60px rgba(0,0,0,.3);}
.video-overlay::before {content: "✕"; position: absolute; z-index: 10; width: 40px; height: 40px; color: black; top: 0px; right: 0px; background-color: white; font-size: 30px; text-align: center; line-height: 38px; cursor: pointer}
.content-dimmer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; background-color: rgba(0,0,0,.5);transform: translateZ(1000px);z-index: 999;-webkit-backdrop-filter:blur(1px);}

/* header SUP */
.h-pic {height: 80px; width: 160px; background-position: center center; background-repeat: no-repeat;margin-right: 20px}
.h-pick .h-pic{background-image: url(https://supportyourapp.com/img/il-pick.svg); background-size: 135px auto;}
.h-connect .h-pic{background-image: url(https://supportyourapp.com/img/il-connect.png);background-size: 150px 40px;}
.h-coach .h-pic{background-image: url(https://supportyourapp.com/img/il-coach.png);background-size: 125px 60px;}
.h-line {background-image: url(https://supportyourapp.com/img/h-arrow.svg); background-size: auto 35px; height: 35px; margin: 0 0 -30px -20px; background-repeat: no-repeat}
.h-line-r {background-image: url(https://supportyourapp.com/img/h-arrow-r.svg); background-size: auto 75px; height: 80px; margin: -12px 0 -40px 0px; background-position: top right; max-width: 360px;background-repeat: no-repeat}
.under-button {background-image: url(https://supportyourapp.com/img/no-obligations.svg); background-size: 20px auto; background-position: left 1px; padding-left: 27px; opacity: .3; background-repeat: no-repeat; position: relative; top: 1.5em;}
.rocket-img {background-image: url(https://supportyourapp.com/img/il-rocket.png);background-position: right top; background-size: 35px 35px; padding-right: 46px; background-repeat: no-repeat; height: 36px;}


/* _Articles block main - for BLOG or articles section */
.tile-row.articles,.tile-row.articles li { list-style: none;flex-wrap:wrap}
.tile-row.articles li {min-width: 300px}
.tile-row.articles,.articles-list {padding: 0; margin: 0}
.article-thumbnail-img::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;background-size: cover; background-position: center center}
.big-data-img::after {background-image: url(https://supportyourapp.com/img/a-vehicle-img3.jpg);}

/* _alternative header */
.flying-logos-wrapper {transform: translateX(150px) rotate(15deg); opacity: .9; animation: fadein .7s ease-in-out forwards;}
.flying-logos { position:absolute; top: -220px; z-index: 10; width: 100%; height: 50%; max-width: 220px; animation: logos-scroll 20s linear infinite;}
.flying-logos-4 {animation-name: logos-scroll-security;}
.flying-logos-4 {animation-name: logos-scroll-4;}
.flying-logos-5 {animation-name: logos-scroll-5;}
.flying-logos-6 {animation-name: logos-scroll-6;}
.flying-logos-7 {animation-name: logos-scroll-7;}
.flying-logos-8 {animation-name: logos-scroll-8;}
.flying-logos-9 {animation-name: logos-scroll-9;}
.flying-logos-9-custom {animation-name: flying-logos-9-custom;}
.flying-logos-10 {animation-name: logos-scroll-10;}
.flying-logos-11 {animation-name: logos-scroll-11;}
.flying-logos-12 {animation-name: logos-scroll-11;}
.flying-logos-13 {animation-name: logos-scroll-13;}
.flying-logos-14 {animation-name: logos-scroll-14;}
.flying-logos-15 {animation-name: logos-scroll-15;}
.flying-logos-16 {animation-name: logos-scroll-16;}
.flying-logos-17 {animation-name: logos-scroll-17;}
.flying-logos-19 {animation-name: logos-scroll-19;}
.flying-logos-20 {animation-name: logos-scroll-20;}
.flying-logos-21 {animation-name: logos-scroll-21;}
.flying-logos-29 {animation-name: logos-scroll-29;}
.flying-logos-30 {animation-name: logos-scroll-30;}
.flying-logos-31 {animation-name: logos-scroll-31;}
.flying-logos-32 {animation-name: logos-scroll-32;}
.flying-logos-33 {animation-name: logos-scroll-33;}
.flying-logos-34 {animation-name: logos-scroll-34;}
.flying-logos-39 {animation-name: logos-scroll-39;}
.flying-logos-41 {animation-name: logos-scroll-41;}
.flying-logos-42 {animation-name: logos-scroll-42;}
.flying-logos:nth-child(1) {left:calc(80% - 440px);}
.flying-logos:nth-child(2) {left:calc(80% -  220px);animation-duration:30s;}
.flying-logos:nth-child(3) {left: calc(80% - 0px); animation-duration:25s;}
.flying-logos img {max-width:150px;max-height:70px;}
.flying-logos img.larger {min-width:110px!important;}
.flying-logos div {background-color: rgba(255,255,255,.8); box-shadow: 0 5px 20px rgba(0,0,0,.2); border-radius: 20px; flex-basis: 200px; min-width: 200px; min-height: 200px; margin: 0 20px 20px 0;}

@keyframes btnDown {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@media screen and (max-width: 650px) {
	.macpaw-review {
		padding-left: 40px;
	}
	.custom-li-setting .pl1 {
		padding-left: 0;
	}
	.custom-li-setting > p {
		padding-left: 40px;
	}
}

@media screen and (max-width: 580px) {
	.content-tile {
		padding: 1em;
	}

	.main-slide .video-tile, .main-pitch {
		min-width: fit-content;
	}
}

@keyframes logos-scroll {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-659px);}
}
@keyframes logos-scroll-security {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-750px);}
}
@keyframes logos-scroll-3 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-495px);}
}
@keyframes logos-scroll-3-travel {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-558px);}
}
@keyframes logos-scroll-3-1 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-600px);}
}
@keyframes logos-scroll-4 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-600px);}
}
@keyframes logos-scroll-4-ebooks {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-800px);}
}
@keyframes logos-scroll-5-ebooks {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-1440px);}
}
@keyframes logos-scroll-5 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-1100px);}
}
@keyframes logos-scroll-5-1 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-600px);}
}
@keyframes logos-scroll-5-2 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-450px);}
}
@keyframes logs-scroll-forward-5 {
	0%		{transform: translateY(1100px);}
	100%	{transform: translateY(0px);}
}
@keyframes logos-scroll-6 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-1320px);}
}
@keyframes logos-scroll-7 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-1075px);}
}

@keyframes logos-scroll-8 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-1530px);}
}
@keyframes logos-scroll-9 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-1980px);}
}
@keyframes logos-scroll-9-custom {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-1748px);}
}
@keyframes logos-scroll-10 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-2420px);}
}
@keyframes logos-scroll-11 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-2620px);}
}
@keyframes logos-scroll-12 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-2650px);}
}
@keyframes logos-scroll-13 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-2850px);}
}
@keyframes logos-scroll-14 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-3100px);}
}
@keyframes logos-scroll-15 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-3300px);}
}
@keyframes logos-scroll-16 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-3530px);}
}
@keyframes logos-scroll-17 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-3750px);}
}
@keyframes logos-scroll-19 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-4180px);}
}
@keyframes logos-scroll-20 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-4410px);}
}
@keyframes logos-scroll-21 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-4620px);}
}
@keyframes logos-scroll-29 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-6400px);}
}
@keyframes logos-scroll-30 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-6600px);}
}
@keyframes logos-scroll-31 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-6800px);}
}
@keyframes logos-scroll-32 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-7000px);}
}
@keyframes logos-scroll-33 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-7270px);}
}
@keyframes logos-scroll-34 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-7480px);}
}
@keyframes logos-scroll-34-affiliate {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-7930px);}
}
@keyframes logos-scroll-39 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-8590px);}
}
@keyframes logos-scroll-41 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-9020px);}
}
@keyframes logos-scroll-42 {
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-9240px);}
}
@keyframes fadein {
	0%		{opacity: 0;}
	100%	{opacity: 1}
}
@keyframes fadeout {
	0%		{opacity: 1;}
	100%	{opacity: 0;}
}

.fade-in {
	animation: fadein .3s ease-in;
}

.fade-out {
	animation: fadeout .3s ease-out;
}

@media screen and (max-width: 580px) {
	@keyframes logos-scroll-5-ebooks {
		0%		{transform: translateY(0px);}
		100%	{transform: translateY(-769px);}
	}
}

/* _reviews_ */
.review-logo {max-width: 150px; width: 130px; position: absolute;bottom: 2em; right: 2em;}

.earth-map-grey::before {content: ""; height: 100%; width: 1400px;background-image: url(https://supportyourapp.com/img/earth-plan.svg);opacity: .1; position: absolute; top: 0; left: 0; z-index: 0; animation: earth_move 40s linear forwards infinite; background-size: 700px 350px; background-repeat: repeat-x; }
@keyframes earth_move {
	0%		{transform: translateX(0%);}
	100%	{transform: translateX(-700px);}
}

/* _Big CTA block */
.big-cta-tile {min-height: 70%;padding: 1em;}
.big-cta-tile img.client-logo {position:relative; max-width:170px; height: 70px; vertical-align: middle;}
.assets-cta-banner {
	min-height: 450px;
}

@media screen and (max-width: 600px) {
	.assets-cta-banner {
		min-height: 70%;
	}
}
/* --- Services Page --- */
.img-services {max-width: 300px; width: 80%; height: auto; max-height: 300px; margin: auto; display: inline-block;}
.img-service-icon {position: absolute; width: 100px; height: 100px; top: 32px; right: 48px;}
.img-service-icon-25 {position: absolute; width: 100px; height: 100px; top: 32px; right: 24px;}
.services-list>.tile {min-width:250px;}

@media screen and (max-width: 1024px) {
	.img-service-icon {
		top: 16px;
		right: 16px;
	}
	.img-service-icon-25 {
		top: 16px;
		right: 8px;
	}
}

/* Video */
.video-block {border-radius: 10px; cursor: pointer; max-width: 400px; margin-top: 32px; margin-bottom: 16px; }
.video-block>div:nth-child(1) img { width: 133px; height: 87px; z-index: 1; transition: all .3s ease-in-out}
.video-block>div:nth-child(1) {border-radius: 6px; position:relative; overflow: hidden; box-shadow:0 5px 4px rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.5); transform: translateZ(1px)}
.video-block>div:nth-child(1)::before {content: ""; position: absolute; width: 30px; height: 30px; top: 28px; left: 55px; background-image: url(https://supportyourapp.com/img/play-button-white.svg); background-repeat: no-repeat; background-position:center center; background-size:30px 30px; z-index:3; filter: drop-shadow(0 2px 5px rgba(0,0,0,.3));transition: all .3s ease-in-out}
.video-block>div:nth-child(1)::after {content: ""; position: absolute; background-color: black; opacity: .1; width: 100%; height: 100%; top: 0; left: 0; z-index: 2;transition: all .3s ease-in-out}
.video-block>div:nth-child(2) {background-color: rgba(0,0,0,.1); border-radius: 6px; padding: 1.7em 1.5em  1.5em 2em; margin-left: -.5em;transition: all .3s ease-in-out;}
.video-background-light {background-color: rgba(255,255,255,.6)!important;}

.video-block:hover>div:nth-child(1) img {transform: scale(1.1);}
.video-block:hover>div:nth-child(2) {background-color:rgba(0,0,0,.3);}
.video-block:hover>div.video-background-light {background-color:rgba(255,255,255,.9)!important;}

.video-play-button {background-image: url(https://supportyourapp.com/img/play-icon.svg); background-color: red; padding: 11px 42px 8px 17px; background-position: right center; background-size: 40px 20px;color: #fff; border-radius: 100px;background-repeat: no-repeat;transition: all .3s ease-in-out; font-size: 17px; box-shadow: 0 10px 40px rgba(255,0,0,.5);   }
.video-tile:hover .video-play-button { transform: scale(1.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); z-index: 10}

.arrows-down::before, .arrows-left-overlap::before {content:"";position:absolute; width: 100%; top: -50px; left: 0; height: 45%; min-height: 230px; background-image:url(https://supportyourapp.com/img/white-dotted-arrow.svg); background-position:top center; background-repeat:no-repeat;z-index: 0}
.arrows-left-overlap::before {top: calc(50% - 120px); left: -335px; transform: rotateZ(90deg); width: 600px;}
.arrows-down>* { z-index:2;}

@media screen and (min-width: 1700px) {
	.arrows-down::before {
		top: -120px !important;
		height: 55% !important;
	}
}

@media screen and (max-width: 900px) {
	.arrows-down {
		min-height: 450px;
	}
}

@media screen and (max-width: 420px) {
	.arrows-down::before {
		top: -90px;
		height: 55%;
	}
	.arrows-down.minwidth350 {
		min-width: 250px !important;
	}
}

.toc ol { list-style: upper-latin}
.toc ol ol { list-style: lower-latin}

.yellow-circle::after, .marine-circle::after, .marine-triangle::after,.lightmarine-circle::after,.green-triangle::after { content: ""; width: 500px; height: 500px; position: absolute; bottom: -490px; border-radius: 50%; left: -250px; z-index: 0; transform: translateY(200px)}
.marine-triangle::after { border-radius: 0; transform: translateY(200px) rotateZ(45deg); bottom: -590px;}
.green-triangle::after { border-radius: 0; transform: translateY(200px) rotateZ(45deg); bottom: -420px; left: -50px;}
.marine-circle::after { bottom: -250px; }
.lightmarine-circle::after { width: 150px; height: 150px; bottom:auto; left: calc(50% - 75px); top:calc(35% - 75px); transform: translateY(0px); z-index: 0}
.lightmarine-circle-after-submitting::after {top: inherit;}
.animate-circle::after {animation: animate-circle 2s ease-in-out forwards;}
.animate-triangle::after {animation: animate-triangle 2s .5s ease-in-out both;}
@keyframes animate-circle {
	0%		{transform: translateY(-100px);}
	100%	{transform: translateY(0px);}
}
@keyframes animate-triangle {
	0%		{transform: translateY(-100px)  rotateZ(45deg);}
	100%	{transform: translateY(0px)  rotateZ(45deg);}
}

/* @keradan */
/* styles for content that generated by wysiwyg in admin panel */
.content-from-wysiwyg {font-family: var(--main-font); font-weight: normal; font-size: 15px; line-height: 1.5em}
.content-from-wysiwyg h2 {font-family: var(--main-font); font-weight: bold; font-size: 30px; line-height: 1.2em}
.content-from-wysiwyg h3 {font-family: var(--main-font); font-weight: bold; font-size: 20px; line-height: 1.2em}
.content-from-wysiwyg ol {font-family: var(--main-font); font-weight: bold; font-size: 20px; line-height: 1.2em}
.content-from-wysiwyg ol p {font-family: var(--main-font); font-weight: normal; font-size: 15px; line-height: 1.5em}

/* @keradan */
/* safari fix for cookie policy banner */
.sp-banner-show, .sp-privacy-banner-middle {-webkit-transform: translate3d(0,0,100px)!important;}

/* @keradan */
/* cookie banner recustomizing (aug 2025): */
.sp-banner-show {
	width: 100%!important;
    max-width: 1143px!important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    bottom: 16px!important;
    background: none!important;
    height: auto !important;
}
.sp-banner-show iframe {
	backdrop-filter: blur(10px)!important;
	-webkit-backdrop-filter: blur(10px); /* Safari */
	border-radius: 4px!important;
	background-color: #eeecedc9!important;
	width: calc(100% - 16px - 16px) !important;
	margin-left: 16px;
}
@media only screen and (min-width: 501px) {
	.sp-banner-show iframe {
		height: 285px!important;
	}
}
@media only screen and (max-width: 500px) {
	.sp-banner-show iframe {
		height: 515px!important;
	}
}

/* reseting to default styling of content from wysiwyg */
.advantages-content span { display: inline!important; padding: 0!important; }
.advantages-content p {margin-top: 0;}


/* -- channel list -- */
.channels-list,.integrations-list {width: 1px; margin: auto; position: relative; height: 250px; z-index:1; margin-bottom: 3em}
.channels-list li {padding: 3px 17px; position:relative; height: 28px; margin-bottom: .5em; margin-bottom:-20px; position: absolute; left: 13px}
.channels-list li:nth-child(odd) { left:auto; right:13px; top:40px}
.channels-list li:nth-child(1) {top: 0}
.channels-list li:nth-child(2) {top: 22px}
.channels-list li:nth-child(3) {top: 44px}
.channels-list li:nth-child(4) {top: 66px}
.channels-list li:nth-child(5) {top: 88px}
.channels-list li:nth-child(6) {top: 110px}
.channels-list li:nth-child(7) {top: 132px}
.channels-list li:nth-child(8) {top: 154px}
.channels-list li:nth-child(9) {top: 176px}
.channels-list li::after,.channels-list li::before {content: ""; transform: rotateZ(45deg); width: 24px; height: 24px; position: absolute; left:-12px; top: 5px;}
.channels-list li::after {left:auto;right:-12px;}
.in-app { min-width: 90px}
.any-channel {
	left: auto;
	border-width: 2px;
	border-style: solid;
	border-image: url('https://supportyourapp.com/img/border-with-rombs.svg') 2 fill; 
	line-height: 28px; 
	white-space: nowrap;
}
.any-channel::before,
.any-channel::after {display: none;}

/* -- integrations list -- */
.integrations-list li {text-indent: -1000px; overflow: hidden; position: absolute; background-repeat: no-repeat; background-position: top; width: 100px; height: 30px; z-index: 1; animation: zoming 2s ease-in-out infinite;}
li.l-twitter {background-image: url(https://supportyourapp.com/img/integrations/twitter.svg); width: 50px; height: 50px; left: -25px; top: -5px; animation-duration: 2.5s}
li.l-gsuite {background-image: url(https://supportyourapp.com/img/integrations/gsuite.svg); top: 40px; right: 20px; animation-duration: 3.5s;}
li.l-zendesk {background-image: url(https://supportyourapp.com/img/integrations/zendesk.svg);top: 40px; left: 20px; animation-duration: 1.7s}
li.l-helpscout {background-image: url(https://supportyourapp.com/img/integrations/helpscout.svg);top: 80px; right: 70px; animation-duration: 2.2s}
li.l-intercom {background-image: url(https://supportyourapp.com/img/integrations/intercom.svg);top: 110px; right: 20px; width: 130px;height: 40px; animation-duration: 1.9s}
li.l-freshdesk {background-image: url(https://supportyourapp.com/img/integrations/freshdesk.svg);top: 114px; left: 20px;width: 130px;height: 40px; animation-duration: 2.9s}
li.l-kayako {background-image: url(https://supportyourapp.com/img/integrations/kayako.svg);top: 155px; right: 30px; animation-duration: 1.7s}
li.l-uservoice {background-image: url(https://supportyourapp.com/img/integrations/uservoice.svg);top: 152px; left: -14px;width: 130px;height: 40px}

li.l-salesforce {background-image: url(https://supportyourapp.com/img/integrations/salesforce.svg); width: 65px; height: 50px; left: -25px; top: -5px; animation-duration: 2.5s}
li.l-notion {background-image: url(https://supportyourapp.com/img/integrations/notion.svg); top: 35px; right: 20px; height: 36px; animation-duration: 3.5s;}
li.l-aircall {background-image: url(https://supportyourapp.com/img/integrations/aircall.svg);top: 80px; right: 70px; animation-duration: 2.2s}
li.l-slack {background-image: url(https://supportyourapp.com/img/integrations/slack.svg);top: 80px;left: -50px; animation-duration: 1.3s}
li.l-hubspot {background-image: url(https://supportyourapp.com/img/integrations/hubspot.svg);top: 78px; left: 70px; animation-duration: 3s}
li.l-jira {background-image: url(https://supportyourapp.com/img/integrations/jira.svg);top: 155px; right:8px; animation-duration: 1.7s}
li.l-asana {background-image: url(https://supportyourapp.com/img/integrations/asana.svg);top: 157px; left: -14px;width: 130px;height: 40px}

@keyframes zoming {
	0%		{transform: scale(.97);}
	50%		{transform: scale(1);}
	100%	{transform: scale(.97);}
}

.software-names {transition: all .5s ease;}
.darker-on-hover {transition: background-color .3s ease;}
.software-active {
	transition: background-color .3s ease;
	background-color: #E3E3E3 !important;
}

/* cloud */
.cloud-url {color: black; text-decoration: none; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 30px; padding: 5px 12px; margin: 4px;}
.cloud-url>span {display:inline-block;border-radius:10px;width:10px;height:10px;position:relative;}
.cloud-url:hover { background-color: #fff}

/* q-n-a */
.q-n-a dt::before {content: 'Q'; background-color: #6dae39;}
.q-n-a dd::before {content: 'A'; background-color: black; }
.q-n-a dt::before,.q-n-a dd::before {color: #fff; padding: .2em; display: inline-block; border-radius: 20px; min-width: 25px; max-width: 25px; min-height: 20px; max-height: 20px; line-height: 21px; margin-right: 8px;text-align: center; margin-left: -40px;}
.q-n-a dt,.q-n-a dd {padding-left: 35px;}

/* Blog */
.article-list-img-hover {position: relative; overflow: hidden; min-height: 263px; max-height: 280px;}
.article-list-img-hover::after,.article-list-img-hover::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition:all .25s ease-in-out; z-index: 5}
.article-list-img-hover::before {-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px); background-color: rgba(0,0,0,0);}
.article-list-img-hover::after {content: "✺ Click To Read"; text-align: center; color: #fff; font-size: 20px; top: 48%; text-shadow: 0 2px 10px rgba(0,0,0,.9); transform: translateY(80px); opacity: 0;z-index: 6; height: auto}
.article-list-img-hover:hover::after {transform: translateY(0px); opacity: 1}
.article-list-img-hover:hover::before {-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); background-color: rgba(0,0,0,.2);}
.infinity-symbol::before { content: ''; width: 120px; height: 90px; background-image: url(https://supportyourapp.com/img/infinite.svg); background-position: center center; background-repeat: no-repeat; background-size: contain; display: block; margin: auto}
.article-list-img-hover > a {
	max-height: 320px;
}
.article-list-img-hover > a > img {
	object-fit: cover;
	height: 100%;
}

.article-list-img-hover > img {
	object-fit: cover;
	height: 100%;
}

/* WP styles */
.has-background { padding: 1em}
.mc4wp-form {margin-top: 0; margin-bottom: 0;}
.mc4wp-error p {color: #752323;}
.mc4wp-error p::before {content: '✕'; padding-right: 5px; font-size: 15px}
.admin-bar .psticky.top17{top: 49px}
#wpadminbar { transform: translateZ(101px);}
.updated:not(.published) {display: none;}
.ez-toc-title { font-family:var(--main-font);font-weight: bold; }
/* Fixing issue with images on article page */
figure.wp-block-image.size-large>img {height:auto!important;}


.company-page-contents {
	padding: 82px 168px;
}

.company-page-p {
	min-height: 70px;
}

@media screen and (max-width: 1440px) {
	.company-page-contents {
		padding: 82px 120px;
	}
}

@media screen and (max-width: 1024px) {
	.company-page-contents {
		padding: 64px;
	}
}



@media screen and (max-width: 580px) {
	.company-page-p {
		min-height: inherit;
	}

	.company-page-contents {
		padding: 64px 16px;
	}

	.contacts-location .p3 {
		padding: 16px;
	}

	.contacts-banner .m-lh2 {
		line-height: normal;
	}
}

@media screen and (max-width: 480px) {
	.company-page-contents > div > .button {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}

	.company-page-contents .f25 {
		font-size: 20px !important;
	}

}

/* animations */
.child-invisible>*:not(.no-child-animation):not(.button),.self-invisible:not(.button) {opacity: 0}
.animate-childs>*:not(.no-child-animation):not(.button),.animate-self:not(.button) {animation: fadeinandscale .3s cubic-bezier(0,.5,.5,1.3) forwards;}
.animate-childs>*:not(.no-child-animation):nth-child(1) {animation-delay: .1s;}
.animate-childs>*:not(.no-child-animation):nth-child(2) {animation-delay: .2s;}
.animate-childs>*:not(.no-child-animation):nth-child(3) {animation-delay: .3s;}
.animate-childs>*:not(.no-child-animation):nth-child(4) {animation-delay: .4s;}
.animate-childs>*:not(.no-child-animation):nth-child(5) {animation-delay: .5s;}
.animate-childs>*:not(.no-child-animation):nth-child(6) {animation-delay: .6s;}
.animate-childs>*:not(.no-child-animation):nth-child(7) {animation-delay: .7s;}
.animate-childs>*:not(.no-child-animation):nth-child(8) {animation-delay: .8s;}
.animate-childs>*:not(.no-child-animation):nth-child(9) {animation-delay: .9s;}
.animate-childs>*:not(.no-child-animation):nth-child(10) {animation-delay: 1.0s;}
.animate-childs>*:not(.no-child-animation):nth-child(11) {animation-delay: 1.1s;}
.animate-childs>*:not(.no-child-animation):nth-child(12) {animation-delay: 1.2s;}
.animate-childs>*:not(.no-child-animation):nth-child(13) {animation-delay: 1.3s;}
.animate-childs>*:not(.no-child-animation):nth-child(14) {animation-delay: 1.4s;}
.animate-childs>*:not(.no-child-animation):nth-child(15) {animation-delay: 1.5s;}
.animate-childs>*:not(.no-child-animation):nth-child(16) {animation-delay: 1.6s;}
.animate-childs>*:not(.no-child-animation):nth-child(17) {animation-delay: 1.7s;}
.animate-childs>*:not(.no-child-animation):nth-child(18) {animation-delay: 1.8s;}
.animate-childs>*:not(.no-child-animation):nth-child(19) {animation-delay: 1.9s;}
.animate-childs>*:not(.no-child-animation):nth-child(20) {animation-delay: 2.0s;}
.animate-childs>*:not(.no-child-animation):nth-child(21) {animation-delay: 2.1s;}
.animate-childs>*:not(.no-child-animation):nth-child(22) {animation-delay: 2.2s;}
.animate-childs>*:not(.no-child-animation):nth-child(23) {animation-delay: 2.3s;}
.animate-childs>*:not(.no-child-animation):nth-child(24) {animation-delay: 2.4s;}
.animate-childs>*:not(.no-child-animation):nth-child(25) {animation-delay: 2.5s;}

.scale-on-hover>*{transition: all .3s cubic-bezier(0,.5,.5,1.3);}
.scale-on-hover:hover>*,.scale-on-hover:active>*{transform: scale(1.1)}

.descale-on-showing {opacity: 0;}
.descale-and-show {animation: descaleandshow 3s cubic-bezier(0,.5,.5,1.3) forwards; }

@keyframes fadeinandscale {
	0%		{opacity:0;transform: scale(.8) translateZ(100px);}
	100%	{opacity:1;transform: scale(1) translateZ(100px);}
}
@keyframes descaleandshow {
	0%		{opacity:0;transform: scale(1.2);}
	100%	{opacity:1;transform: scale(1);}
}

/* retina images */
@media
    only screen and (-webkit-min-device-pixel-ratio:1.2),
    only screen and (min-moz-device-pixel-ratio:1.2),
    only screen and (-o-min-device-pixel-ratio:5/4),
    only screen and (min-device-pixel-ratio:1.2),
    only screen and (min-resolution:120dpi),
    only screen and (min-resolution:2dppx) {
}

@media screen and (max-width: 980px) {
	.f70 {font-size: 60px}
}

@media screen and (max-width: 800px){
	.p6 {padding: 2em;}
	.flex:not(.never-wrap) {flex-wrap:wrap;}
	.f70:not(.no-mobile),.f80:not(.no-mobile),.f50:not(.no-mobile) {font-size: 35px}
	.fm30,.f40:not(.no-mobile) {font-size: 30px!important}
	.fm25 {font-size: 25px!important}
	.fm20,.f30:not(.no-mobile) {font-size: 20px!important}
	.p3 {padding: 2em}
	.pl3 {padding-left: 2em}
	.pr3 {padding-right: 2em}
	.mnone {display: none}
	.m-mt1 {margin-top:1em}
	.m-lh2 {line-height: 2em}
	.m-f20 {font-size:20px}
	.m-p1 {padding:1em;}
	.tile.img-tile {min-height: 300px}
	
	/*custom styles*/
	.main-cta {padding: 1em}
	.b-yellow-bdf::before {background-color: #ffffff88; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);}
	
	
	/* service page */
	.tile-icons>li a:not(.href) {width: 100%; box-sizing: border-box; padding-left: 1em;}
	.tile-icons.flex-vertical li {padding-left: 2em}
	.channels-list {transform: scale(.8)}
	.img-container {margin-left: auto;}
	.img-container img {max-height: 450px;}
	.quote {margin-left: 0; margin-top: 0; margin-right: 0}
	.quote figcaption p br{ display: none}
	.quote .order-2 {order: 1}
	.quote .order-1 {order: 2}
	.quote blockquote { box-sizing: border-box; min-width: 250px!important; margin-bottom: 1em!important; width: 100%; margin-right: 0}
	
	.arrows-left-overlap::before {transform: rotate(0deg); left: -100px; top: 165px}
	.page-content-text>.tile {order:2;}
	.page-content-text>.tmh300 {order: 1}
	.cloud-url {width:100%;margin-right: 0;font-size: 17px; position: relative; border-color: #ccc; background-color: #fff; padding-left: 1.8em}
	.cloud-url>span { position: absolute;  left: 2px; width:21px; height: 21px; left: 5px; top: 15%; }
	.tile-row>.tile.flex-1.minwidth350.minwidth300 {min-width: 250px!important}
	
	/*team*/
	.team-photo {min-height: 300px;}
	.left-right-2children:nth-of-type(even)>*:nth-child(2), .left-right-2children:nth-of-type(odd)>*:nth-child(1) { order: 1}
	
	/* request */
	.major-request-form .tmh300 {max-height: 300px}
	
	/* career */
	.tile.binstagram {padding: 2em; min-height: auto}

}
@media screen and (max-width: 650px) {
	.tile-row>.tile:not(.minwidth350),.tile-mini {min-width: 250px!important;}
}
@media screen and (max-width: 430px) {
	.team-vacanciec-btn {
		width: 100%;
	}
	.minwidth350 {
		min-width: 250px !important;
	}

	.languages .mr1,
	.languages .ml1 {
		margin-left: 0;
		margin-right: 0;
	}
}
@media screen and (max-width: 380px){ 
	.launch-progress { padding-left: 64px; background-size: 49px 100%;}
	.integrations-list {transform: scale(.8);}
	.integrations-list.animate-self {animation: none; opacity: 1}
	textarea.input {min-height: 120px}
	.f70:not(.no-mobile),.f80:not(.no-mobile),.f50:not(.no-mobile) {font-size: 30px}
}
@media screen and (max-width: 345px) {
	.f70:not(.no-mobile),.f80:not(.no-mobile),.f50:not(.no-mobile) {font-size: 27px !important}
	.f40:not(.no-mobile) {font-size: 25px!important}
	.f50:not(.no-mobile).fm25 {font-size: 20px!important}
}
@media screen and (max-width: 325px) {
	.tile-row>.tile:not(.minwidth350),.tile-mini {min-width: 220px!important;}
	.p3 {
		padding: 1em;
	}
}
@media screen and (min-width: 780px) {
	.minwidth250 {
		min-width: 350px !important;
	}
}

@media screen and (max-width: 580px) {
	.text-page-contents .f30 {
		font-size: 25px !important;
	}
}

/* Editool customizatons */
span.mark {background-color:#ffde00;}
.mark-brose span.mark {background-color:#f3859b;}
.inner-links-cblack a { color: #1d1d1f !important;}
.inner-span-cyellow .colored { color: #ffde00;}
.inner-strongs-m0 strong { margin: 0; }


/* Dark Mode */
@media (prefers-color-scheme: none ) {/* switched off temporarily */
	/* /* Editool customizatons DARK */
	span.mark {background-color:#8e740b;}
	.mark-brose span.mark {background-color:#af4e60;}
	.inner-links-cblack a { color: #eee !important;}
	.inner-span-cyellow .colored { color: #8e740b;}

	.header menu a:not(.button)::before { background-color: #fff;}
	.main-menu>li>ul:not(.bwhite) {background-color: rgba(0,0,0,1);}

	body {background-color: black; color: #eee}
	.bblack {border-bottom: 2px solid white}
	
	.header a {color: white}
	a {color: #0c73f2}

	.b-black:not(.no-dark-mode) {border-color:white;color: white}
	.b-black:not(.no-dark-mode)::before {background-color: white;}
	.b-black:not(.no-dark-mode):hover {color: black!important}
	.b-black.share-button:not(.no-dark-mode)::after {filter:grayscale(1) invert(1) contrast(3.5);}
	
	.support-your-app-logo img {border: 4px solid white;}
	
	.b-black-filled:not(.no-dark-mode) {border-color:white;color: white}
	
	.b-black:hover {color: #000}
	
	.b-yellow:not(.no-dark-mode) {color: #000!important;}
	.b-yellow:not(.no-dark-mode):hover {border-color: #fff}
	
	.dark-mode-invert {filter: invert(1);}/* apply to any object that may be inverted in dark mode*/
	
	.input {background-color: #555;color: #fff;}
	.input::placeholder {color: #777}
	.input:focus {border-color: white}
	
	.header-fixed {background-color: rgba(0,0,0,.5);}
	.flying-logos div {background-color: rgba(0,0,0,.7);}
	
	.software-names:hover,.darker-on-hover:hover {background-color: #333}
	.software-active {background-color: #333}
	.earth-map-grey::before {filter:invert(1);}
	
	.facelist .box { background-color: #000; color: #eee}
	.screenshot {border-color:#000}
	.border-bottom-grey,.border-top-grey {border-color: #444; }
	
	/* services landings */
	.cloud-url {color: #eee; border-color: #666}
	.cloud-url:hover {background-color: #000}
	.arrows-down::before, .arrows-left-overlap::before {filter: invert(1)}
	.dark-mode-invert.pictogram>span::after {filter: invert(1)!important}
	.dark-mode-invert.pictogram:hover>span::after {filter: invert(0)!important}
	.pictogram:not(.b-yellow)>span::after {filter: invert(1)}
	.pictogram:not(.b-yellow):hover>span::after {filter: invert(0)}
	.img-border-white {border-color:#000}
	.any-channel {border-color: #777}
	.video-background-light {background-color: rgba(0,0,0,.3)!important}
	.video-block:hover>div.video-background-light {background-color: rgba(0,0,0,.6)!important}
	.video-background-light .invert { filter: invert(0)}
	.bsystemwallpaper {background-image:linear-gradient(180deg, #474b6c 0%, #9c454d 33%, #916949 66%, #8e6c78 100%);}
	
	/* REQUIRE REVIEW */	
	.bgrey {background-color:#242424;}
	.byellow,
	.yellow-circle::after,.b-yellow-bdf::before {background-color:#8e740b;}/* dark yellow */
	.bsepia {background-color: #353222;}
	.bcherry,.bbordo {background-color: #6b2639}
	.bmarine,.marine-triangle::after {background-color: #2d6266}
	.blightmarine {background-color: #264548}
	.bblue,.blightblue {background-color:#214868;}
	.bgreen {background-color:#4c6d2c;}
	.blightgreen {background-color:#2f3b23;}
	.bwhite {background-color:#000;}
	.bred {background-color:#5d211e;}
	.brose {background-color:#af4e60;}
	.bdark,
	.channels-list li::after,.channels-list li::before {background-color:#222;}
	.bwhite {background-color:#000;}
	.bpine {background-color:#384843;}
	.cblack {color: #eee}
	
	/* REQUIRE REVIEW */	
	.byellowgrey {background-image:linear-gradient(45deg, #8e740b, #242424);}
	.bgreyyellow {background-image:linear-gradient(45deg, #242424, #8e740b);}
	.bmarinegrey {background: linear-gradient(45deg, #2d6266, #242424);}
	.bredgrey {background: linear-gradient(45deg, #6b2639, #242424)}
	.bgreengrey {background: linear-gradient(45deg, #4c6d2c, #242424)}
	.bbluegrey {background: linear-gradient(45deg, #214868, #242424)}
	
}
/* dark mode mobile */
@media (prefers-color-scheme: none ) and (max-width: 900px)  {
	.main-menu>li>ul { border-right: 1px dotted white ! important; }
}

/* setting class */
.no-margin {
	margin: 0;
}
.no-padding {
	padding: 0;
}
.bgyellow {
	background-color: #FFDD00;
}



/* Lazy loading pictures animation */
picture[data-lazy-loading] {display: flex; flex: 1; }
picture[data-lazy-loading] img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease; }
picture[data-lazy-loading="waiting"] img { opacity: 0; }
picture[data-lazy-loading="loaded"] img { opacity: 1; }

/* Styles for OLD BLOG */
.blog-posts-list .hbspt-form .hs-email {
	margin-top: 8px;
	margin-bottom: 24px;
}

.blog-posts-list .hbspt-form .hs-input {
	outline: none;
}