.wf-loading * { /* first things first, we need to hide everything, but bear in mind that this will only take effect once the loading script has taken effect. here we're hiding all content within the once it has the class "wf-loading" */ opacity: 0; } html{ width: 100%; min-height: 100%; margin-top: 0px; margin-left: 0px; background: #FFFFFF; /* For browsers that do not support gradients */ /* background-repeat: no-repeat;*/ /* background: -webkit-linear-gradient(white, #ACACAC 300px); For Safari 5.1 to 6.0 */ /* background: -o-linear-gradient(white, #ACACAC 300px); For Opera 11.1 to 12.0 */ /* background: -moz-linear-gradient(white, #ACACAC 300px); For Firefox 3.6 to 15 */ /* background: linear-gradient(white, #ACACAC 300px); Standard syntax */ } body { width: auto; margin:0 auto; font-size: 16px; font-family: 'Open Sans', sans-serif; font-display: optional; color: #444; min-height: 350px; background: #FFFFFF; /* For browsers that do not support gradients */ /* background-repeat: no-repeat; */ /* background: -webkit-linear-gradient(white, #ACACAC 300px); For Safari 5.1 to 6.0 */ /* background: -o-linear-gradient(white, #ACACAC 300px); For Opera 11.1 to 12.0 */ /* background: -moz-linear-gradient(white, #ACACAC 300px); For Firefox 3.6 to 15 */ /* background: linear-gradient(white, #ACACAC 300px); Standard syntax */ -webkit-text-size-adjust: 100%; /* -ms-overflow-style:none; */ } a { color: #FC4A1A; text-decoration: none; cursor: pointer; } .header{ text-align: center; width: 100%; background: #444; color: #fff; } .header a{ color: #fff; } .controls{ position: relative; margin-bottom: 0px; display: block; width: 100%; text-align: left; height: 60px; line-height: 60px; border-bottom: 0px solid #444; white-space: nowrap; box-sizing: border-box; user-select: none; vertical-align: middle; } .headerlinks{ display: inline-block; position: relative; } .headerlinks a{ display: inline-block; margin-left: 30px; vertical-align: middle; } .headerlinksicon { display: none; margin-left: 30px; vertical-align: middle; margin: 0px; cursor: pointer; } .headerlinks-content { display: inline-block; text-align: left; line-height: normal; white-space: nowrap; } .logo{ display: inline-block; font-family: 'Audiowide'; font-size: 32px; line-height: 32px; margin-left: 20px; text-shadow: 2px 2px #000; color: #fff; vertical-align: middle; margin-bottom: 8px; } .userheader{ text-align: right; position: absolute; right: 0px; top: 0px; display: block; line-height: 60px; height: 60px; padding: 0px; padding-right: 20px; margin: 0px; box-sizing: border-box; vertical-align: middle; } .userheader a{ margin-left: 0px; } .userpic{ width: 40px; height: 40px; border-radius: 50%; padding: 0px; margin: 0px; display: inline; vertical-align: middle; margin-bottom: 4px; } .userdownarrow{ display: inline-block; height: 60px; line-height: 60px; vertical-align: top; font-size: 16px; } .user_login{ font-size: 14px; color: silver; user-select: none; cursor: default; width: 100%; box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .bgcolor { background: #444; } .nobgcolor { background: white; } .closebutton{ color: #444; } .arrow { display: inline-block; vertical-align: middle; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #FC4A1A; } .downarrow { display: inline-block; vertical-align: middle; width: 0; height: 0; margin: 0px; padding: 0px; border-top: 8px solid #FC4A1A; border-left: 8px solid transparent; border-right: 8px solid transparent; } .uparrow { display: inline-block; vertical-align: top; width: 0; height: 0; margin: 0px; padding: 0px; border-bottom: 8px solid #FC4A1A; border-left: 8px solid transparent; border-right: 8px solid transparent; font-size: 0px; } .arrowcontainer{ position: absolute; padding: 0px; text-align: center; background: transparent; width: auto; height: 8px; } .bubbleuparrow, .bubbledownarrow, .bubbleuparrowafter, .bubbledownarrowafter{ /* display: inline-block; width: 0; height: 0; margin: 0px; padding: 0px; border-left: 8px solid transparent; border-right: 8px solid transparent; */ bottom: 0%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; } .bubbleuparrow { /* vertical-align: middle; border-top: 8px solid #FC4A1A; */ border-color: rgba(252, 74, 26, 0); border-top-color: #FC4A1A; border-width: 11px; margin-left: -11px; } .bubbleuparrowafter { border-color: rgba(242, 242, 242, 0); border-top-color: #f2f2f2; border-width: 8px; margin-left: -8px; } .bubbledownarrow { /* vertical-align: top; border-bottom: 8px solid #FC4A1A; */ border-color: rgba(252, 74, 26, 0); border-bottom-color: #FC4A1A; border-width: 11px; margin-left: -11px; } .bubbledownarrowafter { /* vertical-align: top; border-bottom: 8px solid #FC4A1A; */ border-color: rgba(242, 242, 242, 0); border-bottom-color: #f2f2f2; border-width: 8px; margin-left: -8px; } .bubbledialog{ position: absolute; z-index: 1000; /* background: #FCEFEC; */ background: #f2f2f2; border: 2px solid #FC4A1A; border-radius: 10px; padding: 10px; box-shadow: 0 0 10px rgba(68,68,68,1); } /* https://cssarrowplease.com/ */ .downbubbledialog:after, .downbubbledialog:before { bottom: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; } .downbubbledialog:after { border-color: rgba(242, 242, 242, 0); border-bottom-color: #f2f2f2; border-width: 8px; margin-left: -8px; } .downbubbledialog:before { border-color: rgba(252, 74, 26, 0); border-bottom-color: #FC4A1A; border-width: 11px; margin-left: -11px; } .upbubbledialog:after, .upbubbledialog:before { top: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } .upbubbledialog:after { border-color: rgba(242, 242, 242, 0); border-top-color: #f2f2f2; border-width: 8px; margin-left: -8px; } .upbubbledialog:before { border-color: rgba(252, 74, 26, 0); border-top-color: #FC4A1A; border-width: 11px; margin-left: -11px; } .bubblecontainer{ text-align: center; font-family: 'Open Sans', sans-serif !important; font-size: 14px; /* background: #f2f2f2; */ display: inline-block; width: auto; height: auto; } .bubblecontainer .part{ margin-bottom: 0px; } .bubblecontainer .inlinepart{ margin-right: 10px; } .bubblecontainer .inlinepart:last-child{ margin-right: 0px; } .selector{ font-family: 'Open Sans', sans-serif !important; font-size: 14px; width: auto; height: auto; /* min-width: 60px; */ max-height: 200px; overflow-y: scroll; padding: 0px; scrollbar-width: thin; } .selector::-webkit-scrollbar { -webkit-appearance: none; } .selector::-webkit-scrollbar:horizontal { height: 8px; } .selector::-webkit-scrollbar:vertical { width: 8px; } .selector::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .selector::-webkit-scrollbar-track { background-color: silver; /* border-radius: 0px; */ } .selectitem{ padding: 2px 0px; padding-right: 18px; padding-left: 10px; width: 100%; color: #444; background: #fff; line-height: normal; cursor: pointer; border: none; border-top: 1px solid transparent; border-bottom: 1px solid transparent; box-sizing: border-box; user-select: none; text-align: left; white-space: nowrap; } .selectitem:hover{ background: #4abdac; /* aqua color */ color: #fff; } .selectheader{ padding: 0px 5px; width: 100%; color: black; line-height: normal; font-weight: bold; background: #444; color: #fff; cursor: not-allowed; border-top: 1px solid transparent; border-bottom: 1px solid transparent; box-sizing: border-box; user-select: none; } .selecteditem{ background: #FC4A1A; color: white; } .selecteditem:hover{ background: #FC4A1A; color: white; } .colorbox{ display: inline-block; width: 100%; height: 100%; border: 1px solid silver; box-sizing: border-box; margin-bottom: 0px; margin-right: 0px; } .colorboxbg{ position: relative; display: inline-block; width: 20px; height: 20px; margin-bottom: 0px; margin-right: 0px; background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee; background-repeat: repeat, repeat; background-position: 0px 0px, 5px 5px; background-size: 10px 10px, 10px 10px; } .colortextbox{ display: inline-block; vertical-align: top; line-height: 18px; font-size: 14px; height: 18px; padding: 0px; margin: 0px; border: 1px solid transparent; margin-right: 4px; } .colortextbox:last-child{ margin-right: 0px; } .searchterm { width: 120px; height: 30px; padding: 5px; margin: 0px; outline: 0px; border: 1px solid #E3E3E3; background: #fff; line-height: 18px !important; vertical-align: bottom; font-size: 14px; font-family: Open Sans, sans-serif; border-radius: 5px; box-sizing: border-box; } .searchterm:hover:enabled { border: 1px solid #FC4A1A; } .searchterm:focus { outline:0; } .searchbutton { height: 30px; padding: 5px; margin: 0px; margin-left: 2px; outline: 0; text-align: center; line-height: 18px !important; font-size: 14px !important; font-family: 'Open Sans', sans-serif !important; background: #444; border: 1px solid #E3E3E3; border-radius: 5px; color: white; vertical-align: bottom; cursor: pointer; user-select: none; -webkit-appearance: none; box-sizing: border-box; } .searchbutton:hover:enabled { /* background-color: #F7B733; background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)"; */ border: 1px solid #FC4A1A; } .searchbutton:focus { outline:0; } .searchbutton:disabled { color: gray; cursor: auto; } .wideicon{ display: inline-block; color: #fff; background: transparent; border: 2px solid #fff; height: 14px; width: 24px; margin: 0px 3px; box-sizing: border-box; } .squareicon{ display: inline-block; color: #fff; background: transparent; border: 2px solid #fff; height: 14px; width: 14px; margin: 0px 3px; box-sizing: border-box; } .verticon{ display: inline-block; color: #fff; background: transparent; border: 2px solid #fff; height: 14px; width: 8px; margin: 0px 3px; box-sizing: border-box; } .googlesignin { background: url('/images/googlesignin/sprites.png') 0 -93px; background-size: 191px 184px; height: 46px; width: 191px; display: inline-block; /* background-repeat: no-repeat; background-attachment: fixed; background-position:; */ } .googlesignin:disabled { /* background-image: url('/images/googlesignin/btn_google_signin_dark_disabled_web@2x.png'); */ background-position: 0 0; } .googlesignin:focus { /* background-image: url('/images/googlesignin/btn_google_signin_dark_focus_web@2x.png'); */ background-position: 0 -139px; } .googlesignin:active { /* background-image: url('/images/googlesignin/btn_google_signin_dark_pressed_web@2x.png'); */ background-position: 0 -46px; } .pagetitle { font-size: 24px; font-family: 'Open Sans'; font-weight: bold; box-sizing: border-box; } .splash{ color: #444; padding-left: 10px; padding-right: 10px; max-width: 100%; display: block; /* height: 500px; */ min-height: 500px; overflow: visible; margin-bottom: 0px; text-align: center; } .bigsplash{ color: #444; padding-left: 10px; padding-right: 10px; max-width: 100%; display: block; height: 500px; min-height: 500px; overflow: visible; margin-bottom: 0px; text-align: center; } .splashlearnmore{ color: #444; padding: 0px 60px; max-width: 100%; display: inline-block; min-height: 100vh; width: 1280px; margin: 0 auto; margin-bottom: 20px; box-sizing: border-box; } .paddedlearnmore{ color: #444; padding: 0px 70px; max-width: 100%; display: inline-block; width: 1300px; margin: 0 auto; margin-bottom: 20px; box-sizing: border-box; } .splashlearnmoretitle{ color: #444; font-size: 28px; margin-bottom: 20px; font-weight: bold; font-family: 'Poppins'; text-align: center; } .splashlearnmorebyline{ font-size: 24px; } .splashtitle{ font-size: 60px; font-weight: bold; font-family: 'Poppins'; } .splashsection{ padding: 0px; overflow: hidden; margin-top: 120px; } .bigsplashsection{ overflow: hidden; max-width: 100%; width: 1280px; height: 500px; line-height: 500px; display: inline-block; padding: 0px 60px; box-sizing: border-box; background: transparent; color: white; margin-top: 0px; } h1{ font-size: 48px; font-weight: bold; font-family: 'Poppins'; margin: 10px 0px; } h2{ font-size: 36px; font-weight: bold; font-family: 'Poppins'; margin: 10px 0px; } h3{ font-size: 24px; font-weight: bold; font-family: 'Poppins'; margin: 10px 0px; } .splashread{ display: inline-block; margin: 0 auto; margin-top: 90px; text-align: left; font-size: 20px; line-height: 175%; max-width: 800px; } .splashread h1{ margin: 30px 0px; } .splashread h2{ margin: 30px 0px; } .splashread h3{ margin: 30px 0px; } .splashawesome{ display: inline-block; font-size: 24px; font-family: 'Open Sans', sans-serif !important; background: #FC4A1A; border: 1px solid #FC4A1A; border-radius: 3px; color: white; width: 45px; padding: 5px 2px; text-align: center; margin-right: 5px; } .splashbyline{ font-size: 24px; margin-top: 30px; margin-bottom: 30px; line-height: 150%; } .splashbutton{ display: inline-block; background: #FC4A1A; font-size: 24px; padding: 10px 20px; font-family: 'Open Sans', sans-serif !important; border: 1px solid #FC4A1A; border-radius: 3px; color: white; cursor: pointer; user-select: none; -webkit-appearance: none; } .splashbuttonrow{ margin-top: 0px; text-align: center; font-weight: normal; } .splashimgright{ float: right; display: inline-block; text-align: right; box-sizing: border-box; padding: 0px; padding-left: 10px; max-width: 554px; width: calc(50% - 10px); /* height: 324px; line-height: 324px; */ vertical-align: middle; } .bigsplashimgright{ float: right; display: inline-block; text-align: right; box-sizing: border-box; padding: 0px; padding-left: 10px; max-width: 554px; width: calc(50% - 10px); height: 500px; line-height: 500px; vertical-align: middle; } .splashimgleft{ float: left; display: inline-block; text-align: left; box-sizing: border-box; padding: 0px; padding-right: 10px; max-width: 554px; width: calc(50% - 10px); /* height: 324px; line-height: 324px; */ vertical-align: middle; } .splashtblleft{ float: left; font-size: 20px; padding: 0px; padding-right: 10px; padding-top: 10px; box-sizing: border-box; max-width: 554px; height: auto; width: calc(50% - 10px); } .bigsplashtblleft{ float: left; font-size: 20px; padding: 0px; padding-right: 10px; box-sizing: border-box; max-width: 554px; height: 500px; width: calc(50% - 10px); } .splashtblright{ float: right; font-size: 20px; padding: 0px; padding-left: 10px; padding-top: 10px; box-sizing: border-box; max-width: 554px; height: auto; width: calc(50% - 10px); } .splashtbltext{ display: inline-block; text-align: left; width: 100%; line-height: 175%; } .splashtbltext h1{ font-size: 18px; font-weight: bold; margin: 10px 0px; font-family: 'Open Sans'; text-transform: uppercase; color: #444; line-height: 32px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .splashtbltext h1::first-line{ font-size: 32px; font-family: 'Poppins'; line-height: 32px; } .splashimg{ /* border: 3px solid #eeeeee;*/ width: 100%; max-width: 100%; box-sizing: border-box; } .splashtexttitle{ font-size: 36px; font-weight: bold; margin-bottom: 10px; font-family: 'Poppins'; } .videorevolver{ display: block; cursor: pointer; border: 0; width: 100%; object-fit: contain; background: transparent; } .revolvervideo{ border-radius: 10px; } .lazy{ background: transparent; } .shadowPlaceHolder{ display: none; width: 1px; height: 1px; } .cropPlaceHolder{ display: none; width: 1px; height: 1px; } .socialcircle { display: table-cell; font-size: 22px; width: 44px; height: 44px; vertical-align: middle; border-radius: 50%; background: #ffffff; border: 1px solid #444; color: #444; text-align: center; white-space: normal; } .socialcircle:hover { background: #FC4A1A; color: #ffffff; border: 1px solid #FC4A1A; } .emptybox{ display: inline-block; background: #ffffff; width: 10px; height: 10px; margin: 0px; border: 1px solid #444; margin-right: 1px; margin-bottom: 2px; /* To account for border in vertical spacing */ vertical-align: middle; } .fillbox{ display: inline-block; background: #444; width: 10px; height: 10px; margin: 0px; border: 1px solid #444; margin-right: 1px; margin-bottom: 2px; /* To account for border in vertical spacing */ vertical-align: middle; } .fillbox:last-child{ margin-right: 0px; } .emptybox:last-child{ margin-right: 0px; } .boxsequence{ width: 100%; } .boxbutton{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; background: #fff; color: #444; margin-right: 4px; vertical-align: middle; font-size: 14px; line-height: 14px; cursor: pointer; width: 65px; height: 55px; padding: 3px; font-family: Open Sans; } .boxbutton:last-child{ margin-right: 0px; } .footerlists{ margin: 0 auto; display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: flex-start; width: auto; gap: 50px; padding: 50px; text-align: left; } .footerlistcontainer{ vertical-align: top; display: inline-block; width: 300px; /* margin: 35px; */ text-align: left; } .footerlistheader{ font-family: Poppins; font-weight: bold; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 15px 0px; } .footerlist{ list-style-type: none; list-style-position: outside; padding: 0px; margin: 0px; } .footerlist li{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 15px 0px; } .effectlist{ text-align: left; overflow-y: auto; width: 310px; height: 105px; margin: 0 auto; font-size: 0px; /* background: #fff; */ user-select: none; } .effectlist::-webkit-scrollbar { -webkit-appearance: none; } .effectlist::-webkit-scrollbar:horizontal { height: 8px; } .effectlist::-webkit-scrollbar:vertical { width: 8px; } .effectlist::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .effectlist::-webkit-scrollbar-track { background-color: silver; /* border-radius: 0px; */ } .effectcanvas { display: inline-block; background: transparent; vertical-align: middle; margin-right: 0px; margin-bottom: 0px; cursor: pointer; padding: 0px; margin: 2px; /* border: 1px solid transparent; */ outline: 0; } .popupselected{ /* border: 1px solid #FC4A1A; */ background: #FC4A1A; } /* Customize the label (the container) */ .cbcontainer { display: inline-block; position: relative; padding-left: 24px; margin: 0px; cursor: pointer; font-size: 14px; line-height: 14px; height: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .cbcontainer input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 14px; width: 14px; background-color: #fff; border: 1px solid silver; } /* On mouse-over, add a grey background color */ .cbcontainer:hover input ~ .checkmark { /* background-color: silver; */ } /* When the checkbox is checked, add a blue background */ .cbcontainer input:checked ~ .checkmark { background-color: #444; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .cbcontainer input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .cbcontainer .checkmark:after { left: 4px; top: 0px; width: 4px; height: 9px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .toplayer{ margin-top: 20px; box-sizing: border-box; padding: 10px; } .toplayerinfo{ padding-left: 20px; padding-bottom: 5px; width: auto; display: table-cell; vertical-align: bottom; text-align: left; } .bigimagebox{ position: relative; width: 102px; display: table-cell; vertical-align: bottom; text-align: center; } .bigimage{ width: 100px; height: 100px; vertical-align: middle; border: 1px solid silver; border-radius: 50%; } .accountbox{ text-align: left; font-size: 18px; border: 1px solid silver; width: 800px; max-width: 100%; margin: 0 auto; background: #ffffff; padding: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .updatepic{ display: block; width: 100%; position: absolute; top: 100px; text-align: center; } .checkerinspector{ background-color: #e5e5f7; opacity: 0.8; background-image: repeating-linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444), repeating-linear-gradient(45deg, #444 25%, #e5e5f7 25%, #e5e5f7 75%, #444 75%, #444); background-position: 0 0, 10px 10px; background-size: 20px 20px; } .checkerboard{ background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee; background-repeat: repeat, repeat; background-position: 0px 0px, 5px 5px; background-size: 10px 10px, 10px 10px; } .tinycheckerboard{ background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee; background-repeat: repeat, repeat; background-position: 0px 0px, 2px 2px; background-size: 4px 4px, 4px 4px; } .diagonallines { background-color: #fff; opacity: 1; background: repeating-linear-gradient( 45deg, #444, #444 4px, #fff 4px, #fff 20px ); } .zigzag { background-color: #fff; opacity: 1; background-image: linear-gradient(135deg, #444 25%, transparent 25%), linear-gradient(225deg, #444 25%, transparent 25%), linear-gradient(45deg, #444 25%, transparent 25%), linear-gradient(315deg, #444 25%, #fff 25%); background-position: 11px 0, 11px 0, 0 0, 0 0; background-size: 22px 22px; background-repeat: repeat; } .redzigzag { background-color: #fff; opacity: 1; background-image: linear-gradient(135deg, #FC4A1A 25%, transparent 25%), linear-gradient(225deg, #FC4A1A 25%, transparent 25%), linear-gradient(45deg, #FC4A1A 25%, transparent 25%), linear-gradient(315deg, #FC4A1A 25%, #fff 25%); background-position: 11px 0, 11px 0, 0 0, 0 0; background-size: 22px 22px; background-repeat: repeat; } .dots{ background-color: #444; opacity: 1; background-image: radial-gradient(#fff 0.45px, #444 0.45px); background-size: 9px 9px; } .reddots{ background-color: #FC4A1A; opacity: 1; background-image: radial-gradient(#fff 0.45px, #FC4A1A 0.45px); background-size: 9px 9px; } .dropdown { position: relative; display: inline-block; user-select: none; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; right: 10px; top: 55px; padding: 10px; background-color: white; min-width: 126px; box-shadow: 0 0 8px rgba(0,0,0,0.2); z-index: 99; font-size: 14px; width: 150px; text-align: left; line-height: normal; white-space: normal; border-radius: 5px; } .dropdown:hover .dropdown-content { display: block; } /* For mobile no hover */ .mobile-dropdown-content { display: none; position: relative; right: -5px; top: -5px; padding: 10px; background-color: white; min-width: 126px; box-shadow: 0 0 8px rgba(0,0,0,0.2); z-index: 99; font-size: 14px; width: 150px; text-align: left; line-height: normal; white-space: normal; } .inline-dropdown { position: relative; display: inline-block; user-select: none; } /* Dropdown Content (Hidden by Default) */ .inline-dropdown-content { display: none; position: absolute; right: -5px; padding: 10px; background-color: white; min-width: 126px; box-shadow: 0px 8px 16px 0px rgba(0,0,0.5,0.5); z-index: 99; font-size: 14px; width: 126px; text-align: left; line-height: normal; white-space: normal; } .inline-dropdown:hover .inline-dropdown-content { display: block; } .inline-dropdown:hover .editbutton { border: 1px solid #f2f2f2; } .fancy-inline-dropdown { position: relative; display: inline-block; user-select: none; } /* Dropdown Content (Hidden by Default) */ .fancy-inline-dropdown-content { display: none; position: absolute; right: 0px; /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); */ z-index: 99; font-size: 14px; text-align: left; line-height: normal; white-space: normal; } .fancy-inline-dropdown-content-menu{ margin: 0px; border: 3px solid #444; border-radius: 9px; padding: 10px; background: #fff; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); } .fancy-inline-dropdown:hover .fancy-inline-dropdown-content { display: block; } .bloglist{ margin: 0 auto; display: block; width: 100%; max-width: 1280px; font-family: Open Sans; text-align: left; padding: 0px; font-size: 24px; box-sizing: border-box; } .blog{ display: inline-block; margin: 10px 10px; padding: 40px; border: 0; box-sizing: border-box; width: calc(100% - 20px); vertical-align: top; background: #f2f2f2; border-radius: 10px; box-shadow: none; color: #000; } .blog:hover{ box-shadow: 1px 1px 10px #444; } .blogimgcont{ display: inline-block; text-align: right; box-sizing: border-box; padding: 0px; padding-right: 20px; width: calc(30% - 20px); max-width: 382px; vertical-align: top; } .blogimg{ width: 100%; height: 100%; object-fit: cover; } .bloginfo{ display: inline-block; width: 70%; text-align: left; vertical-align: top; } .bloginfo h3{ font-size: 20px; font-weight: bold; font-family: 'Poppins'; margin-top: 0px; } .blogtitle{ font-size: 20px; font-weight: bold; font-family: 'Poppins'; } .blogdate{ margin-top: 5px; margin-bottom: 5px; font-size: 12px; text-transform: uppercase; } .blogdesc{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 18px; text-align: left; width: 100%; line-height: 150%; } .project{ display: inline-block; padding: 20px; border: 0; width: 25%; box-sizing: border-box; } .projectimg{ width: 100%; display: block; position: relative; } .projectimg:after{ padding-top: 56.25%; /* 16:9 ratio */ display: block; content: ''; } .projectimgcont{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .projectvid{ vertical-align: middle; width: 100%; display: block; position: relative; } .projectvid:after{ padding-top: 56.25%; /* 16:9 ratio */ display: block; background: transparent url(https://res.cloudinary.com/slimanimation/image/upload/v1560457651/docs/Spinner-1s-100px.gif) no-repeat 50% 50%; content: ''; } .projectvidsq{ vertical-align: middle; width: 100%; display: block; position: relative; } .projectvidsq:after{ padding-top: 100%; /* 16:9 ratio */ display: block; background: transparent url(https://res.cloudinary.com/slimanimation/image/upload/v1560457651/docs/Spinner-1s-100px.gif) no-repeat 50% 50%; content: ''; } .projectvidvert{ vertical-align: middle; width: 100%; display: block; position: relative; } .projectvidvert:after{ padding-top: 177.78%; /* 16:9 ratio */ display: block; background: transparent url(https://res.cloudinary.com/slimanimation/image/upload/v1560457651/docs/Spinner-1s-100px.gif) no-repeat 50% 50%; content: ''; } .projectvidcont{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; } input{ font: 400 18px 'Open Sans'; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .logininput { width: 100%; font-size: 18px; font-family: 'Open Sans' !important; padding: 2px; margin-bottom: 3px; margin-left: 0px; margin-right: 0px; margin-top: 0px; background-color: #ffffff !important; border: 1px solid silver !important; -webkit-appearance: none; border-radius: 0; } .logininput:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #ffffff inset; } .logininput:focus { outline:0; border: 1px solid #FC4A1A !important; } .logininput:disabled { color: #C0C0C0; } .loginlabel { font-size: 18px; font-weight: normal; padding: 2px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; display: inline-block; } .usermenu { display: inline-block; font-size: 14px !important; padding: 10px; width: 100%; color: #444 !important; background: white !important; box-sizing: border-box; cursor: pointer; } .usermenu:hover { color: white !important; background: #444 !important; } .addmenu { display: inline-block; font-size: 14px !important; padding: 0px 10px; margin: 0px; width: 100%; color: #444; background: #f2f2f2; box-sizing: border-box; cursor: pointer; text-align: left; line-height: 24px; border: none; white-space: nowrap; } .addmenu:hover:enabled { color: #f2f2f2; background: #444; border: none; } .addmenu:focus { outline: 0; } .addmenu:disabled { cursor: auto; color: #BEBEBE; } .tab{ font-size: 18px; font-family: 'Open Sans', sans-serif !important; background: transparent; border: none; /* border-bottom: 1px solid transparent; */ color: #FC4A1A; cursor: pointer; user-select: none; -webkit-appearance: none; padding-top: 0px; padding-bottom: 3px; padding-left: 5px; padding-right: 5px; margin-right: 20px; } .tab:focus { outline:0; } .tab:disabled { color: #444; background: transparent; border: none; border-bottom: 1px solid #444; cursor: auto; } .atab{ font-size: 18px; font-weight: bold; font-family: 'Open Sans', sans-serif !important; background: transparent; border: none; /* border-bottom: 1px solid transparent; */ color: #FC4A1A; cursor: pointer; user-select: none; -webkit-appearance: none; padding-top: 0px; padding-bottom: 3px; padding-left: 5px; padding-right: 5px; margin-right: 15px; } .atab:focus { outline:0; } .atabdisabled { color: #000; background: transparent; border: none; border-bottom: 1px solid #000; pointer-events: none; cursor: default; } .tabbutton{ font-size: 18px; font-family: 'Open Sans', sans-serif !important; background: #FC4A1A; border: 1px solid #FC4A1A; border-top-right-radius: 5px; border-top-left-radius: 5px; color: white; cursor: pointer; user-select: none; -webkit-appearance: none; } .tabbutton:focus { outline:0; } .tabbutton:disabled { background: #444; border: 1px solid transparent; cursor: auto; } .editnodebutton{ display: inline-block; font-family: 'Open Sans', sans-serif !important; font-size: 14px; text-align: center; background: #fff; padding: 0px 5px; border: 1px solid #E3E3E3; color: #444; border-radius: 5px; vertical-align: middle; outline: 0; margin: 0px; height: 30px; box-sizing: border-box; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-appearance: none; font-weight: normal; /* -webkit-appearance: none; */ } .editnodebutton:hover:enabled { border: 1px solid #FC4A1A; } .nodeeffectdiv{ display: inline-block; font-family: 'Open Sans', sans-serif !important; font-size: 14px; text-align: center; background: transparent; padding: 0px ; color: #444; vertical-align: middle; margin: 0px; height: 30px; line-height: 30px; vertical-align: middle; box-sizing: border-box; user-select: none; -webkit-user-select: none; -webkit-appearance: none; font-weight: normal; } .actionbutton{ font-size: 16px; font-family: 'Open Sans', sans-serif !important; background: #FC4A1A; padding: 3px 10px; border: 1px solid #FC4A1A; border-radius: 3px; color: white; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-appearance: none; font-weight: bold; text-transform: uppercase; } .actionbutton:hover:enabled { /* background-color: #F7B733; background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)"; */ border: 1px solid #FFF; } .actionbutton:focus { outline:0; } .actionbutton:disabled { color: #e3e3e3; background: #fff; border: 1px solid #e3e3e3; cursor: auto; } .inlineactionbutton{ font-size: 18px; line-height: 18px; font-family: 'Open Sans', sans-serif !important; background: #FFF; padding: 5px; border: 1px solid #444; border-radius: 5px; color: #444; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-appearance: none; } .inlineactionbutton:hover:enabled { /* background-color: #F7B733; background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)"; */ border: 1px solid #FC4A1A; } .inlineactionbutton:focus { outline:0; } .inlineactionbutton:disabled { color: #e3e3e3; border: 1px solid #e3e3e3; cursor: auto; } .cropbutton{ padding: 5px 0px; font-size: 12px; line-height: 12px; border-radius: 5px; margin: 0px; border: 1px solid #e3e3e3; outline: 0px; cursor: pointer; height: 22px; width: 22px; background: #fff; color: #444 !important; display: inline-block; } .iconbutton{ font-size: 18px; vertical-align: middle; line-height: 24px; margin-left: 3px; margin-right: 3px; width: auto; height: 30px; background: transparent; text-align: left; font-weight: normal; padding: 0px 7px; box-sizing: border-box; font-family: 'Open Sans', sans-serif !important; border: 1px solid transparent; border-radius: 3px; color: #FFF; cursor: pointer; -webkit-appearance: none; user-select: none; -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; white-space: nowrap; } .iconbutton:focus { outline:0; } .iconbutton:disabled { color: #888888; cursor: auto; } .editbutton{ display: inline-block; width: auto; font-size: 14px; vertical-align: middle; line-height: 24px; margin: 5px 0px; /* width: 100%; */ background: transparent; text-align: center; font-weight: normal; padding: 3px; box-sizing: border-box; font-family: 'Open Sans', sans-serif !important; border: 1px solid transparent; border-radius: 3px; color: white; cursor: pointer; -webkit-appearance: none; user-select: none; -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; white-space: nowrap; } .editbutton:hover:enabled { background: #4ABDAC; /* background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)"; */ /* border: 1px solid #f2f2f2; */ } .editbutton:focus { outline:0; } .editbutton:disabled { color: gray; cursor: auto; } .blackbanner{ width: 100%; font-size: 36px; font-family: Poppins; font-weight: bold; background: #000; color: #fff; padding: 30px; box-sizing: border-box; background-image: linear-gradient(to right, rgb(0,0,0), rgb(68,68,68)); } .gradientbanner{ width: 100%; background: rgb(68,68,68); background: linear-gradient(73deg, rgba(68,68,68,1) 0%, rgba(252,74,26,1) 100%); color: #fff; padding: 40px; box-sizing: border-box; font-size: 36px; font-family: Poppins; font-weight: bold; margin-top: 40px; margin-bottom: 40px; border-radius: 5px; } .infoflex{ display: flex; flex-wrap: wrap; } .infobox{ flex: 1; vertical-align: top; background: #fff; padding: 20px; color: #000; border: 2px solid silver; border-radius: 10px; /* min-width: 300px; */ margin: 20px; box-sizing: border-box; } .greentored{ width: 100%; background: rgb(6,190,182); background: linear-gradient(73deg, rgba(6,190,182,1) 0%, rgba(252,74,26,1) 100%); padding: 40px; box-sizing: border-box; margin: 40px 0px; color: #fff; } .modal { position: fixed; /* Stay in place */ z-index: 10001; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0); /* Black w/ opacity */ } .fixedoverlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10001; background-color: rgba(41, 47, 51, 0.5); /*dim the background*/ text-align: center; overflow: auto; display: flex; align-items: center; justify-content: center; } .dialog{ display: inline-block; vertical-align: middle; margin: 0 auto; width: auto; max-width: calc(100% - 10px); /* max-height: calc(100% - 10px); */ padding: 0px; background: #f2f2f2; border-radius: 5px; border: 1px solid #e3e3e3; box-sizing: border-box; z-index: 10001; } .dialogtitlediv{ background: #e3e3e3; color: #444; display: block; padding: 0px; line-height: 30px; height: 30px; font-size: 18px; position: relative; } .dialogtitle { /* padding: 2px; */ /* position: absolute; top: 0px; left: 0px;*/ display: inline-block; width: calc(100% - 50px); vertical-align: top; text-align: center; font-family: 'Audiowide'; font-weight: bold; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; /* margin-bottom: 15px; */ user-select: none; -webkit-user-select: none; margin: 0 auto; } .dialogclosediv{ position: absolute; vertical-align: top; text-align: right; margin-bottom: 0px; top: 0px; right: 10px; } .dialogbuttondiv{ margin-top: 20px; white-space: nowrap; text-align: right; vertical-align: top; } .dialogcontent{ margin-left: 25px; margin-right: 25px; margin-bottom: 25px; margin-top: 25px; box-sizing: border-box; } .dialogresizecontent{ max-height: calc(100vh - 130px); /*40px is for dialogtitle, 20+30 for dialog content padding, 40 for good measure*/ overflow-y: auto; } .dialogresizeheight{ height: calc(100vh - 130px); /*40px is for dialogtitle, 20+30 for dialog content padding, 40 for good measure*/ } .dialogscrollcontainer { /* overflow-y: auto; */ padding: 20px 30px; } .dialogscrollcontainer::-webkit-scrollbar { -webkit-appearance: none; width: 0px; } .dialogscrollcontainer::-webkit-scrollbar:horizontal { height: 0px; background: transparent; } .dialogscrollcontainer::-webkit-scrollbar:vertical { width: 0px; } .dialogscrollcontainer::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .dialogscrollcontainer::-webkit-scrollbar-track { background-color: transparent; border-radius: 0px; } .dialogscrollcontainer::-webkit-scrollbar-corner { background-color: transparent; } .progresslabel { width: 600px; max-width: 100%; padding: 2px; box-sizing: border-box; font-size: 28px; text-align: center; font-family: 'Open Sans'; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #444; user-select: none; } .progressbar { width: 600px; max-width: 100%; height: 20px; background: #ffffff; position: relative; border: 1px solid silver; } .indeterminate{ background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw=="); filter: alpha(opacity=25); opacity: 0.25; } .progressoverlay{ position: absolute; top: 0px; left: 0px; width: 0%; height: 100%; background: silver; } .roundbutton { display: inline-block; height: 30px; width: 30px; border-radius: 50%; -webkit-border-radius: 50%; color: white !important; background: #FC4A1A; border: 1px solid #FC4A1A; font-size: 18px; text-align: center; padding: 0px; cursor: pointer; } .roundbutton:hover { border-color: #FC4A1A; } .roundbutton:focus { outline:0; } .displayslim{ position: relative; display: inline-block; margin-top: 20px; margin-bottom: 20px; /* border: 1px solid silver; */ /* box-shadow: 0px 0px 5px silver; */ width: 800px; height: 450px; } .thumbnail{ display: block; /* background: #eeeeee; max-width: 112px; width: 112px; height: 63px; */ border: 2px solid transparent; margin: 0px; padding: 0px; vertical-align: middle; cursor: pointer; } .thumbarea{ display: inline-block; margin: 0 auto; font-size: 0px; width: 100%; /* max-width: 800px; */ text-align: left; margin-top: 0px; margin-bottom: 0px; overflow-x: hidden; overflow-y: hidden; /* height: 103px; */ background: #eeeeee; /* border: 1px solid silver; */ white-space: nowrap; vertical-align: top; } .addarea{ display: inline-block; width: 65px; height: 65px; box-sizing: border-box; line-height: 65px; margin-top: 5px; margin-left: 10px; margin-right: 10px; color: #FC4A1A !important; /* background: #eeeeee; */ /* height: 99px; */ vertical-align: middle; text-align: center; border: 0px; } .playarea{ display: inline-block; width: 65px; height: 65px; box-sizing: border-box; line-height: 65px; margin-top: 5px; margin-left: 10px; margin-right: 10px; color: #FC4A1A !important; /* background: #eeeeee; */ /* height: 99px; */ vertical-align: middle; text-align: center; border: 0px; } .thumbdiv{ position: relative; display: inline-block; /* width: 112px; */ margin-right: 5px; margin-top: 5px; margin-bottom: 5px; cursor: pointer; } .bigcard { position: relative; display: inline-block; margin: 10px; padding: 0px; box-sizing: border-box; width: calc(25% - 20px); cursor: pointer; color: #ffffff; background-color: transparent; overflow: hidden; vertical-align: bottom; } .middot{ display: inline-block; margin-left: 10px; margin-right: 10px } .templateheaderbg{ background: #eeeeee; background-image:linear-gradient(to right, rgba(6, 190, 182, 0.7), rgba(72, 177, 191, 0.95)), url(https://res.cloudinary.com/slimanimation/image/upload/c_scale,w_1280/v1552496707/splash/eyes.jpg); background-size: cover; background-position: center; width: 100%; } .templateheader{ width: 100%; padding: 50px 50px; box-sizing: border-box; font-size: 0px; } .templateheaderlefthalf{ width: 50%; min-width: 350px; margin: 0px; box-sizing: border-box; vertical-align: top; text-align: left; display: inline-block; color: #fff; font-size: 0px; } .templateheaderrighthalf{ width: 50%; min-width: 350px; margin: 0px; box-sizing: border-box; vertical-align: top; height: 120px; padding-top: 35px; text-align: right; display: inline-block; color: #fff; } .templatefullcont{ width: 100%; padding: 50px 40px; box-sizing: border-box; font-size: 0px; text-align: center; } .templatesearch{ float: right; display: inline-block; width: 180px; padding: 5px 10px; border-radius: 10px; margin: 5px; margin-right: 0px; outline: 0px; border: 1px solid silver; font-size: 18px; line-height: 24px; height: 24px; font-family: Open Sans, sans-serif; vertical-align: bottom; } .ideamenu{ position: relative; display: inline-block; margin: 5px; margin-left: 0px; } .ideamenutitle{ display: inline-block; padding: 5px 10px; border-radius: 0px; outline: 0px; border: 1px solid #444; border-radius: 10px; background: #FC4A1A; color: #fff; font-size: 18px; line-height: 24px; height: 24px; font-family: Open Sans, sans-serif; vertical-align: bottom; cursor: pointer; } .idealist{ display: none; position: absolute; left: 0px; top: 34px; background: white; box-shadow: 0px 8px 16px 0px rgba(0,0,0.5,0.5); z-index: 99; padding: 10px; box-sizing: border-box; text-align: left; margin: 0px; width: 320px; line-height: normal; -webkit-overflow-scrolling: touch; vertical-align: top; user-select: none; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; } .idealist a{ color: #000; white-space: nowrap; display: inline-block; width: 140px; font-size: 16px; margin: 0px 5px; padding: 5px 10px; cursor: pointer; box-sizing: border-box; z-index: 199; } .idealist a:hover{ color: #FFF; background: #444; } .idea{ background: #eee; margin: 0px; text-align: center; width: 100%; } .ideacontainer{ position: relative; margin:20px; display: inline-block; text-align: left; font-size: 20px; line-height: 175%; max-width: 900px; padding: 40px; background: white; color: #000; border: 1px solid silver; } .ideatitle{ text-align: left; font-size: 32px; font-weight: bold; line-height: 100%; margin-bottom: 10px; font-family: 'Poppins'; } .ideacontent{ text-align: left; font-size: 20px; line-height: 175%; } .ideaclose{ position: absolute; top: 18px; right: 20px; font-size: 20px; line-height: 20px; height: 20px; color: #000; } .startfromscratch{ display: inline-block; vertical-align: middle; background: transparent; font-size: 20px; font-weight: bold; padding: 10px 10px; box-sizing: border-box; line-height: normal; font-family: 'Open Sans', sans-serif !important; border: 1px solid #FFF; border-radius: 10px; color: #FFF; cursor: pointer; user-select: none; -webkit-appearance: none; } .startfromscratch:hover { border: 1px solid #FC4A1A; } .templatelistcont{ margin: 0 auto; margin-top: 0px; text-align: center; width: 100%; /* display: grid; grid-template-columns: auto auto auto auto; */ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; align-self: flex-start; gap: 30px 30px; } .tempcard { display: inline-block; /* place-self: center; */ margin: 0px; padding: 20px; box-sizing: border-box; /* width: calc(25% - 20px); */ color: #000; background-color: #f2f2f2; overflow: hidden; vertical-align: top; border-radius: 5px; border: 1px solid silver; box-shadow: none; max-width: 100%; width: 394px; } .tempcard h2{ margin: 0px; padding: 0px; margin-top: 10px; text-align: center; font-size: 14px; vertical-align: bottom; font-family: Open Sans; font-weight: normal !important; color: #444; user-select: none; line-height: 28px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .tempcard h2::first-line{ text-transform: uppercase; font-size: 18px; font-weight: bold; line-height: 18px; } .tempcard:hover{ box-shadow: 1px 1px 5px #444; } .tempcardcont { position: relative; width: 100%; } .tempcardcont:after{ padding-top: 56.25%; /* 16:9 ratio */ display: block; background: transparent url(https://res.cloudinary.com/slimanimation/image/upload/v1560457651/docs/Spinner-1s-100px.gif) no-repeat 50% 50%; content: ''; } .temptitle{ text-align: center; text-transform: uppercase; font-size: 18px; font-weight: bold; padding-top: 10px; user-select: none; line-height: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .tempdesctitle{ text-align: center; font-size: 14px; padding-top: 5px; user-select: none; line-height: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .tempbr{ position: absolute; display: inline-block; font-size: 14px; bottom: 5px; right: 5px; padding: 4px; color: #fff; background-color: rgba(68,68,68,0.5); } .tempbl{ position: absolute; display: inline-block; font-size: 14px; bottom: 5px; left: 5px; padding: 4px; margin-right: 4px; color: #fff; background-color: rgba(68,68,68,0.5); } .tempimgcont{ display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .tempimg{ display: block; width: 100%; height: 100%; } .tempvideocont{ display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .tempvideo{ display: block; outline: 0; width: 100%; height: 100%; } .templatevideocont{ margin: 0 auto; display: inline-block; width: 100%; height: 100%; max-width: 1280px; width: 100%; padding: 0px 60px; text-align: center; box-sizing: border-box; margin-top: 20px; } .templatevideocrumbs{ text-align: left; font-size: 14px; font-weight: bold; text-transform: uppercase; height: 20px; line-height: 20px; vertical-align: middle; white-space: nowrap; overflow-x: scroll; width: 100%; } .templatevideo{ margin: 20px 0px; display: block; outline: 0; object-fit: contain; width: 100%; min-height: 240px; height: calc(100vh - 200px); max-height: 720px; } .temp{ margin: 0 auto; display: inline-block; width: 100%; text-align: center; box-sizing: border-box; margin-top: 60px; color: #444; } .templeft{ display: inline-block; font-size: 20px; padding: 30px; padding-left: 0px; box-sizing: border-box; max-width: 1280px; width: calc(50% - 30px); min-width: 484px; height: auto; vertical-align: top; line-height: normal; position: relative; } .tempright{ display: inline-block; font-size: 20px; line-height: 175%; padding: 30px; padding-left: 20px; padding-right: 0px; box-sizing: border-box; max-width: 504px; width: calc(50% - 0px); min-width: 352px; height: auto; } .card { position: relative; display: inline-block; margin-left: 10px; margin-top: 10px; padding: 0px; box-sizing: border-box; width: calc(25% - 12.5px); min-width: 50px; cursor: pointer; color: #ffffff; background-color: transparent; overflow: hidden; vertical-align: bottom; } .deselectedcard{ color: transparent; background-color: transparent; } .selectedcard{ color: #FFFFFF; background-color: rgba(252, 74, 26,0.5); } .searchresults { min-height: 200px; width: 100%; height: 100%; overflow-y: scroll; overflow-x: scroll; -webkit-overflow-scrolling: touch; pointer-events: auto; border: 1px solid #E3E3E3; box-sizing: border-box; padding: 0px; user-select: none; } .searchresults::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } .searchresults::-webkit-scrollbar:horizontal { height: 0px; background: gray; } .searchresults::-webkit-scrollbar:vertical { width: 11px; } .searchresults::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .searchresults::-webkit-scrollbar-track { background-color: silver; border-radius: 0px; } .searchresults::-webkit-scrollbar-corner { background-color: silver; } .medialistselector{ width: 100%; display: inline-flex; flex-wrap: wrap; gap: 2.5px; justify-content: flex-start; align-items: flex-start; align-content: flex-start; text-align: left; margin: 0px; padding: 0px; line-height: 0%; vertical-align: top; font-size: 14px; } .medialistselector::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } .medialistselector::-webkit-scrollbar:horizontal { height: 11px; background: gray; } .medialistselector::-webkit-scrollbar:vertical { width: 0px; } .medialistselector::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .medialistselector::-webkit-scrollbar-track { background-color: silver; border-radius: 0px; } .medialistselector::-webkit-scrollbar-corner { background-color: silver; } .searchmessage{ font-size: 18px; color: #444; margin: 0 auto; text-align: center; max-width: 450px; background: transparent; padding: 10px; box-sizing: border-box; font-weight: bold; } .imgcolcont{ display: block; cursor: pointer; position: relative; overflow: hidden; box-sizing: border-box; /*important*/ border-style: solid; border-color: transparent; border-radius: 8px; } .imgcolcont:hover{ border-color: #FC4A1A; } .imgcolcont img{ display: block; margin: 0px; background: #E3E3E3; } .userdiv{ position: absolute; display: none; bottom: 0px; left: 0px; margin: 0px; padding: 0px; box-sizing: border-box; font-size: 10px; max-width: 90%; } .userdiv a{ color: white; text-decoration: none; background: rgba(0,0,0,.3); padding-left: 3px; padding-right: 3px; box-sizing: border-box; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; vertical-align: bottom; text-align: left; } .helpcontent { text-align: left; font-size: 18px; margin-top: 0px; margin-bottom: 0px; padding: 0px 10px; width: 100%; max-height: calc(75vh - 100px); box-sizing: border-box; min-height: 100px; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; pointer-events: auto; } .helpcontent p{ margin: 10px 0px; } .helpcontent::-webkit-scrollbar { -webkit-appearance: none; width: 3px; } .helpcontent::-webkit-scrollbar:horizontal { height: 0px; background: transparent; } .helpcontent::-webkit-scrollbar:vertical { width: 3px; } .helpcontent::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .helpcontent::-webkit-scrollbar-track { background-color: transparent; border-radius: 0px; } .helpcontent::-webkit-scrollbar-corner { background-color: transparent; } .helpcrumbs{ font-size: 14px; } .helptext{ display: inline-block; width: calc(100% - 40px); max-width: 800px; padding: 20px 80px; margin: 20px 0px; font-size: 18px; line-height: 200%; background: #fff; text-align: left; box-shadow: 0 3px 8px 0 rgb(0 0 0 / 3%); } .morediv{ margin-top: 20px; margin-bottom: 20px; text-align: center; } .spinnerdiv{ position: relative; min-width: 100px; width: 100%; min-height: 100px; } .timeline{ position: relative; font-size: 12px; color: #ffffff; background: transparent; background-image: linear-gradient(to right, #444, #787878, #444); text-align: center; vertical-align: middle; padding: 0px; margin: 0px; } .timelineselect{ background: rgb(74, 189, 172); background-image: none; } .sortable-placeholder { display: inline-block; height: 1px; width: 112px; background: #eeeeee; } .sortable-square-placeholder { display: inline-block; height: 1px; width: 63px; background: #eeeeee; } .thumblist{ display: inline-block; background: #E3E3E3; /* background-image: linear-gradient(#969696, #444 18px); */ width: 100%; text-align: left; margin: 0px; /* margin-top: 5px; */ /* margin-bottom: 20px; */ overflow-x: scroll; -webkit-overflow-scrolling: touch; overflow-y: hidden; /* height: 99px; */ /* background: #eeeeee; */ /* border: 1px solid silver; */ white-space: nowrap; vertical-align: top; user-select: none; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; } .thumblist::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } .thumblist::-webkit-scrollbar:horizontal { height: 11px; background: gray; } .thumblist::-webkit-scrollbar:vertical { width: 11px; } .thumblist::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .thumblist::-webkit-scrollbar-track { background-color: silver; border-radius: 0px; } .thumblist::-webkit-scrollbar-corner { background-color: silver; } .backdroplist{ display: inline-block; background: #444; /* background-image: linear-gradient(#969696, #444 18px); */ width: 100%; text-align: left; margin: 0px; /* margin-top: 5px; */ /* margin-bottom: 20px; */ overflow-x: scroll; -webkit-overflow-scrolling: touch; overflow-y: hidden; /* height: 99px; */ /* background: #eeeeee; */ /* border: 1px solid silver; */ white-space: nowrap; vertical-align: top; user-select: none; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; -webkit-touch-callout: none; } .backdroplist::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } .backdroplist::-webkit-scrollbar:horizontal { height: 10px; background: gray; } .backdroplist::-webkit-scrollbar:vertical { width: 10px; } .backdroplist::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .backdroplist::-webkit-scrollbar-track { background-color: silver; border-radius: 0px; } .backdroplist::-webkit-scrollbar-corner { background-color: silver; } .thumbinfo { position: absolute; bottom: 0px; left: 5px; /* padding: 5px; */ border-radius: 3px; display: inline-block; /* border: 1px solid white; */ color: #444; text-align: left; font-size: 12px; line-height: 12px; vertical-align: middle; } .thumbfunc{ position: absolute; bottom: 0px; right: 5px; padding: 0px; display: inline-block; color: white; text-align: right; font-size: 14px; line-height: 14px; vertical-align: middle; } .playercontrols { font-size: 14px; font-weight: bold; font-family: Open Sans; width: 100%; height: auto; text-align: center; background-color: rgba(0,0,0,0.5); background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.7)); background: -o-linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.7)); background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.7)); background: linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.7)); padding-top: 0px; padding-bottom: 8px; color: white; white-space: nowrap; overflow: hidden; } .captioninput{ font-size: inherit; font-family: Open Sans, Noto Color Emoji; border: 1px solid #E3E3E3; padding: 5px; color: #444; background: white; width: 100%; border-radius: 5px; box-sizing: border-box; } .captioninput:hover:enabled { border: 1px solid #FC4A1A; } .captioninput:focus { outline:0; } .sp-palette span[title="rgb(128, 128, 128)"]{ border: 1px solid #FC4A1A; } .sp-container button { font-family: 'Open Sans', sans-serif !important; background-color: #FC4A1A; border: 1px solid #FC4A1A; border-radius: 3px; background-image: none; color: white; font-size: 14px; line-height: 1; padding: 5px 4px; text-align: center; vertical-align: middle; text-shadow: none; } .sp-container button:hover { background-color: #FC4A1A; border: 1px solid #444; background-image: none; text-shadow: none; } .sp-container button:active { } .sp-cancel { font-size: 14px; color: #FC4A1A !important; margin:0; padding:2px; margin-right: 5px; vertical-align: middle; text-decoration:none; } .sp-cancel:hover { text-decoration: underline; } .sp-replacer { background: #fff; border: 1px solid #E3E3E3; border-radius: 5px; padding: 4px; } .sp-replacer:hover:enabled { border: 1px solid #FC4A1A; } .sp-preview, .sp-alpha, .sp-thumb-el { position:relative; /* background: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .2) 5px, transparent 5px, transparent 5px); */ background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee; background-repeat: repeat, repeat; background-position: 0px 0px, 5px 5px; background-size: 10px 10px, 10px 10px; } .sp-clear-display { /* background: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .2) 5px, transparent 5px, transparent 5px); */ background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee; background-repeat: repeat, repeat; background-position: 0px 0px, 5px 5px; background-size: 10px 10px, 10px 10px; } .sp-clear.sp-clear-display { background-position: 0px 0px, 5px 5px; } .sp-preview{ width: 18px; height: 18px; border: 1px solid silver; } .sp-dd{ font-size: 18px; } .fontbutton{ display: block; width: 100%; border-radius: 0px; text-align: left; margin: 0px; padding: 0px; border: 1px solid #fff; cursor: pointer; background: #fff; height: 27px; outline: 0; } .fontbutton:hover { background: #eee; } .selectedfontbutton{ border: 1px solid #FC4A1A; } .fontimg{ height: 25px; cursor: pointer; /* display: block; */ } .fontbanner{ text-align: center; background: #F8F8F8; color: #888; width: 100%; padding: 0px; padding-top: 4px; padding-bottom: 5px; box-sizing: border-box; font-size: 11px; line-height: 11px; vertical-align: middle; font-weight: bold; margin-bottom: 0px; cursor: not-allowed; } .fontsearch{ display: block; width: 100%; padding: 5px; margin: 0px; margin-top: 0px; margin-bottom: 0px; outline: 0px; border: none; border-bottom: 1px solid #e3e3e3; font-size: 14px; line-height: 30px; height: 30px; box-sizing: border-box; font-family: Open Sans, sans-serif; vertical-align: middle; } .fontsearchcontainer{ display: block; background: #fff; text-align: left; white-space: normal; width: 100%; overflow-y: scroll; height: 180px; /* border-bottom: 1px solid #e3e3e3; */ box-sizing: border-box; font-size: 14px; } .fontsearchcontainer::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } .fontsearchcontainer::-webkit-scrollbar:vertical { height: 7px; } .fontsearchcontainer::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .fontsearchcontainer::-webkit-scrollbar-track { background-color: silver; border-radius: 0px; } .fontsearchcontainer::-webkit-scrollbar-corner { background-color: silver; } .selectbutton{ display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; align-self: flex-start; flex-grow: 0; font-size: 14px; background: #ffffff; color: #444; padding: 4px; border: 1px solid #E3E3E3; height: 30px; line-height: 20px; border-radius: 5px; box-sizing: border-box; cursor: pointer; user-select: none; margin: 0px; position: relative; font-family: Open Sans, sans-serif; width: 100%; } .selectbutton:hover{ border-color: #FC4A1A; } .selectbutton:hover:enabled { border-color: #FC4A1A; } .selectbutton:hover:disabled { border-color: #E3E3E3; } .selectbutton:focus { outline:0; } .selectbutton:disabled { color: silver; background: #E3E3E3; cursor: default; } .selecttext{ /* display: inline-flex; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; align-self: flex-start; flex-grow: 0; */ flex: 1 1 auto; padding: 0px; width: calc(100% - 14px); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: 20px; line-height: 20px; vertical-align: top; font-size: 14px; text-align: center; margin-right: 4px; /* line-height: normal; */ } .selectarrow{ flex: 0 1 auto; display: inline-block; padding: 0px; /* height: 20px; line-height: 17px; padding-top: 3px; */ width: 9px; vertical-align: top; /* line-height: normal; */ } .rightmargin{ margin-right: 5px; } .leftmargin{ margin-left: 5px; } .effectrow{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; align-self: flex-start; } .effectindex{ flex: 0 1 auto; width: 50px; } .effecttime{ flex: 0 1 auto; width: 85px; } .effect{ flex: 1 1 auto; width: calc(100% - 145px); } .numberinputcont{ display: inline-block; width: 50px; font-size: 14px; text-align: center; background: #fff; padding: 4px 0px; border: 1px solid #E3E3E3; border-radius: 5px; vertical-align: middle; outline: 0; font-weight: normal; margin: 0px; height: 30px; box-sizing: border-box; position: relative; /* -webkit-appearance: none; */ } .numberinputcont:hover:enabled { border: 1px solid #FC4A1A; } .numberinput{ width: 100%; border: none; font-size: inherit; text-align: center; background: #fff; padding: 0px 0px; box-sizing: border-box; color: #444; height: 20px; line-height: 20px; vertical-align: top; -webkit-appearance: none; } .numberinput:focus { outline:0; } .part{ text-align: left; margin-bottom: 10px; } .inlinepart{ vertical-align: top; display: inline-block; white-space: nowrap; margin-right: 10px; } .paramlabel{ display: inline-block; vertical-align: top; margin-right: 4px; font-weight: bold; color: #333; } .dialogcontent .paramlabel{ display: none; } .banner{ font-size: 11px; line-height: normal; font-weight: bold; color: #333; user-select: none; text-transform: uppercase; } .rowcontainer{ display: inline-flex; flex-direction: row; row-gap: 20px; column-gap: 5px; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; width: 316px; text-align: left; font-family: Open Sans; font-size: 14px; margin-top: 0px; } .row{ display: flex; flex-wrap: nowrap; align-items: flex-start; align-content: flex-start; justify-content: space-between; width: 100%; text-align: left; margin-bottom: 0px; column-gap: 5px; } .rowcontainer .paramlabel{ display: inline-block; } .rowcontainer .part{ margin-bottom: 0px; } .rowcontainer .inlinepart{ margin-right: 0px; } .rowcontainer .inlinepart:last-child{ margin-right: 0px; } .rowcontainer .banner{ font-size: 14px; text-transform: capitalize; } .animui { width: auto; text-align: center; background: #fff; display: none; margin: 40px 0px; padding: 30px; box-shadow: 5px 5px 20px #555; border-radius: 10px; } .animui h1{ margin: 0px; margin-bottom: 20px; line-height: 100%; } .animuicontrols { width: 320px; display: inline-flex; flex-wrap: wrap; gap: 20px 20px; padding: 20px; margin: 0px; margin-left: 20px; background: #fff; border-radius: 10px; border: 1px solid silver; vertical-align: middle; text-align: left; font-size: 18px; /* box-shadow: 2px 2px 5px #777; */ } .animuicontrolsrow { width: 100%; display: inline-flex; flex-wrap: wrap; gap: 20px 20px; padding: 0px; margin: 0px; vertical-align: middle; text-align: left; font-size: 18px; } .animuicontrols .part{ margin-right: 0px; margin-bottom: 0px; } .animuicontrols .banner{ /* font-size: 14px; */ } .animuicontrols .selectbutton{ /* border: 1px solid transparent; */ } .animuicontrols .actionbutton{ font-size: 14px; } .animplayer{ display: inline-block; vertical-align: middle; padding: 0px; } .lightborder{ background: #fff; border: 1px solid #E3E3E3; border-radius: 5px; -webkit-appearance: none; } .lightborder:hover:enabled { border: 1px solid #FC4A1A; } .lightborder:focus { outline:0; } .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .inputfile + label { /* padding: 5px; height: 30px; margin: 0px; color: white; background-color: #444; border: 1px solid #E3E3E3; font-size: 14px; line-height: 18px !important; display: inline-block; width: auto; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: left; vertical-align: bottom; border-radius: 5px; box-sizing: border-box; -webkit-appearance: none; user-select: none; */ } .inputfile:focus + label, .inputfile + label:hover { /* border: 1px solid #FC4A1A; */ } .inputfile + label { cursor: pointer; /* "hand" cursor */ } .inputfile:focus + label { /* outline: 1px dotted #FC4A1A; */ /* outline: -webkit-focus-ring-color auto 5px; */ outline: 0; } .inputfile:focus + label, .inputfile.has-focus + label { /* outline: 1px dotted #000; */ /* outline: -webkit-focus-ring-color auto 5px; */ outline: 0; } .slideoptions{ position: absolute; z-index: 5000; font-family: 'Open Sans', sans-serif !important; font-size: 18px; background: transparent; width: 121px; height: auto; overflow: none; padding: 0px; margin: 0px; box-sizing: border-box; } .slidelist{ background: white; width: 100%; height: auto; overflow: none; padding: 0px; border: 3px solid #FC4A1A; border-radius: 3px; box-sizing: border-box; display: inline-block; } .slidelist:after { content:''; position: absolute; top: 100%; left: 50%; margin-left: -10px; width: 0; height: 0; border-top: solid 10px #FC4A1A; border-left: solid 10px transparent; border-right: solid 10px transparent; } .slideitem{ padding: 10px; width: 100%; color: #444; line-height: 150%; cursor: pointer; box-sizing: border-box; } .slideitem:hover{ background: #eeeeee; } .croplist{ float: left; display: inline-block; border: 1px solid silver; height: 385px; width: 210px; font-size: 24px; font-family: 'Open Sans'; text-align: center; color: #FC4A1A; overflow-y: scroll; margin: 0 auto; } .croplist::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } .croplist::-webkit-scrollbar:vertical { height: 11px; } .croplist::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid white; /* should match background, can't be transparent */ background-color: gray; } .croplist::-webkit-scrollbar-track { background-color: silver; border-radius: 0px; } .croplist::-webkit-scrollbar-corner { background-color: silver; } @media only screen and (max-width: 1400px) { /* .tempcard{ width: calc(33.33% - 20px); } */ } @media only screen and (max-width: 1150px) { .splashtitle{ font-size: 50px; } h1{ font-size: 40px; } h2{ font-size: 32px; } h3{ font-size: 24px; } .splashbyline{ font-size: 22px; } .splashbutton{ font-size: 22px; } } @media only screen and (max-width: 1088px) { .templeft{ max-width: 100%; width: 100%; padding: 0px; padding-bottom: 30px; min-width: 352px; } .tempright{ max-width: 770px; width: 100%; padding: 0px; padding-bottom: 30px; min-width: 352px; } .templateheader{ padding: 50px 20px; } .templatefullcont{ padding: 50px 10px; } .splashlearnmore{ padding: 0px 20px; } .paddedlearnmore{ padding: 0px 20px; } .infobox{ flex: 100%; } } @media only screen and (max-width: 960px) { .splashtitle{ font-size: 38px; } h1{ font-size: 38px; } h2{ font-size: 30px; } h3{ font-size: 22px; } .splashbyline{ font-size: 20px; } .splashbutton{ font-size: 20px; } .splashbuttonrow{ margin-bottom: 20px; } .splashsection{ margin-top: 80px; } .splashtblleft{ float: none; max-width: 100%; height: auto; width: 100%; padding: 0px; padding-right: 0px; padding-bottom: 10px; box-sizing: border-box; margin: 0 auto; } .splashtblright{ float: none; height: auto; max-width: 100%; width: 100%; padding: 0px; padding-right: 0px; padding-bottom: 10px; box-sizing: border-box; margin: 0 auto; } .splashimgright{ display: block; width: 100%; /* max-width: 100%; */ text-align: left; height: auto; float: none; padding-left: 0px; margin: 0 auto; } .splashimgleft{ display: block; width: 100%; /* max-width: 100%; */ text-align: left; height: auto; float: none; padding-right: 0px; margin: 0 auto; } /* .tempcard{ width: calc(50% - 20px); } */ } @media only screen and (max-width: 930px) { .blogimgcont{ width: calc(40% - 10px); } .bloginfo{ width: 60%; } } @media only screen and (max-width: 800px) { .headerlinksicon { display: inline-block; margin-left: 20px; font-size: 30px; } .headerlinks a{ display: inline-block; width: 100%; margin: 0px; padding: 10px; vertical-align: middle; background: white; color: #444; box-sizing: border-box; white-space: nowrap; text-transform: uppercase; } .headerlinks a:hover { color: white !important; background: #444 !important; } .headerlinks a:active { color: white !important; background: #444 !important; } .headerlinks-content { display: none; position: absolute; left: 10px; top: 50px; padding: 10px; background: white; color: #444; box-shadow: 0 0 8px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0.5,0.5); z-index: 99; font-size: 14px; width: auto; text-align: left; line-height: normal; white-space: normal; border-radius: 5px; } .headerlinks:hover .headerlinks-content { display: inline-block; } .splashlearnmore{ padding: 0px 10px; } .paddedlearnmore{ padding: 0px 10px; } } @media only screen and (max-width: 745px) { .templateheaderrighthalf{ padding-left: 120px; box-sizing: border-box; height: auto; margin-top: 10px; padding-top: 0px; text-align: left; } } @media only screen and (max-width: 700px) { .bloglist{ text-align: center; } .blog{ display: inline-block; width: 350px; max-width: 100%; margin: 10px 0px; padding: 20px; text-align: center; } .blogimgcont{ width: 310px; padding-right: 0px; } .bloginfo{ margin-top: 10px; width: 310px; } .bloginfo h3{ font-size: 18px; margin-top: 0px; } .blogtitle{ font-size: 18px; } .blogdesc{ font-size: 14px; } } @media only screen and (max-width: 550px) { /* .tempcard{ margin-right: 10px; margin-left: 10px; } */ } @media only screen and (max-device-width: 820px) { body { width: 100%; margin-left: 0px; margin-right: 0px; -webkit-text-size-adjust: 100%; } .page { width: 100%; max-width: 100%; margin:0 auto; padding: 0px; text-align: center; position: relative; /* min-height: 100%;*/ } .content { margin: 0px; min-width: 0px; width: 100%; padding: 5px; background: white; border-radius: 0px; border: 2px solid #FC4A1A; box-shadow: none; box-sizing: border-box; } .greentored{ padding: 10px; margin: 10px 0px; } .infobox{ margin: 5px; } .splash{ /* height: calc(100vh - 150px);*/ /* min-height: 350px; */ } .bigsplash{ height: auto; min-height: none; } .splashlearnmore{ padding: 10px; } .paddedlearnmore{ padding: 10px; } .splashlearnmoretitle{ font-size: 20px; } .splashlearnmorebyline{ font-size: 20px; } .templatevideocont{ padding: 0px 5px; } .gradientbanner{ padding: 10px; font-size: 18px; margin-top: 20px; margin-bottom: 20px; } .splashtitle{ font-size: 38px; } .splashsection{ margin-top: 50px; } .bigsplashsection{ padding: 40px 10px; } h1{ font-size: 32px; } h2{ font-size: 28px; } h3{ font-size: 24px; } .splashbyline{ font-size: 20px; } .splashbutton{ font-size: 20px; } .splashimgright{ width: 100%; /* max-width: 100%; */ height: auto; line-height: normal; float: none; padding-left: 0px; margin: 0 auto; } .bigsplashimgright{ width: 100%; max-width: 100%; height: auto; line-height: normal; float: none; padding-left: 0px; margin: 0 auto; } .splashimgleft{ width: 100%; /* max-width: 100%; */ height: auto; line-height: normal; float: none; padding-right: 0px; margin: 0 auto; } .splashtblleft{ float: none; line-height: normal; /* max-width: 100%; */ height: auto; width: 100%; padding: 0px; padding-right: 0px; padding-bottom: 10px; box-sizing: border-box; margin: 0 auto; } .bigsplashtblleft{ float: none; line-height: normal; /* max-width: 100%; */ height: auto; width: 100%; padding: 0px; padding-right: 0px; padding-bottom: 10px; box-sizing: border-box; margin: 0 auto; } .splashtblright{ float: none; line-height: normal; /* max-width: 100%; */ height: auto; width: 100%; padding: 0px; padding-left: 0px; padding-bottom: 10px; box-sizing: border-box; margin: 0 auto; } .splashtexttitle{ font-size: 28px; } .splashtbltext h1{ font-size: 18px; font-weight: bold; margin: 10px 0px; font-family: 'Open Sans'; text-transform: uppercase; color: #444; line-height: 28px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .splashtbltext h1::first-line{ font-size: 28px; font-family: 'Poppins'; line-height: 28px; } .splashtbltext h2{ margin-bottom: 10px; } .tab{ font-size: 14px; margin-right: 0px; } .searchterm { width: 90px; } .inputfile + label { font-size: 14px; padding: 5px 5px; } .dialog{ max-width: calc(100% - 10px); } .dialogcontent{ background: #f2f2f2; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px; } .dialogresizecontent{ max-height: 75vh; /*This may be a safer option as window size is not fixed on mobile*/ overflow-y: auto; } .dialogresizeheight{ height: 75vh; /*This may be a safer option as window size is not fixed on mobile*/ } .dialogscrollcontainer { padding: 10px 10px; } .progresslabel { max-width: 100%; padding: 2px; font-size: 20px; text-align: center; font-family: 'Open Sans'; white-space: nowrap; user-select: none; } .progressbar { max-width: 100%; height: 20px; } .displayslim{ position: relative; display: inline-block; margin-top: 20px; margin-bottom: 20px; /* border: 1px solid silver; */ /* box-shadow: 0px 0px 5px silver; */ width: auto; height: auto; } .bigcard { width: calc(100% - 40px); max-width: 352px; margin: 20px; box-sizing: border-box; } .card { width: calc(100% - 10px); margin: 5px; } .searchresults::-webkit-scrollbar:vertical { width: 0px; } .helpcontent { font-size: 14px; max-height: calc(75vh - 120px); } .helpcrumbs{ font-size: 14px; } .helptext{ padding: 10px 10px; margin: 10px 0px; } .project{ display: inline-block; padding: 20px 10px; border: 0; width: 100%; max-width: 372px; box-sizing: border-box; } /* .tempcard{ margin-left: 0px; margin-right: 0px; box-sizing: border-box; } */ .templatesearch{ font-size: 16px; line-height: 22px; height: 22px; } .rowcontainer{ row-gap: 10px; } .animui { margin: 5px; padding: 5px; box-shadow: none; border-radius: none; } .animui h1{ font-size: 24px; margin: 0px 0px; margin-bottom: 10px; } .animuicontrols { width: 320px; margin: 0px; margin-left: 0px; margin-top: 10px; padding: 20px; gap: 10px 20px; box-shadow: none; } .animplayer{ display: inline-block; vertical-align: middle; padding: 0px; } }