/*------------------------------------------------------------------------------ Table of content - Core 1.0 Base 2.0 Fonts 3.0 Form 3.1 Button 4.0 Modal 5.0 Tabs 5.1 Secondary Tabs 6.0 Loader 7.0 Progress Bar 7.1 Pending AJAX Request 8.0 Animations ------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------- 1.0 - Base ------------------------------------------------------------------------------*/ .et-core-clearfix { clear: both; } /* New block formatting context */ .et-core-nbfc { overflow: hidden; } /*----------------------------------------------------------------------------- 2.0 - Fonts ------------------------------------------------------------------------------*/ @font-face { font-family: 'ETmodules'; src:url('../fonts/modules/all/modules.eot'); src:url('../fonts/modules/all/modules.eot?#iefix') format('embedded-opentype'), url('../fonts/modules/all/modules.woff') format('woff'), url('../fonts/modules/all/modules.ttf') format('truetype'), url('../fonts/modules/all/modules.svg#et-modules') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'etbuilder'; src:url('../fonts/builder.eot'); src:url('../fonts/builder.eot?#iefix') format('embedded-opentype'), url('../fonts/builder.woff') format('woff'), url('../fonts/builder.ttf') format('truetype'), url('../fonts/builder.svg#et-builder') format('svg'); font-weight: normal; font-style: normal; } /*----------------------------------------------------------------------------- 3.0 - Form ------------------------------------------------------------------------------*/ .et-core-form input[type="text"], .et-core-form input[type="password"], .et-core-form input[type="checkbox"], .et-core-form input[type="color"], .et-core-form input[type="date"], .et-core-form input[type="datetime"], .et-core-form input[type="datetime-local"], .et-core-form input[type="email"], .et-core-form input[type="month"], .et-core-form input[type="number"], .et-core-form input[type="password"], .et-core-form input[type="search"], .et-core-form input[type="radio"], .et-core-form input[type="tel"], .et-core-form input[type="text"], .et-core-form input[type="time"], .et-core-form input[type="url"], .et-core-form input[type="week"], .et-core-form select, .et-core-form textarea { border: none; box-shadow: none; -webkit-transition: background .5s; -moz-transition: background .5s; transition: background .5s; background: none; } .et-core-form input[type="text"], .et-core-form input[type="password"], .et-core-form input[type=checkbox], .et-core-form input[type="date"], .et-core-form input[type="datetime"], .et-core-form input[type="datetime-local"], .et-core-form input[type="email"], .et-core-form input[type="month"], .et-core-form input[type="number"], .et-core-form input[type="password"], .et-core-form input[type="search"], .et-core-form input[type="tel"], .et-core-form input[type="text"], .et-core-form input[type="time"], .et-core-form input[type="url"], .et-core-form select, .et-core-form textarea { border-radius: 3px; background: #f1f5f9; padding: 7px 10px; color: #4c5866; height: 30px; font-family: 'Open Sans', sans-serif; font-size: 13px; width: 100%; } .et-core-form textarea { height: auto; } .et-core-form input[type]:focus { background: #e6ecf2; } .et-core-form input[type=checkbox] { float: none; margin-right: 6px; margin-top: -3px; width: 25px; height: 25px; } .et-core-form input[type=checkbox]:checked:before { color: #00c3aa; float: left; margin-top: 2px; margin-left: 2px; } .et-core-form label { font-size: inherit; } /* 3.1 - Buttons */ .et-core-button, body button.et-core-button { float: left; box-sizing: border-box; color: #FFF; background-color: #4c5866; padding: 0 20px; margin: 0; font-size: 12px !important; font-weight: 700; font-family: inherit; line-height: 30px; height: 30px; margin-right: 0; margin-left: 7px; cursor: pointer; overflow: hidden; position: relative; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: none; text-align: center; text-shadow: none; text-transform: uppercase; -webkit-transition: background .5s; -moz-transition: background .5s; transition: background .5s; font-family: 'Open Sans', sans-serif !important; } body.rtl.et-db:not(.et-fb-no-rtl) .et-core-button, body.rtl.et-db:not(.et-fb-no-rtl) button.et-core-button { margin-right: 7px; margin-left: 0; } .et-core-button:focus, .et-core-button:hover, .et-core-button:active { background: #4D565F; outline: 0; } .et-core-button-danger { background: #E7401A !important; } .et-core-button-danger:focus, .et-core-button-danger:hover, .et-core-button-danger:active { background: #D22902 !important; } /* Safe Mode Indicator */ .et-safe-mode-indicator, .et-safe-mode-indicator:hover, .et-safe-mode-indicator:focus { box-shadow: 0 5px 10px rgba(41,196,169,.15); background: #29C4A9; color: #ffffff; font-size: 14px; font-weight: 600; padding:12px; line-height: 16px; border-radius: 3px; position: fixed; bottom: 30px; right: 30px; z-index: 999999; text-decoration: none; font-family: "Open Sans", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Padding for Safe Mode Indicator */ .wp-admin.et-safe-mode-active #wpcontent { padding-bottom: 90px; } /*----------------------------------------------------------------------------- 4.0 - Modal ------------------------------------------------------------------------------*/ .et-core-modal-overlay { font-family: 'Open Sans', sans-serif; opacity: 0; position: fixed; top: 0; left: -9999px; width: 100%; height: 100%; background: rgba(255,255,255,0.7); background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 20%, rgba(255,255,255,0.7) 100%); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 20%,rgba(255,255,255,0.7) 100%); background: radial-gradient(ellipse at center, rgba(255,255,255,1) 20%,rgba(255,255,255,0.7) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); z-index: 10000000; -moz-transition: opacity .5s .2s; -webkit-transition: opacity .5s .2s; transition: opacity .5s .2s; } .et-core-modal-overlay--library { /* 100025 = Library Modal z-index */ z-index: 100024; animation: et-core-fade-in .5s linear; } .et-core-modal-overlay.et-core-active { left: 0; opacity: 1; } .et-core-modal-overlay.et-core-closing { left: 0; opacity: 0; } .et-core-modal { display: none; z-index: 1000000001; overflow: hidden; position: fixed; top: 20%; bottom: 20%; left: 50%; max-width: 400px; width: 100%; background: rgb(255, 255, 255); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #32373c; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-shadow: 0 0 100px rgba(0, 160, 210, 0.20); -moz-box-shadow: 0 0 100px rgba(0, 160, 210, 0.20); -webkit-box-shadow: 0 0 100px rgba(0, 160, 210, 0.20); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .et-core-modal, .et-core-modal * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .et-core-modal-overlay.et-core-active .et-core-modal { display: block; -webkit-animation: et-core-fade-in-scale-center .5s 1 cubic-bezier(0.77,0,.175,1); animation: et-core-fade-in-scale-center .5s 1 cubic-bezier(0.77,0,.175,1); } .et-core-modal-overlay.et-core-closing .et-core-modal { opacity: 0; -webkit-animation: et-core-fade-out-scale-center .5s 1 cubic-bezier(0.77,0,.175,1); animation: et-core-fade-out-scale-center .5s 1 cubic-bezier(0.77,0,.175,1); } .et-core-modal-overlay--transparent { background: transparent; /* 100025 = Settings Modal Modal z-index */ z-index: 100024; } .et-core-modal-header { background-color: #6c2eb9; margin: 0; padding: 21px 40px 20px 26px; box-sizing: border-box; display: block; } .et-core-modal .et-core-modal-title { font-weight: 600; font-size: 18px; line-height: 17px; color: rgb(255, 255, 255); margin: 0; padding: 0 25px 0 0; text-transform: none; text-decoration: none; font-style: normal; font-family: 'Open Sans', Helvetica, Roboto, Arial, sans-serif; letter-spacing: 0; } .et-core-modal-close, .et-core-modal-close:hover { text-decoration: none; font-size: 23px; color: #fff; cursor: pointer; line-height: 18px; position: absolute; top: 0; right: 0; z-index: 10; padding: 17px 17px 18px } body.rtl .et-core-modal-close, body.rtl .et-core-modal-close:hover { top: 0; right: auto; left: 0; } .et-core-modal-close:focus { color: #fff; box-shadow: none; } body.rtl.et-db:not(.et-fb-no-rtl) .et-core-modal-close { right: auto; left: 0; } .et-core-modal-close:before { font-family: 'ETmodules'; font-weight: 800; content: '\4d'; speak: none; color: #fff; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .et-core-modal-temp-content, .et-core-modal-content { padding: 30px; overflow: scroll; position: absolute; top: 58px; bottom: 25px; width: 100%; box-sizing: border-box; color: #4c5866; font-weight: 600; font-size: 13px; line-height: 1.5em; } .et-core-modal-temp-content p:first-of-type, .et-core-modal-content p:first-of-type { margin-top: 0 !important; padding-top: 0 !important; } .et-core-modal-temp-content p:last-of-type, .et-core-modal-content p:last-of-type { margin-bottom: 0 !important; padding-bottom: 0 !important; } .et-core-modal-tabs-enabled .et-core-modal-content { top: 98px; } .et-core-modal-disabled-scrollbar .et-core-modal { top: 50%; bottom: auto; } .et-core-modal-disabled-scrollbar .et-core-modal-content, .et-core-modal-disabled-scrollbar .et-core-modal-temp-content { top: 0 !important; position: relative; overflow: hidden; padding-bottom: 70px; } .et-core-modal-actionless.et-core-modal-disabled-scrollbar .et-core-modal-content, .et-core-modal-actionless.et-core-modal-disabled-scrollbar .et-core-modal-temp-content { padding-bottom: 40px; } .et-core-modal-content::-webkit-scrollbar { width: 5px !important; } .et-core-modal-content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0.3) !important; width: 20px !important; } .et-core-modal-content::-webkit-scrollbar-thumb { -webkit-border-radius: 0 !important; border-radius: 0 !important; background: #32373C !important; } .et-core-modal-content::-webkit-scrollbar-thumb:window-inactive { background: #fff !important; } .et_builder_modal_action_button { text-align: center; display: block; margin: 10px 0; width: 100%; box-sizing: border-box; text-decoration: none; background: #f05555 !important; font-weight: 600; text-transform: uppercase; border-radius: 3px; font-size: 12px; color: #fff !important; padding: 10px 20px; } .et_builder_modal_action_button:hover { color: rgba(255,255,255,0.9) !important; cursor: pointer; } .et_builder_modal_action_button:focus { box-shadow: none; outline: none; } .et_builder_modal_action_button_success { background-color: #3dc100 !important; } .et_builder_modal_action_button_success:hover { cursor: default; color: #fff !important; } .et_builder_modal_action_button_fail { color: #ddd !important; } .et_builder_modal_action_button_fail:hover { cursor: not-allowed; color: #ccc !important; } .et_pb_modal_closing .et_pb_prompt_modal { opacity: 0; -webkit-animation: et_pb_fade_out_scale .5s 1 cubic-bezier(0.77,0,.175,1); } .et_pb_prompt_buttons { width: 100%; text-align: center; position: absolute; bottom: 0; margin: 0 0 -1px 0; } .et-core-modal-two-buttons .et-core-modal-action { width: 50%; } .et-core-modal-two-buttons .et-core-modal-action:last-child { right: 0; } body.rtl.et-db:not(.et-fb-no-rtl) .et-core-modal-two-buttons .et-core-modal-action { right: 0; } body.rtl.et-db:not(.et-fb-no-rtl) .et-core-modal-two-buttons .et-core-modal-action:last-child { right: auto; left: 0; } .et-core-modal-temp-content h3, .et-core-modal-content h3 { color: #32373c; font-size: 14px; } .et-core-modal-remove-temp-content, .et-core-modal-remove-temp-content:focus { box-shadow: none; outline: 0; text-decoration: none; } .et-core-modal-action { display: block; color: white; font-size: 14px; line-height: 40px; width: 100%; border: none; font-family: 'Open Sans', sans-serif; font-weight: 700; box-sizing: border-box; text-align: center; margin: 0; padding: 0; cursor: pointer; transition: background .5s; background: #008BDA; text-decoration: none; color: #fff !important; position: absolute; bottom: 0; } .et-core-modal-action-secondary { background: #00c3aa; } .et-core-modal-action:hover, .et-core-modal-action:focus, .et-core-modal-action:active { background: #007cc3; box-shadow: none; } .et-core-modal-action-secondary:hover, .et-core-modal-action-secondary:focus, .et-core-modal-action-secondary:active { background: #00bba3; } .et-core-confirmation-dialog-overlay { background: rgba(255,255,255,0.7); position: absolute; top: 0; right: auto; bottom: 0; left: -9999px; transition: opacity .5s .2s; opacity: 0; z-index: 10000000; } .et-core-confirmation-dialog-overlay.et-core-active { opacity: 1; left: 0; right: 0; } .et-core-confirmation-dialog-overlay.et-core-closing { opacity: 0; } .et-core-confirmation-dialog { display: none; background: #FFF; box-shadow: 0 5px 30px 0 rgba(43, 135, 218, 0.2); position: absolute; bottom: 0; right: 0; width: 85%; animation: et-core-fade-in-scale .5s 1 cubic-bezier(0.77, 0, 0.175, 1); } .et-core-confirmation-dialog-overlay.et-core-active .et-core-confirmation-dialog { display: block; } .et-core-confirmation-dialog-header { margin: 0; padding: 21px 40px 20px 26px; } .et-core-confirmation-dialog-header h3.et-core-modal-title { color: #333; } .et-core-confirmation-dialog-header .et-core-modal-close:before { color: rgb(76, 88, 102); } .et-core-confirmation-dialog-content { color: #5c6978; font-size: 13px; font-weight: 600; line-height: 1.4em; padding: 0 24px 24px; } .et-core-confirmation-dialog .et-core-modal-action { position: static; } /*----------------------------------------------------------------------------- 5.0 - Tabs ------------------------------------------------------------------------------*/ [data-et-core-tabs].ui-widget-content, [data-et-core-tabs] .ui-widget-content { background: #fff; border: none; color: inherit; font-family: inherit; font-size: inherit; } .et-core-tabs-transition { -webkit-animation: et-core-fade-in .5s 1 cubic-bezier(0.77, 0, 0.175, 1); -moz-animation: et-core-fade-in .5s 1 cubic-bezier(0.77, 0, 0.175, 1); -o-animation: et-core-fade-in .5s 1 cubic-bezier(0.77, 0, 0.175, 1); animation: et-core-fade-in .5s 1 cubic-bezier(0.77, 0, 0.175, 1); } .et-core-tabs, .et-core-tabs.ui-widget-header { background: #7e3bd0; display: block; width: 100%; overflow: hidden; position: relative; margin: 0; border: none; } .et-core-tabs.ui-corner-all { border-radius: 0; } .et-core-tabs li, .et-core-tabs li.ui-state-default { float: left; display: inline-block; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 600; margin: 0; border: none; background: none; } body.rtl.et-db:not(.et-fb-no-rtl) .et-core-tabs li, body.rtl.et-db:not(.et-fb-no-rtl) .et-core-tabs li.ui-state-default { float: right; } .et-core-tabs li a, .et-core-tabs li.ui-state-default a { color: #fff; } .et-core-tabs li.ui-state-active a { background-color: #8F42ED; } .et-core-tabs a:hover { background-color: #7435c1; } .et-core-tabs a { box-sizing: border-box; color: white; padding: 11px 26px; display: inline-block; transition: all 0.3s; text-decoration: none; box-shadow: none; } .ui-tabs-hide { display: none; } /* 5.1 - Secondary Tabs */ .et-core-tabs-secondary { background-color: #F1F5F9; } .et-core-tabs-secondary li { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .et-core-tabs-secondary a { color: #8E969E; } .et-core-tabs.et-core-tabs-secondary a:hover, .et-core-tabs.et-core-tabs-secondary .ui-tabs-active a { background-color: #fff; } /*----------------------------------------------------------------------------- 6.0 - Loader ------------------------------------------------------------------------------*/ .et-core-loader { background: transparent url("../images/loader.gif") 8px 9px no-repeat; transition: background, box-shadow 0.3s; height: 50px; width: 50px; color: #fff; border-radius: 50px; text-align: center; box-shadow: rgba( 0, 139, 219, 0.25 ) 0 0 60px; } .et-core-loader-success, .et-core-loader-fail { opacity: 0; animation: et-core-bounce-in 1s; animation-delay: 0.3s; animation-fill-mode: forwards; } .et-core-loader-success:before, .et-core-loader-fail:before{ font-family: 'ETmodules'; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 30px; line-height: 53px; } .et-core-loader-success { background: rgb( 169, 233, 0 ); box-shadow: rgba( 169, 233, 0, .25 ) 0 0 60px; } .et-core-loader-success:before { content: '\4e'; } .et-core-loader-fail { background: #FF5600; box-shadow: rgba(255, 86, 0, 0.25) 0 0 60px; } .et-core-loader-fail:before { content: '\4d'; } /*----------------------------------------------------------------------------- 7.0 - Progress Bar ------------------------------------------------------------------------------*/ .et-core-progress { box-sizing: border-box; height: 20px; margin-bottom: 15px; background: #F1F5F9; line-height: 20px; border-radius: 3px; } * + .et-core-progress { margin-top: 15px; } .et-core-progress-subtext { font-size: 13px; color: #A0A9B2; display: block; text-align: center; width: 100%; clear: both; padding-top: 10px; font-weight: 400; } .et-core-progress-bar { min-width: 10%; width: 0; font-weight: 600; max-width: 100%; height: 100%; float: left; -webkit-transition: width 0.6s ease; transition: width 0.6s ease; font-size: 12px; color: #fff; text-align: center; border-radius: 3px; background: #00c3aa; } .et-core-progress-striped .et-core-progress-bar { background-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, .3 ) 25%, transparent 25%, transparent 50%, rgba( 255, 255, 255, .3 ) 50%, rgba( 255, 255, 255, .3 ) 75%, transparent 75%, transparent ); background-image: linear-gradient( -45deg, rgba(255, 255, 255, .3 ) 25%, transparent 25%, transparent 50%, rgba( 255, 255, 255, .3 ) 50%, rgba( 255, 255, 255, .3 ) 75%, transparent 75%, transparent ); background-size: 30px 30px; } .et-core-progress-striped.et-core-active .et-core-progress-bar { -webkit-animation: et-core-progress-bar-stripes 2s linear infinite; animation: et-core-progress-bar-stripes 2s linear infinite; } @-webkit-keyframes et-core-progress-bar-stripes { 0% { background-position: 0 0; } 100% { background-position: 30px 0; } } @keyframes et-core-progress-bar-stripes { 0% { background-position: 0 0; } 100% { background-position: 30px 0; } } /*----------------------------------------------------------------------------- 7.1 - Pending AJAX Request ------------------------------------------------------------------------------*/ #et-ajax-saving { display: none; transition: background, box-shadow 0.3s; box-shadow: rgba(0, 139, 219, 0.247059) 0 0 60px; position: fixed; top: 50%; left: 50%; width: 50px; height: 50px; background: rgb(255, 255, 255); border-radius: 50px; margin: -25px 0 0 -25px; z-index: 999999; text-align: center; } #et-ajax-saving img { margin: 9px; } #et-ajax-saving.success-animation { background-color: rgb(169, 233, 0); box-shadow: rgba(0, 0, 0, 0) 0 0 40px; opacity: 1; animation: et-core-bounce-in 1s; } #et-ajax-saving.success-animation:before { background: none; font-family: 'etbuilder'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "N"; color: rgb(255, 255, 255); font-size: 22px; line-height: 50px; } #et-ajax-saving.et_loading:before { display: none; } #et-ajax-saving.success-animation img { display: none; } /*----------------------------------------------------------------------------- 8.0 - Animations ------------------------------------------------------------------------------*/ @-webkit-keyframes et-core-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes et-core-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes et-core-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes et-core-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes et-core-bounce-in { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: scale3d(.3, .3, .3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(.9, .9, .9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(.97, .97, .97); } to { opacity: 1; transform: scale3d(1, 1, 1); } } @-webkit-keyframes et-core-bounce-in { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: scale3d(.3, .3, .3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(.9, .9, .9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(.97, .97, .97); } to { opacity: 1; transform: scale3d(1, 1, 1); } } @-webkit-keyframes et-core-fade-in-scale { 0% { opacity: 0; transform: scale(.9,.9); } 100% { opacity: 1; transform: scale(1,1); } } @-moz-keyframes et-core-fade-in-scale { 0% { opacity: 0; transform: scale(.9,.9) } 100% { opacity: 1; transform: scale(1,1); } } @-o-keyframes et-core-fade-in-scale { 0% { opacity: 0; transform: scale(.9,.9) } 100% { opacity: 1; transform: scale(1,1); } } @keyframes et-core-fade-in-scale { 0% { opacity: 0; transform: scale(.9,.9); } 100% { opacity: 1; transform: scale(1,1); } } @-webkit-keyframes et-core-fade-out-scale { 0% { opacity: 1; transform: scale(1,1); } 100% { opacity: 0; transform: scale(.9,.9); } } @-moz-keyframes et-core-fade-out-scale { 0% { opacity: 1; transform: scale(1,1); } 100% { opacity: 0; transform: scale(.9,.9); } } @-o-keyframes et-core-fade-out-scale { 0% { opacity: 1; transform: scale(1,1); } 100% { opacity: 0; transform: scale(.9,.9); } } @keyframes et-core-fade-out-scale { 0% { opacity: 1; transform: scale(1,1); } 100% { opacity: 0; transform: scale(.9,.9); } } @-webkit-keyframes et-core-fade-in-scale-center { 0% { opacity: 0; transform: translateX(-50%) scale(.9,.9); } 100% { opacity: 1; transform: translateX(-50%) scale(1,1); } } @-moz-keyframes et-core-fade-in-scale-center { 0% { opacity: 0; transform: translateX(-50%) scale(.9,.9) } 100% { opacity: 1; transform: translateX(-50%) scale(1,1); } } @-o-keyframes et-core-fade-in-scale-center { 0% { opacity: 0; transform: translateX(-50%) scale(.9,.9) } 100% { opacity: 1; transform: translateX(-50%) scale(1,1); } } @keyframes et-core-fade-in-scale-center { 0% { opacity: 0; transform: translateX(-50%) scale(.9,.9); } 100% { opacity: 1; transform: translateX(-50%)scale(1,1); } } @-webkit-keyframes et-core-fade-out-scale-center { 0% { opacity: 1; transform: translateX(-50%) scale(1,1); } 100% { opacity: 0; transform: translateX(-50%) scale(.9,.9); } } @-moz-keyframes et-core-fade-out-scale-center { 0% { opacity: 1; transform: translateX(-50%) scale(1,1); } 100% { opacity: 0; transform: translateX(-50%) scale(.9,.9); } } @-o-keyframes et-core-fade-out-scale-center { 0% { opacity: 1; transform: translateX(-50%) scale(1,1); } 100% { opacity: 0; transform: translateX(-50%) scale(.9,.9); } } @keyframes et-core-fade-out-scale-center { 0% { opacity: 1; transform: translateX(-50%) scale(1,1); } 100% { opacity: 0; transform: translateX(-50%) scale(.9,.9); } } /* This media query is set to the modal default width */ @media screen and ( max-width: 400px ) { .et-core-modal { width: calc(100% - 20px); } }