/* Created on : 18-feb-2019, 10:58:56 Author : Reinier */ @font-face { font-family: 'Open Sans'; src: url('/fonts/opensans.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Open Sans Condensed'; src: url('/fonts/opensanscondensedlight.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('/fonts/roboto.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('/fonts/montserrat.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } html { scroll-behavior: auto; } body { margin: 0px; font-family: 'Roboto'; font-display: swap; font-size: 11pt; } /* Section titles */ h2 { display:block; width:100%; font-size:50px; color:#5884b3; font-family: 'Open Sans Condensed'; font-display: swap; text-align: center; font-weight: normal; margin-top: 0px; } .h2_sub { display: block; color: white; margin-top: -40px; margin-bottom: 43px; } #section_article { text-align:center; } #section_article h2 {margin-top: 40px;} .article_container { width: 800px; display: inline-block; text-align: justify; margin-top: 60px; } .text_intro { font-size: 18px; margin-top: 53px; } div#MainMenu_button_container { display: inline-block; width: 1000px; text-align: right; padding-top: 20px; padding-bottom: 20px; color: white; } div#MainMenu_button_container img { height: 32px; width: 32px; margin-right: 13px; } a.MainMenuItem { font-family: 'Open Sans Condensed', sans-serif; font-display: swap; font-size: 19px; margin-left: 20px; margin-right: 20px; text-decoration: none; color: white; } .mobile_menu_button { display: none; width: 23px; height: 23px; float: right; background-image: url(../images/mobile_menu_icon.png); background-size: 23px; background-repeat: no-repeat; background-position: right; margin-right: 30px; margin-top: 8px; } #Teaser_container { width: 100%; /*height: 697px;*/ background-image: linear-gradient(to bottom right, #8fc6ff, #276180); text-align: center; } #Teaser_base { height: 480px; display: inline-block; text-align: center; } #Teaser_base_title_container { display: block; width: 100%; text-align: center; margin-bottom: 20px; } #Teaser_base_title { display: inline-block; width: 1000px; text-align: left; } #Teaser_base_title h1 { color: white; font-size: 48px; text-align: left; margin-bottom: 10px; font-family: 'Droid Sans', sans-serif; font-display: swap; } #Teaser_base_title h3 { position: relative; color: white; font-size: 19px; text-align: left; margin-left: 49px; margin-top: 0; font-family: 'Droid Sans', sans-serif; font-display: swap; display: inline-block; } #Teaser_base_actual_teaser { display:block; } #works_with_title { color:white; font-size: 24px; } span#works_with_title { font-family: 'Roboto'; font-display: swap; vertical-align: top; margin-right: 27px; } #Teaser_floor { height: 100px; width: 100%; background-color: white; position: absolute; top: 700px; } #Teaser_show_case { height: 363px; display: block; position: relative; width: 721px; margin-top: 30px; } #Teaser_show_case img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } #Teaser_show_case img.opaque { opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=1); } .works_with_floating_block { width: 64px; height: 64px; margin-right: 10px; display: inline-block; } .works_with_floating_block img { width: 64px; height: 64px; } div.title_feature { display:block; width:100%; font-size:50px; color:#5884b3; text-transform:uppercase; font-weight:400; font-family: 'Open Sans Condensed', sans-serif; font-display: swap; text-align: center; } div.featuresContainer { text-align: center; background-image: linear-gradient(to bottom right, #8fc6ff, #276180); width: 100%; padding: 80px 0px 60px 0px; } div.sectionDownloads { text-align: center; background-image: linear-gradient(to bottom right, #8fc6ff, #276180); width: 100%; padding-bottom: 130px; padding-top: 80px; } div.featureSubContainer { max-width: 1200px; display: inline-block; margin-bottom: 50px; } div.featureRow { width: 1200px; display: inline-block; } div.featureCell { background-color: white; margin-right: 18px; margin-left: 18px; margin-bottom: 45px; color: #535353; display: inline-block; text-align: left; vertical-align: top; position: relative; border-radius: 23px; height: 64px; box-shadow: 0 0 10px rgb(0 0 0 / 15%); } div.featureCell img { width: 64px; padding: 5px; background-color: white; border-radius: 30%; box-shadow: 0 0 10px rgb(0 0 0 / 36%); margin-left: -17px; margin-top: -5px; } p.featureCellTitleBlock { color: #535353; display: inline-block; font-weight: bold; font-family: 'Open Sans Condensed'; font-display: swap; font-size: 20px; vertical-align: top; padding-right: 8px; padding-left: 12px; width: 155px; } p.featureCellTextBlock { color: #535353; display: none; text-align: justify; } div.featureCellReadMore { display: inline-block; background-color: #a4c6f1; width: 100px; text-align: center; padding: 7px 10px 5px 10px; border-radius: 0px 0px 18px 18px; position: relative; left: -42px; margin-left: -120px; top: 64px; } div.featureCellReadMore a { text-decoration: none; color: #4a4a4a; } .cellWidthObject { width: 280px; } #buttons_container { width: 100%; display: inline-block; height: 650px; overflow: hidden; padding-top: 25px; } #buttons_left { width: 48%; display: inline-block; vertical-align: top; text-align: right; background-image: url('https://www.touch-portal.com/images/button_explain_bg_small.png'); background-repeat: no-repeat; background-position: right; min-height: 810px; } #buttons_right { width: 48%; display: inline-block; vertical-align: top; position: absolute; } .button_description_title { font-size: 18px; font-family: 'Montserrat'; font-display: swap; margin-left: 31px; } #buttons_explain_graphics { position:absolute; top: 1px; } #buttons_explain_action { position:absolute; top: 79px; } #buttons_explain_string_actions { position: absolute; top: 160px; } #buttons_explain_feedback { position: absolute; top: 321px; } #buttons_explain_logic { position: absolute; top: 240px; } #MainMenu_logo_container h1 { font-family: 'Roboto'; font-display: swap; display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: top; } #MainMenu_logo_container img { } #MainMenu_logo_container { display: inline-block; vertical-align: top; float: left; } #MainMenu_items_container { display: inline-block; float: right; margin-top: 5px; } #Teaser_icons { vertical-align: top; margin-top: 20px; } .divider01 { position: relative; left: 0; width: 400px; height: 0px; overflow: 100px; opacity: 0.3; } .divider01 img { overflow: overlay; margin-top: -144px; } #footer { width: 100%; height: 450px; background-color: #3e3e3e; text-align: center; padding-top: 15px; } #footer h3 { color: white; font-family: 'Open Sans Condensed'; font-display: swap; font-weight: initial; font-size: 16pt; } #footer_touch_portal { width: 300px; display: inline-block; vertical-align: top; text-align: left; } #footer_support { width: 300px; display: inline-block; vertical-align: top; text-align: left; } #footer_support a { color: white; text-decoration: none; line-height: 24px; } #footer_support a:hover { text-decoration:underline; } #footer_support a:visited { } #section_product { height: 900px; padding-top: 80px; position: relative; text-align: center; } .white_title { color: white; } .downloadBlock { display:inline-block; width: 200px; background-color: white; vertical-align: top; min-height: 260px; border-radius: 10px; margin: 10px; padding: 29px 10px 10px 10px; box-shadow: 0 0 10px rgba(0,0,0,0.15); } .downloadBlock a { color: black; } .downloadBlock img { } .downloadBlockImageContainer { min-height: 120px; } .divider02 { position: relative; left: 0; width: 400px; height: 0px; overflow: 100px; opacity: 0.3; top: -114px; } #section_getstarted { text-align: center; padding-top: 80px; } .flowDownBlock { width: 100%; height: 180px; background-image: linear-gradient(to bottom,ghostwhite, #dcdcdc); vertical-align: middle; } .flowArrowDown { width: 0; height: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-top: 50px solid #dcdcdc; position: relative; bottom: -8px; left: 45%; } .getStartedContainer { width: 100%; text-align:center; } .getStartedIconContainer { width: 90px; height: 90px; display: table-cell; vertical-align: top; } .getStartedIconContainer img { width: 90px; height: 90px; } .getStartedTextContainer { display: table-cell; color: black; font-size: 18px; padding-left: 30px; vertical-align: middle; text-align: left; } .getStartedSmallContainer { width: 714px; display: inline-block; } #section_createandshare { padding: 80px 0px 60px 0px; background-image: linear-gradient(to bottom right, #8fc6ff, #276180); text-align: center; } div.pricing_container { text-align: center; padding-bottom: 50px; } div.pricing_grey_title { background-color: #a5a5a5; text-align: center; padding-top: 10px; padding-bottom: 10px; font-size: 24px; border-top-left-radius: 10px; border-top-right-radius: 10px; color: #fff; } div.pricing_blue_title { background-color: #5884b3; color: white; text-align: center; padding-top: 10px; padding-bottom: 10px; font-size: 32px; border-top-left-radius: 10px; border-top-right-radius: 10px; } div.pricing_price { font-size: 36px; text-align: center; padding-top: 10px; padding-bottom: 10px; height:100px; } div.pricing_object { width: 300px; display: inline-block; margin: 30px; vertical-align: top; border: 1px solid #e8e8e8; border-radius: 10px; padding-bottom: 20px; background: #fff; } span.pricing_asterix { font-size: 16px; vertical-align: top; } span.pricing_asterix_text { font-size: 8px; display: block; } div.pricing_features { padding-left: 32px; text-align: left; } #section_pricing { padding-top: 80px; text-align: center; } #section_pricing h4 { font-family: 'Open Sans Condensed'; font-display: swap; font-size: 24px; text-align: center; margin-top: -36px; margin-bottom: 56px; } #pricing_container { text-align: center; } .upgrade_container { width: 300px; height: 640px; color: white; display: inline-block; margin-bottom: 100px; border-radius: 15px; box-shadow: 0 0 10px rgba(0,0,0,0.35); vertical-align: top; margin-left: 20px; margin-right: 20px; } .upgrade_header { height: 150px; border-radius: 15px 15px 0px 0px; } .upgrade_body { height: 490px; border-radius: 0px 0px 15px 15px; } .update_small_letters { color: black; font-size: 10px; padding-left: 5px; padding-right: 5px; } div#upgrade_pro_body { } .upgrade_title { display: block; font-size: 19pt; text-transform: uppercase; font-family: 'Open Sans Condensed'; font-display: swap; margin-top: 66px; } .upgrade_price { display: block; font-size: 40pt; padding-top: 10px; font-family: 'Montserrat'; font-display: swap; font-weight: bold; } .upgrade_summary { padding: 24px; font-family: 'Open Sans'; font-display: swap; font-size: 10pt; display: block; text-align: justify; margin-top: 10px; margin-bottom: 10px; height: 90px; } .upgrade_lifetime_license { display:block; background-color: rgba(245, 245, 245, 0.6); color: #ffffff; padding: 1px; font-family: 'Open Sans Condensed'; font-display: swap; font-size: 14pt; } .upgrade_button { width: 200px; padding-top: 15px; padding-bottom: 15px; display: inline-block; color: white; background: #d2d2d2; border-radius: 15px; vertical-align: middle; margin-top: 20px; text-decoration: none; background-image: linear-gradient(to bottom, #cecece, #ababab); } #upgrades_container { text-align: center; padding-top: 20px; vertical-align: top; } #upgrade_pro_header { background-image: url("../images//blue_pro_header.png"); background-size: cover; } #upgrade_pro_icon { background-color: white; width: 100px; height: 100px; border-radius: 50%; position: relative; left: 100px; top: 100px; box-shadow: 0 0 10px rgba(0,0,0,0.15); background-image: url("../images/icon_pro.png"); background-size: 64px; background-repeat: no-repeat; background-position: center; } #upgrade_pro_body { background-image: linear-gradient(to bottom, #8fc6ff, #276180); display: inline-block; } #upgrade_iconpack_header { background-image: url("../images//green_icon_header.png"); background-size: cover; } #upgrade_iconpack_header_aseprite { background-image: url("../images//green_icon_header_aseprite.png"); background-size: cover; } #upgrade_iconpack_icon { background-color: white; width: 100px; height: 100px; border-radius: 50%; position: relative; left: 100px; top: 100px; background-image: url(../images/icon_iconpack.png); background-size: 64px; background-repeat: no-repeat; background-position: center; box-shadow: 0 0 10px rgba(0,0,0,0.15); } #upgrade_iconpack_body { background-image: linear-gradient(to bottom, #86d862, #296b1a); display: inline-block; } #section_more { padding-top: 80px; } .more_container { text-align: center; vertical-align: top; padding-bottom: 100px; } .more_container a { text-decoration: none; } .more_block_container { display: inline-block; width: 200px; height: 230px; margin: 32px; border-radius: 20px; vertical-align: top; box-shadow: 0 0 10px rgba(0,0,0,0.35); } .more_block_title { display: block; text-align: center; margin-top: 37px; margin-bottom: 0px; color: white; text-decoration: none; font-size: 20pt; font-family: 'Open Sans Condensed'; font-display: swap; } .more_block_summary { color: #ffffff; padding: 1px; margin-bottom: 30px; padding: 15px; font-family: 'Open Sans'; font-display: swap; font-size: 10pt; display: none; text-align: justify; } #more_block_container_tutorials { background-image: linear-gradient(to bottom, #8fc6ff, #276180); } #more_block_container_faq { background-image: linear-gradient(to bottom, #b1ff8f, #388027); } #more_block_container_blog { background-image: linear-gradient(to bottom, #8fc6ff, #276180); } #more_block_icon_tutorials { background-image: url("../images/icon_tutorial.png"); width: 200px; height: 160px; background-size: 100px; background-repeat: no-repeat; background-position: bottom; position: absolute; margin-top: 21px; opacity: 0.2; } #more_block_icon_faq { background-image: url("../images/icon_faq.png"); width: 200px; height: 160px; background-size: 100px; background-repeat: no-repeat; background-position: bottom; position: absolute; margin-top: 21px; opacity: 0.2; } #more_block_icon_blog { background-image: url("../images/icon_blog.png"); width: 200px; height: 160px; background-size: 100px; background-repeat: no-repeat; background-position: bottom; position: absolute; margin-top: 21px; opacity: 0.2; } .touch_portal_assets { box-shadow: 0 0 10px rgba(0,0,0,0.15); width: 300px; background-color: white; margin: 30px; display: inline-block; vertical-align: top; border-radius: 23px; /* height: 550px; */ text-align: center; } .touch_portal_assets_icon { width: 300; height: 169; display: inline-block; } .touch_portal_assets_title { text-transform: uppercase; font-family: 'Open Sans Condensed'; font-display: swap; font-size: 19pt; vertical-align: top; margin-top: 18px; } .touch_portal_assets_summary { font-family: 'Open Sans'; font-display: swap; font-size: 10pt; margin-top: 20px; padding: 15px; height: 64px; } .touch_portal_assets_download { width: 200px; padding-top: 15px; padding-bottom: 15px; display: inline-block; color: white; background: #d2d2d2; border-radius: 15px; vertical-align: middle; margin-top: 20px; text-decoration: none; background-image: linear-gradient(to bottom, #cecece, #ababab); margin-bottom: 10px; /* vertical-align: bottom; */ } .button_blue { text-decoration: none; background-image: linear-gradient(to bottom, #8fc6ff, #276180); } .button_green { text-decoration: none; background-image: linear-gradient(to bottom, #b1ff8f, #388027); } .touch_portal_assets_preview { width: 200px; padding-top: 15px; padding-bottom: 15px; display: inline-block; color: white; background: #d2d2d2; border-radius: 15px; vertical-align: middle; margin-top: 20px; text-decoration: none; } .touch_portal_assets_preview_page { width: 200px; padding-top: 15px; padding-bottom: 15px; display: inline-block; color: white; background: #d2d2d2; border-radius: 15px; vertical-align: middle; margin-top: 20px; } .touch_portal_assets_type { border-radius: 20px 20px 0px 0px; text-transform: uppercase; font-family: 'Open Sans Condensed'; font-display: swap; font-size: 19pt; padding: 10px; background-image: linear-gradient(to bottom right, #8fc6ff, #276180); color: white; } .touch_portal_assets_type_page { border-radius: 20px 20px 0px 0px; text-transform: uppercase; font-family: 'Open Sans Condensed'; font-display: swap; font-size: 19pt; padding: 10px; background-image: linear-gradient(to bottom right, #b1ff8f, #388027); color: white; } #section_createandshare h4 { font-family: 'Open Sans Condensed'; font-display: swap; font-size: 24px; text-align: center; margin-top: -36px; margin-bottom: 56px; } #touch_portal_assets_snipping { } #touch_portal_assets_obs_record { } #touch_portal_assets_snipping_icon { background-image: url("../images/share_header_snipping_zw.png"); background-size: cover; } #touch_portal_assets_obsrecord_icon { background-image: url(../images/share_header_obsrec_zw.png); background-size: cover; } #touch_portal_assets_page_photoshop_icon { background-image: url(../images/share_header_page_photoshop_zw.png); background-size: cover; } #touch_portal_assets_page_aseprite_icon { background-image: url(../images/share_header_page_aseprite_zw.png); background-size: cover; } #touch_portal_assets_page_twitchcon2019_free_icon { background-image: url(../images/share_header_page_tc2019free_zw.png); background-size: cover; } #touch_portal_assets_page_twitchcon2019_pro_icon { background-image: url(../images/share_header_page_tc2019pro_zw.png); background-size: cover; } #touch_portal_assets_page_aftereffects_icon { background-image: url(../images/share_header_page_aftereffects_zw.png); background-size: cover; } #touch_portal_assets_page_ssfxphotoshop_icon { background-image: url(../images/share_header_page_photoshop_zw_1.png); background-size: cover; } #touch_portal_assets_page_ssfxpremiere_icon { background-image: url(../images/share_header_page_premiere_zw.png); background-size: cover; } #touch_portal_assets_page_cinema4d_icon { background-image: url(../images/share_header_page_cinema4d_zw.png); background-size: cover; } #touch_portal_assets_page_davinci_icon { background-image: url(../images/share_header_page_davinci_zw.png); background-size: cover; } #simpleMenuTitle { width: 100%; height: 227px; background-image: linear-gradient(to bottom right, #8fc6ff, #276180); text-align: center; } #section_privacy { text-align: center; width: 100%; } #privacy_container { width: 800px; display: inline-block; padding-top: 30px; padding-bottom: 120px; text-align: left; } #privacy_container h2 { text-align: left; font-size: 20pt; } #section_faq { text-align: center; width: 100%; } #faq_questions_container { width: 800px; display: inline-block; padding-top: 30px; padding-bottom: 120px; } .faq_category { font-family: "Open Sans Condensed"; font-display: swap; font-size: 24pt; display: block; text-align: left; margin-top: 20px; margin-left: 10px; } .faq_question_container { padding-left: 40px; } .faq_question { font-family: "Montserrat"; font-display: swap; font-size: 14px; display: block; text-align: left; /* text-indent: 40px; */ margin-top: 20px; border-bottom: 1px solid #8fc6ff; font-weight: bold; } .faq_answer { font-family: "Open Sans"; font-display: swap; font-size: 14px; text-align: left; display: block; padding: 30px 20px 20px 20px; display: none; background-color: whitesmoke; margin-top: 15px; } .faq_answer a.answer_link { font-family: "Open Sans"; font-display: swap; font-size: 11px; text-align: left; display: block; margin-top: 15px; } .faq_image { margin: 32px; display: inline-block; } .faq_image_container { text-align: center; } .faq_image_container span { text-decoration: italic; display: block; margin-top: -25px; font-size: 13px; font-style: italic; } div#tutorial_container_center { max-width: 1100px; display: inline-block; padding-top: 40px; } div#tutorial_container { text-align: center; padding-bottom: 50px; padding-top: 40px; /* background-color: #e6e6e6; */ } div.title_tutorial { display:block; width:100%; font-size:50px; color:#fff; text-transform:uppercase; font-weight:400; font-family: 'Open Sans Condensed', sans-serif; font-display: swap; padding-bottom:50px; padding-top:50px; text-align: center; } div.tutorial_video_contiainer { display: inline-block; width: 500px; margin: 10px; background-color: #e6e6e6; -moz-border-radius-topleft: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; padding-bottom: 26px; } div.tutorial_number { /* width: 100%; */ background-color: #e6e6e6; color: #000; font-size: 20px; padding: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; } .tutorial_video_youtube_iframe { width: 450px; height: 256px; } #article_main_image { } #social_widget { background-image: linear-gradient(to bottom right, #8fc6ff, #276180); width: 220px; text-align: right; height: 64px; border-top-left-radius: 64px; position: fixed; right: 0; bottom: 0; z-index: 1; } #social_widget_icon_container { height: 64px; } #social_widget_icon_container a { text-decoration: none; } .social_widget_icon_link { width: 32px; height: 32px; margin-top: 16px; margin-right: 16px; } #support_container { width: 500px; text-align: left; } #support_container h2 { margin-bottom: 0px; margin-top: 50px; } .support_subtitle { text-align: center; width: 100%; display: block; font-style: oblique; margin-bottom: 46px; } form.supportform { } form.supportform ul {list-style-type: none;} form.supportform ul li { } .supportMessageSuccess { display: block; color: darkolivegreen; border: darkolivegreen 1px solid; padding: 20px; margin-top: 43px; width: 100%; } .supportMessageError { display: block; color: red; border: red 1px solid; padding: 20px; margin-top: 43px; width: 100%; } form.supportform.textfield { } .support_label { width: 150px; display: inline-block; } .getStartedTextContainer a, .getStartedTextContainer a:visited { color: #5884b3; font-weight: bold; } #touch_portal_assets_container { max-width: 1100px; display: inline-block; } .search-container { font-size: 12px; margin-bottom: 50px; } .search-container form { padding: 10px; } .search-container form input { padding: 10px; border: solid 4px #5884b3; border-radius: 10px; min-width: 250px; width: 50%; max-width: 650px; } .search-container form input[type='checkbox'] { min-width: 30px; width: 30px; margin-top: 7px; } .search-container form #btn_search { padding: 12px; border: none; width: 64px; padding-top: 15px; padding-bottom: 15px; margin-left: 6px; display: inline-block; color: white; background: #d2d2d2; border-radius: 10px; text-decoration: none; background-image: linear-gradient(to bottom, #b1ff8f, #278033); } .submit_asset_button { padding: 13px; text-decoration: none; color: black; border: solid 1px #b1b1b1; border-radius: 10px; margin-left: 9px; background-color: white; display: inline-block; margin-top: 12px; } .submit_asset_button:hover { background-color: #e4e4e4; } .touch_portal_assets_author { border-bottom: solid 1px lightgray; padding: 5px; font-size: 12px; font-family: 'Montserrat'; font-display: swap; } .touch_portal_assets_author a { color: black; } .search_tag { display: inline-block; border-radius: 10px; min-width: 80px; text-transform: none; } .search_tag img { width: 16px; height: 16px; margin: 0px; padding-top: 11px; display: inline-block; } .search_tag span { font-size: 17px; } .search_tag_icon { height: 28px; display: inline-block; padding-left: 10px; padding-right: 13px; color: white; } .search_tag_icon img { width: 16px; height: 16px; margin: 0px; padding-top: 5px; display: inline-block; padding-right: 3px; } .search_tag_icon p { display: inline-block; line-height: 0; margin: 0px; font-family: 'Roboto'; font-display: swap; font-size: 14px; vertical-align: middle; margin-top: -3px; } .search_tag_downloads { background-image: linear-gradient(to bottom right, #8fd4ff, #276480); } .search_tag_grid { background-image: linear-gradient(to bottom right, #ff8fe5, #692780); } .search_tag_upgrade_type { background-image: linear-gradient(to bottom right, #b1ff8f, #388027); } .touch_portal_assets_image { height: 154px; width: 300px; } .touch_portal_assets_image img { margin: 0px; width: 100%; height: 100%; object-fit: cover; } .touch_portal_assets_search_description { font-size: 13px; padding-top: 15px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; text-align: justify; height: 114px; overflow: hidden; min-height: 114px; max-height: 114px; font-family: 'Montserrat'; font-display: swap; overflow-y: auto; line-height: 20px; scrollbar-color: #123456; } .search_item_button_container { display: inline-block; display: flex; width: 300px; height: 40px; overflow: hidden; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; font-size: 15px; } .search_item_button_left { height: 40px; background-image: linear-gradient(to bottom right, #eee, #ababab); width: 150px; display: inline-block; overflow: hidden; color: white; vertical-align: middle; padding-top: 10px;} .search_item_button_right { background-image: linear-gradient(to bottom right, #b1ff8f, #388027); height: 40px; width: 150px; overflow: hidden; display: inline-block; color: white; vertical-align: middle; padding-top: 10px; } .touch_portal_assets_type_icon_packs { border-radius: 20px 20px 0px 0px; text-transform: uppercase; font-family: 'Open Sans Condensed'; font-display: swap; font-size: 19pt; padding: 10px; background-image: linear-gradient(to bottom right, #8fc6ff, #276180); color: white; } .search_item_button_right_iconpack { background-image: linear-gradient(to bottom right, #8fc6ff, #276180); height: 40px; width: 150px; overflow: hidden; display: inline-block; color: white; vertical-align: middle; padding-top: 10px; } .touch_portal_assets_type_plugins { border-radius: 20px 20px 0px 0px; text-transform: uppercase; font-family: 'Open Sans Condensed'; font-display: swap; font-size: 19pt; padding: 10px; background-image: linear-gradient(to bottom right, #d48fff, #5b2780); color: white; } .search_item_button_right_plugin { background-image: linear-gradient(to bottom right, #d48fff, #5b2780); height: 40px; width: 150px; overflow: hidden; display: inline-block; color: white; vertical-align: middle; padding-top: 10px; } .touch_portal_assets_search_description ul li { line-height: 14px; margin: 0px; } .viewMore { border-radius: 10px; border: solid 1px #ffffff; color: #ffffff; background-color: #ffffff20; vertical-align: middle; padding-top: 10px; padding-bottom: 10px; margin-left: 0px; margin-bottom: 20px; text-decoration: none; width: 300px; display: inline-block; } .top3Header { color: white; font-size: 32px; font-family: 'Open Sans Condensed'; font-display: swap; text-align: center; font-weight: normal; margin-top: 0px; margin-bottom: 0px; } .touch_portal_assets_title_sub_value_container { margin-top: 4px; border-top: 1px solid #ffffff66; } .share_download_value { } #subPageContainer { width: 100%; text-align: center; font-family: 'Montserrat'; font-display: swap; } #subPage { display: inline-block; width: 720px; } #subPage h2 { text-align:left; } #subPage h3 { text-align:left; width: 100%; border-bottom: 1px solid #d2d2d2; } .subPage_intro_block { margin: 48px 0px 32px 0px; } #subPage p { text-align:left; font-size: 14px; } #subPage table { width: 100%; } #subPage table tr td { vertical-align: top; padding-top: 20px; } #subPage table tr td.rightAligned { vertical-align: top; padding-top: 20px; text-align: right; width: 260px; } #subPage table tr td a { text-decoration: none; color: #777777; } #subPage table tr td a:hover { color: black; text-decoration: underline; } .tdspacer { width: 30px; } div#sticky_main_menu_container { z-index:9999; width:100%; text-align: center; padding-top: 20px; padding-bottom: 20px; color: white; position: fixed; top: 0; transition: 1s; } div#sticky_main_menu { width: 1000px; display: inline-block; } div#sticky_main_menu img { height: 32px; width: 32px; margin-right: 13px; } .DropDownMenu { display: inline-block; float: right; margin-top: 5px; } .DropDownMenu a:visited { text-decoration: none; } .DropDownMenu ul { list-style: none; margin: 0; padding: 0; background:white; } .DropDownMenu li { display: block; float: left; position: relative; font-family: 'Open Sans Condensed', sans-serif; font-display: swap; font-size: 19px; margin-left: 20px; margin-right: 20px; text-decoration: none; color: white; } .DropDownMenu li a { text-decoration: none; color: white; } .DropDownMenu li a:visited { text-decoration: none; color: white; } .DropDownMenu a:hover { border-bottom: 1px solid white; cursor: pointer; } .DropDownMenu ul li ul { opacity: 0; position: absolute; padding-top: 10px; padding-bottom: 10px; left: 0; } .DropDownMenu ul li:hover > ul, ul li ul:hover { visibility: visible; opacity: 1; display: block; z-index:100; } .DropDownMenu ul li ul li { text-align:left; width:140px; padding-top:8px; padding-bottom:8px; margin-left: 10px; color: #494949; } .DropDownMenu ul li ul li a { color: #494949; } .DropDownMenu ul li ul li a:visited { color: #494949; } .DropDownMenu ul li ul li a:hover { color: #494949; border-bottom: 1px solid black; } #Teaser_container_v2 { width: 100%; height: 520px; padding-top:110px; background-image: linear-gradient(to bottom right, #8fc6ff, #276180); text-align: center; } @keyframes Teaser_faderFadeInOut { 0% { opacity:1; } 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } 100% { opacity:1; } } #Teaser_fader { position: relative; width: 720; height: 363; } #Teaser_fader img { position:absolute; left:0; animation-name: Teaser_faderFadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 16s; } #Teaser_fader img:nth-of-type(1) { animation-delay: 14s; } #Teaser_fader img:nth-of-type(2) { animation-delay: 12s; } #Teaser_fader img:nth-of-type(3) { animation-delay: 10s; } #Teaser_fader img:nth-of-type(4) { animation-delay: 8s; } #Teaser_fader img:nth-of-type(5) { animation-delay: 6s; } #Teaser_fader img:nth-of-type(6) { animation-delay: 4s; } #Teaser_fader img:nth-of-type(7) { animation-delay: 2s; } #Teaser_fader img:nth-of-type(8) { animation-delay: 0s; } .getStartedContainerV2 { /* display: none; */ } .getStartedStep { width: 270px; display: inline-block; margin-left: 69px; margin-right: 10px; margin-top: -18px; margin-bottom: -80px; } .getStartedStepNumber { font-size: 280px; font-family: 'Roboto'; font-display: swap; color: #2862822b; position: relative; left: -132px; top: 0px; z-index: 1; font-weight: bold; } .getStartedStepIcon { width: 90px; display: inline-block; margin-bottom: 8px; } .getStartedStepText { text-align: left; font-size: 14px; line-height: 20px; font-family: 'Montserrat'; font-display: swap; } .getStartedStepContent { position: relative; left: 0; top: -185px; display: inline-block; z-index: 2; vertical-align: top; background-color: #ffffff5c; border-radius: 20px; box-shadow: 0 0 20px rgb(0 0 0 / 20%); padding: 26px; min-height: 290px; } .getStartedStepTitle { display: block; font-weight: bold; font-size: 24px; font-family: 'Open Sans Condensed'; font-display: swap; } .getStartedStepText a, .getStartedStepText a:visited { color: #0072eb; /* font-weight: bold; */ } .asset_smallview_more_info_button { background-image: linear-gradient(to bottom right, #d48fff, #5b2780); border-radius: 0px 0px 20px 20px; color: white; text-decoration: none; } .asset_smallview_more_info_button a { color: white; text-decoration: none; width: 100%; display: block; padding-top: 10px; padding-bottom: 10px; } .purpleGradient { background-image: linear-gradient(to bottom right, #d48fff, #5b2780); } .blueGradient { background-image: linear-gradient(to bottom right, #8fc6ff, #276180); } .greenGradient { background-image: linear-gradient(to bottom right, #b1ff8f, #388027); } .block_404_message { display: inline-block; background-color: #ffffff; border-radius: 20px; box-shadow: 0 0 20px rgb(0 0 0 / 20%); width: 90%; max-width: 720px; margin-top: 60px; margin-bottom: 200px; padding-bottom: 28px; } .block_404_message_title { font-weight: bold; font-size: 32px; font-family: 'Open Sans Condensed'; font-display: swap; } .block_404_message_body { font-size: 14px; line-height: 20px; font-family: 'Montserrat'; font-display: swap; margin-left: 20px; margin-right: 20px; } @media only screen and (max-width : 1200px) and (min-width : 1001px) { div#MainMenu_button_container { width: 100%; } #Teaser_base_title h1 { padding: 10px; } #Teaser_base_title { width: 100%; } #section_product { height: 990px; } .getStartedStep { width:240px; } .getStartedStepNumber { font-size:240px; } } @media only screen and (max-width : 1000px) and (min-width : 926px) { div#MainMenu_button_container { width: 100%; } #Teaser_base_title h1 { padding: 10px; } #Teaser_base_title { width: 100%; } #section_product { height: 990px; } .getStartedStep { width:200px; } .getStartedStepNumber { font-size:200px; top: -50px; left: -110px; } .getStartedStepContent { padding: 16px; min-height: 300px; } } @media only screen and (max-width : 925px) and (min-width : 800px) { div#MainMenu_button_container { width: 100%; } #Teaser_base_title h1 { padding: 10px; } #Teaser_base_title { width: 100%; } #section_product { height: 990px; } .getStartedStep { width:192px; margin-left: 50px; } .getStartedStepNumber { font-size:150px; top: -60px; left: -97px; } .getStartedStepContent { padding: 16px; min-height: 300px; } .getStartedStepText { font-size: 12px; } #section_getstarted h2 { margin-bottom: 64px; } div.featureCell { margin-bottom: 32px; height: 48px; border-radius: 12px; } div.featureCell img { width: 48px; } p.featureCellTitleBlock { margin-top: 12px; width: 150px; font-size: 18px; padding-left: 8px; } } @media only screen and (max-width : 800px) and (min-width : 500px) { #Teaser_show_case img { width: 100%; } #Teaser_show_case { width: 100%; height: 250px; position: inherit; } .works_with_floating_block { width: 32px; height: 32px; } .works_with_floating_block img { width: 32px; height: 32px; } .getStartedSmallContainer { width: 499px; } #MainMenu_items_container { display: block; } #faq_questions_container { width: 100%; } .faq_question_container { padding-right: 20px; } div#MainMenu_button_container { width: 100%; } #Teaser_base { height: 64vw; } #Teaser_base_title h1 { padding: 10px; } #Teaser_base_title { width: 100%; } h2 { width:90%; font-size:32px; margin-left: 5%; margin-bottom: 0px; } #section_product { height: 620px; padding-top: 32px; } .h2_sub { margin-top: 8px; margin-bottom: 32px; margin-left: 20px; margin-right: 20px; } div.featuresContainer { padding: 32px 0px 0px 0px; } div.featureCell {height: auto;margin-bottom: 16px;border-radius: 12px;} div.featureCell img { width: 32px; } p.featureCellTitleBlock { font-size: 14px; width: 130px; } div.featureCellReadMore { font-size: 11px; top: 47px; padding: 7px 5px 5px 5px; } #section_createandshare h4 { font-size: 16px; margin-top: 0px; margin-bottom: 36px; } #section_pricing h4 { font-size: 16px; margin-top: 0px; margin-bottom: 36px; } .getStartedContainerV2 { margin-top: 26px; } .getStartedStep { width: 140px; margin-left: 6px; margin-right: 6px; margin-top: -14px; margin-bottom: 0px; } .getStartedStepNumber { font-size: 80px; left: -52px; top: 0px; } .getStartedStepIcon { width: 52px; } .getStartedStepText { font-size: 11px; line-height: 18px; } .getStartedStepContent { left: 0; top: -56px; border-radius: 20px; padding: 16px; min-height: 222px; } .getStartedStepTitle { font-size: 18px; } #section_getstarted { padding-top: 26px; } } @media only screen and (max-width : 500px) and (min-width : 100px) { .mobile_menu_button { display: inline-block; } h2 { font-size: 30px; margin-bottom: 5px; margin-left: 16px; margin-right: 16px; width: auto; } .h2_sub { margin-top: 0px; max-width: 80%; margin-left: 10%; } #Teaser_show_case { height: 200px; width: 100%; } #Teaser_show_case img { width: 90vw; margin-left: 3vw; } #Teaser_base_title h3 { font-size: 14px; margin-left: 20px; } .more_block_container { width: 80%; height: 64px; border-radius: 10px; margin: 8px; box-shadow: 0px 0px 0px 0px rgba(0,0,0, 0.25); } .more_block_title { margin-top: 12px; text-align: left; margin-left: 100px; } #more_block_icon_faq { width: 64px; height: 48px; background-size: 48px; margin-top: 8px; margin-left: 20px; opacity: 1.0; } #more_block_icon_tutorials { width: 64px; height: 64px; background-size: 64px; margin-top: 0px; margin-left: 20px; opacity: 1.0; } #more_block_icon_blog { width: 64px; height: 48px; background-size: 48px; margin-top: 8px; margin-left: 20px; opacity: 1.0; } .getStartedSmallContainer { width: 250px; } .getStartedTextContainer { font-size: 14px; } .getStartedIconContainer img { width: 60px; height: 60px; } .getStartedIconContainer { width: 60px; height: 60px; } #section_createandshare h4 { font-size: 20px; margin-top: 0px; color: white; max-width: 80%; margin-left: 10%; margin-bottom: 4px; } div#MainMenu_button_container { width: 100%; } #MainMenu_logo_container { width: 90%; text-align: left; padding-left: 20px; } #MainMenu_items_container { display: none; float: left; } a.MainMenuItem { display: block; text-align: left; } span#works_with_title { display: block; font-size: 16px; text-align: left; margin-bottom: 19px; } .works_with_floating_block { width: 42px; height: 42px; } .works_with_floating_block img { width: 42px; height: 42px; } #Teaser_icons { text-align: left; padding-left: 20px; } #Teaser_base { display: block; height: 64vw; } #faq_questions_container { width: 100%; } .faq_question_container { padding-right: 20px; } #Teaser_base_title { width: 100%; } #Teaser_base_title h1 { font-size: 26px; padding: 10px; } #simpleMenuTitle { height: 277px; } .tutorial_video_youtube_iframe { width: 300px; height: 170px; } div.tutorial_video_contiainer { width: 320px; } #section_pricing h4 { margin-top: 0px; } .downloadBlock { width: 80%; max-width: 280px; min-height: 0; text-align: left; padding-top: 16px; /* padding-left: 1px; */ vertical-align: top; } .downloadBlockImageContainer { display: inline-block; min-height: 0; vertical-align: top; } .downloadBlock img { width: 48px; height: 48px; } .downloadBlock h3 { display: inline-block; margin-left: 10px; vertical-align: top; margin-right: 10px; width: 72px; } .downloadBlock span { display: inline-block; font-size: 10px; text-align: right; width: 124px; } #Teaser_container { /* height: 550px;*/ } .divider01 img { margin-top: -26vw; width: 80vw; } .divider02 img { width: 80vw; } .divider01 { width: 90vw; } .divider02 { width: 90vw; } #section_product { padding-top: 60px; } #buttons_container { padding-top: 0px; } div.featureCell {min-height: 0;width: 39%;margin-right: 3px;height: 32px;margin-bottom: 24px;border-radius: 8px;} div.featureCell img {width: 32px;} p.featureCellTitleBlock {width: 70%;font-size: 12px;padding: 0px;margin-top: 8px;padding-left: 2px;height: 16px;text-overflow: ellipsis;} p.featureCellTextBlock { } div.featureCellReadMore { font-size: 11px; top: 32px; padding: 7px 5px 5px 5px; width: 80px; margin-left: -94px; left: -21px; } #section_createandshare {padding-top: 32px;} .touch_portal_assets_title { text-align: left; margin-top: -40px; padding-left: 10px; color: white; } .touch_portal_assets_summary { padding-bottom: 0px; padding-top: 8px; } .touch_portal_assets_download { margin-top: 0px; } #touch_portal_assets_page_aseprite_icon { background-image: linear-gradient(to top, rgba(10, 10, 10, 0.83), rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.0)), url(../images/share_header_page_aseprite_zw.png); background-size: cover; } .submit_asset_button { /*margin-left: 110px;*/ } #Teaser_base_title { width: 100%; } .getStartedStep { width: 232px; } .getStartedStepNumber { font-size: 138px; left: -142px; } .getStartedStepContent { top: -114px; left: -24px; min-height: 211px; } .getStartedStepIcon { width: 64px; } .getStartedStepText { font-size: 13px; } .faq_category { margin-left: 16px; font-size: 24px; } .search-container form input { min-width: unset; width: auto; max-width: unset; } }