@charset "UTF-8"; /* Import file SCSS */ /* Page Customization */ /* Colors */ /* Size */ /* Opacity */ /* Z-index */ /* Font BeVietnamPro */ @font-face { font-family: 'BeVietnamPro-Black'; src: url("../fonts/BeVietnamPro-Black.ttf"); } @font-face { font-family: 'BeVietnamPro-Bold'; src: url("../fonts/BeVietnamPro-Bold.ttf"); } @font-face { font-family: 'BeVietnamPro-SemiBold'; src: url("../fonts/BeVietnamPro-SemiBold.ttf"); } @font-face { font-family: 'BeVietnamPro-Medium'; src: url("../fonts/BeVietnamPro-Medium.ttf"); } @font-face { font-family: 'BeVietnamPro-Regular'; src: url("../fonts/BeVietnamPro-Regular.ttf"); } @font-face { font-family: 'BeVietnamPro-Light'; src: url("../fonts/BeVietnamPro-Light.ttf"); } /* Font BeVietnamPro */ /* Font BarlowCondensed */ @font-face { font-family: 'BarlowCondensed-Bold'; src: url("../fonts/BarlowCondensed-Bold.ttf"); } @font-face { font-family: 'BarlowCondensed-SemiBold'; src: url("../fonts/BarlowCondensed-SemiBold.ttf"); } @font-face { font-family: 'BarlowCondensed-Medium'; src: url("../fonts/BarlowCondensed-Medium.ttf"); } @font-face { font-family: 'BarlowCondensed-Regular'; src: url("../fonts/BarlowCondensed-Regular.ttf"); } @font-face { font-family: 'BarlowCondensed-Light'; src: url("../fonts/BarlowCondensed-Light.ttf"); } /* Font BarlowCondesed */ /* Font */ /* Font Size */ .font-10 { font-size: 0.625rem; } .font-12 { font-size: 0.75rem; } .font-14 { font-size: 0.875rem; } .font-16 { font-size: 1rem; } .font-18 { font-size: 1.125rem; } .font-20 { font-size: 1.25rem; } .font-22 { font-size: 1.375rem; } .font-24 { font-size: 1.5rem; } .font-26 { font-size: 1.625rem; } .font-28 { font-size: 1.75rem; } .font-30 { font-size: 1.875rem; } .font-32 { font-size: 2rem; } .font-34 { font-size: 2.125rem; } .font-36 { font-size: 2.25rem; } .font-38 { font-size: 2.375rem; } .font-40 { font-size: 2.5rem; } .font-42 { font-size: 2.625rem; } .font-52 { font-size: 3.25rem; } .font-black { font-family: "BeVietnamPro-Black", sans-serif; } .font-bold { font-family: "BeVietnamPro-Bold", sans-serif; } .font-semi-bold { font-family: "BeVietnamPro-SemiBold", sans-serif; } .font-regular { font-family: "BeVietnamPro-Regular", sans-serif; } .font-light { font-family: "BeVietnamPro-Light", sans-serif; } .font-lh-0 { line-height: 0; } .font-lh-1 { line-height: 1; } .font-lh-1-2 { line-height: 1.2; } .font-lh-1-3 { line-height: 1.3; } .font-lh-1-4 { line-height: 1.4; } .font-lh-1-5 { line-height: 1.5; } .font-lh-1-6 { line-height: 1.6; } /* Icon SVG */ .icon-grp { display: inline-block; position: relative; -webkit-mask-size: cover; mask-size: cover; background-repeat: no-repeat; background-size: 100% 100%; } .icon-home { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='_01_align_center' data-name='01 align center'%3E%3Cpath d='M13.338.833a2,2,0,0,0-2.676,0L0,10.429v10.4a3.2,3.2,0,0,0,3.2,3.2H20.8a3.2,3.2,0,0,0,3.2-3.2v-10.4ZM15,22.026H9V17a3,3,0,0,1,6,0Zm7-1.2a1.2,1.2,0,0,1-1.2,1.2H17V17A5,5,0,0,0,7,17v5.026H3.2a1.2,1.2,0,0,1-1.2-1.2V11.319l10-9,10,9Z'/%3E%3C/g%3E%3C/svg%3E%0A"); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='_01_align_center' data-name='01 align center'%3E%3Cpath d='M13.338.833a2,2,0,0,0-2.676,0L0,10.429v10.4a3.2,3.2,0,0,0,3.2,3.2H20.8a3.2,3.2,0,0,0,3.2-3.2v-10.4ZM15,22.026H9V17a3,3,0,0,1,6,0Zm7-1.2a1.2,1.2,0,0,1-1.2,1.2H17V17A5,5,0,0,0,7,17v5.026H3.2a1.2,1.2,0,0,1-1.2-1.2V11.319l10-9,10,9Z'/%3E%3C/g%3E%3C/svg%3E%0A"); } .icon-nav { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='M24,2v2H0V2H24ZM0,22H8v-2H0v2ZM0,13H16v-2H0v2Z'/%3E%3C/svg%3E%0A"); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='M24,2v2H0V2H24ZM0,22H8v-2H0v2ZM0,13H16v-2H0v2Z'/%3E%3C/svg%3E%0A"); } .icon-event { mask: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='m19,2h-1v-1c0-.552-.448-1-1-1s-1,.448-1,1v1h-8v-1c0-.552-.448-1-1-1s-1,.448-1,1v1h-1C2.243,2,0,4.243,0,7v12c0,2.757,2.243,5,5,5h14c2.757,0,5-2.243,5-5V7c0-2.757-2.243-5-5-5Zm-14,2h14c1.654,0,3,1.346,3,3v1H2v-1c0-1.654,1.346-3,3-3Zm14,18H5c-1.654,0-3-1.346-3-3v-9h20v9c0,1.654-1.346,3-3,3Zm-2.603-6.648c0,.379-.264.698-.566.866l-1.564.87.694,1.893c.134.367.013.778-.299,1.013h0c-.319.24-.759.237-1.075-.007l-1.556-1.203-1.556,1.203c-.316.244-.756.247-1.075.007h0c-.312-.235-.433-.646-.299-1.013l.694-1.893-1.564-.87c-.302-.168-.566-.487-.566-.866,0-.321.279-.676.731-.676h2.247l.596-2.283c.094-.362.419-.614.792-.621.373.007.698.259.792.621l.596,2.283h2.247c.452,0,.731.354.731.676Z'/%3E%3C/svg%3E%0A"); -webkit-mask: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='m19,2h-1v-1c0-.552-.448-1-1-1s-1,.448-1,1v1h-8v-1c0-.552-.448-1-1-1s-1,.448-1,1v1h-1C2.243,2,0,4.243,0,7v12c0,2.757,2.243,5,5,5h14c2.757,0,5-2.243,5-5V7c0-2.757-2.243-5-5-5Zm-14,2h14c1.654,0,3,1.346,3,3v1H2v-1c0-1.654,1.346-3,3-3Zm14,18H5c-1.654,0-3-1.346-3-3v-9h20v9c0,1.654-1.346,3-3,3Zm-2.603-6.648c0,.379-.264.698-.566.866l-1.564.87.694,1.893c.134.367.013.778-.299,1.013h0c-.319.24-.759.237-1.075-.007l-1.556-1.203-1.556,1.203c-.316.244-.756.247-1.075.007h0c-.312-.235-.433-.646-.299-1.013l.694-1.893-1.564-.87c-.302-.168-.566-.487-.566-.866,0-.321.279-.676.731-.676h2.247l.596-2.283c.094-.362.419-.614.792-.621.373.007.698.259.792.621l.596,2.283h2.247c.452,0,.731.354.731.676Z'/%3E%3C/svg%3E%0A"); } .icon-location { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='m23.943,16.846l-11.943,7.166L.057,16.846l5.664-3.398,1.478,1.445-3.255,1.953,8.057,4.834,8.057-4.834-3.256-1.953,1.478-1.445,5.665,3.399ZM7.058,11.958c-2.736-2.737-2.736-7.178-.008-9.907,1.322-1.322,3.081-2.05,4.95-2.05s3.628.728,4.949,2.05c1.322,1.322,2.051,3.08,2.051,4.95s-.729,3.627-2.051,4.95l-4.949,4.841-4.942-4.833Zm1.406-1.422l3.536,3.458,3.543-3.466c.937-.937,1.457-2.192,1.457-3.528s-.521-2.591-1.465-3.536-2.199-1.464-3.535-1.464-2.592.52-3.536,1.464c-1.949,1.95-1.949,5.122,0,7.071Zm3.536-.545c1.657,0,3-1.343,3-3s-1.343-3-3-3-3,1.343-3,3,1.343,3,3,3Z'/%3E%3C/svg%3E%0A"); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='m23.943,16.846l-11.943,7.166L.057,16.846l5.664-3.398,1.478,1.445-3.255,1.953,8.057,4.834,8.057-4.834-3.256-1.953,1.478-1.445,5.665,3.399ZM7.058,11.958c-2.736-2.737-2.736-7.178-.008-9.907,1.322-1.322,3.081-2.05,4.95-2.05s3.628.728,4.949,2.05c1.322,1.322,2.051,3.08,2.051,4.95s-.729,3.627-2.051,4.95l-4.949,4.841-4.942-4.833Zm1.406-1.422l3.536,3.458,3.543-3.466c.937-.937,1.457-2.192,1.457-3.528s-.521-2.591-1.465-3.536-2.199-1.464-3.535-1.464-2.592.52-3.536,1.464c-1.949,1.95-1.949,5.122,0,7.071Zm3.536-.545c1.657,0,3-1.343,3-3s-1.343-3-3-3-3,1.343-3,3,1.343,3,3,3Z'/%3E%3C/svg%3E%0A"); } .icon-user { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 24 24'%3E%3Cpath d='M12,12A6,6,0,1,0,6,6,6.006,6.006,0,0,0,12,12ZM12,2A4,4,0,1,1,8,6,4,4,0,0,1,12,2Z'/%3E%3Cpath d='M12,14a9.01,9.01,0,0,0-9,9,1,1,0,0,0,2,0,7,7,0,0,1,14,0,1,1,0,0,0,2,0A9.01,9.01,0,0,0,12,14Z'/%3E%3C/svg%3E%0A"); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 24 24'%3E%3Cpath d='M12,12A6,6,0,1,0,6,6,6.006,6.006,0,0,0,12,12ZM12,2A4,4,0,1,1,8,6,4,4,0,0,1,12,2Z'/%3E%3Cpath d='M12,14a9.01,9.01,0,0,0-9,9,1,1,0,0,0,2,0,7,7,0,0,1,14,0,1,1,0,0,0,2,0A9.01,9.01,0,0,0,12,14Z'/%3E%3C/svg%3E%0A"); } .icon-user-grp { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='M6.349,11H3a1,1,0,0,0-1,1v3H0V12A3,3,0,0,1,3,9H7.537A5.977,5.977,0,0,0,6.349,11ZM21,9H16.463a5.977,5.977,0,0,1,1.188,2H21a1,1,0,0,1,1,1v3h2V12A3,3,0,0,0,21,9Zm-5,4a4,4,0,1,0-4,4A4,4,0,0,0,16,13Zm-2,0a2,2,0,1,1-2-2A2,2,0,0,1,14,13Zm4,8a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v3H8V21a1,1,0,0,1,1-1h6a1,1,0,0,1,1,1v3h2ZM22,4a4,4,0,1,0-4,4A4,4,0,0,0,22,4ZM20,4a2,2,0,1,1-2-2A2,2,0,0,1,20,4ZM10,4A4,4,0,1,0,6,8,4,4,0,0,0,10,4ZM8,4A2,2,0,1,1,6,2,2,2,0,0,1,8,4Z'/%3E%3C/svg%3E%0A"); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='M6.349,11H3a1,1,0,0,0-1,1v3H0V12A3,3,0,0,1,3,9H7.537A5.977,5.977,0,0,0,6.349,11ZM21,9H16.463a5.977,5.977,0,0,1,1.188,2H21a1,1,0,0,1,1,1v3h2V12A3,3,0,0,0,21,9Zm-5,4a4,4,0,1,0-4,4A4,4,0,0,0,16,13Zm-2,0a2,2,0,1,1-2-2A2,2,0,0,1,14,13Zm4,8a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v3H8V21a1,1,0,0,1,1-1h6a1,1,0,0,1,1,1v3h2ZM22,4a4,4,0,1,0-4,4A4,4,0,0,0,22,4ZM20,4a2,2,0,1,1-2-2A2,2,0,0,1,20,4ZM10,4A4,4,0,1,0,6,8,4,4,0,0,0,10,4ZM8,4A2,2,0,1,1,6,2,2,2,0,0,1,8,4Z'/%3E%3C/svg%3E%0A"); } .icon-arrow-1 { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='_01_align_center' data-name='01 align center'%3E%3Cpath d='M24,13l0-2-21.445.031L6.877,6.707,5.463,5.293.877,9.879a3,3,0,0,0,0,4.242l4.586,4.586,1.414-1.414L2.615,13.031Z'/%3E%3C/g%3E%3C/svg%3E%0A"); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='_01_align_center' data-name='01 align center'%3E%3Cpath d='M24,13l0-2-21.445.031L6.877,6.707,5.463,5.293.877,9.879a3,3,0,0,0,0,4.242l4.586,4.586,1.414-1.414L2.615,13.031Z'/%3E%3C/g%3E%3C/svg%3E%0A"); } .icon-arrow-2 { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='_01_align_center' data-name='01 align center'%3E%3Cpath d='M23.124,9.879,18.538,5.293,17.124,6.707l4.262,4.263L0,11l0,2,21.446-.03-4.323,4.323,1.414,1.414,4.587-4.586A3.007,3.007,0,0,0,23.124,9.879Z'/%3E%3C/g%3E%3C/svg%3E%0A"); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='_01_align_center' data-name='01 align center'%3E%3Cpath d='M23.124,9.879,18.538,5.293,17.124,6.707l4.262,4.263L0,11l0,2,21.446-.03-4.323,4.323,1.414,1.414,4.587-4.586A3.007,3.007,0,0,0,23.124,9.879Z'/%3E%3C/g%3E%3C/svg%3E%0A"); } .icon-news { mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 250.128 250.128' style='enable-background:new 0 0 250.128 250.128;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M229.415,73.41c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5c3.15,0,5.713,2.557,5.713,5.699v97.187 c0,8.038-6.539,14.577-14.577,14.577s-14.577-6.539-14.577-14.577V49.955c0-11.414-9.292-20.7-20.714-20.7H20.698 C9.285,29.255,0,38.541,0,49.955V200.16c0,11.161,8.874,20.265,19.93,20.674c0.253,0.026,0.509,0.039,0.769,0.039h177.775h22.077 c16.309,0,29.577-13.268,29.577-29.577V94.109C250.128,82.696,240.836,73.41,229.415,73.41z M15,200.16V49.955 c0-3.143,2.556-5.7,5.698-5.7H185.26c3.15,0,5.714,2.557,5.714,5.7v141.341c0,5.298,1.407,10.271,3.857,14.577H20.698 C17.556,205.873,15,203.31,15,200.16z'/%3E%3Cpath d='M156.235,92.182h-46.683c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5h46.683c4.142,0,7.5-3.358,7.5-7.5 S160.377,92.182,156.235,92.182z'/%3E%3Cpath d='M156.235,129.518H51.2c-4.142,0-7.5,3.358-7.5,7.5c0,4.142,3.358,7.5,7.5,7.5h105.035c4.142,0,7.5-3.358,7.5-7.5 C163.735,132.876,160.377,129.518,156.235,129.518z'/%3E%3Cpath d='M156.235,166.854H51.2c-4.142,0-7.5,3.358-7.5,7.5c0,4.142,3.358,7.5,7.5,7.5h105.035c4.142,0,7.5-3.358,7.5-7.5 C163.735,170.212,160.377,166.854,156.235,166.854z'/%3E%3Cpath d='M49.738,107.182h29.907c4.142,0,7.5-3.358,7.5-7.5V69.775c0-4.142-3.358-7.5-7.5-7.5c-4.142,0-7.5,3.358-7.5,7.5v22.407 H49.738c-4.142,0-7.5,3.358-7.5,7.5S45.596,107.182,49.738,107.182z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 250.128 250.128' style='enable-background:new 0 0 250.128 250.128;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M229.415,73.41c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5c3.15,0,5.713,2.557,5.713,5.699v97.187 c0,8.038-6.539,14.577-14.577,14.577s-14.577-6.539-14.577-14.577V49.955c0-11.414-9.292-20.7-20.714-20.7H20.698 C9.285,29.255,0,38.541,0,49.955V200.16c0,11.161,8.874,20.265,19.93,20.674c0.253,0.026,0.509,0.039,0.769,0.039h177.775h22.077 c16.309,0,29.577-13.268,29.577-29.577V94.109C250.128,82.696,240.836,73.41,229.415,73.41z M15,200.16V49.955 c0-3.143,2.556-5.7,5.698-5.7H185.26c3.15,0,5.714,2.557,5.714,5.7v141.341c0,5.298,1.407,10.271,3.857,14.577H20.698 C17.556,205.873,15,203.31,15,200.16z'/%3E%3Cpath d='M156.235,92.182h-46.683c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5h46.683c4.142,0,7.5-3.358,7.5-7.5 S160.377,92.182,156.235,92.182z'/%3E%3Cpath d='M156.235,129.518H51.2c-4.142,0-7.5,3.358-7.5,7.5c0,4.142,3.358,7.5,7.5,7.5h105.035c4.142,0,7.5-3.358,7.5-7.5 C163.735,132.876,160.377,129.518,156.235,129.518z'/%3E%3Cpath d='M156.235,166.854H51.2c-4.142,0-7.5,3.358-7.5,7.5c0,4.142,3.358,7.5,7.5,7.5h105.035c4.142,0,7.5-3.358,7.5-7.5 C163.735,170.212,160.377,166.854,156.235,166.854z'/%3E%3Cpath d='M49.738,107.182h29.907c4.142,0,7.5-3.358,7.5-7.5V69.775c0-4.142-3.358-7.5-7.5-7.5c-4.142,0-7.5,3.358-7.5,7.5v22.407 H49.738c-4.142,0-7.5,3.358-7.5,7.5S45.596,107.182,49.738,107.182z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 100% 100%; } .icon-img { mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M53.333,42.667V416H512V42.667H53.333z M480,384H85.333v-41.373L176,251.961l85.333,85.333l128-128L480,299.961V384z M480,254.706l-90.667-90.667l-128,128L176,206.706l-90.667,90.667V74.667H480V254.706z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpolygon points='32,437.333 32,112 0,112 0,469.333 442.667,469.333 442.667,437.333 '/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M261.333,106.667c-26.468,0-48,21.533-48,48c0,26.467,21.532,48,48,48s48-21.532,48-48S287.802,106.667,261.333,106.667z M261.333,170.667c-8.822,0-16-7.178-16-16s7.178-16,16-16c8.822,0,16,7.178,16,16S270.156,170.667,261.333,170.667z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M53.333,42.667V416H512V42.667H53.333z M480,384H85.333v-41.373L176,251.961l85.333,85.333l128-128L480,299.961V384z M480,254.706l-90.667-90.667l-128,128L176,206.706l-90.667,90.667V74.667H480V254.706z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpolygon points='32,437.333 32,112 0,112 0,469.333 442.667,469.333 442.667,437.333 '/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M261.333,106.667c-26.468,0-48,21.533-48,48c0,26.467,21.532,48,48,48s48-21.532,48-48S287.802,106.667,261.333,106.667z M261.333,170.667c-8.822,0-16-7.178-16-16s7.178-16,16-16c8.822,0,16,7.178,16,16S270.156,170.667,261.333,170.667z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E") no-repeat 100% 100%; } .icon-video { mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Evideo-gallery-line%3C/title%3E%3Cpath d='M32.12,10H3.88A1.88,1.88,0,0,0,2,11.88V30.12A1.88,1.88,0,0,0,3.88,32H32.12A1.88,1.88,0,0,0,34,30.12V11.88A1.88,1.88,0,0,0,32.12,10ZM32,30H4V12H32Z' class='clr-i-outline clr-i-outline-path-1'%3E%3C/path%3E%3Cpath d='M30.14,3h0a1,1,0,0,0-1-1h-22a1,1,0,0,0-1,1h0V4h24Z' class='clr-i-outline clr-i-outline-path-2'%3E%3C/path%3E%3Cpath d='M32.12,7V7a1,1,0,0,0-1-1h-26a1,1,0,0,0-1,1h0V8h28Z' class='clr-i-outline clr-i-outline-path-3'%3E%3C/path%3E%3Cpath d='M12.82,26.79a1.74,1.74,0,0,0,.93.28,1.68,1.68,0,0,0,.69-.15l9.77-4.36a1.69,1.69,0,0,0,0-3.1L14.44,15.1a1.7,1.7,0,0,0-2.39,1.55v8.72A1.7,1.7,0,0,0,12.82,26.79Zm.63-10.14a.29.29,0,0,1,.14-.25.3.3,0,0,1,.16,0,.27.27,0,0,1,.12,0l9.77,4.35a.29.29,0,0,1,.18.28.28.28,0,0,1-.18.27l-9.77,4.36a.28.28,0,0,1-.28,0,.31.31,0,0,1-.14-.25Z' class='clr-i-outline clr-i-outline-path-4'%3E%3C/path%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Evideo-gallery-line%3C/title%3E%3Cpath d='M32.12,10H3.88A1.88,1.88,0,0,0,2,11.88V30.12A1.88,1.88,0,0,0,3.88,32H32.12A1.88,1.88,0,0,0,34,30.12V11.88A1.88,1.88,0,0,0,32.12,10ZM32,30H4V12H32Z' class='clr-i-outline clr-i-outline-path-1'%3E%3C/path%3E%3Cpath d='M30.14,3h0a1,1,0,0,0-1-1h-22a1,1,0,0,0-1,1h0V4h24Z' class='clr-i-outline clr-i-outline-path-2'%3E%3C/path%3E%3Cpath d='M32.12,7V7a1,1,0,0,0-1-1h-26a1,1,0,0,0-1,1h0V8h28Z' class='clr-i-outline clr-i-outline-path-3'%3E%3C/path%3E%3Cpath d='M12.82,26.79a1.74,1.74,0,0,0,.93.28,1.68,1.68,0,0,0,.69-.15l9.77-4.36a1.69,1.69,0,0,0,0-3.1L14.44,15.1a1.7,1.7,0,0,0-2.39,1.55v8.72A1.7,1.7,0,0,0,12.82,26.79Zm.63-10.14a.29.29,0,0,1,.14-.25.3.3,0,0,1,.16,0,.27.27,0,0,1,.12,0l9.77,4.35a.29.29,0,0,1,.18.28.28.28,0,0,1-.18.27l-9.77,4.36a.28.28,0,0,1-.28,0,.31.31,0,0,1-.14-.25Z' class='clr-i-outline clr-i-outline-path-4'%3E%3C/path%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E") no-repeat 100% 100%; } .icon-info { mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 491.52 491.52' style='enable-background:new 0 0 491.52 491.52;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M378.88,184.026v307.2h112.64v-307.2H378.88z M471.04,470.747h-71.68v-266.24h71.68V470.747z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M256,235.227v256h102.4v-256H256z M337.92,470.747h-61.44v-215.04h61.44V470.747z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M133.12,286.427v204.8h102.4v-204.8H133.12z M215.04,470.747L215.04,470.747H153.6v-163.84h61.44V470.747z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M0,347.867v143.36h112.64v-143.36H0z M92.16,470.747H20.48v-102.4h71.68V470.747z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpolygon points='336.975,0.293 330.095,19.581 404.601,46.146 56.565,229.831 66.125,247.942 411.508,65.658 385.95,137.341 405.24,144.223 443.07,38.122 '/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 491.52 491.52' style='enable-background:new 0 0 491.52 491.52;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M378.88,184.026v307.2h112.64v-307.2H378.88z M471.04,470.747h-71.68v-266.24h71.68V470.747z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M256,235.227v256h102.4v-256H256z M337.92,470.747h-61.44v-215.04h61.44V470.747z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M133.12,286.427v204.8h102.4v-204.8H133.12z M215.04,470.747L215.04,470.747H153.6v-163.84h61.44V470.747z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M0,347.867v143.36h112.64v-143.36H0z M92.16,470.747H20.48v-102.4h71.68V470.747z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpolygon points='336.975,0.293 330.095,19.581 404.601,46.146 56.565,229.831 66.125,247.942 411.508,65.658 385.95,137.341 405.24,144.223 443.07,38.122 '/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E") no-repeat 100% 100%; } .icon-pod { mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' role='img' focusable='false' aria-hidden='true' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m 6.965013,13 c 0,0 1.3165205,0 1.3165205,-3.8970612 0,-0.725511 -0.5900092,-1.31652 -1.3165205,-1.31652 -0.7265114,0 -1.3170206,0.591009 -1.3170206,1.31652 C 5.6479924,13 6.965013,13 6.965013,13 Z m 1.6150252,-1.328021 c 0.057501,-0.223503 0.1025016,-0.448007 0.1375021,-0.67551 l 0.026501,-0.180003 c 0.057501,-0.025 0.1150018,-0.049 0.1730027,-0.075 0.9140142,-0.414007 1.683527,-1.1215182 2.174035,-1.9965312 0.223503,-0.401507 0.388506,-0.835014 0.486507,-1.286021 0.113502,-0.504007 0.142502,-1.029516 0.083,-1.544024 -0.0525,-0.481507 -0.180503,-0.952015 -0.385007,-1.393521 -0.232502,-0.51951 -0.555507,-0.993017 -0.962014,-1.392023 C 9.8995588,2.7158388 9.4100512,2.3768338 8.8760428,2.1433298 8.3270342,1.8953268 7.7245248,1.7673248 7.1160153,1.7523238 c -0.6100095,-0.015 -1.219019,0.083 -1.7910279,0.301505 -0.5490086,0.209503 -1.0530165,0.518508 -1.4895233,0.917014 -0.4135065,0.376006 -0.767012,0.835013 -1.023016,1.339021 -0.2185034,0.429007 -0.3680057,0.888014 -0.451007,1.361522 -0.083001,0.489507 -0.083001,0.993015 -0.008,1.490023 0.067501,0.436007 0.1955031,0.865013 0.384006,1.27152 0.444007,0.940514 1.1965187,1.7220272 2.1290333,2.1970342 0.1130018,0.052 0.2255035,0.105002 0.3460054,0.157002 0.0075,0.0605 0.023,0.128002 0.03,0.196003 0.037501,0.219004 0.083001,0.444507 0.1355021,0.662511 C 5.174985,11.577478 4.9714818,11.501977 4.7759788,11.411475 3.699962,10.923468 2.7899478,10.080454 2.2254389,9.0344378 1.9694349,8.5609308 1.7889321,8.0569228 1.6764304,7.5294148 1.5479284,6.9504058 1.525428,6.3408958 1.6014292,5.7463868 c 0.075001,-0.556009 0.2330036,-1.105518 0.4665073,-1.610025 0.2780043,-0.59401 0.6695104,-1.143018 1.1355177,-1.602025 0.4580072,-0.458008 1.0300161,-0.842014 1.6550259,-1.105518 0.6515101,-0.273504 1.3515211,-0.420006 2.0555321,-0.428506 0.706011,-0.0075 1.412022,0.120001 2.0695323,0.379005 0.6330099,0.249004 1.2170195,0.61901 1.7150265,1.083017 0.482508,0.447507 0.880014,0.981016 1.173019,1.569525 0.248004,0.496508 0.421006,1.038016 0.504008,1.587525 0.09,0.572009 0.09,1.158518 -0.008,1.723027 -0.083,0.526508 -0.256004,1.045516 -0.489508,1.526523 -0.526508,1.061017 -1.399522,1.9340312 -2.4600387,2.4610392 -0.2635041,0.128002 -0.5420085,0.240504 -0.8275129,0.330505 l -0.0105,0.0115 z m 0.2600041,-2.1475332 0.005,-0.235004 c 0,-0.158002 0,-0.316005 -0.023,-0.471507 -0.0075,-0.0605 -0.0225,-0.113002 -0.037501,-0.173003 0.2785043,-0.225504 0.511508,-0.511508 0.6845107,-0.835013 0.128002,-0.240504 0.2255035,-0.504008 0.2785043,-0.775512 0.060501,-0.301005 0.075001,-0.61651 0.030501,-0.932515 C 9.7410563,5.8233878 9.6645551,5.5528838 9.5525534,5.2968798 9.4100512,4.9888748 9.2140481,4.7028698 8.9735443,4.4618668 8.7250405,4.2213628 8.4465361,4.0258598 8.1305312,3.8823578 7.7845258,3.7323548 7.4080199,3.6423538 7.032014,3.6343538 c -0.3760059,-0.0075 -0.7600119,0.0605 -1.1135174,0.196003 -0.3160049,0.128002 -0.6095095,0.308505 -0.8650135,0.541508 -0.256504,0.233004 -0.4670073,0.504008 -0.6175096,0.812013 -0.128502,0.248004 -0.2180034,0.512008 -0.2710043,0.790012 -0.052501,0.286005 -0.059501,0.579509 -0.0225,0.865014 0.037501,0.278504 0.1130017,0.549508 0.2255035,0.804512 0.1730027,0.384006 0.4285067,0.722512 0.7450116,1.001016 l -0.045501,0.203003 c -0.03,0.158003 -0.0225,0.308505 -0.0225,0.473508 l 0,0.211003 C 4.5179747,9.2089408 4.0814679,8.7419328 3.7884634,8.2004248 3.6149606,7.8919198 3.4949588,7.5609148 3.4269577,7.2144098 3.3439564,6.8304038 3.3294562,6.4323968 3.381957,6.0408908 c 0.045001,-0.353505 0.1430022,-0.699511 0.2860045,-1.016016 0.1730027,-0.390506 0.4285067,-0.752011 0.7295114,-1.060516 0.3085048,-0.308505 0.6695104,-0.556509 1.0605165,-0.729512 0.4365068,-0.195503 0.9100142,-0.301004 1.3845217,-0.316004 0.4820075,-0.008 0.963515,0.075 1.4065219,0.248503 0.4065064,0.157503 0.7755121,0.390507 1.0985172,0.684011 0.3155049,0.293505 0.5870091,0.63901 0.7820118,1.023516 0.158003,0.316005 0.278505,0.65451 0.339006,1.000516 0.0605,0.361505 0.075,0.729511 0.0225,1.091017 -0.045,0.353505 -0.142502,0.699511 -0.294005,1.023016 -0.2930041,0.65501 -0.797012,1.219019 -1.4140216,1.588025 l 0.057001,-0.053 z M 6.965013,4.7368708 c 0.7325114,0 1.3270207,0.594009 1.3270207,1.328021 0,0.736511 -0.5945093,1.33102 -1.3270207,1.33102 -0.7335115,0 -1.3275208,-0.594509 -1.3275208,-1.32402 0,-0.729512 0.5940093,-1.324521 1.3275208,-1.324521 l 0,-0.0105 z'/%3E%3C/svg%3E") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' role='img' focusable='false' aria-hidden='true' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m 6.965013,13 c 0,0 1.3165205,0 1.3165205,-3.8970612 0,-0.725511 -0.5900092,-1.31652 -1.3165205,-1.31652 -0.7265114,0 -1.3170206,0.591009 -1.3170206,1.31652 C 5.6479924,13 6.965013,13 6.965013,13 Z m 1.6150252,-1.328021 c 0.057501,-0.223503 0.1025016,-0.448007 0.1375021,-0.67551 l 0.026501,-0.180003 c 0.057501,-0.025 0.1150018,-0.049 0.1730027,-0.075 0.9140142,-0.414007 1.683527,-1.1215182 2.174035,-1.9965312 0.223503,-0.401507 0.388506,-0.835014 0.486507,-1.286021 0.113502,-0.504007 0.142502,-1.029516 0.083,-1.544024 -0.0525,-0.481507 -0.180503,-0.952015 -0.385007,-1.393521 -0.232502,-0.51951 -0.555507,-0.993017 -0.962014,-1.392023 C 9.8995588,2.7158388 9.4100512,2.3768338 8.8760428,2.1433298 8.3270342,1.8953268 7.7245248,1.7673248 7.1160153,1.7523238 c -0.6100095,-0.015 -1.219019,0.083 -1.7910279,0.301505 -0.5490086,0.209503 -1.0530165,0.518508 -1.4895233,0.917014 -0.4135065,0.376006 -0.767012,0.835013 -1.023016,1.339021 -0.2185034,0.429007 -0.3680057,0.888014 -0.451007,1.361522 -0.083001,0.489507 -0.083001,0.993015 -0.008,1.490023 0.067501,0.436007 0.1955031,0.865013 0.384006,1.27152 0.444007,0.940514 1.1965187,1.7220272 2.1290333,2.1970342 0.1130018,0.052 0.2255035,0.105002 0.3460054,0.157002 0.0075,0.0605 0.023,0.128002 0.03,0.196003 0.037501,0.219004 0.083001,0.444507 0.1355021,0.662511 C 5.174985,11.577478 4.9714818,11.501977 4.7759788,11.411475 3.699962,10.923468 2.7899478,10.080454 2.2254389,9.0344378 1.9694349,8.5609308 1.7889321,8.0569228 1.6764304,7.5294148 1.5479284,6.9504058 1.525428,6.3408958 1.6014292,5.7463868 c 0.075001,-0.556009 0.2330036,-1.105518 0.4665073,-1.610025 0.2780043,-0.59401 0.6695104,-1.143018 1.1355177,-1.602025 0.4580072,-0.458008 1.0300161,-0.842014 1.6550259,-1.105518 0.6515101,-0.273504 1.3515211,-0.420006 2.0555321,-0.428506 0.706011,-0.0075 1.412022,0.120001 2.0695323,0.379005 0.6330099,0.249004 1.2170195,0.61901 1.7150265,1.083017 0.482508,0.447507 0.880014,0.981016 1.173019,1.569525 0.248004,0.496508 0.421006,1.038016 0.504008,1.587525 0.09,0.572009 0.09,1.158518 -0.008,1.723027 -0.083,0.526508 -0.256004,1.045516 -0.489508,1.526523 -0.526508,1.061017 -1.399522,1.9340312 -2.4600387,2.4610392 -0.2635041,0.128002 -0.5420085,0.240504 -0.8275129,0.330505 l -0.0105,0.0115 z m 0.2600041,-2.1475332 0.005,-0.235004 c 0,-0.158002 0,-0.316005 -0.023,-0.471507 -0.0075,-0.0605 -0.0225,-0.113002 -0.037501,-0.173003 0.2785043,-0.225504 0.511508,-0.511508 0.6845107,-0.835013 0.128002,-0.240504 0.2255035,-0.504008 0.2785043,-0.775512 0.060501,-0.301005 0.075001,-0.61651 0.030501,-0.932515 C 9.7410563,5.8233878 9.6645551,5.5528838 9.5525534,5.2968798 9.4100512,4.9888748 9.2140481,4.7028698 8.9735443,4.4618668 8.7250405,4.2213628 8.4465361,4.0258598 8.1305312,3.8823578 7.7845258,3.7323548 7.4080199,3.6423538 7.032014,3.6343538 c -0.3760059,-0.0075 -0.7600119,0.0605 -1.1135174,0.196003 -0.3160049,0.128002 -0.6095095,0.308505 -0.8650135,0.541508 -0.256504,0.233004 -0.4670073,0.504008 -0.6175096,0.812013 -0.128502,0.248004 -0.2180034,0.512008 -0.2710043,0.790012 -0.052501,0.286005 -0.059501,0.579509 -0.0225,0.865014 0.037501,0.278504 0.1130017,0.549508 0.2255035,0.804512 0.1730027,0.384006 0.4285067,0.722512 0.7450116,1.001016 l -0.045501,0.203003 c -0.03,0.158003 -0.0225,0.308505 -0.0225,0.473508 l 0,0.211003 C 4.5179747,9.2089408 4.0814679,8.7419328 3.7884634,8.2004248 3.6149606,7.8919198 3.4949588,7.5609148 3.4269577,7.2144098 3.3439564,6.8304038 3.3294562,6.4323968 3.381957,6.0408908 c 0.045001,-0.353505 0.1430022,-0.699511 0.2860045,-1.016016 0.1730027,-0.390506 0.4285067,-0.752011 0.7295114,-1.060516 0.3085048,-0.308505 0.6695104,-0.556509 1.0605165,-0.729512 0.4365068,-0.195503 0.9100142,-0.301004 1.3845217,-0.316004 0.4820075,-0.008 0.963515,0.075 1.4065219,0.248503 0.4065064,0.157503 0.7755121,0.390507 1.0985172,0.684011 0.3155049,0.293505 0.5870091,0.63901 0.7820118,1.023516 0.158003,0.316005 0.278505,0.65451 0.339006,1.000516 0.0605,0.361505 0.075,0.729511 0.0225,1.091017 -0.045,0.353505 -0.142502,0.699511 -0.294005,1.023016 -0.2930041,0.65501 -0.797012,1.219019 -1.4140216,1.588025 l 0.057001,-0.053 z M 6.965013,4.7368708 c 0.7325114,0 1.3270207,0.594009 1.3270207,1.328021 0,0.736511 -0.5945093,1.33102 -1.3270207,1.33102 -0.7335115,0 -1.3275208,-0.594509 -1.3275208,-1.32402 0,-0.729512 0.5940093,-1.324521 1.3275208,-1.324521 l 0,-0.0105 z'/%3E%3C/svg%3E") no-repeat 100% 100%; } .icon-long { mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M479.633,111.304h-28.85v-1.024c0-17.848-14.52-32.367-32.367-32.367H32.367C14.52,77.913,0,92.433,0,110.28v295.146 c0,15.804,12.857,28.661,28.661,28.661h450.972c17.848,0,32.367-14.52,32.367-32.367V143.672 C512,125.824,497.48,111.304,479.633,111.304z M28.661,411.826L28.661,411.826c-3.528,0-6.4-2.872-6.4-6.4V110.28 c0-5.573,4.533-10.106,10.106-10.106h386.048c5.573,0,10.106,4.533,10.106,10.106V401.72c0,3.527,0.568,6.925,1.615,10.106 H28.661z M489.739,401.72c0,5.573-4.533,10.106-10.106,10.106h-18.744c-5.573,0-10.106-4.533-10.106-10.106V133.565h28.85 c5.573,0,10.106,4.533,10.106,10.106V401.72z'/%3E%3Cpath d='M385.436,218.713H71.001c-6.147,0-11.13,4.983-11.13,11.13s4.983,11.13,11.13,11.13h314.435 c6.147,0,11.13-4.983,11.13-11.13S391.583,218.713,385.436,218.713z'/%3E%3Cpath d='M133.61,196.452h189.217c6.147,0,11.13-4.983,11.13-11.13v-47.861c0-6.147-4.983-11.13-11.13-11.13H133.61 c-6.147,0-11.13,4.983-11.13,11.13v47.861C122.479,191.469,127.462,196.452,133.61,196.452z M144.74,148.591h166.956v25.6H144.74 V148.591z'/%3E%3Cpath d='M170.852,263.513H71.001c-6.147,0-11.13,4.983-11.13,11.13v99.617c0,6.147,4.983,11.13,11.13,11.13h99.851 c6.147,0,11.13-4.983,11.13-11.13v-99.617C181.983,268.496,176.999,263.513,170.852,263.513z M159.722,363.13h-77.59v-77.357 h77.59V363.13z'/%3E%3Cpath d='M385.436,268.8H267.13c-6.147,0-11.13,4.983-11.13,11.13s4.983,11.13,11.13,11.13h118.305 c6.147,0,11.13-4.983,11.13-11.13S391.583,268.8,385.436,268.8z'/%3E%3Cpath d='M223.722,291.061h3.061c6.147,0,11.13-4.983,11.13-11.13s-4.983-11.13-11.13-11.13h-3.061 c-6.147,0-11.13,4.983-11.13,11.13S217.574,291.061,223.722,291.061z'/%3E%3Cpath d='M385.436,313.322h-0.693c-6.147,0-11.13,4.983-11.13,11.13c0,6.147,4.983,11.13,11.13,11.13h0.693 c6.147,0,11.13-4.983,11.13-11.13C396.566,318.305,391.583,313.322,385.436,313.322z'/%3E%3Cpath d='M223.722,335.583H347.27c6.147,0,11.13-4.983,11.13-11.13c0-6.147-4.983-11.13-11.13-11.13H223.722 c-6.147,0-11.13,4.983-11.13,11.13C212.591,330.6,217.574,335.583,223.722,335.583z'/%3E%3Cpath d='M385.436,357.844H223.722c-6.147,0-11.13,4.983-11.13,11.13c0,6.147,4.983,11.13,11.13,11.13h161.714 c6.147,0,11.13-4.983,11.13-11.13C396.566,362.827,391.583,357.844,385.436,357.844z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M479.633,111.304h-28.85v-1.024c0-17.848-14.52-32.367-32.367-32.367H32.367C14.52,77.913,0,92.433,0,110.28v295.146 c0,15.804,12.857,28.661,28.661,28.661h450.972c17.848,0,32.367-14.52,32.367-32.367V143.672 C512,125.824,497.48,111.304,479.633,111.304z M28.661,411.826L28.661,411.826c-3.528,0-6.4-2.872-6.4-6.4V110.28 c0-5.573,4.533-10.106,10.106-10.106h386.048c5.573,0,10.106,4.533,10.106,10.106V401.72c0,3.527,0.568,6.925,1.615,10.106 H28.661z M489.739,401.72c0,5.573-4.533,10.106-10.106,10.106h-18.744c-5.573,0-10.106-4.533-10.106-10.106V133.565h28.85 c5.573,0,10.106,4.533,10.106,10.106V401.72z'/%3E%3Cpath d='M385.436,218.713H71.001c-6.147,0-11.13,4.983-11.13,11.13s4.983,11.13,11.13,11.13h314.435 c6.147,0,11.13-4.983,11.13-11.13S391.583,218.713,385.436,218.713z'/%3E%3Cpath d='M133.61,196.452h189.217c6.147,0,11.13-4.983,11.13-11.13v-47.861c0-6.147-4.983-11.13-11.13-11.13H133.61 c-6.147,0-11.13,4.983-11.13,11.13v47.861C122.479,191.469,127.462,196.452,133.61,196.452z M144.74,148.591h166.956v25.6H144.74 V148.591z'/%3E%3Cpath d='M170.852,263.513H71.001c-6.147,0-11.13,4.983-11.13,11.13v99.617c0,6.147,4.983,11.13,11.13,11.13h99.851 c6.147,0,11.13-4.983,11.13-11.13v-99.617C181.983,268.496,176.999,263.513,170.852,263.513z M159.722,363.13h-77.59v-77.357 h77.59V363.13z'/%3E%3Cpath d='M385.436,268.8H267.13c-6.147,0-11.13,4.983-11.13,11.13s4.983,11.13,11.13,11.13h118.305 c6.147,0,11.13-4.983,11.13-11.13S391.583,268.8,385.436,268.8z'/%3E%3Cpath d='M223.722,291.061h3.061c6.147,0,11.13-4.983,11.13-11.13s-4.983-11.13-11.13-11.13h-3.061 c-6.147,0-11.13,4.983-11.13,11.13S217.574,291.061,223.722,291.061z'/%3E%3Cpath d='M385.436,313.322h-0.693c-6.147,0-11.13,4.983-11.13,11.13c0,6.147,4.983,11.13,11.13,11.13h0.693 c6.147,0,11.13-4.983,11.13-11.13C396.566,318.305,391.583,313.322,385.436,313.322z'/%3E%3Cpath d='M223.722,335.583H347.27c6.147,0,11.13-4.983,11.13-11.13c0-6.147-4.983-11.13-11.13-11.13H223.722 c-6.147,0-11.13,4.983-11.13,11.13C212.591,330.6,217.574,335.583,223.722,335.583z'/%3E%3Cpath d='M385.436,357.844H223.722c-6.147,0-11.13,4.983-11.13,11.13c0,6.147,4.983,11.13,11.13,11.13h161.714 c6.147,0,11.13-4.983,11.13-11.13C396.566,362.827,391.583,357.844,385.436,357.844z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat 100% 100%; } .icon-fb { mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 310 310' style='enable-background:new 0 0 310 310;' xml:space='preserve'%3E%3Cg id='XMLID_834_'%3E%3Cpath id='XMLID_835_' d='M81.703,165.106h33.981V305c0,2.762,2.238,5,5,5h57.616c2.762,0,5-2.238,5-5V165.765h39.064 c2.54,0,4.677-1.906,4.967-4.429l5.933-51.502c0.163-1.417-0.286-2.836-1.234-3.899c-0.949-1.064-2.307-1.673-3.732-1.673h-44.996 V71.978c0-9.732,5.24-14.667,15.576-14.667c1.473,0,29.42,0,29.42,0c2.762,0,5-2.239,5-5V5.037c0-2.762-2.238-5-5-5h-40.545 C187.467,0.023,186.832,0,185.896,0c-7.035,0-31.488,1.381-50.804,19.151c-21.402,19.692-18.427,43.27-17.716,47.358v37.752H81.703 c-2.762,0-5,2.238-5,5v50.844C76.703,162.867,78.941,165.106,81.703,165.106z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); -webkit-mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 310 310' style='enable-background:new 0 0 310 310;' xml:space='preserve'%3E%3Cg id='XMLID_834_'%3E%3Cpath id='XMLID_835_' d='M81.703,165.106h33.981V305c0,2.762,2.238,5,5,5h57.616c2.762,0,5-2.238,5-5V165.765h39.064 c2.54,0,4.677-1.906,4.967-4.429l5.933-51.502c0.163-1.417-0.286-2.836-1.234-3.899c-0.949-1.064-2.307-1.673-3.732-1.673h-44.996 V71.978c0-9.732,5.24-14.667,15.576-14.667c1.473,0,29.42,0,29.42,0c2.762,0,5-2.239,5-5V5.037c0-2.762-2.238-5-5-5h-40.545 C187.467,0.023,186.832,0,185.896,0c-7.035,0-31.488,1.381-50.804,19.151c-21.402,19.692-18.427,43.27-17.716,47.358v37.752H81.703 c-2.762,0-5,2.238-5,5v50.844C76.703,162.867,78.941,165.106,81.703,165.106z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); } .icon-x { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Capa_1' data-name='Capa 1' viewBox='0 0 24 24'%3E%3Cpath d='m18.9,1.153h3.682l-8.042,9.189,9.46,12.506h-7.405l-5.804-7.583-6.634,7.583H.469l8.6-9.831L0,1.153h7.593l5.241,6.931,6.065-6.931Zm-1.293,19.494h2.039L6.482,3.239h-2.19l13.314,17.408Z'/%3E%3C/svg%3E"); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Capa_1' data-name='Capa 1' viewBox='0 0 24 24'%3E%3Cpath d='m18.9,1.153h3.682l-8.042,9.189,9.46,12.506h-7.405l-5.804-7.583-6.634,7.583H.469l8.6-9.831L0,1.153h7.593l5.241,6.931,6.065-6.931Zm-1.293,19.494h2.039L6.482,3.239h-2.19l13.314,17.408Z'/%3E%3C/svg%3E"); } .icon-yt { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg id='XMLID_184_'%3E%3Cpath d='M23.498,6.186c-0.276-1.039-1.089-1.858-2.122-2.136C19.505,3.546,12,3.546,12,3.546s-7.505,0-9.377,0.504 C1.591,4.328,0.778,5.146,0.502,6.186C0,8.07,0,12,0,12s0,3.93,0.502,5.814c0.276,1.039,1.089,1.858,2.122,2.136 C4.495,20.454,12,20.454,12,20.454s7.505,0,9.377-0.504c1.032-0.278,1.845-1.096,2.122-2.136C24,15.93,24,12,24,12 S24,8.07,23.498,6.186z M9.546,15.569V8.431L15.818,12L9.546,15.569z'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg id='XMLID_184_'%3E%3Cpath d='M23.498,6.186c-0.276-1.039-1.089-1.858-2.122-2.136C19.505,3.546,12,3.546,12,3.546s-7.505,0-9.377,0.504 C1.591,4.328,0.778,5.146,0.502,6.186C0,8.07,0,12,0,12s0,3.93,0.502,5.814c0.276,1.039,1.089,1.858,2.122,2.136 C4.495,20.454,12,20.454,12,20.454s7.505,0,9.377-0.504c1.032-0.278,1.845-1.096,2.122-2.136C24,15.93,24,12,24,12 S24,8.07,23.498,6.186z M9.546,15.569V8.431L15.818,12L9.546,15.569z'/%3E%3C/g%3E%3C/svg%3E"); } .icon-inst { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M12,2.162c3.204,0,3.584,0.012,4.849,0.07c1.308,0.06,2.655,0.358,3.608,1.311c0.962,0.962,1.251,2.296,1.311,3.608 c0.058,1.265,0.07,1.645,0.07,4.849c0,3.204-0.012,3.584-0.07,4.849c-0.059,1.301-0.364,2.661-1.311,3.608 c-0.962,0.962-2.295,1.251-3.608,1.311c-1.265,0.058-1.645,0.07-4.849,0.07s-3.584-0.012-4.849-0.07 c-1.291-0.059-2.669-0.371-3.608-1.311c-0.957-0.957-1.251-2.304-1.311-3.608c-0.058-1.265-0.07-1.645-0.07-4.849 c0-3.204,0.012-3.584,0.07-4.849c0.059-1.296,0.367-2.664,1.311-3.608c0.96-0.96,2.299-1.251,3.608-1.311 C8.416,2.174,8.796,2.162,12,2.162 M12,0C8.741,0,8.332,0.014,7.052,0.072C5.197,0.157,3.355,0.673,2.014,2.014 C0.668,3.36,0.157,5.198,0.072,7.052C0.014,8.332,0,8.741,0,12c0,3.259,0.014,3.668,0.072,4.948c0.085,1.853,0.603,3.7,1.942,5.038 c1.345,1.345,3.186,1.857,5.038,1.942C8.332,23.986,8.741,24,12,24c3.259,0,3.668-0.014,4.948-0.072 c1.854-0.085,3.698-0.602,5.038-1.942c1.347-1.347,1.857-3.184,1.942-5.038C23.986,15.668,24,15.259,24,12 c0-3.259-0.014-3.668-0.072-4.948c-0.085-1.855-0.602-3.698-1.942-5.038c-1.343-1.343-3.189-1.858-5.038-1.942 C15.668,0.014,15.259,0,12,0z'/%3E%3Cpath d='M12,5.838c-3.403,0-6.162,2.759-6.162,6.162c0,3.403,2.759,6.162,6.162,6.162s6.162-2.759,6.162-6.162 C18.162,8.597,15.403,5.838,12,5.838z M12,16c-2.209,0-4-1.791-4-4s1.791-4,4-4s4,1.791,4,4S14.209,16,12,16z'/%3E%3Ccircle cx='18.406' cy='5.594' r='1.44'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M12,2.162c3.204,0,3.584,0.012,4.849,0.07c1.308,0.06,2.655,0.358,3.608,1.311c0.962,0.962,1.251,2.296,1.311,3.608 c0.058,1.265,0.07,1.645,0.07,4.849c0,3.204-0.012,3.584-0.07,4.849c-0.059,1.301-0.364,2.661-1.311,3.608 c-0.962,0.962-2.295,1.251-3.608,1.311c-1.265,0.058-1.645,0.07-4.849,0.07s-3.584-0.012-4.849-0.07 c-1.291-0.059-2.669-0.371-3.608-1.311c-0.957-0.957-1.251-2.304-1.311-3.608c-0.058-1.265-0.07-1.645-0.07-4.849 c0-3.204,0.012-3.584,0.07-4.849c0.059-1.296,0.367-2.664,1.311-3.608c0.96-0.96,2.299-1.251,3.608-1.311 C8.416,2.174,8.796,2.162,12,2.162 M12,0C8.741,0,8.332,0.014,7.052,0.072C5.197,0.157,3.355,0.673,2.014,2.014 C0.668,3.36,0.157,5.198,0.072,7.052C0.014,8.332,0,8.741,0,12c0,3.259,0.014,3.668,0.072,4.948c0.085,1.853,0.603,3.7,1.942,5.038 c1.345,1.345,3.186,1.857,5.038,1.942C8.332,23.986,8.741,24,12,24c3.259,0,3.668-0.014,4.948-0.072 c1.854-0.085,3.698-0.602,5.038-1.942c1.347-1.347,1.857-3.184,1.942-5.038C23.986,15.668,24,15.259,24,12 c0-3.259-0.014-3.668-0.072-4.948c-0.085-1.855-0.602-3.698-1.942-5.038c-1.343-1.343-3.189-1.858-5.038-1.942 C15.668,0.014,15.259,0,12,0z'/%3E%3Cpath d='M12,5.838c-3.403,0-6.162,2.759-6.162,6.162c0,3.403,2.759,6.162,6.162,6.162s6.162-2.759,6.162-6.162 C18.162,8.597,15.403,5.838,12,5.838z M12,16c-2.209,0-4-1.791-4-4s1.791-4,4-4s4,1.791,4,4S14.209,16,12,16z'/%3E%3Ccircle cx='18.406' cy='5.594' r='1.44'/%3E%3C/g%3E%3C/svg%3E"); } .icon-tiktok { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cpath d='M22.465,9.866c-2.139,0-4.122-0.684-5.74-1.846v8.385c0,4.188-3.407,7.594-7.594,7.594c-1.618,0-3.119-0.51-4.352-1.376 c-1.958-1.375-3.242-3.649-3.242-6.218c0-4.188,3.407-7.595,7.595-7.595c0.348,0,0.688,0.029,1.023,0.074v0.977v3.235 c-0.324-0.101-0.666-0.16-1.023-0.16c-1.912,0-3.468,1.556-3.468,3.469c0,1.332,0.756,2.489,1.86,3.07 c0.481,0.253,1.028,0.398,1.609,0.398c1.868,0,3.392-1.486,3.462-3.338L12.598,0h4.126c0,0.358,0.035,0.707,0.097,1.047 c0.291,1.572,1.224,2.921,2.517,3.764c0.9,0.587,1.974,0.93,3.126,0.93V9.866z'/%3E%3C/svg%3E"); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cpath d='M22.465,9.866c-2.139,0-4.122-0.684-5.74-1.846v8.385c0,4.188-3.407,7.594-7.594,7.594c-1.618,0-3.119-0.51-4.352-1.376 c-1.958-1.375-3.242-3.649-3.242-6.218c0-4.188,3.407-7.595,7.595-7.595c0.348,0,0.688,0.029,1.023,0.074v0.977v3.235 c-0.324-0.101-0.666-0.16-1.023-0.16c-1.912,0-3.468,1.556-3.468,3.469c0,1.332,0.756,2.489,1.86,3.07 c0.481,0.253,1.028,0.398,1.609,0.398c1.868,0,3.392-1.486,3.462-3.338L12.598,0h4.126c0,0.358,0.035,0.707,0.097,1.047 c0.291,1.572,1.224,2.921,2.517,3.764c0.9,0.587,1.974,0.93,3.126,0.93V9.866z'/%3E%3C/svg%3E"); } .icon-links { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='M7.835,16.17c-.23-.23-.446-.482-.641-.748-.325-.446-.227-1.072,.22-1.397,.446-.325,1.071-.227,1.397,.219,.129,.178,.274,.349,.437,.511,.803,.803,1.87,1.245,3.005,1.245s2.203-.442,3.005-1.245l5.5-5.5c1.657-1.657,1.657-4.354,0-6.011s-4.354-1.657-6.011,0l-1.058,1.058c-.391,.391-1.023,.391-1.414,0s-.391-1.023,0-1.414l1.058-1.058c2.437-2.438,6.402-2.438,8.839,0,2.437,2.437,2.437,6.402,0,8.839l-5.5,5.5c-1.18,1.181-2.75,1.831-4.419,1.831s-3.239-.65-4.418-1.83Zm-1.582,7.83c1.67,0,3.239-.65,4.419-1.831l1.058-1.058c.391-.39,.391-1.023,0-1.414-.39-.391-1.023-.39-1.414,0l-1.059,1.058c-.803,.803-1.87,1.245-3.005,1.245s-2.202-.442-3.005-1.245-1.245-1.87-1.245-3.005,.442-2.203,1.245-3.005l5.5-5.5c.803-.803,1.87-1.245,3.005-1.245s2.203,.442,3.005,1.245c.16,.161,.306,.332,.436,.51,.324,.447,.949,.547,1.397,.221,.447-.325,.546-.95,.221-1.397-.19-.262-.405-.513-.639-.747-1.181-1.182-2.751-1.832-4.42-1.832s-3.239,.65-4.419,1.831L1.834,13.331C.653,14.511,.003,16.081,.003,17.75c0,1.669,.65,3.239,1.831,4.419,1.18,1.181,2.749,1.831,4.419,1.831Z'/%3E%3C/svg%3E%0A") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='M7.835,16.17c-.23-.23-.446-.482-.641-.748-.325-.446-.227-1.072,.22-1.397,.446-.325,1.071-.227,1.397,.219,.129,.178,.274,.349,.437,.511,.803,.803,1.87,1.245,3.005,1.245s2.203-.442,3.005-1.245l5.5-5.5c1.657-1.657,1.657-4.354,0-6.011s-4.354-1.657-6.011,0l-1.058,1.058c-.391,.391-1.023,.391-1.414,0s-.391-1.023,0-1.414l1.058-1.058c2.437-2.438,6.402-2.438,8.839,0,2.437,2.437,2.437,6.402,0,8.839l-5.5,5.5c-1.18,1.181-2.75,1.831-4.419,1.831s-3.239-.65-4.418-1.83Zm-1.582,7.83c1.67,0,3.239-.65,4.419-1.831l1.058-1.058c.391-.39,.391-1.023,0-1.414-.39-.391-1.023-.39-1.414,0l-1.059,1.058c-.803,.803-1.87,1.245-3.005,1.245s-2.202-.442-3.005-1.245-1.245-1.87-1.245-3.005,.442-2.203,1.245-3.005l5.5-5.5c.803-.803,1.87-1.245,3.005-1.245s2.203,.442,3.005,1.245c.16,.161,.306,.332,.436,.51,.324,.447,.949,.547,1.397,.221,.447-.325,.546-.95,.221-1.397-.19-.262-.405-.513-.639-.747-1.181-1.182-2.751-1.832-4.42-1.832s-3.239,.65-4.419,1.831L1.834,13.331C.653,14.511,.003,16.081,.003,17.75c0,1.669,.65,3.239,1.831,4.419,1.18,1.181,2.749,1.831,4.419,1.831Z'/%3E%3C/svg%3E%0A") no-repeat 100% 100%; } .icon-mail { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='_01_align_center' data-name='01 align center'%3E%3Cpath d='M21,1H3A3,3,0,0,0,0,4V23H24V4A3,3,0,0,0,21,1ZM3,3H21a1,1,0,0,1,1,1v.667l-7.878,7.879a3.007,3.007,0,0,1-4.244,0L2,4.667V4A1,1,0,0,1,3,3ZM2,21V7.5L8.464,13.96a5.007,5.007,0,0,0,7.072,0L22,7.5V21Z'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='_01_align_center' data-name='01 align center'%3E%3Cpath d='M21,1H3A3,3,0,0,0,0,4V23H24V4A3,3,0,0,0,21,1ZM3,3H21a1,1,0,0,1,1,1v.667l-7.878,7.879a3.007,3.007,0,0,1-4.244,0L2,4.667V4A1,1,0,0,1,3,3ZM2,21V7.5L8.464,13.96a5.007,5.007,0,0,0,7.072,0L22,7.5V21Z'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 100% 100%; } .icon-prt { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 24 24'%3E%3Cpath d='M19,6V4a4,4,0,0,0-4-4H9A4,4,0,0,0,5,4V6a5.006,5.006,0,0,0-5,5v5a5.006,5.006,0,0,0,5,5,3,3,0,0,0,3,3h8a3,3,0,0,0,3-3,5.006,5.006,0,0,0,5-5V11A5.006,5.006,0,0,0,19,6ZM7,4A2,2,0,0,1,9,2h6a2,2,0,0,1,2,2V6H7ZM17,21a1,1,0,0,1-1,1H8a1,1,0,0,1-1-1V17a1,1,0,0,1,1-1h8a1,1,0,0,1,1,1Zm5-5a3,3,0,0,1-3,3V17a3,3,0,0,0-3-3H8a3,3,0,0,0-3,3v2a3,3,0,0,1-3-3V11A3,3,0,0,1,5,8H19a3,3,0,0,1,3,3Z'/%3E%3Cpath d='M18,10H16a1,1,0,0,0,0,2h2a1,1,0,0,0,0-2Z'/%3E%3C/svg%3E%0A") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 24 24'%3E%3Cpath d='M19,6V4a4,4,0,0,0-4-4H9A4,4,0,0,0,5,4V6a5.006,5.006,0,0,0-5,5v5a5.006,5.006,0,0,0,5,5,3,3,0,0,0,3,3h8a3,3,0,0,0,3-3,5.006,5.006,0,0,0,5-5V11A5.006,5.006,0,0,0,19,6ZM7,4A2,2,0,0,1,9,2h6a2,2,0,0,1,2,2V6H7ZM17,21a1,1,0,0,1-1,1H8a1,1,0,0,1-1-1V17a1,1,0,0,1,1-1h8a1,1,0,0,1,1,1Zm5-5a3,3,0,0,1-3,3V17a3,3,0,0,0-3-3H8a3,3,0,0,0-3,3v2a3,3,0,0,1-3-3V11A3,3,0,0,1,5,8H19a3,3,0,0,1,3,3Z'/%3E%3Cpath d='M18,10H16a1,1,0,0,0,0,2h2a1,1,0,0,0,0-2Z'/%3E%3C/svg%3E%0A") no-repeat 100% 100%; } .icon-share { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 24 24'%3E%3Cpath d='M19.333,14.667a4.66,4.66,0,0,0-3.839,2.024L8.985,13.752a4.574,4.574,0,0,0,.005-3.488l6.5-2.954a4.66,4.66,0,1,0-.827-2.643,4.633,4.633,0,0,0,.08.786L7.833,8.593a4.668,4.668,0,1,0-.015,6.827l6.928,3.128a4.736,4.736,0,0,0-.079.785,4.667,4.667,0,1,0,4.666-4.666ZM19.333,2a2.667,2.667,0,1,1-2.666,2.667A2.669,2.669,0,0,1,19.333,2ZM4.667,14.667A2.667,2.667,0,1,1,7.333,12,2.67,2.67,0,0,1,4.667,14.667ZM19.333,22A2.667,2.667,0,1,1,22,19.333,2.669,2.669,0,0,1,19.333,22Z'/%3E%3C/svg%3E%0A") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 24 24'%3E%3Cpath d='M19.333,14.667a4.66,4.66,0,0,0-3.839,2.024L8.985,13.752a4.574,4.574,0,0,0,.005-3.488l6.5-2.954a4.66,4.66,0,1,0-.827-2.643,4.633,4.633,0,0,0,.08.786L7.833,8.593a4.668,4.668,0,1,0-.015,6.827l6.928,3.128a4.736,4.736,0,0,0-.079.785,4.667,4.667,0,1,0,4.666-4.666ZM19.333,2a2.667,2.667,0,1,1-2.666,2.667A2.669,2.669,0,0,1,19.333,2ZM4.667,14.667A2.667,2.667,0,1,1,7.333,12,2.67,2.67,0,0,1,4.667,14.667ZM19.333,22A2.667,2.667,0,1,1,22,19.333,2.669,2.669,0,0,1,19.333,22Z'/%3E%3C/svg%3E%0A") no-repeat 100% 100%; } .icon-tags { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='M7.707,9.256c.391,.391,.391,1.024,0,1.414-.391,.391-1.024,.391-1.414,0-.391-.391-.391-1.024,0-1.414,.391-.391,1.024-.391,1.414,0Zm13.852,6.085l-.565,.565c-.027,1.233-.505,2.457-1.435,3.399l-3.167,3.208c-.943,.955-2.201,1.483-3.543,1.487h-.017c-1.335,0-2.59-.52-3.534-1.464L1.882,15.183c-.65-.649-.964-1.542-.864-2.453l.765-6.916c.051-.456,.404-.819,.858-.881l6.889-.942c.932-.124,1.87,.193,2.528,.851l7.475,7.412c.387,.387,.697,.823,.931,1.288,.812-1.166,.698-2.795-.342-3.835L12.531,2.302c-.229-.229-.545-.335-.851-.292l-6.889,.942c-.549,.074-1.052-.309-1.127-.855-.074-.547,.309-1.051,.855-1.126L11.409,.028c.921-.131,1.869,.191,2.528,.852l7.589,7.405c1.946,1.945,1.957,5.107,.032,7.057Zm-3.438-1.67l-7.475-7.412c-.223-.223-.536-.326-.847-.287l-6.115,.837-.679,6.14c-.033,.303,.071,.601,.287,.816l7.416,7.353c.569,.57,1.322,.881,2.123,.881h.01c.806-.002,1.561-.319,2.126-.893l3.167-3.208c1.155-1.17,1.149-3.067-.014-4.229Z'/%3E%3C/svg%3E%0A") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='M7.707,9.256c.391,.391,.391,1.024,0,1.414-.391,.391-1.024,.391-1.414,0-.391-.391-.391-1.024,0-1.414,.391-.391,1.024-.391,1.414,0Zm13.852,6.085l-.565,.565c-.027,1.233-.505,2.457-1.435,3.399l-3.167,3.208c-.943,.955-2.201,1.483-3.543,1.487h-.017c-1.335,0-2.59-.52-3.534-1.464L1.882,15.183c-.65-.649-.964-1.542-.864-2.453l.765-6.916c.051-.456,.404-.819,.858-.881l6.889-.942c.932-.124,1.87,.193,2.528,.851l7.475,7.412c.387,.387,.697,.823,.931,1.288,.812-1.166,.698-2.795-.342-3.835L12.531,2.302c-.229-.229-.545-.335-.851-.292l-6.889,.942c-.549,.074-1.052-.309-1.127-.855-.074-.547,.309-1.051,.855-1.126L11.409,.028c.921-.131,1.869,.191,2.528,.852l7.589,7.405c1.946,1.945,1.957,5.107,.032,7.057Zm-3.438-1.67l-7.475-7.412c-.223-.223-.536-.326-.847-.287l-6.115,.837-.679,6.14c-.033,.303,.071,.601,.287,.816l7.416,7.353c.569,.57,1.322,.881,2.123,.881h.01c.806-.002,1.561-.319,2.126-.893l3.167-3.208c1.155-1.17,1.149-3.067-.014-4.229Z'/%3E%3C/svg%3E%0A") no-repeat 100% 100%; } .icon-document { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='m24,5.917l-3.3,1.909,1.326,4.029-.75.523-3.261-2.521-3.275,2.532-.721-.543,1.304-4.076-3.323-1.848v-.922h4.35l1.178-4.5h.97l1.176,4.5h4.326v.917Zm-19-.917v2h5v-2h-5Zm7,4h-7v2h7v-2Zm-7,6h7v-2h-7v2Zm14,3h3v3c0,1.654-1.346,3-3,3H3.5c-1.93,0-3.5-1.57-3.5-3.5V3C0,1.346,1.346,0,3,0h11.13c-.915.507-1.716,1.189-2.366,2H3c-.551,0-1,.448-1,1v17.5c0,.827.673,1.5,1.5,1.5s1.5-.673,1.5-1.5v-2.5h12v-3.067c.327.043.661.067,1,.067s.672-.028,1-.069v3.069Zm1,2H7v.5c0,.536-.122,1.045-.338,1.5h12.338c.551,0,1-.448,1-1v-1Z'/%3E%3C/svg%3E") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='m24,5.917l-3.3,1.909,1.326,4.029-.75.523-3.261-2.521-3.275,2.532-.721-.543,1.304-4.076-3.323-1.848v-.922h4.35l1.178-4.5h.97l1.176,4.5h4.326v.917Zm-19-.917v2h5v-2h-5Zm7,4h-7v2h7v-2Zm-7,6h7v-2h-7v2Zm14,3h3v3c0,1.654-1.346,3-3,3H3.5c-1.93,0-3.5-1.57-3.5-3.5V3C0,1.346,1.346,0,3,0h11.13c-.915.507-1.716,1.189-2.366,2H3c-.551,0-1,.448-1,1v17.5c0,.827.673,1.5,1.5,1.5s1.5-.673,1.5-1.5v-2.5h12v-3.067c.327.043.661.067,1,.067s.672-.028,1-.069v3.069Zm1,2H7v.5c0,.536-.122,1.045-.338,1.5h12.338c.551,0,1-.448,1-1v-1Z'/%3E%3C/svg%3E") no-repeat 100% 100%; } .icon-fix-document { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='m18,11.845l-1,.793v6.362H5v2c0,1.103-.897,2-2,2s-2-.897-2-2V2.5c0-.827.673-1.5,1.5-1.5h12.364l.286-1H2.5C1.122,0,0,1.121,0,2.5v18.5c0,1.654,1.346,3,3,3h15.5c1.378,0,2.5-1.121,2.5-2.5v-2.5h-3v-7.155Zm2,8.155v1.5c0,.827-.673,1.5-1.5,1.5H5.234c.476-.531.766-1.232.766-2v-1h14Zm-8-9H4v-1h8v1Zm-2-5v1h-6v-1h6Zm14-2h-4.059l-1.096-4h-1.667l-1.097,4h-4.082v1.601l2.858,1.647-1.324,3.622,1.279.95,3.199-2.537,3.193,2.562,1.332-.92-1.434-3.635,2.896-1.699v-1.592Zm-4.14,2.861l1.456,3.693-.065.045-3.234-2.596-3.223,2.557-.064-.048,1.356-3.71-3.085-1.78,3.844-.022,1.097-4h.142l1.096,4h3.822l-3.14,1.861Zm-15.86,7.139h8v1H4v-1Z'/%3E%3C/svg%3E") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='m18,11.845l-1,.793v6.362H5v2c0,1.103-.897,2-2,2s-2-.897-2-2V2.5c0-.827.673-1.5,1.5-1.5h12.364l.286-1H2.5C1.122,0,0,1.121,0,2.5v18.5c0,1.654,1.346,3,3,3h15.5c1.378,0,2.5-1.121,2.5-2.5v-2.5h-3v-7.155Zm2,8.155v1.5c0,.827-.673,1.5-1.5,1.5H5.234c.476-.531.766-1.232.766-2v-1h14Zm-8-9H4v-1h8v1Zm-2-5v1h-6v-1h6Zm14-2h-4.059l-1.096-4h-1.667l-1.097,4h-4.082v1.601l2.858,1.647-1.324,3.622,1.279.95,3.199-2.537,3.193,2.562,1.332-.92-1.434-3.635,2.896-1.699v-1.592Zm-4.14,2.861l1.456,3.693-.065.045-3.234-2.596-3.223,2.557-.064-.048,1.356-3.71-3.085-1.78,3.844-.022,1.097-4h.142l1.096,4h3.822l-3.14,1.861Zm-15.86,7.139h8v1H4v-1Z'/%3E%3C/svg%3E") no-repeat 100% 100%; } .icon-folder { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='M21.5,3h-6.382L11.118,1H5.5c-1.378,0-2.5,1.121-2.5,2.5V20H24V5.5c0-1.379-1.121-2.5-2.5-2.5ZM5.5,2h5.382l4,2h6.618c.827,0,1.5,.673,1.5,1.5v1.5H4V3.5c0-.827,.673-1.5,1.5-1.5Zm-1.5,17V8H23v11H4Zm-3,3H20v1H0V8c0-.885,.387-1.676,1-2.222V22Z'/%3E%3C/svg%3E%0A") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='M21.5,3h-6.382L11.118,1H5.5c-1.378,0-2.5,1.121-2.5,2.5V20H24V5.5c0-1.379-1.121-2.5-2.5-2.5ZM5.5,2h5.382l4,2h6.618c.827,0,1.5,.673,1.5,1.5v1.5H4V3.5c0-.827,.673-1.5,1.5-1.5Zm-1.5,17V8H23v11H4Zm-3,3H20v1H0V8c0-.885,.387-1.676,1-2.222V22Z'/%3E%3C/svg%3E%0A") no-repeat 100% 100%; } .icon-plus { mask: url("data:image/svg+xml,%3Csvg id='Layer_1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' data-name='Layer 1'%3E%3Cpath d='m12 0a12 12 0 1 0 12 12 12.013 12.013 0 0 0 -12-12zm0 22a10 10 0 1 1 10-10 10.011 10.011 0 0 1 -10 10zm1-11h4v2h-4v4h-2v-4h-4v-2h4v-4h2z'/%3E%3C/svg%3E") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg id='Layer_1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' data-name='Layer 1'%3E%3Cpath d='m12 0a12 12 0 1 0 12 12 12.013 12.013 0 0 0 -12-12zm0 22a10 10 0 1 1 10-10 10.011 10.011 0 0 1 -10 10zm1-11h4v2h-4v4h-2v-4h-4v-2h4v-4h2z'/%3E%3C/svg%3E") no-repeat 100% 100%; } .icon-arrow-circle { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='arrow-circle-down' viewBox='0 0 24 24'%3E%3Cpath d='M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12,12-5.383,12-12S18.617,0,12,0Zm0,23c-6.065,0-11-4.935-11-11S5.935,1,12,1s11,4.935,11,11-4.935,11-11,11Zm5.522-12.154c.636,.636,.636,1.671,0,2.308l-4.803,4.803-.707-.707,4.75-4.75H6v-1h10.762l-4.75-4.75,.707-.707,4.803,4.803Z'/%3E%3C/svg%3E%0A") no-repeat 100% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='arrow-circle-down' viewBox='0 0 24 24'%3E%3Cpath d='M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12,12-5.383,12-12S18.617,0,12,0Zm0,23c-6.065,0-11-4.935-11-11S5.935,1,12,1s11,4.935,11,11-4.935,11-11,11Zm5.522-12.154c.636,.636,.636,1.671,0,2.308l-4.803,4.803-.707-.707,4.75-4.75H6v-1h10.762l-4.75-4.75,.707-.707,4.803,4.803Z'/%3E%3C/svg%3E%0A") no-repeat 100% 100%; } .icon-top { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='_01_align_center' data-name='01 align center'%3E%3Cpath d='M22.586,18.148,12.707,8.269a1.021,1.021,0,0,0-1.414,0L1.42,18.142.006,16.728,9.879,6.855a3.073,3.073,0,0,1,4.243,0L24,16.734Z'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='_01_align_center' data-name='01 align center'%3E%3Cpath d='M22.586,18.148,12.707,8.269a1.021,1.021,0,0,0-1.414,0L1.42,18.142.006,16.728,9.879,6.855a3.073,3.073,0,0,1,4.243,0L24,16.734Z'/%3E%3C/g%3E%3C/svg%3E"); } /* Icon Size */ .icon-s10 { width: 0.625rem; height: 0.625rem; } .icon-s12 { width: 0.75rem; height: 0.75rem; } .icon-s14 { width: 0.875rem; height: 0.875rem; } .icon-s16 { width: 1rem; height: 1rem; } .icon-s18 { width: 1.125rem; height: 1.125rem; } .icon-s20 { width: 1.25rem; height: 1.25rem; } .icon-s22 { width: 1.375rem; height: 1.375rem; } .icon-s24 { width: 1.5rem; height: 1.5rem; } .icon-s26 { width: 1.625rem; height: 1.625rem; } .icon-s28 { width: 1.75rem; height: 1.75rem; } .icon-s30 { width: 1.875rem; height: 1.875rem; } .icon-s32 { width: 2rem; height: 2rem; } .icon-s34 { width: 2.125rem; height: 2.125rem; } .icon-s36 { width: 2.25rem; height: 2.25rem; } .icon-s38 { width: 2.375rem; height: 2.375rem; } .icon-s40 { width: 2.5rem; height: 2.5rem; } .icon-s42 { width: 2.625rem; height: 2.625rem; } .icon-s52 { width: 3.25rem; height: 3.25rem; } .icon-s90 { width: 5.625rem; height: 5.625rem; } .icon-s128 { width: 8rem; height: 8rem; } /* Icon Animation */ .icon-animation:hover i, .icon-animation:hover svg { animation: bell 1s infinite; } @keyframes bell { 0% { rotate: 0deg; } 10% { rotate: 10deg; } 20% { rotate: -10deg; } 30% { rotate: 0deg; } 40% { rotate: 5deg; } 50% { rotate: -5deg; } 60% { rotate: 0deg; } } /* Reset */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, body, header, section, footer, aside, nav, main, article, figure, figcaption, mark, summary, time, details, table, tbody, tfoot, thead, tr, th, td, canvas, label, ol, ul, li, a, img, p, em, span, i, input, textarea, select, button { margin: 0; padding: 0; font-family: "BeVietnamPro-Regular", sans-serif; font-size: 100%; line-height: 1; color: #000; } h1, h2, h3, h4, h5, h6, b, strong { margin: 0; padding: 0; font-family: "BeVietnamPro-SemiBold", sans-serif; font-size: 100%; line-height: 1; color: #000; } input, textarea, select, button { border: none; background: transparent; outline: none; cursor: pointer; } input::placeholder { color: #999; -webkit-text-security: none; } input:-ms-input-placeholder { color: #999; -webkit-text-security: none; } input::-ms-input-placeholder { color: #999; -webkit-text-security: none; } a, img, button, .icon-grp, .uk-navbar-nav > * > *:before, li:hover span, .dhd-icon-document, .dhd-icon-more-document { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .uk-grid-divider > :not(.uk-first-column)::before, .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, hr, .uk-hr { border-color: #aaa !important; } .uk-offcanvas-overlay.uk-open:before, .uk-lightbox.uk-open { background: rgba(0, 0, 0, 0.75); } .uk-thumbnav > * > *:after { content: ""; margin: 0 !important; position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.75) !important; color: #fff; z-index: 9; transform: none !important; } .uk-light .uk-slidenav, .uk-section-primary:not(.uk-preserve-color) .uk-slidenav, .uk-section-secondary:not(.uk-preserve-color) .uk-slidenav, .uk-overlay-primary .uk-slidenav, .uk-offcanvas-bar .uk-slidenav { background-color: rgba(211, 13, 38, 0.75); color: #fff; } .uk-light .uk-slidenav:hover, .uk-section-primary:not(.uk-preserve-color) .uk-slidenav:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-slidenav:hover, .uk-overlay-primary .uk-slidenav:hover, .uk-offcanvas-bar .uk-slidenav:hover { color: #fff; } @media (hover: none) { .uk-light .uk-slidenav:hover, .uk-section-primary:not(.uk-preserve-color) .uk-slidenav:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-slidenav:hover, .uk-overlay-primary .uk-slidenav:hover, .uk-offcanvas-bar .uk-slidenav:hover { color: #d30d26; } } .uk-close { width: 2rem; height: 2rem; background-color: #d30d26 !important; color: #fff !important; border-radius: 50% !important; } /* Funeral 1 body { filter: grayscale(100%); } */ /* Funeral 2 #vnn-hd { .vnn-mid-hd .vnn-logo, .vnn-bot-hd { filter: grayscale(100%); } } */ /* Radius */ .radius-3 { border-radius: 0.188rem; } .radius-6 { border-radius: 0.375rem; } .radius-12 { border-radius: 0.75rem; } .radius-24 { border-radius: 1.5rem; } .radius-32 { border-radius: 2rem; } .radius-48 { border-radius: 3rem; } .radius-percent-50 { border-radius: 50%; } /* Button */ .btn { display: flex; align-items: center; min-height: 2rem; line-height: 1.875rem; padding: 0 1.25rem; border: solid 0.063rem #aaa; text-decoration: none !important; } .btn-bg-red, .btn-bg-green, .btn-bg-blue, .btn-bg-orange { color: #fff; } .btn-bg-red .icon-grp, .btn-bg-green .icon-grp, .btn-bg-blue .icon-grp, .btn-bg-orange .icon-grp { background-color: #fff; } .btn { text-decoration: underline; } .btn .icon-grp { position: relative; top: 0.063rem; background-color: #000; } .btn .icon-grp-right { margin-left: 0.5rem; } .btn-large { min-height: 2.375rem; line-height: 2.375rem; } .btn-grey { border-color: #e9e9e9; color: #000; } .btn-grey .icon-grp { background-color: #000; } .btn-bg-grey { background-color: #e9e9e9; border-color: #e9e9e9; color: #000; } .btn-bg-grey .icon-grp { background-color: #000; } .btn-red { border-color: #d90000; color: #d90000; } .btn-red .icon-grp { background-color: #d90000; } .btn-bg-red { background-color: #d90000; border-color: #d90000; } .btn-green { border-color: #00ab00; color: #00ab00; } .btn-green .icon-grp { background-color: #00ab00; } .btn-bg-green { background-color: #00ab00; border-color: #00ab00; color: #fff; } .btn-blue { border-color: #064b93; color: #064b93; } .btn-blue .icon-grp { background-color: #064b93; } .btn-bg-blue { background-color: #064b93; border-color: #064b93; color: #fff; } .btn-orange { border-color: #ff7c00; color: #ff7c00; } .btn-orange .icon-grp { background-color: #ff7c00; } .btn-bg-orange { background-color: #ff7c00; border-color: #ff7c00; color: #fff; } /* Css Responsive */ @media only screen and (max-width: 640px) { .btn, .btn-large { line-height: 1.4; } } /* Card */ .card { background-color: #fff; overflow: hidden; } .card-border { border: solid 0.063rem #aaa; } .card-shadow { box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.05); } /* Aspect Ratio */ .thumb-img { display: flex; align-items: flex-start; justify-content: center; width: 100%; height: 100%; background-color: #e9e9e9; position: relative; overflow: hidden; /* Fix chiều cao của ảnh */ /* Chiều rộng + cao = auto và không vượt quá khung */ } .thumb-img img { position: relative; width: 100%; min-height: 100%; transition: transform 0.8s; max-width: none; z-index: 1; } .thumb-img img:hover { transform: scale(1.1); } @media (hover: none) { .thumb-img img:hover { transform: none; transition: none; } } .thumb-img img.lazyload { opacity: 0; transition: opacity 0.5s ease-in-out; } .thumb-img img:not(.lazyload) { opacity: 1; } .thumb-img:before { content: ""; width: 2.625rem; height: 2.625rem; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -55%); background-image: url("data:image/svg+xml,%3Csvg fill='%23999' viewBox='-4.5 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Epicture%3C/title%3E%3Cpath d='M22.080 7.84h-21.2c-0.48 0-0.84 0.36-0.84 0.84v14.6c0 0.48 0.36 0.84 0.84 0.84h21.24c0.48 0 0.84-0.36 0.84-0.84v-14.6c-0.040-0.44-0.36-0.84-0.88-0.84zM21.24 9.52v6.72l-6.2 1.84-6.6-6.56c-0.28-0.28-0.76-0.32-1.080-0.080l-5.68 4.24v-6.16h19.56zM1.68 22.48v-4.72l6.080-4.56 6.44 6.44c0.16 0.16 0.36 0.24 0.6 0.24 0.080 0 0.16 0 0.24-0.040l6.2-1.84v4.48h-19.56zM16.64 15.64c1.28 0 2.36-1.040 2.36-2.36s-1.040-2.36-2.36-2.36-2.36 1.040-2.36 2.36 1.12 2.36 2.36 2.36zM16.64 12.6c0.36 0 0.68 0.32 0.68 0.68s-0.32 0.68-0.68 0.68-0.68-0.32-0.68-0.68 0.36-0.68 0.68-0.68z'%3E%3C/path%3E%3C/svg%3E"); } .thumb-img:after { content: "No image"; color: #999; font-size: 0.875rem; white-space: nowrap; margin-top: 1.875rem; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -55%); } .thumb-img-4x3 { aspect-ratio: 4 / 3; } .thumb-img-3x2 { aspect-ratio: 3 / 2; } .thumb-img-16x9 { aspect-ratio: 16 / 9; } .thumb-img-9x16 { aspect-ratio: 9 / 16; } .thumb-img-height { aspect-ratio: 2 / 3; } .thumb-img-fix-height img { width: auto; height: 100%; } .thumb-img-auto img { width: auto; height: auto; min-height: auto; max-width: 100%; max-height: 100%; } .thumb-img-left, .thumb-img-right { width: 260px; } .thumb-img-small-left, .thumb-img-small-right { width: 190px; } .thumb-img-left, .thumb-img-small-left { float: left; margin-right: 1.25rem; } .thumb-img-right, .thumb-img-small-right { float: right; margin-left: 1.25rem; } /* Meta Data */ .meta-data-sub { display: inline-block; color: #d30d26; text-transform: capitalize; } .meta-data-sub:hover { color: #d30d26; } @media (hover: none) { .meta-data-sub:hover { color: #d30d26; } } .meta-data-tit { margin: 0; } .meta-data-tit a { display: inherit; color: #000; } .meta-data-tit a:hover { text-decoration: none; color: #d30d26; } @media (hover: none) { .meta-data-tit a:hover { color: #000; } } .meta-data-tit a .icon-grp { top: 0.125rem; margin-right: 0.625rem; background-color: #d90000; } .meta-data-tit a span { color: #d90000; margin-right: 0.313rem; } .meta-data-source { display: inline-block; font-size: 0.875rem; color: #999; line-height: 1.2; position: relative; padding-left: 1.25rem; } .meta-data-source .icon-grp { position: absolute; left: 0; top: 0; margin-right: 0.5rem; background-color: #999; } .meta-data-source .uk-icon { position: absolute; left: 0; top: 0; margin-right: 0.5rem; } .meta-data-des { color: #333; line-height: 1.5; } .uk-overlay { z-index: 9; background: black; background: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0.7511379552) 50%, rgba(0, 0, 0, 0) 100%); border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; } .uk-overlay .meta-data-tit a { color: #fff; } .uk-overlay .meta-data-tit a:hover { color: #d30d26; } @media (hover: none) { .uk-overlay .meta-data-tit a:hover { color: #fff; } } /* Header */ #dhd-hd .dhd-top-hd { padding: 0.625rem 0; } #dhd-hd .dhd-top-hd time { font-size: 0.875rem; color: #666; } #dhd-hd .dhd-top-hd .dhd-lang ul { display: flex; gap: 0.938rem; margin: 0; padding: 0; } #dhd-hd .dhd-top-hd .dhd-lang ul li { list-style: none; } #dhd-hd .dhd-top-hd .dhd-lang ul li a { font-size: 0.875rem; color: #666; } #dhd-hd .dhd-top-hd .dhd-lang ul li.uk-active a, #dhd-hd .dhd-top-hd .dhd-lang ul li:hover a { color: #d30d26; } #dhd-hd .dhd-mid-hd .dhd-banner-hd img { width: 100%; } #dhd-hd .dhd-bot-hd { background-color: #f5a623; } #dhd-hd .dhd-bot-hd .dhd-logo { display: flex; height: 3.25rem; position: relative; top: 0.625rem; background-image: url(../images/logo-14-white.png); background-repeat: no-repeat; } #dhd-hd .dhd-bot-hd .dhd-logo-1 { width: 180px; background-size: 220px 305px; background-position: 0.313rem 0.313rem; } #dhd-hd .dhd-bot-hd .dhd-logo-2 { width: 202px; background-size: 220px 305px; background-position: 0.313rem -47px; } #dhd-hd .dhd-bot-hd .dhd-logo-3 { width: 202px; background-size: 220px 305px; background-position: 0.313rem -98px; } #dhd-hd .dhd-bot-hd .dhd-logo-4 { width: 180px; background-size: 220px 305px; background-position: 0.313rem -150px; } #dhd-hd .dhd-bot-hd .dhd-logo-5 { width: 195px; background-size: 220px 305px; background-position: 0.313rem -202px; } #dhd-hd .dhd-bot-hd .dhd-logo-6 { width: 195px; background-size: 220px 305px; background-position: 0.313rem -258px; } #dhd-hd .dhd-bot-hd .uk-navbar-nav { gap: 0; } #dhd-hd .dhd-bot-hd .uk-navbar-nav > li > a { padding: 0 2.188rem; min-height: 4.375rem; font-size: 1.25rem; font-family: "BarlowCondensed-SemiBold", sans-serif; line-height: 1.4; color: #fff; text-align: center; text-shadow: 0.063rem 0.063rem 0 rgba(0, 0, 0, 0.35); position: relative; } #dhd-hd .dhd-bot-hd .uk-navbar-nav > li > a:before { content: "/"; position: absolute; top: 1.25rem; left: -0.25rem; color: #fff; font-size: 1.25rem; } #dhd-hd .dhd-bot-hd .uk-navbar-nav > li.uk-active > a:after, #dhd-hd .dhd-bot-hd .uk-navbar-nav > li:hover > a:after { content: ""; position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.15); transform: skew(-22deg); } #dhd-hd .dhd-bot-hd .uk-navbar-nav > li .uk-navbar-dropdown { background-color: transparent; box-shadow: none; } #dhd-hd .dhd-bot-hd .uk-navbar-nav > li .uk-navbar-dropdown ul { background-color: #f1b226; position: relative; left: -0.938rem; } #dhd-hd .dhd-bot-hd .uk-navbar-nav > li .uk-navbar-dropdown ul > li > a { padding: 0.938rem 0.938rem 0.75rem; color: #fff; font-family: "BeVietnamPro-Medium", sans-serif; font-size: 0.75rem; text-transform: uppercase; } #dhd-hd .dhd-bot-hd .uk-navbar-nav > li .uk-navbar-dropdown ul > li:hover > a { padding-left: 1.25rem; background-color: #f5a623; } #dhd-hd .dhd-bot-hd .uk-navbar-nav > li .uk-navbar-dropdown ul > li:nth-child(n+2) { border-top: solid 0.063rem rgba(255, 255, 255, 0.35); } #dhd-hd .dhd-bot-hd .uk-search { max-width: 200px; } #dhd-hd .dhd-bot-hd .uk-search .uk-search-input { border: none; background-color: #fff; font-size: 0.875rem; } #dhd-hd .dhd-bot-hd .uk-search .uk-search-icon { color: #f5a623; } #dhd-hd .dhd-bot-hd .dhd-menu-mb .dhd-btn-menu-mb { display: grid; place-items: center; width: 2rem; height: 2rem; background-color: #d30d26; border-radius: 50%; } #dhd-hd .dhd-bot-hd .dhd-menu-mb .dhd-btn-menu-mb .icon-grp { background-color: #fff; } #dhd-hd .dhd-bot-hd .dhd-menu-mb .uk-offcanvas-bar { padding-top: 2.625rem; background-color: #fff; } #dhd-hd .dhd-bot-hd .dhd-menu-mb .uk-offcanvas-bar .uk-search .uk-search-input { background-color: #f5f5f5; } #dhd-hd .dhd-bot-hd .dhd-menu-mb .uk-offcanvas-bar .uk-list li a { color: #000; font-family: "BarlowCondensed-SemiBold", sans-serif; font-size: 1.125rem; text-transform: uppercase; } #dhd-hd .dhd-bot-hd .dhd-menu-mb .uk-offcanvas-bar .uk-list li.uk-active a { color: #d30d26; } #dhd-hd .dhd-bot-hd .dhd-menu-mb .uk-offcanvas-bar .uk-list .uk-list { margin: 0.938rem 0 0 0.938rem; } #dhd-hd .dhd-bot-hd .dhd-menu-mb .uk-offcanvas-bar .uk-list .uk-list li a { font-family: "BeVietnamPro-Medium", sans-serif; font-size: 0.75rem; } /* Css Responsive */ @media only screen and (max-width: 960px) { #dhd-hd .dhd-bot-hd .dhd-logo { height: 2rem; } #dhd-hd .dhd-bot-hd .dhd-logo-1 { width: 7.813rem; background-size: 150px 165px; background-position: 0.313rem 0.313rem; } #dhd-hd .dhd-bot-hd .dhd-logo-2 { width: 140px; background-size: 145px 200px; background-position: 0.313rem -32px; } #dhd-hd .dhd-bot-hd .dhd-logo-3 { width: 140px; background-size: 145px 200px; background-position: 0.313rem -65px; } #dhd-hd .dhd-bot-hd .dhd-logo-4 { width: 123px; background-size: 145px 200px; background-position: 0.313rem -98px; } #dhd-hd .dhd-bot-hd .dhd-logo-5 { width: 135px; background-size: 145px 200px; background-position: 0.313rem -132px; } #dhd-hd .dhd-bot-hd .dhd-logo-6 { width: 135px; background-size: 145px 200px; background-position: 0.313rem -170px; } } /* General */ .dhd-operate .dhd-ct-operate .dhd-item-operate-1 .dhd-thumb-operate, .dhd-operate .dhd-ct-operate .dhd-item-operate-2 .dhd-thumb-operate { padding: 0.313rem; background-color: #fff; box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.15); } .dhd-operate .dhd-ct-operate .dhd-item-operate-1 p, .dhd-operate .dhd-ct-operate .dhd-item-operate-2 p { display: flex; flex-direction: column; width: 100%; margin: 0.938rem 0 0; font-family: "BeVietnamPro-Medium", sans-serif; line-height: 1.5; text-align: center; } .dhd-operate .dhd-ct-operate .dhd-item-operate-1 p em, .dhd-operate .dhd-ct-operate .dhd-item-operate-2 p em { margin-top: 0.313rem; color: #000; font-style: normal; font-size: 1rem; } .dhd-operate .dhd-ct-operate .dhd-item-operate-1 .dhd-thumb-operate .thumb-img:before, .dhd-operate .dhd-ct-operate .dhd-item-operate-2 .dhd-thumb-operate .thumb-img:before, .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-list-member .dhd-item-list-member .dhd-thumb-member .thumb-img:before, .dhd-block-user .dhd-avt-user .dhd-thumb-user:before { top: 50%; transform: translate(-50%, -50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' fill='%23999' xml:space='preserve'%3E%3Cg%3E%3Ccircle cx='256' cy='128' r='128'/%3E%3Cpath d='M256,298.667c-105.99,0.118-191.882,86.01-192,192C64,502.449,73.551,512,85.333,512h341.333 c11.782,0,21.333-9.551,21.333-21.333C447.882,384.677,361.99,298.784,256,298.667z'/%3E%3C/g%3E%3C/svg%3E%0A"); } .dhd-operate .dhd-ct-operate .dhd-item-operate-1 .dhd-thumb-operate .thumb-img:after, .dhd-operate .dhd-ct-operate .dhd-item-operate-2 .dhd-thumb-operate .thumb-img:after, .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-list-member .dhd-item-list-member .dhd-thumb-member .thumb-img:after, .dhd-block-user .dhd-avt-user .dhd-thumb-user:after { display: none; } /* End General */ /* Wrapper */ #dhd-wrp .dhd-row { padding: 3.75rem 0; } #dhd-wrp .dhd-fix-row { position: relative; } #dhd-wrp .dhd-fix-row:before { content: ""; height: 7.5rem; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; background: #ffffff; background: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%); } #dhd-wrp .dhd-fix-row:after { content: ""; position: absolute; inset: 0; opacity: 0.1; } #dhd-wrp .dhd-fix-row-1:before { bottom: -0.188rem; } #dhd-wrp .dhd-fix-row-1:after { background: linear-gradient(180deg, transparent 0 25%, #FFF 70% 100%), url(../images/bg-row-1.jpg) top center no-repeat; background-size: cover; background-attachment: fixed; filter: blur(0.125rem); } #dhd-wrp .dhd-fix-row-2:after { background: linear-gradient(180deg, transparent 0 25%, #FFF 70% 100%), url(../images/bg-row-2.jpg) top center no-repeat; background-size: cover; background-attachment: fixed; } #dhd-wrp .dhd-fix-row-3:before { display: none; } #dhd-wrp .dhd-fix-row-3:after { background: #fffaeb url(../images/trong-dong.png) top center no-repeat; background-size: cover; background-position: center; background-attachment: fixed; opacity: 1; } #dhd-wrp .dhd-block-cate { display: inline-block; width: 100%; position: relative; z-index: 9; } #dhd-wrp .dhd-block-cate .dhd-menu-cate h2 { display: flex; justify-content: center; padding-top: 3.25rem; position: relative; margin-bottom: 0; text-align: center; } #dhd-wrp .dhd-block-cate .dhd-menu-cate h2 .dhd-icon-menu { position: absolute; top: 0; width: 200px; height: 2rem; background: url(../images/dhd-icon.png) center no-repeat; } #dhd-wrp .dhd-block-cate .dhd-menu-cate h2 .dhd-icon-menu:before, #dhd-wrp .dhd-block-cate .dhd-menu-cate h2 .dhd-icon-menu:after { content: ""; display: flex; width: 3.25rem; height: 0.063rem; background-color: #d30d26; position: absolute; top: 0.75rem; } #dhd-wrp .dhd-block-cate .dhd-menu-cate h2 .dhd-icon-menu:before { left: 0; } #dhd-wrp .dhd-block-cate .dhd-menu-cate h2 .dhd-icon-menu:after { right: 0; } #dhd-wrp .dhd-block-cate .dhd-menu-cate h2 a { color: #d30d26; font-size: 3.25rem; font-family: "BarlowCondensed-SemiBold", sans-serif; text-transform: uppercase; text-decoration: none; } #dhd-wrp .dhd-block-cate .dhd-fix-menu-cate h2 a { font-size: 2.25rem; } #dhd-wrp .dhd-block-cate .dhd-ct-cate { margin-top: 3.75rem; } #dhd-wrp .dhd-block-cate .dhd-ct-cate.dhd-fix-ct-cate { margin-top: 2.5rem; } .dhd-tab-slider .uk-slider-items > div .dhd-items-slider { display: flex; padding: 0 0 0.625rem 0.313rem; } .dhd-tab-slider .uk-slider-items > div .dhd-items-slider .dhd-ct-items-slider { width: 100%; position: relative; margin-bottom: -0.125rem; padding: 5.938rem 1.25rem 1.25rem; border-left: dashed 0.125rem #aaa; border-bottom: solid 0.313rem #aaa; border-top-left-radius: 3.125rem; text-decoration: none; } .dhd-tab-slider .uk-slider-items > div .dhd-items-slider .dhd-ct-items-slider:after { content: ""; position: absolute; left: -0.438rem; bottom: -0.438rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background-color: #d30d26; } .dhd-tab-slider .uk-slider-items > div .dhd-items-slider .dhd-ct-items-slider .dhd-user-slider { gap: 1.25rem; position: absolute; top: 0; left: 0; } .dhd-tab-slider .uk-slider-items > div .dhd-items-slider .dhd-ct-items-slider .dhd-user-slider .dhd-avt-user { width: 4.875rem; height: 4.875rem; border: solid 0.125rem #aaa; border-radius: 50%; overflow: hidden; } .dhd-tab-slider .uk-slider-items > div .dhd-items-slider .dhd-ct-items-slider .dhd-user-slider .dhd-avt-user img { width: 100%; } .dhd-tab-slider .uk-slider-items > div .dhd-items-slider .dhd-ct-items-slider .dhd-user-slider em { padding: 0.188rem 0.938rem; font-family: "BarlowCondensed-SemiBold", sans-serif; font-size: 1.625rem; font-style: normal; color: #000; background-color: transparent; border-radius: 1.5rem; } .dhd-tab-slider .uk-slider-items > div .dhd-items-slider .dhd-ct-items-slider .dhd-info-slider h4 { margin: 0; font-family: "BarlowCondensed-SemiBold", sans-serif; font-size: 1.375rem; } .dhd-tab-slider .uk-slider-items > div .dhd-items-slider .dhd-ct-items-slider .dhd-info-slider p { margin: 0.625rem 0 0; font-size: 0.875rem; color: #666; line-height: 1.5; } .dhd-tab-slider .uk-slider-items > div.uk-active .dhd-ct-items-slider, .dhd-tab-slider .uk-slider-items > div:hover .dhd-ct-items-slider { border-color: #d30d26; } .dhd-tab-slider .uk-slider-items > div.uk-active .dhd-ct-items-slider:after, .dhd-tab-slider .uk-slider-items > div:hover .dhd-ct-items-slider:after { background-color: #d30d26; } .dhd-tab-slider .uk-slider-items > div.uk-active .dhd-ct-items-slider .dhd-user-slider .dhd-avt-user, .dhd-tab-slider .uk-slider-items > div:hover .dhd-ct-items-slider .dhd-user-slider .dhd-avt-user { border-color: #d30d26; } .dhd-tab-slider .uk-slider-items > div.uk-active .dhd-ct-items-slider .dhd-user-slider em, .dhd-tab-slider .uk-slider-items > div:hover .dhd-ct-items-slider .dhd-user-slider em { color: #fff; background-color: #d30d26; } .dhd-ct-slider { margin-top: 3.75rem; } .dhd-ct-slider .dhd-block-congress h4.dhd-tt-congress { display: flex; flex-wrap: wrap; padding-bottom: 1.875rem; font-size: 4.125rem; font-family: "BarlowCondensed-SemiBold", sans-serif; line-height: 1.2; color: #d30d26; text-transform: uppercase; position: relative; } .dhd-ct-slider .dhd-block-congress h4.dhd-tt-congress:after { content: ""; position: absolute; width: 3.125rem; height: 0.125rem; background-color: #d30d26; bottom: 0; left: 0; } .dhd-ct-slider .dhd-block-congress h4.dhd-tt-congress span { width: 100%; margin-top: 0.313rem; font-size: 3.25rem; font-family: "BarlowCondensed-Regular", sans-serif; color: #666; } .dhd-ct-slider .dhd-block-congress .dhd-list-congress ul.uk-list { margin: 0; } .dhd-ct-slider .dhd-block-congress .dhd-list-congress ul.uk-list li { padding-left: 1.875rem; position: relative; line-height: 1.5; } .dhd-ct-slider .dhd-block-congress .dhd-list-congress ul.uk-list li span { position: absolute; left: 0; } .dhd-ct-slider .dhd-block-congress .dhd-list-congress ul.uk-list li span .icon-grp { top: 0.188rem; background-color: #d30d26; } .dhd-ct-slider .dhd-block-congress .dhd-user-congress { padding: 1.25rem; background-color: #f5f5f5; } .dhd-ct-slider .dhd-block-congress .dhd-user-congress ul.uk-list { margin: 0; } .dhd-ct-slider .dhd-block-congress .dhd-user-congress ul.uk-list > li > a { display: inline-block; width: 100%; text-decoration: none; } .dhd-ct-slider .dhd-block-congress .dhd-user-congress ul.uk-list > li > a .dhd-thumb-img { padding: 0.313rem; width: 7.5rem; height: 9.375rem; background-color: #fff; } .dhd-ct-slider .dhd-block-congress .dhd-user-congress ul.uk-list > li > a p { display: flex; flex-wrap: wrap; margin: 0.625rem 0 0; font-size: 1.375rem; font-family: "BarlowCondensed-SemiBold", sans-serif; line-height: 1.5; } .dhd-ct-slider .dhd-block-congress .dhd-user-congress ul.uk-list > li > a p em { width: 100%; font-size: 0.75rem; font-style: normal; line-height: 1.5; color: #000; } .dhd-ct-slider .dhd-block-congress .dhd-user-congress ul.uk-list > li > a p i { display: inline-block; width: 100%; margin-top: 0.5rem; font-size: 0.75rem; color: #d30d26; text-transform: uppercase; font-style: normal; } .dhd-ct-slider .dhd-block-congress .dhd-user-congress ul.uk-list > li > a:hover p { color: #d30d26; } .dhd-ct-slider .dhd-info-congress .dhd-tt-info-congress { font-size: 2.25rem; font-family: "BarlowCondensed-SemiBold", sans-serif; text-transform: uppercase; } .dhd-ct-slider .dhd-info-congress .dhd-ct-info-congress { margin-top: 1.875rem; } .dhd-ct-slider .dhd-info-congress .dhd-ct-info-congress .lr-pic[style*="right"], .dhd-ct-slider .dhd-info-congress .dhd-ct-info-congress .lr-pic[style*="left"] { max-width: 400px; margin-bottom: 0.938rem; } .dhd-ct-slider .dhd-info-congress .dhd-ct-info-congress .lr-pic[style*="right"] .lr-caption, .dhd-ct-slider .dhd-info-congress .dhd-ct-info-congress .lr-pic[style*="left"] .lr-caption { margin-top: 0.938rem; color: darkblue; font-size: 0.875rem; line-height: 1.6; } .dhd-ct-slider .dhd-info-congress .dhd-ct-info-congress .lr-pic[style*="right"] { margin-left: 1.875rem; } .dhd-ct-slider .dhd-info-congress .dhd-ct-info-congress .lr-pic[style*="left"] { margin-right: 1.875rem; } .dhd-ct-slider .dhd-info-congress .dhd-ct-info-congress figure { float: right; margin: 0 0 0.625rem 1.875rem; max-width: 320px; } .dhd-ct-slider .dhd-info-congress .dhd-ct-info-congress figure figcaption { margin-top: 0.938rem; text-align: right; color: darkblue; font-size: 0.875rem; line-height: 1.6; } .dhd-ct-slider .dhd-info-congress .dhd-ct-info-congress p { line-height: 1.6; text-align: justify; } .dhd-ct-slider .dhd-info-congress .dhd-ct-info-congress p:last-child { margin-bottom: 0; } .dhd-operate h3 { margin: 0; font-size: 2.25rem; font-family: "BarlowCondensed-SemiBold", sans-serif; text-transform: uppercase; color: #000; } .dhd-operate .dhd-ct-operate { margin-top: 1.875rem; } .dhd-operate .dhd-ct-operate .dhd-item-operate-1 { text-decoration: none; } .dhd-operate .dhd-ct-operate .dhd-item-operate-1 .dhd-thumb-operate { width: 12.5rem; height: 15.625rem; } .dhd-operate .dhd-ct-operate .dhd-item-operate-1 .dhd-thumb-operate .thumb-img:before { width: 3.875rem; height: 3.875rem; } .dhd-operate .dhd-ct-operate .dhd-item-operate-1 p { font-size: 1.125rem; } .dhd-operate .dhd-ct-operate .dhd-item-operate-1 i { display: inline-block; width: 100%; margin-top: 0.625rem; color: #d30d26; font-size: 0.75rem; font-style: normal; text-align: center; text-transform: uppercase; } .dhd-operate .dhd-ct-operate .dhd-item-operate-1:hover p { color: #d30d26; } .dhd-operate .dhd-ct-operate .dhd-item-operate-2 { text-decoration: none; } .dhd-operate .dhd-ct-operate .dhd-item-operate-2 .dhd-thumb-operate { width: 7.5rem; height: 9.375rem; } .dhd-operate .dhd-ct-operate .dhd-item-operate-2 p { font-size: 0.875rem; } .dhd-operate .dhd-ct-operate .dhd-item-operate-2 i { display: inline-block; width: 100%; margin-top: 0.625rem; color: #d30d26; font-size: 0.75rem; font-style: normal; text-align: center; text-transform: uppercase; } .dhd-operate .dhd-ct-operate .dhd-item-operate-2:hover p { color: #d30d26; } .dhd-operate .dhd-ct-operate .dhd-btn { display: flex; justify-content: center; color: #d30d26; border-color: #d30d26; } .dhd-operate .dhd-ct-operate .dhd-btn .icon-grp { background-color: #d30d26; } .dhd-operate .dhd-ct-operate .dhd-btn.uk-active, .dhd-operate .dhd-ct-operate .dhd-btn:hover { color: #fff; background-color: #d30d26; } .dhd-operate .dhd-ct-operate .dhd-btn.uk-active .icon-grp, .dhd-operate .dhd-ct-operate .dhd-btn:hover .icon-grp { background-color: #fff; } .dhd-operate .dhd-ct-operate .dhd-member-block { padding: 1.25rem; background-color: #f8f9fb; border: solid 0.063rem #dfe4eb; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-control-member { padding: 0.313rem; background-color: #fff; border: solid 0.063rem #dfe4eb; border-radius: 3rem; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-control-member .dhd-form-search-member { padding: 0 1.25rem; border-right: solid 0.063rem #dfe4eb; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-control-member .dhd-checkbox { display: flex; position: relative; padding-left: 1.875rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-control-member .dhd-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-control-member .dhd-checkbox input:checked ~ .dhd-checkmark { background-color: #d30d26; border-color: #d30d26; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-control-member .dhd-checkbox input:checked ~ .dhd-checkmark:after { opacity: 1; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-control-member .dhd-checkbox .dhd-checkmark { position: absolute; top: -0.063rem; left: 0; height: 1.25rem; width: 1.25rem; border: solid 0.063rem #dfe4eb; transition: background-color 0.25s ease; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-control-member .dhd-checkbox .dhd-checkmark:after { content: ""; position: absolute; left: 0.438rem; top: 0.188rem; width: 0.313rem; height: 0.625rem; border: solid #fff; border-width: 0 0.125rem 0.125rem 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.25s ease; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-control-member .dhd-btn-search-member { display: flex; justify-content: center; height: 3rem; padding: 0 1.875rem; background-color: #d30d26; border-color: #d30d26; font-size: 0.875rem; color: #fff; text-transform: uppercase; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-select-member { width: 100%; height: 2.625rem; padding: 0 1.25rem; background-color: #fff; border: solid 0.063rem #dfe4eb; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-select-member select > option { font-size: 0.875rem; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-select-member button { margin-top: 0.188rem; } .dhd-operate .dhd-ct-operate .dhd-member-block .uk-heading-line span { font-size: 1rem; color: #666; } .dhd-operate .dhd-ct-operate .dhd-member-block .uk-heading-line span:before, .dhd-operate .dhd-ct-operate .dhd-member-block .uk-heading-line span:after { border-color: #dfe4eb; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-list-member .dhd-item-list-member { padding: 0.625rem; background-color: #f5f5f5; border: solid 0.063rem #dfe4eb; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-list-member .dhd-item-list-member .dhd-thumb-member { display: flex; width: 5.625rem; height: 6.875rem; padding: 0.313rem; background-color: #fff; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-list-member .dhd-item-list-member .dhd-thumb-member .thumb-img:before { width: 2rem; height: 2rem; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-list-member .dhd-item-list-member .dhd-thumb-member .thumb-img img { min-height: 100%; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-list-member .dhd-item-list-member .dhd-info-member { text-decoration: none; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-list-member .dhd-item-list-member .dhd-info-member p { margin: 0; font-size: 0.875rem; line-height: 1.6; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-list-member .dhd-item-list-member .dhd-info-member p span { font-family: "BeVietnamPro-SemiBold", sans-serif; text-transform: uppercase; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-list-member .dhd-item-list-member .dhd-info-member p em { color: #000; font-family: "BeVietnamPro-SemiBold", sans-serif; font-style: normal; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-list-member .dhd-item-list-member .dhd-info-member:hover p > span { color: #d30d26; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-text-code { padding: 0.625rem 1.25rem; background-color: #ffe9b9; overflow: hidden; resize: vertical; text-align: center; color: #666; line-height: 1.4; border: none; border-radius: 0.188rem; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-btn-code { background-color: #d30d26; color: #fff; border-color: #d30d26; font-size: 0.75rem; text-transform: uppercase; text-decoration: none; } .dhd-search-doc .uk-search-input, .dhd-search-doc .uk-form-custom { display: flex; height: 2.625rem; padding: 0 1.25rem; background-color: #fff; box-shadow: 0 0.063rem 0.188rem rgba(0, 0, 0, 0.15); border-radius: 3rem; } .dhd-search-doc .uk-search .uk-search-input { padding-right: 3.25rem; } .dhd-search-doc .uk-search .uk-search-icon { width: 2rem; height: 2rem; background-color: #d30d26; border-radius: 50%; color: #fff; right: 0.5rem; top: 0.313rem; } .dhd-search-doc .uk-search .uk-search-icon:hover { color: #fff; } .dhd-search-doc .uk-form-custom select > option { font-size: 0.875rem; } .dhd-search-doc .uk-form-custom button { margin-top: 0.188rem; } .dhd-list-doc ul > li > a { display: flex; position: relative; padding: 0 0 0.938rem 3.125rem; font-size: 1.125rem; font-family: "BeVietnamPro-Medium", sans-serif; line-height: 1.6; color: #000; text-decoration: none; border-bottom: dashed 0.063rem #aaa; } .dhd-list-doc ul > li > a:before { content: ""; position: absolute; left: 0; top: -0.125rem; width: 2rem; height: 2rem; background: url(../images/dhd-symbol.png) no-repeat; } .dhd-list-doc ul > li > a:hover { color: #d30d26; } .dhd-btn-more-doc { height: 2.625rem; color: #d30d26; border-color: #d30d26; } .dhd-btn-more-doc .icon-grp { background-color: #d30d26; } .dhd-btn-more-doc:hover { background-color: #d30d26; color: #fff; } .dhd-btn-more-doc:hover .icon-grp { background-color: #fff; } /* User */ .dhd-block-user { background-color: #fff; border-bottom: solid 1.25rem rgba(0, 0, 0, 0.1); } .dhd-block-user .dhd-avt-user { padding: 1.875rem; } .dhd-block-user .dhd-avt-user .dhd-thumb-user { min-height: 6.25rem; padding: 0.625rem; background-color: #fff; box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.15); } .dhd-block-user .dhd-avt-user .dhd-btn-info-user { display: flex; justify-content: center; height: 2.625rem; border-color: #d30d26; color: #d30d26; border-radius: 0.188rem; font-size: 0.875rem; position: relative; } .dhd-block-user .dhd-avt-user .dhd-btn-info-user:hover { background-color: #d30d26; color: #fff; } .dhd-block-user .dhd-avt-user .dhd-btn-info-user[aria-expanded="true"]:after { content: "Thu gọn tiểu sử"; position: absolute; left: 0; right: 0; background-color: #fff; text-align: center; } .dhd-block-user .dhd-avt-user .dhd-btn-info-user[aria-expanded="true"]:hover:after { background-color: #d30d26; } .dhd-block-user .dhd-info-user { padding: 1.875rem 1.25rem 1.875rem 1.875rem; border-left: solid 1.25rem rgba(0, 0, 0, 0.1); } .dhd-block-user .dhd-info-user .dhd-tt-info-user { font-size: 1.75rem; font-family: "BarlowCondensed-SemiBold", sans-serif; line-height: 1.2; } .dhd-block-user .dhd-info-user .dhd-tt-name-user { margin: 0.625rem 0 0; font-size: 2.625rem; font-family: "BarlowCondensed-Bold", sans-serif; color: #d30d26; text-transform: uppercase; } .dhd-block-user .dhd-info-user .dhd-list-info-user ul { margin-bottom: 0; } .dhd-block-user .dhd-info-user .dhd-list-info-user ul li { position: relative; padding-left: 2.188rem; line-height: 1.6; } .dhd-block-user .dhd-info-user .dhd-list-info-user ul li:before { content: ""; position: absolute; top: 0.063rem; left: 0; width: 1.375rem; height: 1.375rem; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 15.25C10.307 15.2353 10.1276 15.1455 9.99998 15L6.99998 12C6.93314 11.8601 6.91133 11.7029 6.93756 11.55C6.96379 11.3971 7.03676 11.2562 7.14643 11.1465C7.2561 11.0368 7.39707 10.9638 7.54993 10.9376C7.70279 10.9114 7.86003 10.9332 7.99998 11L10.47 13.47L19 5.00004C19.1399 4.9332 19.2972 4.91139 19.45 4.93762C19.6029 4.96385 19.7439 5.03682 19.8535 5.14649C19.9632 5.25616 20.0362 5.39713 20.0624 5.54999C20.0886 5.70286 20.0668 5.86009 20 6.00004L11 15C10.8724 15.1455 10.6929 15.2353 10.5 15.25Z' fill='%23999'/%3E%3Cpath d='M12 21C10.3915 20.9974 8.813 20.5638 7.42891 19.7443C6.04481 18.9247 4.90566 17.7492 4.12999 16.34C3.54037 15.29 3.17596 14.1287 3.05999 12.93C2.87697 11.1721 3.2156 9.39921 4.03363 7.83249C4.85167 6.26578 6.1129 4.9746 7.65999 4.12003C8.71001 3.53041 9.87134 3.166 11.07 3.05003C12.2641 2.92157 13.4719 3.03725 14.62 3.39003C14.7224 3.4105 14.8195 3.45215 14.9049 3.51232C14.9903 3.57248 15.0622 3.64983 15.116 3.73941C15.1698 3.82898 15.2043 3.92881 15.2173 4.03249C15.2302 4.13616 15.2214 4.2414 15.1913 4.34146C15.1612 4.44152 15.1105 4.53419 15.0425 4.61352C14.9745 4.69286 14.8907 4.75712 14.7965 4.80217C14.7022 4.84723 14.5995 4.87209 14.4951 4.87516C14.3907 4.87824 14.2867 4.85946 14.19 4.82003C13.2186 4.52795 12.1987 4.43275 11.19 4.54003C10.193 4.64212 9.22694 4.94485 8.34999 5.43003C7.50512 5.89613 6.75813 6.52088 6.14999 7.27003C5.52385 8.03319 5.05628 8.91361 4.77467 9.85974C4.49307 10.8059 4.40308 11.7987 4.50999 12.78C4.61208 13.777 4.91482 14.7431 5.39999 15.62C5.86609 16.4649 6.49084 17.2119 7.23999 17.82C8.00315 18.4462 8.88357 18.9137 9.8297 19.1953C10.7758 19.4769 11.7686 19.5669 12.75 19.46C13.747 19.3579 14.713 19.0552 15.59 18.57C16.4349 18.1039 17.1818 17.4792 17.79 16.73C18.4161 15.9669 18.8837 15.0864 19.1653 14.1403C19.4469 13.1942 19.5369 12.2014 19.43 11.22C19.4201 11.1169 19.4307 11.0129 19.461 10.9139C19.4914 10.8149 19.5409 10.7228 19.6069 10.643C19.6728 10.5631 19.7538 10.497 19.8453 10.4485C19.9368 10.3999 20.0369 10.3699 20.14 10.36C20.2431 10.3502 20.3471 10.3607 20.4461 10.3911C20.5451 10.4214 20.6372 10.471 20.717 10.5369C20.7969 10.6028 20.863 10.6839 20.9115 10.7753C20.9601 10.8668 20.9901 10.9669 21 11.07C21.1821 12.829 20.842 14.6026 20.0221 16.1695C19.2022 17.7363 17.9389 19.0269 16.39 19.88C15.3288 20.4938 14.1495 20.8755 12.93 21C12.62 21 12.3 21 12 21Z' fill='%23999'/%3E%3C/svg%3E"); } .dhd-block-user .dhd-info-user .dhd-list-info-user ul li b { font-family: "BeVietnamPro-SemiBold", sans-serif; } .dhd-block-user .dhd-info-user .dhd-list-info-user ul li p { margin: 0.625rem 0; line-height: 1.6; text-align: justify; } .dhd-slider-event .uk-slidenav { color: #666; background-color: rgba(255, 255, 255, 0.75); } .dhd-items-event { position: relative; } .dhd-items-event .uk-overlay-primary { background: black; background: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0.4990371148) 50%, rgba(0, 0, 0, 0) 100%); border-radius: 0; } .dhd-items-event time { display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: 5.625rem; height: 5.625rem; background-color: #fff; } .dhd-items-event time span { width: 100%; padding: 0.5rem 0; background-color: #d30d26; color: #fff; font-size: 0.875rem; text-align: center; } .dhd-items-event time em { margin-top: 0.938rem; font-size: 1.5rem; font-family: "BeVietnamPro-Black", sans-serif; font-style: normal; color: #000; } .dhd-items-event .dhd-tt-event { margin-bottom: 0.5rem; } .dhd-items-event .dhd-tt-event > * { font-size: 1.75rem; font-family: "BeVietnamPro-SemiBold", sans-serif; color: #fff; text-decoration: none; } .dhd-items-event .dhd-tt-event > *:hover { color: #d30d26; } .dhd-items-event .dhd-cate-event { font-size: 0.75rem; color: #999; text-transform: uppercase; } .dhd-event-details { padding: 1.875rem; background-color: #f5f5f5; } .dhd-list-activity > *.uk-list-divider > * { position: relative; padding-left: 7.813rem; } .dhd-list-activity > *.uk-list-divider > *:nth-child(n+2) { margin-top: 0.938rem; padding-top: 0.938rem; border-top: dashed 0.063rem #aaa; } .dhd-list-activity > *.uk-list-divider > * span { position: absolute; left: 0; top: 0.938rem; font-size: 0.75rem; font-family: "BeVietnamPro-SemiBold", sans-serif; color: #666; padding: 0.5rem 0.938rem 0.313rem; background-color: #f5f5f5; border-radius: 1.5rem; } .dhd-list-activity > *.uk-list-divider > * a { color: #000; font-family: "BeVietnamPro-SemiBold", sans-serif; font-size: 1.125rem; line-height: 1.6; } .dhd-list-activity > *.uk-list-divider > * a .icon-grp { margin-left: 0.313rem; top: 0.125rem; background-color: #d30d26; } .dhd-list-activity > *.uk-list-divider > *:first-child span { top: 0; } .dhd-list-activity > *.uk-list-divider > *:hover span { background-color: #d30d26; color: #fff; } .dhd-list-activity > *.uk-list-divider > *:hover a { color: #d30d26; text-decoration: none; } .dhd-list-related ul > * > * { padding: 0 0 0.938rem 1.563rem; color: #000; font-family: "BeVietnamPro-SemiBold", sans-serif; font-size: 1.125rem; line-height: 1.6; border-bottom: dashed 0.063rem #aaa; position: relative; } .dhd-list-related ul > * > *:before { content: ""; position: absolute; left: 0; top: 0.625rem; width: 0.5rem; height: 0.5rem; background-color: #d30d26; border-radius: 50%; } .dhd-list-related ul > * > *:hover { color: #d30d26; text-decoration: none; } .dhd-list-related ul > * > * .icon-grp { margin-left: 0.313rem; top: 0.125rem; background-color: #d30d26; } .dhd-list-event .dhd-items-event time { width: 4.375rem; height: 4.375rem; } .dhd-list-event .dhd-items-event span { font-size: 0.75rem; } .dhd-list-event .dhd-items-event em { margin-top: 0.75rem; font-size: 1.125rem; } .dhd-list-event .dhd-items-event h3 { margin: 1.25rem 0 0; font-size: 1.25rem; line-height: 1.4; } .dhd-list-event .dhd-items-event h3 a { color: #000; font-family: "BeVietnamPro-SemiBold", sans-serif; } .dhd-list-event .dhd-items-event h3 a:hover { color: #d30d26; text-decoration: none; } /* Văn kiện */ .dhd-pagination.uk-pagination { gap: 0.313rem; } .dhd-pagination.uk-pagination > * > * { justify-content: center; width: 2.625rem; height: 2.625rem; padding: 0; color: #000; border-radius: 50%; } .dhd-pagination.uk-pagination > *.uk-active > *, .dhd-pagination.uk-pagination > *:hover > * { background-color: #d30d26; color: #fff; } /* Details */ .dhd-top-details { padding-bottom: 1.25rem; border-bottom: solid 0.063rem #aaa; } .dhd-top-details .dhd-sub-top-details { display: block; margin-bottom: 0.625rem; color: #d30d26; font-size: 1.125rem; } .dhd-top-details h1 { margin: 0; font-family: "BarlowCondensed-SemiBold", sans-serif; color: #000; } .dhd-top-details time { font-size: 0.875rem; color: #666; } .dhd-bot-details { padding-top: 1.25rem; border-top: solid 0.063rem #aaa; } .dhd-ct-details .lr-ct { font-size: 1.125rem; font-family: "BeVietnamPro-Light", sans-serif; line-height: 1.6; } .dhd-ct-details .lr-ct p { font-size: 1.125rem; font-family: "BeVietnamPro-Light", sans-serif; line-height: 1.6; } .dhd-ct-details .lr-ct em { color: #000; font-family: "BeVietnamPro-Light", sans-serif; } .dhd-ct-details .lr-ct .lr-grp-links > * > * > *, .dhd-ct-details .lr-ct ul li, .dhd-ct-details .lr-ct ol li { line-height: 1.6; } .dhd-ct-details .lr-ct .lr-slideshow .uk-thumbnav.uk-grid > * { padding-left: 0.938rem; } .dhd-ct-details .lr-ct .lr-slideshow .icon-grp { background-color: #fff; } .dhd-share-social.uk-iconnav > * { display: flex; align-items: center; font-size: 0.875rem; } .dhd-share-social.uk-iconnav > * span { margin-right: 0.5rem; } .dhd-share-social.uk-iconnav > * a { font-family: "BeVietnamPro-SemiBold", sans-serif; color: #000; } .dhd-breadcrumb { display: flex; justify-content: center; margin-top: 0.938rem; } .dhd-breadcrumb .uk-breadcrumb { margin: 0; } .dhd-breadcrumb .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before { margin: 0 0.625rem 0 calc(10px - 4px); } .dhd-breadcrumb .uk-breadcrumb > * > * { font-size: 1rem; color: #000; line-height: 1.6; } .dhd-breadcrumb .uk-breadcrumb span { color: #000 !important; } .dhd-breadcrumb .uk-breadcrumb a:hover { color: #d30d26; text-decoration: underline; } .dhd-items-document { padding: 3.75rem 1.875rem; background-color: #fff; border-radius: 0.5rem; border: solid 0.063rem transparent; border-bottom: solid 0.188rem #d30d26; box-shadow: 0 0 0.938rem rgba(0, 0, 0, 0.1); position: relative; /**/ /**/ } .dhd-items-document h3 a { color: #000; text-decoration: none; } .dhd-items-document .dhd-icon-document, .dhd-items-document .dhd-icon-more-document { position: absolute; display: grid; place-items: center; background-color: transparent; } .dhd-items-document .dhd-icon-document { top: 1.25rem; left: 1.25rem; border-radius: 50%; } .dhd-items-document .dhd-icon-document .icon-grp { background-color: rgba(0, 0, 0, 0.05); } .dhd-items-document .dhd-icon-more-document { bottom: 0.938rem; right: 3.75rem; opacity: 0; } .dhd-items-document .dhd-icon-more-document .icon-grp { background-color: transparent; } .dhd-items-document:hover { border-color: #d30d26; } .dhd-items-document:hover h3 a { color: #d30d26; } .dhd-items-document:hover .dhd-icon-document { position: absolute; top: -1.25rem; left: -1.25rem; width: 3.25rem; height: 3.25rem; background-color: #d30d26; } .dhd-items-document:hover .dhd-icon-document .icon-grp { width: 1.625rem; height: 1.625rem; background-color: #fff; } .dhd-items-document:hover .dhd-icon-more-document { position: absolute; right: 1.875rem; opacity: 1; } .dhd-items-document:hover .dhd-icon-more-document .icon-grp { background-color: #d30d26; } .dhd-top-document { padding-bottom: 1.25rem; border-bottom: solid 0.063rem #aaa; } .dhd-top-document h1 { margin-bottom: 0.938rem; font-size: 2.625rem; font-family: "BarlowCondensed-SemiBold", sans-serif; } .dhd-tree-document { padding: 1.875rem 1.25rem 1.875rem 1.875rem; background-color: #f5f5f5; border-radius: 0.375rem; border: solid 0.063rem #e0e0e0; } .dhd-tree-document ul { margin: 0; } .dhd-tree-document ul li { padding: 0 0 0.625rem 2.5rem; border-bottom: dashed 0.063rem #aaa; position: relative; } .dhd-tree-document ul li a { display: block; padding-right: 2.5rem; font-size: 1.125rem; line-height: 1.5; color: #000; text-decoration: none; } .dhd-tree-document ul li a > .icon-grp { position: absolute; left: 0; top: 0.25rem; background-color: #000; } .dhd-tree-document ul li a:hover { color: #d30d26; } .dhd-tree-document ul li.uk-active > a { color: #d30d26; } .dhd-tree-document ul li.uk-active > a .icon-grp { background-color: #d30d26; } .dhd-tree-document ul li.uk-active > .dhd-btn-tree-document { color: #d30d26; } .dhd-tree-document ul li.uk-active > .dhd-btn-tree-document:before { border-color: #d30d26; } .dhd-tree-document ul li:last-child { border-bottom: none; padding-bottom: 0; } .dhd-tree-document ul li .dhd-btn-tree-document { position: absolute; right: 0; top: 0; } .dhd-tree-document ul li .dhd-btn-tree-document:before { content: "+"; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding-bottom: 0.125rem; font-size: 1.625rem; line-height: 0; border: solid 0.063rem #000; border-radius: 50%; } .dhd-tree-document ul li .dhd-btn-tree-document[aria-expanded="true"]:before { content: "-"; } .dhd-tree-document ul li .dhd-sub-document { margin-top: 0.938rem; } .dhd-tree-document ul li .dhd-fix-sub-document ul li a { padding-right: 0; } .dhd-tree-document.dhd-fix-tree-document { padding-right: 0.625rem; background: #fffaeb url(../images/trong-dong.png) no-repeat; background-size: cover; background-position: center; opacity: 1; border-color: #e9e2cc; } .dhd-tree-document.dhd-fix-tree-document .uk-list > * > :last-child { padding-right: 0; } .dhd-block-document { display: inline-block; width: 100%; } .dhd-block-document .dhd-menu-block-document { display: flex; align-items: center; font-size: 2rem; font-family: "BarlowCondensed-SemiBold", sans-serif; color: #d30d26; text-transform: uppercase; } .dhd-block-document .dhd-menu-block-document .icon-grp { margin-right: 0.938rem; background-color: #d30d26; } #dhd-modal-details .uk-modal-dialog { width: 900px; } /* Scrollbar */ .scrollbar-fix .scrollbar-2 { max-height: none !important; } .scrollbar-1 { max-height: 478px; } .scrollbar-2 { max-height: 700px; } .scrollbar-3 { max-height: 900px; } .scroll-wrapper.scrollbar-2, .scroll-wrapper.scrollbar-3 { padding-right: 1.25rem; } /* Css Responsive */ @media only screen and (max-width: 960px) { #dhd-wrp .dhd-row { padding: 2.5rem 0; } #dhd-wrp .dhd-fix-row-1 { padding-top: 3.75rem; } #dhd-wrp .dhd-block-cate .dhd-menu-cate h2 a { font-size: 2.625rem; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-control-member { padding: 0.625rem; border-radius: 0; } .dhd-operate .dhd-ct-operate .dhd-member-block .dhd-control-member .dhd-form-search-member { height: 2.625rem; background-color: #f5f5f5; border: none; border-radius: 3rem; } .dhd-block-user .dhd-info-user { border-left: none; border-top: solid 1.25rem rgba(0, 0, 0, 0.1); } } @media only screen and (max-width: 640px) { #dhd-wrp .dhd-block-cate .dhd-ct-cate { margin-top: 2.5rem; } #dhd-wrp .dhd-block-cate .dhd-menu-cate h2 a { font-size: 2rem; } .dhd-ct-slider .dhd-info-congress .dhd-ct-info-congress figure { width: 100%; max-width: none; margin-left: 0; } .dhd-ct-slider .dhd-info-congress .dhd-ct-info-congress figure figcaption { text-align: center; } .dhd-operate h3 { font-size: 2rem; } .dhd-operate .dhd-ct-operate .dhd-item-operate-1 .dhd-thumb-operate { width: 100%; height: 12.5rem; } .dhd-operate .dhd-ct-operate .dhd-item-operate-2 .dhd-thumb-operate { width: 100%; height: 6.875rem; } /*.dhd-list-doc ul > li > a { font-size: $font-20; }*/ .dhd-block-user .dhd-avt-user, .dhd-block-user .dhd-info-user { padding: 1.25rem; } .dhd-items-event .uk-overlay-primary { position: relative !important; background: #f5f5f5; padding: 0.938rem; } .dhd-items-event time span { width: 100%; text-align: center; } .dhd-items-event .dhd-tt-event > * { color: #000; } .dhd-event-details { padding: 0.938rem; } .dhd-ct-details .lr-ct p { padding: 0; } .dhd-pagination.uk-pagination > * > * { width: 2rem; height: 2rem; font-size: 0.875rem; } .dhd-slider-event .uk-slidenav { top: 25%; } } /* Footer */ #dhd-ft .dhd-top-ft { padding: 1.25rem 0; background-color: #d30d26; } #dhd-ft .dhd-top-ft a { display: grid; place-items: center; height: 2.625rem; padding: 0.313rem; background-color: #fff; border-radius: 0.188rem; } #dhd-ft .dhd-top-ft a img { max-height: 1.625rem; } #dhd-ft .dhd-bot-ft { padding: 1.875rem; } #dhd-ft .dhd-bot-ft .dhd-logo-ft { display: flex; justify-content: center; } #dhd-ft .dhd-bot-ft .dhd-logo-ft img { max-height: 4.5rem; } #dhd-ft .dhd-bot-ft .dhd-info-ft { font-size: 0.875rem; line-height: 1.5; } /* Css Responsive */ /* Timeline */ .dhd-tab-timeline { padding: 5rem 0; background: url(../images/timeline-slider-bg.png) center no-repeat; background-size: cover; background-attachment: fixed; } .dhd-top-timeline { text-align: center; } .dhd-top-timeline h2 { margin: 0; color: #fff; font-size: 3.25rem; font-family: "BarlowCondensed-SemiBold", sans-serif; text-transform: uppercase; text-decoration: none; } .dhd-top-timeline p { margin: 1.25rem 0 0; color: #fff; font-size: 1rem; line-height: 1.6; } .dhd-bot-timeline { margin-top: 3.75rem; position: relative; } .dhd-bot-timeline:before { content: ""; height: 0.25rem; background-color: #d30d26; position: absolute; left: 0; right: 0; top: calc(50% - 4px); } .dhd-bot-timeline .uk-slider-container { padding: 0.313rem 0; } .dhd-bot-timeline .uk-slider-items { height: 400px; } .dhd-bot-timeline .uk-slider-items .dhd-item-timeline.uk-active .dhd-list-item-timeline:before, .dhd-bot-timeline .uk-slider-items .dhd-item-timeline .dhd-list-item-timeline:hover:before { border-color: #d30d26; } .dhd-bot-timeline .uk-slider-items .dhd-item-timeline.uk-active .dhd-list-item-timeline .dhd-year-timeline, .dhd-bot-timeline .uk-slider-items .dhd-item-timeline.uk-active .dhd-list-item-timeline em, .dhd-bot-timeline .uk-slider-items .dhd-item-timeline .dhd-list-item-timeline:hover .dhd-year-timeline, .dhd-bot-timeline .uk-slider-items .dhd-item-timeline .dhd-list-item-timeline:hover em { background-color: #d30d26; } .dhd-bot-timeline .uk-slider-items .dhd-item-timeline.uk-active .dhd-list-item-timeline em, .dhd-bot-timeline .uk-slider-items .dhd-item-timeline .dhd-list-item-timeline:hover em { color: #fff; } .dhd-bot-timeline .uk-slidenav, .dhd-bot-timeline .uk-slidenav:hover { color: #fff; } .dhd-item-timeline { position: relative; } .dhd-list-item-timeline { height: 50%; padding-left: 0.938rem; position: absolute; left: 0; } .dhd-list-item-timeline:before { content: ""; width: 3.125rem; position: absolute; top: 0; left: 0; bottom: 0; border-left: solid 0.063rem #f1b226; } .dhd-list-item-timeline:hover { text-decoration: none; } .dhd-list-item-timeline h4 { margin: 0; color: #fff; font-size: 0.875rem; font-family: "BeVietnamPro-SemiBold", sans-serif; line-height: 1.5; } .dhd-list-item-timeline p { margin: 0.625rem 0 0; color: #999; font-size: 0.875rem; font-family: "BeVietnamPro-Regular", sans-serif; line-height: 1.5; } .dhd-list-item-timeline em { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; background-color: #fff; border-radius: 50%; color: #000; font-size: 1.5rem; font-family: "BarlowCondensed-SemiBold", sans-serif; font-style: normal; position: absolute; left: 0; } .dhd-item-up { padding-top: 4.5rem; padding-bottom: 0.938rem; top: -0.125rem; } .dhd-item-up:before { border-top: solid 0.063rem #f1b226; border-top-left-radius: 2rem; } .dhd-item-up .dhd-year-timeline { top: 0.313rem; } .dhd-item-up em { bottom: -1.625rem; } .dhd-item-down { padding-bottom: 4.5rem; padding-top: 2.375rem; bottom: -0.125rem; } .dhd-item-down:before { border-bottom: solid 0.063rem #f1b226; border-bottom-left-radius: 2rem; } .dhd-item-down .dhd-year-timeline { bottom: 0.313rem; } .dhd-item-down em { top: -1.875rem; } .dhd-year-timeline { display: flex; gap: 0.938rem; align-items: center; padding: 0.313rem 0.313rem 0.313rem 0.938rem; background-color: #f1b226; border-radius: 3rem; font-family: "BarlowCondensed-SemiBold", sans-serif; font-size: 2rem; color: #fff; position: absolute; left: 0.375rem; } .dhd-year-timeline span { width: 2.625rem; height: 2.625rem; border-radius: 50%; overflow: hidden; } /* Css Responsive */ @media only screen and (max-width: 640px) { .dhd-bot-timeline .uk-slider-items { height: 480px; } } /*@import "_longread.scss";*/ /*************** SCROLLBAR BASE CSS ***************/ .scroll-wrapper { overflow: hidden !important; padding: 0; position: relative; } .scroll-wrapper > .scroll-content { border: none !important; box-sizing: content-box !important; height: auto; left: 0; margin: 0; max-height: none; max-width: none !important; overflow: scroll !important; padding: 0; position: relative !important; top: 0; width: auto !important; } .scroll-wrapper > .scroll-content::-webkit-scrollbar { height: 0; width: 0; } .scroll-element { display: none; } .scroll-element, .scroll-element div { box-sizing: content-box; } .scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible { display: block; } .scroll-element .scroll-bar, .scroll-element .scroll-arrow { cursor: default; } .scroll-textarea { border: 0.063rem solid #cccccc; border-top-color: #999; } .scroll-textarea > .scroll-content { overflow: hidden !important; } .scroll-textarea > .scroll-content > textarea { border: none !important; box-sizing: border-box; height: 100% !important; margin: 0; max-height: none !important; max-width: none !important; overflow: scroll !important; outline: none; padding: 0.125rem; position: relative !important; top: 0; width: 100% !important; } .scroll-textarea > .scroll-content > textarea::-webkit-scrollbar { height: 0; width: 0; } /*************** SIMPLE INNER SCROLLBAR ***************/ .scrollbar-inner > .scroll-element, .scrollbar-inner > .scroll-element div { border: none; margin: 0; padding: 0; position: absolute; z-index: 9; } .scrollbar-inner > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; } .scrollbar-inner > .scroll-element.scroll-x { bottom: 0; height: 0.313rem; left: 0; width: 100%; } .scrollbar-inner > .scroll-element.scroll-y { height: 100%; right: 0; top: 0; width: 0.313rem; } .scrollbar-inner > .scroll-element .scroll-element_outer { overflow: hidden; } .scrollbar-inner > .scroll-element .scroll-element_outer, .scrollbar-inner > .scroll-element .scroll-element_track, .scrollbar-inner > .scroll-element .scroll-bar { -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; border-radius: 0.5rem; } .scrollbar-inner > .scroll-element .scroll-element_track, .scrollbar-inner > .scroll-element .scroll-bar { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); } .scrollbar-inner > .scroll-element .scroll-element_track { background-color: transparent; } .scrollbar-inner > .scroll-element .scroll-bar { background-color: #999; } .scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #666; } .scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #666; } /* update scrollbar offset if both scrolls are visible */ .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -0.75rem; } .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -0.75rem; } .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -0.75rem; } .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -0.75rem; } @media only screen and (max-width: 960px) { .scrollbar-2 { overflow: inherit; height: auto; max-height: none; } .scrollbar-2 > .scrollbar { max-height: none; } } /* Back To Top */ #back-to-top { position: fixed; bottom: 0.938rem; right: 0.938rem; z-index: 99; display: grid; place-items: center; width: 2.625rem; height: 2.25rem; background-color: #d30d26; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; } #back-to-top .icon-top { background-color: #fff; } #back-to-top.show { opacity: 1; visibility: visible; } /*@import "link.scss";*/ /*@import "divider.scss";*/ /*@import "description-list.scss";*/ /*@import "table.scss";*/ /*@import "form-range.scss";*/ /*@import "progress.scss";*/ /*@import "tile.scss";*/ /*@import "card.scss";*/ /*@import "close.scss";*/ /*@import "spinner.scss";*/ /*@import "totop.scss";*/ /*@import "marker.scss";*/ /*@import "alert.scss";*/ /*@import "badge.scss";*/ /*@import "label.scss";*/ /*@import "article.scss";*/ /*@import "comment.scss";*/ /*@import "accordion.scss";*/ /*@import "leader.scss";*/ /*@import "notification.scss";*/ /*@import "sortable.scss";*/ /*@import "countdown.scss";*/ /*@import "tab.scss";*/ /*@import "inverse.scss";*/ /* ======================================================================== Component: Base ========================================================================== */ /* * 1. Set `font-size` to support `rem` units * 2. Prevent adjustments of font size after orientation changes in iOS. * 3. Style */ html { /* 1 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: normal; line-height: 1.5; /* 2 */ -webkit-text-size-adjust: 100%; /* 3 */ background: #fff; color: #666; } /* * Remove the margin in all browsers. */ body { margin: 0; } /* Links ========================================================================== */ /* * Style */ a, .uk-link { color: #1e87f0; text-decoration: none; cursor: pointer; } a:hover, .uk-link:hover, .uk-link-toggle:hover .uk-link { color: #0f6ecd; text-decoration: underline; } /* Text-level semantics ========================================================================== */ /* * 1. Add the correct text decoration in Edge. * 2. The shorthand declaration `underline dotted` is not supported in Safari. */ abbr[title] { /* 1 */ text-decoration: underline dotted; /* 2 */ -webkit-text-decoration-style: dotted; } /* * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /* * 1. Consolas has a better baseline in running text compared to `Courier` * 2. Correct the odd `em` font sizing in all browsers. * 3. Style */ :not(pre) > code, :not(pre) > kbd, :not(pre) > samp { /* 1 */ font-family: Consolas, monaco, monospace; /* 2 */ font-size: 0.875rem; /* 3 */ color: #f0506e; white-space: nowrap; padding: 2px 6px; background: #f8f8f8; } /* * Emphasize */ em { color: #f0506e; } /* * Insert */ ins { background: #ffd; color: #666; text-decoration: none; } /* * Mark */ mark { background: #ffd; color: #666; } /* * Quote */ q { font-style: italic; } /* * Add the correct font size in all browsers. */ small { font-size: 80%; } /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /* * Remove the gap between the element and the bottom of its parent container. */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } /* * 1. Constrain the element to its parent width. * 2. Preserve the intrinsic aspect ratio and auto-scale the height of an image if the `height` attribute is present. * 3. Take border and padding into account. */ canvas, img, svg, video { /* 1 */ max-width: 100%; /* 2 */ height: auto; /* 3 */ box-sizing: border-box; } /* * Deprecated: only needed for `img` elements with `uk-img` * 1. Hide `alt` text for lazy load images. * 2. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`. */ img:not([src]) { /* 1 */ visibility: hidden; /* 2 */ min-width: 1px; } /* * Iframe * Remove border in all browsers */ iframe { border: 0; } /* Block elements ========================================================================== */ /* * Margins */ p, ul, ol, dl, pre, address, fieldset, figure { margin: 0 0 20px 0; } /* Add margin if adjacent element */ * + p, * + ul, * + ol, * + dl, * + pre, * + address, * + fieldset, * + figure { margin-top: 20px; } /* Headings ========================================================================== */ h1, .uk-h1, h2, .uk-h2, h3, .uk-h3, h4, .uk-h4, h5, .uk-h5, h6, .uk-h6, .uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge, .uk-heading-2xlarge, .uk-heading-3xlarge { margin: 0 0 20px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: normal; color: #333; text-transform: none; } /* Add margin if adjacent element */ * + h1, * + .uk-h1, * + h2, * + .uk-h2, * + h3, * + .uk-h3, * + h4, * + .uk-h4, * + h5, * + .uk-h5, * + h6, * + .uk-h6, * + .uk-heading-small, * + .uk-heading-medium, * + .uk-heading-large, * + .uk-heading-xlarge, * + .uk-heading-2xlarge, * + .uk-heading-3xlarge { margin-top: 40px; } /* * Sizes */ h1, .uk-h1 { font-size: 2.23125rem; line-height: 1.2; } h2, .uk-h2 { font-size: 1.7rem; line-height: 1.3; } h3, .uk-h3 { font-size: 1.5rem; line-height: 1.4; } h4, .uk-h4 { font-size: 1.25rem; line-height: 1.4; } h5, .uk-h5 { font-size: 16px; line-height: 1.4; } h6, .uk-h6 { font-size: 0.875rem; line-height: 1.4; } /* Tablet landscape and bigger */ @media (min-width: 960px) { h1, .uk-h1 { font-size: 2.625rem; } h2, .uk-h2 { font-size: 2rem; } } /* Lists ========================================================================== */ ul, ol { padding-left: 30px; } /* * Reset margin for nested lists */ ul > li > ul, ul > li > ol, ol > li > ol, ol > li > ul { margin: 0; } /* Description lists ========================================================================== */ dt { font-weight: bold; } dd { margin-left: 0; } /* Horizontal rules ========================================================================== */ /* * 1. Show the overflow in Chrome, Edge and IE. * 2. Add the correct text-align in Edge and IE. * 3. Style */ hr, .uk-hr { /* 1 */ overflow: visible; /* 2 */ text-align: inherit; /* 3 */ margin: 0 0 20px 0; border: 0; border-top: 1px solid #e5e5e5; } /* Add margin if adjacent element */ * + hr, * + .uk-hr { margin-top: 20px; } /* Address ========================================================================== */ address { font-style: normal; } /* Blockquotes ========================================================================== */ blockquote { margin: 0 0 20px 0; font-size: 1.25rem; line-height: 1.5; font-style: italic; color: #333; } /* Add margin if adjacent element */ * + blockquote { margin-top: 20px; } /* * Content */ blockquote p:last-of-type { margin-bottom: 0; } blockquote footer { margin-top: 10px; font-size: 0.875rem; line-height: 1.5; color: #666; } blockquote footer::before { content: "— "; } /* Preformatted text ========================================================================== */ /* * 1. Contain overflow in all browsers. */ pre { font: 0.875rem / 1.5 Consolas, monaco, monospace; color: #666; -moz-tab-size: 4; tab-size: 4; /* 1 */ overflow: auto; padding: 10px; border: 1px solid #e5e5e5; border-radius: 3px; background: #fff; } pre code { font-family: Consolas, monaco, monospace; } /* Focus ========================================================================== */ :focus { outline: none; } :focus-visible { outline: 2px dotted #333; } /* Selection pseudo-element ========================================================================== */ ::selection { background: #39f; color: #fff; text-shadow: none; } /* HTML5 elements ========================================================================== */ /* * 1. Add the correct display in Edge, IE 10+, and Firefox. * 2. Add the correct display in IE. */ details, main { /* 2 */ display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* * Add the correct display in IE. */ template { display: none; } /* Pass media breakpoints to JS ========================================================================== */ /* * Breakpoints */ :root { --uk-breakpoint-s: 640px; --uk-breakpoint-m: 960px; --uk-breakpoint-l: 1200px; --uk-breakpoint-xl: 1600px; } /*@import "link.scss";*/ /* ======================================================================== Component: Heading ========================================================================== */ .uk-heading-small { font-size: 2.6rem; line-height: 1.2; } .uk-heading-medium { font-size: 2.8875rem; line-height: 1.1; } .uk-heading-large { font-size: 3.4rem; line-height: 1.1; } .uk-heading-xlarge { font-size: 4rem; line-height: 1; } .uk-heading-2xlarge { font-size: 6rem; line-height: 1; } .uk-heading-3xlarge { font-size: 8rem; line-height: 1; } /* Tablet Landscape and bigger */ @media (min-width: 960px) { .uk-heading-small { font-size: 3.25rem; } .uk-heading-medium { font-size: 3.5rem; } .uk-heading-large { font-size: 4rem; } .uk-heading-xlarge { font-size: 6rem; } .uk-heading-2xlarge { font-size: 8rem; } .uk-heading-3xlarge { font-size: 11rem; } } /* Laptop and bigger */ @media (min-width: 1200px) { .uk-heading-medium { font-size: 4rem; } .uk-heading-large { font-size: 6rem; } .uk-heading-xlarge { font-size: 8rem; } .uk-heading-2xlarge { font-size: 11rem; } .uk-heading-3xlarge { font-size: 15rem; } } /* Primary Deprecated: Use `uk-heading-medium` instead ========================================================================== */ /* Tablet landscape and bigger */ /* Desktop and bigger */ /* Hero Deprecated: Use `uk-heading-xlarge` instead ========================================================================== */ /* Tablet landscape and bigger */ /* Desktop and bigger */ /* Divider ========================================================================== */ .uk-heading-divider { padding-bottom: calc(5px + 0.1em); border-bottom: calc(0.2px + 0.05em) solid #e5e5e5; } /* Bullet ========================================================================== */ .uk-heading-bullet { position: relative; } /* * 1. Using `inline-block` to make it work with text alignment * 2. Center vertically * 3. Style */ .uk-heading-bullet::before { content: ""; /* 1 */ display: inline-block; /* 2 */ position: relative; top: calc(-0.1 * 1em); vertical-align: middle; /* 3 */ height: calc(4px + 0.7em); margin-right: calc(5px + 0.2em); border-left: calc(5px + 0.1em) solid #e5e5e5; } /* Line ========================================================================== */ /* * Clip the child element */ .uk-heading-line { overflow: hidden; } /* * Extra markup is needed to make it work with text align */ .uk-heading-line > * { display: inline-block; position: relative; } /* * 1. Center vertically * 2. Make the element as large as possible. It's clipped by the container. * 3. Style */ .uk-heading-line > ::before, .uk-heading-line > ::after { content: ""; /* 1 */ position: absolute; top: calc(50% - (calc(0.2px + 0.05em) / 2)); /* 2 */ width: 2000px; /* 3 */ border-bottom: calc(0.2px + 0.05em) solid #e5e5e5; } .uk-heading-line > ::before { right: 100%; margin-right: calc(5px + 0.3em); } .uk-heading-line > ::after { left: 100%; margin-left: calc(5px + 0.3em); } /*@import "divider.scss";*/ /* ======================================================================== Component: List ========================================================================== */ .uk-list { padding: 0; list-style: none; } /* * Avoid column break within the list item, when using `column-count` */ .uk-list > * { break-inside: avoid-column; } /* * Remove margin from the last-child */ .uk-list > * > :last-child { margin-bottom: 0; } /* * Style */ .uk-list > :nth-child(n+2), .uk-list > * > ul { margin-top: 10px; } /* Marker modifiers * Moving `::marker` inside `::before` to style it differently * To style the `::marker` is currently only supported in Firefox and Safari ========================================================================== */ .uk-list-disc > *, .uk-list-circle > *, .uk-list-square > *, .uk-list-decimal > *, .uk-list-hyphen > * { padding-left: 30px; } /* * Type modifiers */ .uk-list-decimal { counter-reset: decimal; } .uk-list-decimal > * { counter-increment: decimal; } .uk-list-disc > ::before, .uk-list-circle > ::before, .uk-list-square > ::before, .uk-list-decimal > ::before, .uk-list-hyphen > ::before { content: ""; position: relative; left: -30px; width: 30px; height: 1.5em; margin-bottom: -1.5em; display: list-item; list-style-position: inside; text-align: right; } .uk-list-disc > ::before { list-style-type: disc; } .uk-list-circle > ::before { list-style-type: circle; } .uk-list-square > ::before { list-style-type: square; } .uk-list-decimal > ::before { content: counter(decimal,decimal) " . "; } .uk-list-hyphen > ::before { content: '–\00A0\00A0'; } /* * Color modifiers */ .uk-list-muted > ::before { color: #999 !important; } .uk-list-emphasis > ::before { color: #333 !important; } .uk-list-primary > ::before { color: #1e87f0 !important; } .uk-list-secondary > ::before { color: #222 !important; } /* Image bullet modifier ========================================================================== */ .uk-list-bullet > * { padding-left: 30px; } .uk-list-bullet > ::before { content: ""; display: list-item; position: relative; left: -30px; width: 30px; height: 1.5em; margin-bottom: -1.5em; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23666%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 50% 50%; } /* Style modifiers ========================================================================== */ /* * Divider */ .uk-list-divider > :nth-child(n+2) { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e5e5e5; } /* * Striped */ .uk-list-striped > * { padding: 10px 10px; } .uk-list-striped > *:nth-of-type(odd) { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } .uk-list-striped > :nth-of-type(odd) { background: #f8f8f8; } .uk-list-striped > :nth-child(n+2) { margin-top: 0; } /* Size modifier ========================================================================== */ .uk-list-large > :nth-child(n+2), .uk-list-large > * > ul { margin-top: 20px; } .uk-list-collapse > :nth-child(n+2), .uk-list-collapse > * > ul { margin-top: 0; } /* * Divider */ .uk-list-large.uk-list-divider > :nth-child(n+2) { margin-top: 20px; padding-top: 20px; } .uk-list-collapse.uk-list-divider > :nth-child(n+2) { margin-top: 0; padding-top: 0; } /* * Striped */ .uk-list-large.uk-list-striped > * { padding: 20px 10px; } .uk-list-collapse.uk-list-striped > * { padding-top: 0; padding-bottom: 0; } .uk-list-large.uk-list-striped > :nth-child(n+2), .uk-list-collapse.uk-list-striped > :nth-child(n+2) { margin-top: 0; } /*@import "description-list.scss";*/ /*@import "table.scss";*/ /* ======================================================================== Component: Icon ========================================================================== */ /* * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component. * 1. Remove margins in Chrome, Safari and Opera. * 2. Remove borders for `button`. * 3. Remove border-radius in Chrome. * 4. Address `overflow` set to `hidden` in IE. * 5. Correct `font` properties and `color` not being inherited for `button`. * 6. Remove the inheritance of text transform in Edge, Firefox, and IE. * 7. Remove default `button` padding and background color * 8. Style * 9. Fill all SVG elements with the current text color if no `fill` attribute is set * 10. Let the container fit the height of the icon */ .uk-icon { /* 1 */ margin: 0; /* 2 */ border: none; /* 3 */ border-radius: 0; /* 4 */ overflow: visible; /* 5 */ font: inherit; color: inherit; /* 6 */ text-transform: none; /* 7. */ padding: 0; background-color: transparent; /* 8 */ display: inline-block; /* 9 */ fill: currentcolor; /* 10 */ line-height: 0; } /* Required for `button`. */ button.uk-icon:not(:disabled) { cursor: pointer; } /* * Remove the inner border and padding in Firefox. */ .uk-icon::-moz-focus-inner { border: 0; padding: 0; } /* * Set the fill and stroke color of all SVG elements to the current text color */ .uk-icon:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) { fill: currentcolor; } .uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { stroke: currentcolor; } /* * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835 */ .uk-icon > * { transform: translate(0, 0); } /* Image modifier ========================================================================== */ /* * Display images in icon dimensions * 1. Required for `span` with background image * 2. Required for `image` */ .uk-icon-image { width: 20px; height: 20px; /* 1 */ background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; vertical-align: middle; /* 2 */ object-fit: scale-down; max-width: none; } /* Style modifiers ========================================================================== */ /* * Link * 1. Allow text within link */ .uk-icon-link { color: #999; /* 1 */ text-decoration: none !important; } .uk-icon-link:hover { color: #666; } /* OnClick + Active */ .uk-icon-link:active, .uk-active > .uk-icon-link { color: #595959; } /* * Button * 1. Center icon vertically and horizontally */ .uk-icon-button { box-sizing: border-box; width: 36px; height: 36px; border-radius: 500px; background: #f8f8f8; color: #999; vertical-align: middle; /* 1 */ display: inline-flex; justify-content: center; align-items: center; transition: 0.1s ease-in-out; transition-property: color, background-color; } /* Hover */ .uk-icon-button:hover { background-color: #ebebeb; color: #666; } /* OnClick + Active */ .uk-icon-button:active, .uk-active > .uk-icon-button { background-color: #dfdfdf; color: #666; } /*@import "form-range.scss";*/ /* ======================================================================== Component: Form ========================================================================== */ /* * 1. Define consistent box sizing. * Default is `content-box` with following exceptions set to `border-box` * `select`, `input[type="checkbox"]` and `input[type="radio"]` * `input[type="search"]` in Chrome, Safari and Opera * `input[type="color"]` in Firefox * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera. * 3. Remove `border-radius` in iOS. * 4. Change font properties to `inherit` in all browsers. */ .uk-input, .uk-select, .uk-textarea, .uk-radio, .uk-checkbox { /* 1 */ box-sizing: border-box; /* 2 */ margin: 0; /* 3 */ border-radius: 0; /* 4 */ font: inherit; } /* * Show the overflow in Edge. */ .uk-input { overflow: visible; } /* * Remove the inheritance of text transform in Firefox. */ .uk-select { text-transform: none; } /* * 1. Change font properties to `inherit` in all browsers * 2. Don't inherit the `font-weight` and use `bold` instead. * NOTE: Both declarations don't work in Chrome, Safari and Opera. */ .uk-select optgroup { /* 1 */ font: inherit; /* 2 */ font-weight: bold; } /* * Remove the default vertical scrollbar in IE 10+. */ .uk-textarea { overflow: auto; } /* * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X. */ .uk-input[type="search"]::-webkit-search-cancel-button, .uk-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Correct the cursor style of increment and decrement buttons in Chrome. */ .uk-input[type="number"]::-webkit-inner-spin-button, .uk-input[type="number"]::-webkit-outer-spin-button { height: auto; } /* * Removes placeholder transparency in Firefox. */ .uk-input::-moz-placeholder, .uk-textarea::-moz-placeholder { opacity: 1; } /* * Improves consistency of cursor style for clickable elements */ .uk-radio:not(:disabled), .uk-checkbox:not(:disabled) { cursor: pointer; } /* * Define consistent border, margin, and padding. * 1. Reset `min-width` */ .uk-fieldset { border: none; margin: 0; padding: 0; /* 1 */ min-width: 0; } /* Input, select and textarea * Allowed: `text`, `password`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color` * Disallowed: `range`, `radio`, `checkbox`, `file`, `submit`, `reset` and `image` ========================================================================== */ /* * Remove default style in iOS. */ .uk-input, .uk-textarea { -webkit-appearance: none; } /* * 1. Prevent content overflow if a fixed width is used * 2. Take the full width * 3. Reset default * 4. Style */ .uk-input, .uk-select, .uk-textarea { /* 1 */ max-width: 100%; /* 2 */ width: 100%; /* 3 */ border: 0 none; /* 4 */ padding: 0 10px; background: #fff; color: #666; border: 1px solid #e5e5e5; transition: 0.2s ease-in-out; transition-property: color, background-color, border; } /* * Single-line * 1. Allow any element to look like an `input` or `select` element * 2. Make sure line-height is not larger than height * Also needed to center the text vertically */ .uk-input, .uk-select:not([multiple]):not([size]) { height: 40px; vertical-align: middle; /* 1 */ display: inline-block; } /* 2 */ .uk-input:not(input), .uk-select:not(select) { line-height: 38px; } /* * Multi-line */ .uk-select[multiple], .uk-select[size], .uk-textarea { padding-top: 6px; padding-bottom: 6px; vertical-align: top; } .uk-select[multiple], .uk-select[size] { resize: vertical; } /* Focus */ .uk-input:focus, .uk-select:focus, .uk-textarea:focus { outline: none; background-color: #fff; color: #666; border-color: #1e87f0; } /* Disabled */ .uk-input:disabled, .uk-select:disabled, .uk-textarea:disabled { background-color: #f8f8f8; color: #999; border-color: #e5e5e5; } /* * Placeholder */ .uk-input::placeholder { color: #999; } .uk-textarea::placeholder { color: #999; } /* Style modifier (`uk-input`, `uk-select` and `uk-textarea`) ========================================================================== */ /* * Small */ .uk-form-small { font-size: 0.875rem; } /* Single-line */ .uk-form-small:not(textarea):not([multiple]):not([size]) { height: 30px; padding-left: 8px; padding-right: 8px; } /* Multi-line */ textarea.uk-form-small, [multiple].uk-form-small, [size].uk-form-small { padding: 5px 8px; } .uk-form-small:not(select):not(input):not(textarea) { line-height: 28px; } /* * Large */ .uk-form-large { font-size: 1.25rem; } /* Single-line */ .uk-form-large:not(textarea):not([multiple]):not([size]) { height: 55px; padding-left: 12px; padding-right: 12px; } /* Multi-line */ textarea.uk-form-large, [multiple].uk-form-large, [size].uk-form-large { padding: 7px 12px; } .uk-form-large:not(select):not(input):not(textarea) { line-height: 53px; } /* Style modifier (`uk-input`, `uk-select` and `uk-textarea`) ========================================================================== */ /* * Error */ .uk-form-danger, .uk-form-danger:focus { color: #f0506e; border-color: #f0506e; } /* * Success */ .uk-form-success, .uk-form-success:focus { color: #32d296; border-color: #32d296; } /* * Blank */ .uk-form-blank { background: none; border-color: transparent; } .uk-form-blank:focus { border-color: #e5e5e5; border-style: solid; } /* Width modifiers (`uk-input`, `uk-select` and `uk-textarea`) ========================================================================== */ /* * Fixed widths * Different widths for mini sized `input` and `select` elements */ input.uk-form-width-xsmall { width: 50px; } select.uk-form-width-xsmall { width: 75px; } .uk-form-width-small { width: 130px; } .uk-form-width-medium { width: 200px; } .uk-form-width-large { width: 500px; } /* Select ========================================================================== */ /* * 1. Remove default style. Also works in Firefox * 2. Style * 3. Set `color` for options in the select dropdown, because the inherited `color` might be too light. */ .uk-select:not([multiple]):not([size]) { /* 1 */ -webkit-appearance: none; -moz-appearance: none; /* 2 */ padding-right: 20px; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); background-repeat: no-repeat; background-position: 100% 50%; } /* 3 */ .uk-select:not([multiple]):not([size]) option { color: #666; } /* * Disabled */ .uk-select:not([multiple]):not([size]):disabled { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); } /* Datalist ========================================================================== */ /* * 1. Remove default style in Chrome */ .uk-input[list] { padding-right: 20px; background-repeat: no-repeat; background-position: 100% 50%; } .uk-input[list]:hover, .uk-input[list]:focus { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); } /* 1 */ .uk-input[list]::-webkit-calendar-picker-indicator { display: none !important; } /* Radio and checkbox ========================================================================== */ /* * 1. Style * 2. Make box more robust so it clips the child element * 3. Vertical alignment * 4. Remove default style * 5. Fix black background on iOS * 6. Center icons */ .uk-radio, .uk-checkbox { /* 1 */ display: inline-block; height: 16px; width: 16px; /* 2 */ overflow: hidden; /* 3 */ margin-top: -4px; vertical-align: middle; /* 4 */ -webkit-appearance: none; -moz-appearance: none; /* 5 */ background-color: transparent; /* 6 */ background-repeat: no-repeat; background-position: 50% 50%; border: 1px solid #cccccc; transition: 0.2s ease-in-out; transition-property: background-color, border; } .uk-radio { border-radius: 50%; } /* Focus */ .uk-radio:focus, .uk-checkbox:focus { background-color: rgba(0, 0, 0, 0); outline: none; border-color: #1e87f0; } /* * Checked */ .uk-radio:checked, .uk-checkbox:checked, .uk-checkbox:indeterminate { background-color: #1e87f0; border-color: transparent; } /* Focus */ .uk-radio:checked:focus, .uk-checkbox:checked:focus, .uk-checkbox:indeterminate:focus { background-color: #0e6ecd; } /* * Icons */ .uk-radio:checked { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E"); } .uk-checkbox:checked { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); } .uk-checkbox:indeterminate { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23fff%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E"); } /* * Disabled */ .uk-radio:disabled, .uk-checkbox:disabled { background-color: #f8f8f8; border-color: #e5e5e5; } .uk-radio:disabled:checked { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23999%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E"); } .uk-checkbox:disabled:checked { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); } .uk-checkbox:disabled:indeterminate { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23999%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E"); } /* Legend ========================================================================== */ /* * Legend * 1. Behave like block element * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove padding so people aren't caught out if they zero out fieldsets. * 4. Style */ .uk-legend { /* 1 */ width: 100%; /* 2 */ color: inherit; /* 3 */ padding: 0; /* 4 */ font-size: 1.5rem; line-height: 1.4; } /* Custom controls ========================================================================== */ /* * 1. Container fits its content * 2. Create position context * 3. Prevent content overflow * 4. Behave like most inline-block elements */ .uk-form-custom { /* 1 */ display: inline-block; /* 2 */ position: relative; /* 3 */ max-width: 100%; /* 4 */ vertical-align: middle; } /* * 1. Position and resize the form control to always cover its container * 2. Required for Firefox for positioning to the left * 3. Required for Webkit to make `height` work * 4. Hide controle and show cursor * 5. Needed for the cursor * 6. Clip height caused by 5. Needed for Webkit only */ .uk-form-custom select, .uk-form-custom input[type="file"] { /* 1 */ position: absolute; top: 0; z-index: 1; width: 100%; height: 100%; /* 2 */ left: 0; /* 3 */ -webkit-appearance: none; /* 4 */ opacity: 0; cursor: pointer; } .uk-form-custom input[type="file"] { /* 5 */ font-size: 500px; /* 6 */ overflow: hidden; } /* Label ========================================================================== */ .uk-form-label { color: #333; font-size: 0.875rem; } /* Layout ========================================================================== */ /* * Stacked */ .uk-form-stacked .uk-form-label { display: block; margin-bottom: 5px; } /* * Horizontal */ /* Tablet portrait and smaller */ @media (max-width: 959px) { /* Behave like `uk-form-stacked` */ .uk-form-horizontal .uk-form-label { display: block; margin-bottom: 5px; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-form-horizontal .uk-form-label { width: 200px; margin-top: 7px; float: left; } .uk-form-horizontal .uk-form-controls { margin-left: 215px; } /* Better vertical alignment if controls are checkboxes and radio buttons with text */ .uk-form-horizontal .uk-form-controls-text { padding-top: 7px; } } /* Icons ========================================================================== */ /* * 1. Set position * 2. Set width * 3. Center icon vertically and horizontally * 4. Style */ .uk-form-icon { /* 1 */ position: absolute; top: 0; bottom: 0; left: 0; /* 2 */ width: 40px; /* 3 */ display: inline-flex; justify-content: center; align-items: center; /* 4 */ color: #999; } /* * Required for `a`. */ .uk-form-icon:hover { color: #666; } /* * Make `input` element clickable through icon, e.g. if it's a `span` */ .uk-form-icon:not(a):not(button):not(input) { pointer-events: none; } /* * Input padding */ .uk-form-icon:not(.uk-form-icon-flip) ~ .uk-input { padding-left: 40px !important; } /* * Position modifier */ .uk-form-icon-flip { right: 0; left: auto; } .uk-form-icon-flip ~ .uk-input { padding-right: 40px !important; } /*@import "button.scss";*/ /*@import "progress.scss";*/ /* ======================================================================== Component: Section ========================================================================== */ /* * 1. Make it work with `100vh` and height in general */ .uk-section { display: flow-root; box-sizing: border-box; /* 1 */ padding-top: 40px; padding-bottom: 40px; } /* Desktop and bigger */ @media (min-width: 960px) { .uk-section { padding-top: 70px; padding-bottom: 70px; } } /* * Remove margin from the last-child */ .uk-section > :last-child { margin-bottom: 0; } /* Size modifiers ========================================================================== */ /* * XSmall */ .uk-section-xsmall { padding-top: 20px; padding-bottom: 20px; } /* * Small */ .uk-section-small { padding-top: 40px; padding-bottom: 40px; } /* * Large */ .uk-section-large { padding-top: 70px; padding-bottom: 70px; } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-section-large { padding-top: 140px; padding-bottom: 140px; } } /* * XLarge */ .uk-section-xlarge { padding-top: 140px; padding-bottom: 140px; } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-section-xlarge { padding-top: 210px; padding-bottom: 210px; } } /* Style modifiers ========================================================================== */ /* * Default */ .uk-section-default { --uk-inverse: dark; background: #fff; } /* * Muted */ .uk-section-muted { --uk-inverse: dark; background: #f8f8f8; } /* * Primary */ .uk-section-primary { --uk-inverse: light; background: #1e87f0; } /* * Secondary */ .uk-section-secondary { --uk-inverse: light; background: #222; } /* Overlap modifier ========================================================================== */ /* * Reserved modifier to make a section overlap another section with an border image * Implemented by the theme */ /* ======================================================================== Component: Container ========================================================================== */ /* * 1. Box sizing has to be `content-box` so the max-width is always the same and * unaffected by the padding on different breakpoints. It's important for the size modifiers. */ .uk-container { display: flow-root; /* 1 */ box-sizing: content-box; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-container { padding-left: 30px; padding-right: 30px; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-container { padding-left: 40px; padding-right: 40px; } } /* * Remove margin from the last-child */ .uk-container > :last-child { margin-bottom: 0; } /* * Remove padding from nested containers */ .uk-container .uk-container { padding-left: 0; padding-right: 0; } /* Size modifier ========================================================================== */ .uk-container-xsmall { max-width: 750px; } .uk-container-small { max-width: 900px; } .uk-container-large { max-width: 1400px; } .uk-container-xlarge { max-width: 1600px; } .uk-container-expand { max-width: none; } /* Expand modifier ========================================================================== */ /* * Expand one side only */ .uk-container-expand-left { margin-left: 0; } .uk-container-expand-right { margin-right: 0; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-container-expand-left.uk-container-xsmall, .uk-container-expand-right.uk-container-xsmall { max-width: calc(50% + (750px / 2) - 30px); } .uk-container-expand-left.uk-container-small, .uk-container-expand-right.uk-container-small { max-width: calc(50% + (900px / 2) - 30px); } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-container-expand-left, .uk-container-expand-right { max-width: calc(50% + (1200px / 2) - 40px); } .uk-container-expand-left.uk-container-xsmall, .uk-container-expand-right.uk-container-xsmall { max-width: calc(50% + (750px / 2) - 40px); } .uk-container-expand-left.uk-container-small, .uk-container-expand-right.uk-container-small { max-width: calc(50% + (900px / 2) - 40px); } .uk-container-expand-left.uk-container-large, .uk-container-expand-right.uk-container-large { max-width: calc(50% + (1400px / 2) - 40px); } .uk-container-expand-left.uk-container-xlarge, .uk-container-expand-right.uk-container-xlarge { max-width: calc(50% + (1600px / 2) - 40px); } } /* Item ========================================================================== */ /* * Utility classes to reset container padding on the left or right side * Note: It has to be negative margin on the item, because it's specific to the item. */ .uk-container-item-padding-remove-left, .uk-container-item-padding-remove-right { width: calc(100% + 15px); } .uk-container-item-padding-remove-left { margin-left: -15px; } .uk-container-item-padding-remove-right { margin-right: -15px; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-container-item-padding-remove-left, .uk-container-item-padding-remove-right { width: calc(100% + 30px); } .uk-container-item-padding-remove-left { margin-left: -30px; } .uk-container-item-padding-remove-right { margin-right: -30px; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-container-item-padding-remove-left, .uk-container-item-padding-remove-right { width: calc(100% + 40px); } .uk-container-item-padding-remove-left { margin-left: -40px; } .uk-container-item-padding-remove-right { margin-right: -40px; } } /*@import "tile.scss";*/ /*@import "card.scss";*/ /*@import "close.scss"; // After: Icon*/ /*@import "spinner.scss"; // After: Icon*/ /*@import "totop.scss"; // After: Icon*/ /*@import "marker.scss"; // After: Icon*/ /*@import "alert.scss"; // After: Close*/ /* ======================================================================== Component: Placeholder ========================================================================== */ .uk-placeholder { margin-bottom: 20px; padding: 30px 30px; background: transparent; border: 1px dashed #e5e5e5; } /* Add margin if adjacent element */ * + .uk-placeholder { margin-top: 20px; } /* * Remove margin from the last-child */ .uk-placeholder > :last-child { margin-bottom: 0; } /*@import "badge.scss";*/ /*@import "label.scss";*/ /* ======================================================================== Component: Overlay ========================================================================== */ .uk-overlay { padding: 30px 30px; } /* * Remove margin from the last-child */ .uk-overlay > :last-child { margin-bottom: 0; } /* Icon ========================================================================== */ /* Style modifiers ========================================================================== */ /* * Default */ .uk-overlay-default { --uk-inverse: dark; background: rgba(255, 255, 255, 0.8); } /* * Primary */ .uk-overlay-primary { --uk-inverse: light; background: rgba(34, 34, 34, 0.8); } /*@import "article.scss";*/ /*@import "comment.scss";*/ /* ======================================================================== Component: Search ========================================================================== */ /* * 1. Container fits its content * 2. Create position context * 3. Prevent content overflow * 4. Reset `form` */ .uk-search { /* 1 */ display: inline-block; /* 2 */ position: relative; /* 3 */ max-width: 100%; /* 4 */ margin: 0; } /* Input ========================================================================== */ /* * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X. */ .uk-search-input::-webkit-search-cancel-button, .uk-search-input::-webkit-search-decoration { -webkit-appearance: none; } /* * Removes placeholder transparency in Firefox. */ .uk-search-input::-moz-placeholder { opacity: 1; } /* * 1. Define consistent box sizing. * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera. * 3. Remove `border-radius` in iOS. * 4. Change font properties to `inherit` in all browsers * 5. Show the overflow in Edge. * 6. Remove default style in iOS. * 7. Vertical alignment * 8. Take the full container width * 9. Style */ .uk-search-input { /* 1 */ box-sizing: border-box; /* 2 */ margin: 0; /* 3 */ border-radius: 0; /* 4 */ font: inherit; /* 5 */ overflow: visible; /* 6 */ -webkit-appearance: none; /* 7 */ vertical-align: middle; /* 8 */ width: 100%; /* 9 */ border: none; color: #666; } .uk-search-input:focus { outline: none; } /* Placeholder */ .uk-search-input::placeholder { color: #999; } /* Icon (Adopts `uk-icon`) ========================================================================== */ /* * Position above input * 1. Set position * 2. Center icon vertically and horizontally * 3. Style */ .uk-search .uk-search-icon { /* 1 */ position: absolute; top: 0; bottom: 0; left: 0; /* 2 */ display: inline-flex; justify-content: center; align-items: center; /* 3 */ color: #999; } /* * Required for `a`. */ .uk-search .uk-search-icon:hover { color: #999; } /* * Make `input` element clickable through icon, e.g. if it's a `span` */ .uk-search .uk-search-icon:not(a):not(button):not(input) { pointer-events: none; } /* * Position modifier */ .uk-search .uk-search-icon-flip { right: 0; left: auto; } /* Default modifier ========================================================================== */ .uk-search-default { width: 240px; } /* * Input */ .uk-search-default .uk-search-input { height: 40px; padding-left: 10px; padding-right: 10px; background: transparent; border: 1px solid #e5e5e5; } /* Focus */ .uk-search-default .uk-search-input:focus { background-color: rgba(0, 0, 0, 0); border-color: #1e87f0; } /* * Icon */ .uk-search-default .uk-search-icon { width: 40px; } .uk-search-default:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: 40px; } .uk-search-default:has(.uk-search-icon-flip) .uk-search-input { padding-right: 40px; } /* Navbar modifier ========================================================================== */ .uk-search-navbar { width: 240px; } /* * Input */ .uk-search-navbar .uk-search-input { height: 40px; padding-left: 10px; padding-right: 10px; background: #fff; border: 1px solid #e5e5e5; } /* Focus */ .uk-search-navbar .uk-search-input:focus { background-color: #fff; border-color: #1e87f0; } /* * Icon */ .uk-search-navbar .uk-search-icon { width: 40px; } .uk-search-navbar:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: 40px; } .uk-search-navbar:has(.uk-search-icon-flip) .uk-search-input { padding-right: 40px; } /* Medium modifier ========================================================================== */ .uk-search-medium { width: 400px; } /* * Input */ .uk-search-medium .uk-search-input { height: 40px; background: transparent; font-size: 1.5rem; } /* Focus */ /* * Icon */ .uk-search-medium .uk-search-icon { width: 24px; } .uk-search-medium:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: 34px; } .uk-search-medium:has(.uk-search-icon-flip) .uk-search-input { padding-right: 34px; } /* Large modifier ========================================================================== */ .uk-search-large { width: 500px; } /* * Input */ .uk-search-large .uk-search-input { height: 80px; background: transparent; font-size: 2.625rem; } /* Focus */ /* * Icon */ .uk-search-large .uk-search-icon { width: 40px; } .uk-search-large:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: 60px; } .uk-search-large:has(.uk-search-icon-flip) .uk-search-input { padding-right: 60px; } /* Toggle ========================================================================== */ .uk-search-toggle { color: #999; } /* Hover */ .uk-search-toggle:hover { color: #666; } /*@import "accordion.scss";*/ /* ======================================================================== Component: Drop ========================================================================== */ /* * 1. Hide by default * 2. Set position * 3. Set a default width */ .uk-drop { /* 1 */ display: none; /* 2 */ position: absolute; z-index: 1020; --uk-position-offset: 20px; --uk-position-viewport-offset: 15px; /* 3 */ box-sizing: border-box; width: 300px; } /* Show */ .uk-drop.uk-open { display: block; } /* Grid modifiers ========================================================================== */ .uk-drop-stack .uk-drop-grid > * { width: 100% !important; } /* Parent icon ========================================================================== */ .uk-drop-parent-icon { margin-left: 0.25em; transition: transform 0.3s ease-out; } [aria-expanded="true"] > .uk-drop-parent-icon { transform: rotateX(180deg); } /* ======================================================================== Component: Dropbar ========================================================================== */ /* * Adopts `uk-drop` * 1. Reset drop * 2. Style */ .uk-dropbar { --uk-position-offset: 0; --uk-position-shift-offset: 0; --uk-position-viewport-offset: 0; --uk-inverse: dark; /* 1 */ width: auto; /* 2 */ padding: 25px 15px 25px 15px; background: #fff; color: #666; } /* * Remove margin from the last-child */ .uk-dropbar > :last-child { margin-bottom: 0; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-dropbar { padding-left: 30px; padding-right: 30px; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-dropbar { padding-left: 40px; padding-right: 40px; } } .uk-dropbar :focus-visible { outline-color: #333 !important; } /* Size modifier ========================================================================== */ .uk-dropbar-large { padding-top: 40px; padding-bottom: 40px; } /* Direction modifier ========================================================================== */ .uk-dropbar-top { box-shadow: 0 12px 7px -6px rgba(0, 0, 0, 0.05); } .uk-dropbar-bottom { box-shadow: 0 -12px 7px -6px rgba(0, 0, 0, 0.05); } .uk-dropbar-left { box-shadow: 12px 0 7px -6px rgba(0, 0, 0, 0.05); } .uk-dropbar-right { box-shadow: -12px 0 7px -6px rgba(0, 0, 0, 0.05); } /* ======================================================================== Component: Dropnav ========================================================================== */ /* * 1. Position * 2. Reset dropbar * 3. Width */ .uk-dropnav-dropbar { /* 1 */ position: absolute; z-index: 980; /* 2 */ padding: 0; /* 3 */ left: 0; right: 0; } /* ======================================================================== Component: Modal ========================================================================== */ /* * 1. Hide by default * 2. Set position * 3. Allow scrolling for the modal dialog * 4. Horizontal padding * 5. Mask the background page * 6. Fade-in transition */ .uk-modal { /* 1 */ display: none; /* 2 */ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1010; /* 3 */ overflow-y: auto; /* 4 */ padding: 15px 15px; /* 5 */ background: rgba(0, 0, 0, 0.6); /* 6 */ opacity: 0; transition: opacity 0.15s linear; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-modal { padding: 50px 30px; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-modal { padding-left: 40px; padding-right: 40px; } } /* * Open */ .uk-modal.uk-open { opacity: 1; } /* Page ========================================================================== */ /* * Prevent scrollbars */ .uk-modal-page { overflow: hidden; } /* Dialog ========================================================================== */ /* * 1. Create position context for spinner and close button * 2. Dimensions * 3. `!important` is needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests * 4. Style * 5. Slide-in transition */ .uk-modal-dialog { /* 1 */ position: relative; /* 2 */ box-sizing: border-box; margin: 0 auto; width: 600px; /* 3 */ max-width: 100% !important; /* 4 */ background: #fff; /* 5 */ opacity: 0; transform: translateY(-100px); transition: 0.3s linear; transition-property: opacity, transform; } /* * Open */ .uk-open > .uk-modal-dialog { opacity: 1; transform: translateY(0); } /* Size modifier ========================================================================== */ /* * Container size * Take the same size as the Container component */ .uk-modal-container .uk-modal-dialog { width: 1200px; } /* * Full size * 1. Remove padding and background from modal * 2. Reset all default declarations from modal dialog */ /* 1 */ .uk-modal-full { padding: 0; background: none; } /* 2 */ .uk-modal-full .uk-modal-dialog { margin: 0; width: 100%; max-width: 100%; transform: translateY(0); } /* Sections ========================================================================== */ .uk-modal-body { display: flow-root; padding: 20px 20px; } .uk-modal-header { display: flow-root; padding: 10px 20px; background: #fff; border-bottom: 1px solid #e5e5e5; } .uk-modal-footer { display: flow-root; padding: 10px 20px; background: #fff; border-top: 1px solid #e5e5e5; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-modal-body { padding: 30px 30px; } .uk-modal-header { padding: 15px 30px; } .uk-modal-footer { padding: 15px 30px; } } /* * Remove margin from the last-child */ .uk-modal-body > :last-child, .uk-modal-header > :last-child, .uk-modal-footer > :last-child { margin-bottom: 0; } /* Title ========================================================================== */ .uk-modal-title { font-size: 2rem; line-height: 1.3; } /* Close * Adopts `uk-close` ========================================================================== */ [class*="uk-modal-close-"] { position: absolute; z-index: 1010; top: 10px; right: 10px; padding: 5px; } /* * Remove margin from adjacent element */ [class*="uk-modal-close-"]:first-child + * { margin-top: 0; } /* * Hover */ /* * Default */ /* * Outside * 1. Prevent scrollbar on small devices */ .uk-modal-close-outside { top: 0; /* 1 */ right: -5px; transform: translate(0, -100%); color: white; } .uk-modal-close-outside:hover { color: #fff; } /* Tablet landscape and bigger */ @media (min-width: 960px) { /* 1 */ .uk-modal-close-outside { right: 0; transform: translate(100%, -100%); } } /* * Full */ .uk-modal-close-full { top: 0; right: 0; padding: 10px; background: #fff; } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-modal-close-full { padding: 20px; } } /* ======================================================================== Component: Slideshow ========================================================================== */ /* * 1. Prevent tab highlighting on iOS. */ .uk-slideshow { /* 1 */ -webkit-tap-highlight-color: transparent; } /* Items ========================================================================== */ /* * 1. Create position and stacking context * 2. Reset list * 3. Clip child elements * 4. Prevent displaying the callout information on iOS. * 5. Disable horizontal panning gestures */ .uk-slideshow-items { /* 1 */ position: relative; z-index: 0; /* 2 */ margin: 0; padding: 0; list-style: none; /* 3 */ overflow: hidden; /* 4 */ -webkit-touch-callout: none; /* 5 */ touch-action: pan-y; } /* Item ========================================================================== */ /* * 1. Position items above each other * 2. Take the full width * 3. Clip child elements, e.g. for `uk-cover` * 4. Optimize animation */ .uk-slideshow-items > * { /* 1 */ position: absolute; top: 0; left: 0; /* 2 */ right: 0; bottom: 0; /* 3 */ overflow: hidden; /* 4 */ will-change: transform, opacity; } /* * Hide not active items */ .uk-slideshow-items > :not(.uk-active) { display: none; } /* ======================================================================== Component: Slider ========================================================================== */ /* * 1. Prevent tab highlighting on iOS. */ .uk-slider { /* 1 */ -webkit-tap-highlight-color: transparent; } /* Container ========================================================================== */ /* * 1. Clip child elements * 2. Prevent accidental scrolling through elements in slide getting focused */ .uk-slider-container { /* 1 */ overflow: hidden; /* 2 */ overflow: clip; } /* * Widen container to prevent box-shadows from clipping, `large-box-shadow` */ .uk-slider-container-offset { margin: -11px -25px -39px -25px; padding: 11px 25px 39px 25px; } /* Items ========================================================================== */ /* * 1. Optimize animation * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`. * 3. Disable horizontal panning gestures */ .uk-slider-items { /* 1 */ will-change: transform; /* 2 */ position: relative; /* 3 */ touch-action: pan-y; } /* * 1. Reset list style without interfering with grid * 2. Prevent displaying the callout information on iOS. */ .uk-slider-items:not(.uk-grid) { display: flex; /* 1 */ margin: 0; padding: 0; list-style: none; /* 2 */ -webkit-touch-callout: none; } .uk-slider-items.uk-grid { flex-wrap: nowrap; } /* Item ========================================================================== */ /* * 1. Let items take content dimensions (0 0 auto) * `max-width` needed to keep image responsiveness and prevent content overflow * 2. Create position context */ .uk-slider-items > * { /* 1 */ flex: none !important; box-sizing: border-box; max-width: 100%; /* 2 */ position: relative; } /* ======================================================================== Component: Sticky ========================================================================== */ /* * 1. Create position context so it's t the same like when fixed. * 2. Create stacking context already when not sticky to have the same context * for position set to `sticky` and `relative` * 2. More robust if padding and border are used and the sticky height is transitioned */ .uk-sticky { /* 1 */ position: relative; /* 2 */ z-index: 980; /* 3 */ box-sizing: border-box; } /* * 1. Force new layer to resolve frame rate issues on devices with lower frame rates */ .uk-sticky-fixed { margin: 0 !important; /* 1 */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* * Faster animations */ .uk-sticky[class*="uk-animation-"] { animation-duration: 0.2s; } .uk-sticky.uk-animation-reverse { animation-duration: 0.2s; } /* * Placeholder * Make content clickable for sticky cover and reveal effects */ .uk-sticky-placeholder { pointer-events: none; } /* ======================================================================== Component: Off-canvas ========================================================================== */ /* * 1. Hide by default * 2. Set position */ .uk-offcanvas { /* 1 */ display: none; /* 2 */ position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000; } /* * Flip modifier */ .uk-offcanvas-flip .uk-offcanvas { right: 0; left: auto; } /* Bar ========================================================================== */ /* * 1. Set position * 2. Size and style * 3. Allow scrolling */ .uk-offcanvas-bar { --uk-inverse: light; /* 1 */ position: absolute; top: 0; bottom: 0; left: -270px; /* 2 */ box-sizing: border-box; width: 270px; padding: 20px 20px; background: #222; /* 3 */ overflow-y: auto; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-offcanvas-bar { left: -350px; width: 350px; padding: 30px 30px; } } /* Flip modifier */ .uk-offcanvas-flip .uk-offcanvas-bar { left: auto; right: -270px; } /* Tablet landscape and bigger */ @media (min-width: 640px) { .uk-offcanvas-flip .uk-offcanvas-bar { right: -350px; } } /* * Open */ .uk-open > .uk-offcanvas-bar { left: 0; } .uk-offcanvas-flip .uk-open > .uk-offcanvas-bar { left: auto; right: 0; } /* * Slide Animation (Used in slide and push mode) */ .uk-offcanvas-bar-animation { transition: left 0.3s ease-out; } .uk-offcanvas-flip .uk-offcanvas-bar-animation { transition-property: right; } /* * Reveal Animation * 1. Set position * 2. Clip the bar * 3. Animation * 4. Reset position */ .uk-offcanvas-reveal { /* 1 */ position: absolute; top: 0; bottom: 0; left: 0; /* 2 */ width: 0; overflow: hidden; /* 3 */ transition: width 0.3s ease-out; } .uk-offcanvas-reveal .uk-offcanvas-bar { /* 4 */ left: 0; } .uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar { /* 4 */ left: auto; right: 0; } .uk-open > .uk-offcanvas-reveal { width: 270px; } /* Tablet landscape and bigger */ @media (min-width: 640px) { .uk-open > .uk-offcanvas-reveal { width: 350px; } } /* * Flip modifier */ .uk-offcanvas-flip .uk-offcanvas-reveal { right: 0; left: auto; } /* Close * Adopts `uk-close` ========================================================================== */ .uk-offcanvas-close { position: absolute; z-index: 1000; top: 5px; right: 5px; padding: 5px; } /* Tablet landscape and bigger */ @media (min-width: 640px) { .uk-offcanvas-close { top: 10px; right: 10px; } } /* * Remove margin from adjacent element */ .uk-offcanvas-close:first-child + * { margin-top: 0; } /* Overlay ========================================================================== */ /* * Overlay the whole page. Needed for the `::before` * 1. Using `100vw` so no modification is needed when off-canvas is flipped * 2. Allow for closing with swipe gesture on devices with pointer events. */ .uk-offcanvas-overlay { /* 1 */ width: 100vw; /* 2 */ touch-action: none; } /* * 1. Mask the whole page * 2. Fade-in transition */ .uk-offcanvas-overlay::before { /* 1 */ content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.1); /* 2 */ opacity: 0; transition: opacity 0.15s linear; } .uk-offcanvas-overlay.uk-open::before { opacity: 1; } /* Prevent scrolling ========================================================================== */ /* * Prevent horizontal scrollbar when the content is slide-out * Has to be on the `html` element too to make it work on the `body` * 1. `clip` is needed for `position: sticky` elements to keep their position */ .uk-offcanvas-page, .uk-offcanvas-container { overflow-x: hidden; /* 1 */ overflow-x: clip; } /* Container ========================================================================== */ /* * Prepare slide-out animation (Used in reveal and push mode) * Using `position: left` instead of `transform` because position `fixed` elements like sticky navbars * lose their fixed state and behaves like `absolute` within a transformed container * 1. Provide a fixed width and prevent shrinking */ .uk-offcanvas-container { position: relative; left: 0; transition: left 0.3s ease-out; /* 1 */ box-sizing: border-box; width: 100%; } /* * Activate slide-out animation */ :not(.uk-offcanvas-flip).uk-offcanvas-container-animation { left: 270px; } .uk-offcanvas-flip.uk-offcanvas-container-animation { left: -270px; } /* Tablet landscape and bigger */ @media (min-width: 640px) { :not(.uk-offcanvas-flip).uk-offcanvas-container-animation { left: 350px; } .uk-offcanvas-flip.uk-offcanvas-container-animation { left: -350px; } } /*@import "switcher.scss";*/ /*@import "leader.scss";*/ /*@import "notification.scss";*/ /* ======================================================================== Component: Tooltip ========================================================================== */ /* * 1. Hide by default * 2. Position * 3. Remove tooltip from document flow to keep the UIkit container from changing its size when injected into the document initially * 4. Dimensions * 5. Style */ .uk-tooltip { /* 1 */ display: none; /* 2 */ position: absolute; z-index: 1030; --uk-position-offset: 10px; --uk-position-viewport-offset: 10; /* 3 */ top: 0; /* 4 */ box-sizing: border-box; max-width: 200px; padding: 3px 6px; /* 5 */ background: #666; border-radius: 2px; color: #fff; font-size: 12px; } /* Show */ .uk-tooltip.uk-active { display: block; } /*@import "sortable.scss";*/ /*@import "countdown.scss";*/ /* ======================================================================== Component: Thumbnav ========================================================================== */ /* * 1. Allow items to wrap into the next line * 2. Reset list * 3. Gutter */ .uk-thumbnav { display: flex; /* 1 */ flex-wrap: wrap; /* 2 */ margin: 0; padding: 0; list-style: none; /* 3 */ margin-left: -15px; } /* * Space is allocated based on content dimensions, but shrinks: 0 1 auto * 1. Gutter */ .uk-thumbnav > * { /* 1 */ padding-left: 15px; } /* Items ========================================================================== */ /* * Items */ .uk-thumbnav > * > * { display: inline-block; position: relative; } .uk-thumbnav > * > *::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4)); transition: opacity 0.1s ease-in-out; } /* Hover */ .uk-thumbnav > * > :hover::after { opacity: 0; } /* Active */ .uk-thumbnav > .uk-active > *::after { opacity: 0; } /* Modifier: 'uk-thumbnav-vertical' ========================================================================== */ /* * 1. Change direction * 2. Gutter */ .uk-thumbnav-vertical { /* 1 */ flex-direction: column; /* 2 */ margin-left: 0; margin-top: -15px; } /* 2 */ .uk-thumbnav-vertical > * { padding-left: 0; padding-top: 15px; } /* ======================================================================== Component: Iconnav ========================================================================== */ /* * 1. Allow items to wrap into the next line * 2. Reset list * 3. Gutter */ .uk-iconnav { display: flex; /* 1 */ flex-wrap: wrap; /* 2 */ margin: 0; padding: 0; list-style: none; /* 3 */ margin-left: -10px; } /* * Space is allocated based on content dimensions, but shrinks: 0 1 auto * 1. Gutter */ .uk-iconnav > * { /* 1 */ padding-left: 10px; } /* Items ========================================================================== */ /* * Items must target `a` elements to exclude other elements (e.g. dropdowns) * 1. Center content vertically if there is still some text * 2. Imitate white space gap when using flexbox * 3. Force text not to affect item height * 4. Style * 5. Required for `a` if there is still some text */ .uk-iconnav > * > a { /* 1 */ display: flex; align-items: center; /* 2 */ column-gap: 0.25em; /* 3 */ line-height: 0; /* 4 */ color: #999; /* 5 */ text-decoration: none; font-size: 0.875rem; transition: 0.1s ease-in-out; transition-property: color, background-color; } /* Hover */ .uk-iconnav > * > a:hover { color: #666; } /* Active */ .uk-iconnav > .uk-active > a { color: #666; } /* Modifier: 'uk-iconnav-vertical' ========================================================================== */ /* * 1. Change direction * 2. Gutter */ .uk-iconnav-vertical { /* 1 */ flex-direction: column; /* 2 */ margin-left: 0; margin-top: -10px; } /* 2 */ .uk-iconnav-vertical > * { padding-left: 0; padding-top: 10px; } /* ======================================================================== Component: Grid ========================================================================== */ /* * 1. Allow cells to wrap into the next line * 2. Reset list */ .uk-grid { display: flex; /* 1 */ flex-wrap: wrap; /* 2 */ margin: 0; padding: 0; list-style: none; } /* * Grid cell * Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto * Reset margin for e.g. paragraphs */ .uk-grid > * { margin: 0; } /* * Remove margin from the last-child */ .uk-grid > * > :last-child { margin-bottom: 0; } /* Gutter ========================================================================== */ /* * Default */ /* Horizontal */ .uk-grid { margin-left: -30px; } .uk-grid > * { padding-left: 30px; } /* Vertical */ .uk-grid + .uk-grid, .uk-grid > .uk-grid-margin, * + .uk-grid-margin { margin-top: 30px; } /* Desktop and bigger */ @media (min-width: 1200px) { /* Horizontal */ .uk-grid { margin-left: -40px; } .uk-grid > * { padding-left: 40px; } /* Vertical */ .uk-grid + .uk-grid, .uk-grid > .uk-grid-margin, * + .uk-grid-margin { margin-top: 40px; } } /* * Small */ /* Horizontal */ .uk-grid-small, .uk-grid-column-small { margin-left: -15px; } .uk-grid-small > *, .uk-grid-column-small > * { padding-left: 15px; } /* Vertical */ .uk-grid + .uk-grid-small, .uk-grid + .uk-grid-row-small, .uk-grid-small > .uk-grid-margin, .uk-grid-row-small > .uk-grid-margin, * + .uk-grid-margin-small { margin-top: 15px; } /* * Medium */ /* Horizontal */ .uk-grid-medium, .uk-grid-column-medium { margin-left: -30px; } .uk-grid-medium > *, .uk-grid-column-medium > * { padding-left: 30px; } /* Vertical */ .uk-grid + .uk-grid-medium, .uk-grid + .uk-grid-row-medium, .uk-grid-medium > .uk-grid-margin, .uk-grid-row-medium > .uk-grid-margin, * + .uk-grid-margin-medium { margin-top: 30px; } /* * Large */ /* Horizontal */ .uk-grid-large, .uk-grid-column-large { margin-left: -40px; } .uk-grid-large > *, .uk-grid-column-large > * { padding-left: 40px; } /* Vertical */ .uk-grid + .uk-grid-large, .uk-grid + .uk-grid-row-large, .uk-grid-large > .uk-grid-margin, .uk-grid-row-large > .uk-grid-margin, * + .uk-grid-margin-large { margin-top: 40px; } /* Desktop and bigger */ @media (min-width: 1200px) { /* Horizontal */ .uk-grid-large, .uk-grid-column-large { margin-left: -70px; } .uk-grid-large > *, .uk-grid-column-large > * { padding-left: 70px; } /* Vertical */ .uk-grid + .uk-grid-large, .uk-grid + .uk-grid-row-large, .uk-grid-large > .uk-grid-margin, .uk-grid-row-large > .uk-grid-margin, * + .uk-grid-margin-large { margin-top: 70px; } } /* * Collapse */ /* Horizontal */ .uk-grid-collapse, .uk-grid-column-collapse { margin-left: 0; } .uk-grid-collapse > *, .uk-grid-column-collapse > * { padding-left: 0; } /* Vertical */ .uk-grid + .uk-grid-collapse, .uk-grid + .uk-grid-row-collapse, .uk-grid-collapse > .uk-grid-margin, .uk-grid-row-collapse > .uk-grid-margin { margin-top: 0; } /* Divider ========================================================================== */ .uk-grid-divider > * { position: relative; } .uk-grid-divider > :not(.uk-first-column)::before { content: ""; position: absolute; top: 0; bottom: 0; border-left: 1px solid #e5e5e5; } /* Vertical */ .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { content: ""; position: absolute; left: 0; right: 0; border-top: 1px solid #e5e5e5; } /* * Default */ /* Horizontal */ .uk-grid-divider { margin-left: -60px; } .uk-grid-divider > * { padding-left: 60px; } .uk-grid-divider > :not(.uk-first-column)::before { left: 30px; } /* Vertical */ .uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: 60px; } .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { top: -30px; left: 60px; } /* Desktop and bigger */ @media (min-width: 1200px) { /* Horizontal */ .uk-grid-divider { margin-left: -80px; } .uk-grid-divider > * { padding-left: 80px; } .uk-grid-divider > :not(.uk-first-column)::before { left: 40px; } /* Vertical */ .uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: 80px; } .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { top: -40px; left: 80px; } } /* * Small */ /* Horizontal */ .uk-grid-divider.uk-grid-small, .uk-grid-divider.uk-grid-column-small { margin-left: -30px; } .uk-grid-divider.uk-grid-small > *, .uk-grid-divider.uk-grid-column-small > * { padding-left: 30px; } .uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before, .uk-grid-divider.uk-grid-column-small > :not(.uk-first-column)::before { left: 15px; } /* Vertical */ .uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin, .uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin { margin-top: 30px; } .uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before { top: -15px; left: 30px; } .uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin::before { top: -15px; } .uk-grid-divider.uk-grid-column-small.uk-grid-stack > .uk-grid-margin::before { left: 30px; } /* * Medium */ /* Horizontal */ .uk-grid-divider.uk-grid-medium, .uk-grid-divider.uk-grid-column-medium { margin-left: -60px; } .uk-grid-divider.uk-grid-medium > *, .uk-grid-divider.uk-grid-column-medium > * { padding-left: 60px; } .uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before, .uk-grid-divider.uk-grid-column-medium > :not(.uk-first-column)::before { left: 30px; } /* Vertical */ .uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin, .uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin { margin-top: 60px; } .uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before { top: -30px; left: 60px; } .uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin::before { top: -30px; } .uk-grid-divider.uk-grid-column-medium.uk-grid-stack > .uk-grid-margin::before { left: 60px; } /* * Large */ /* Horizontal */ .uk-grid-divider.uk-grid-large, .uk-grid-divider.uk-grid-column-large { margin-left: -80px; } .uk-grid-divider.uk-grid-large > *, .uk-grid-divider.uk-grid-column-large > * { padding-left: 80px; } .uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before, .uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before { left: 40px; } /* Vertical */ .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin, .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin { margin-top: 80px; } .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before { top: -40px; left: 80px; } .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before { top: -40px; } .uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before { left: 80px; } /* Desktop and bigger */ @media (min-width: 1200px) { /* Horizontal */ .uk-grid-divider.uk-grid-large, .uk-grid-divider.uk-grid-column-large { margin-left: -140px; } .uk-grid-divider.uk-grid-large > *, .uk-grid-divider.uk-grid-column-large > * { padding-left: 140px; } .uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before, .uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before { left: 70px; } /* Vertical */ .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin, .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin { margin-top: 140px; } .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before { top: -70px; left: 140px; } .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before { top: -70px; } .uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before { left: 140px; } } /* Match child of a grid cell ========================================================================== */ /* * Behave like a block element * 1. Wrap into the next line * 2. Take the full width, at least 100%. Only if no class from the Width component is set. * 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids) */ .uk-grid-match > *, .uk-grid-item-match { display: flex; /* 1 */ flex-wrap: wrap; } .uk-grid-match > * > :not([class*="uk-width"]), .uk-grid-item-match > :not([class*="uk-width"]) { /* 2 */ box-sizing: border-box; width: 100%; /* 3 */ flex: auto; } /* ======================================================================== Component: Nav ========================================================================== */ /* * Reset */ .uk-nav, .uk-nav ul { margin: 0; padding: 0; list-style: none; } /* * 1. Center content vertically, e.g. an icon * 2. Imitate white space gap when using flexbox * 3. Reset link */ .uk-nav li > a { /* 1 */ display: flex; align-items: center; /* 2 */ column-gap: 0.25em; /* 3*/ text-decoration: none; } /* * Items * Must target `a` elements to exclude other elements (e.g. lists) */ .uk-nav > li > a { padding: 5px 0; } /* Sublists ========================================================================== */ /* * Level 2 * `ul` needed for higher specificity to override padding */ ul.uk-nav-sub { padding: 5px 0 5px 15px; } /* * Level 3 and deeper */ .uk-nav-sub ul { padding-left: 15px; } /* * Items */ .uk-nav-sub a { padding: 2px 0; } /* Parent icon ========================================================================== */ .uk-nav-parent-icon { margin-left: auto; transition: transform 0.3s ease-out; } .uk-nav > li.uk-open > a .uk-nav-parent-icon { transform: rotateX(180deg); } /* Header ========================================================================== */ .uk-nav-header { padding: 5px 0; text-transform: uppercase; font-size: 0.875rem; } .uk-nav-header:not(:first-child) { margin-top: 20px; } /* Divider ========================================================================== */ .uk-nav .uk-nav-divider { margin: 5px 0; } /* Default modifier ========================================================================== */ .uk-nav-default { font-size: 0.875rem; line-height: 1.5; } /* * Items */ .uk-nav-default > li > a { color: #999; } /* Hover */ .uk-nav-default > li > a:hover { color: #666; } /* Active */ .uk-nav-default > li.uk-active > a { color: #333; } /* * Subtitle */ .uk-nav-default .uk-nav-subtitle { font-size: 12px; } /* * Header */ .uk-nav-default .uk-nav-header { color: #333; } /* * Divider */ .uk-nav-default .uk-nav-divider { border-top: 1px solid #e5e5e5; } /* * Sublists */ .uk-nav-default .uk-nav-sub { font-size: 0.875rem; line-height: 1.5; } .uk-nav-default .uk-nav-sub a { color: #999; } .uk-nav-default .uk-nav-sub a:hover { color: #666; } .uk-nav-default .uk-nav-sub li.uk-active > a { color: #333; } /* Primary modifier ========================================================================== */ .uk-nav-primary { font-size: 1.5rem; line-height: 1.5; } /* * Items */ .uk-nav-primary > li > a { color: #999; } /* Hover */ .uk-nav-primary > li > a:hover { color: #666; } /* Active */ .uk-nav-primary > li.uk-active > a { color: #333; } /* * Subtitle */ .uk-nav-primary .uk-nav-subtitle { font-size: 1.25rem; } /* * Header */ .uk-nav-primary .uk-nav-header { color: #333; } /* * Divider */ .uk-nav-primary .uk-nav-divider { border-top: 1px solid #e5e5e5; } /* * Sublists */ .uk-nav-primary .uk-nav-sub { font-size: 1.25rem; line-height: 1.5; } .uk-nav-primary .uk-nav-sub a { color: #999; } .uk-nav-primary .uk-nav-sub a:hover { color: #666; } .uk-nav-primary .uk-nav-sub li.uk-active > a { color: #333; } /* Secondary modifier ========================================================================== */ .uk-nav-secondary { font-size: 16px; line-height: 1.5; } .uk-nav-secondary > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) { margin-top: 0; } /* * Items */ .uk-nav-secondary > li > a { color: #333; padding: 10px 10px; } /* Hover */ .uk-nav-secondary > li > a:hover { color: #333; background-color: #f8f8f8; } /* Active */ .uk-nav-secondary > li.uk-active > a { color: #333; background-color: #f8f8f8; } /* * Subtitle */ .uk-nav-secondary .uk-nav-subtitle { font-size: 0.875rem; color: #999; } /* Hover */ .uk-nav-secondary > li > a:hover .uk-nav-subtitle { color: #666; } /* Active */ .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle { color: #333; } /* * Header */ .uk-nav-secondary .uk-nav-header { color: #333; } /* * Divider */ .uk-nav-secondary .uk-nav-divider { border-top: 1px solid #e5e5e5; } /* * Sublists */ .uk-nav-secondary .uk-nav-sub { font-size: 0.875rem; line-height: 1.5; } .uk-nav-secondary .uk-nav-sub a { color: #999; } .uk-nav-secondary .uk-nav-sub a:hover { color: #666; } .uk-nav-secondary .uk-nav-sub li.uk-active > a { color: #333; } /* Size modifier ========================================================================== */ /* * Medium */ .uk-nav-medium { font-size: 2.8875rem; line-height: 1; } .uk-nav-large { font-size: 3.4rem; line-height: 1; } .uk-nav-xlarge { font-size: 4rem; line-height: 1; } /* Tablet Landscape and bigger */ @media (min-width: 960px) { .uk-nav-medium { font-size: 3.5rem; } .uk-nav-large { font-size: 4rem; } .uk-nav-xlarge { font-size: 6rem; } } /* Laptop and bigger */ @media (min-width: 1200px) { .uk-nav-medium { font-size: 4rem; } .uk-nav-large { font-size: 6rem; } .uk-nav-xlarge { font-size: 8rem; } } /* Alignment modifier ========================================================================== */ /* * 1. Center header * 2. Center items */ /* 1 */ .uk-nav-center { text-align: center; } /* 2 */ .uk-nav-center li > a { justify-content: center; } /* Sublists */ .uk-nav-center .uk-nav-sub, .uk-nav-center .uk-nav-sub ul { padding-left: 0; } /* Parent icon */ .uk-nav-center .uk-nav-parent-icon { margin-left: 0.25em; } /* Style modifier ========================================================================== */ /* * Divider * Naming is in plural to prevent conflicts with divider sub object. */ .uk-nav.uk-nav-divider > :not(.uk-nav-header, .uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) { margin-top: 5px; padding-top: 5px; border-top: 1px solid #e5e5e5; } /* ======================================================================== Component: Navbar ========================================================================== */ /* * 1. Create position context to center navbar group */ .uk-navbar { display: flex; /* 1 */ position: relative; } /* Container ========================================================================== */ .uk-navbar-container:not(.uk-navbar-transparent) { background: #f8f8f8; } /* Groups ========================================================================== */ /* * 1. Align navs and items vertically if they have a different height */ .uk-navbar-left, .uk-navbar-right, [class*="uk-navbar-center"] { display: flex; gap: 15px; /* 1 */ align-items: center; } /* * Horizontal alignment * 1. Create position context for centered navbar with sub groups (left/right) * 2. Fix text wrapping if content is larger than 50% of the container. * 3. Needed for dropdowns because a new position context is created * `z-index` must be smaller than off-canvas * 4. Align sub groups for centered navbar */ .uk-navbar-right { margin-left: auto; } .uk-navbar-center:only-child { margin-left: auto; margin-right: auto; /* 1 */ position: relative; } .uk-navbar-center:not(:only-child) { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 2 */ width: max-content; box-sizing: border-box; /* 3 */ z-index: 990; } /* 4 */ .uk-navbar-center-left, .uk-navbar-center-right { position: absolute; top: 0; } .uk-navbar-center-left { right: calc(100% + 15px); } .uk-navbar-center-right { left: calc(100% + 15px); } [class*="uk-navbar-center-"] { width: max-content; box-sizing: border-box; } /* Nav ========================================================================== */ /* * 1. Reset list */ .uk-navbar-nav { display: flex; gap: 15px; /* 1 */ margin: 0; padding: 0; list-style: none; } /* * Allow items to wrap into the next line * Only not `absolute` positioned groups */ .uk-navbar-left, .uk-navbar-right, .uk-navbar-center:only-child { flex-wrap: wrap; } /* * Items * 1. Center content vertically and horizontally * 2. Imitate white space gap when using flexbox * 3. Dimensions * 4. Style * 5. Required for `a` */ .uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle { /* 1 */ display: flex; justify-content: center; align-items: center; /* 2 */ column-gap: 0.25em; /* 3 */ box-sizing: border-box; min-height: 80px; /* 4 */ font-size: 0.875rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 5 */ text-decoration: none; } /* * Nav items */ .uk-navbar-nav > li > a { padding: 0 0; color: #999; text-transform: uppercase; transition: 0.1s ease-in-out; transition-property: color, background-color; } /* * Hover * Apply hover style also if dropdown is opened */ .uk-navbar-nav > li:hover > a, .uk-navbar-nav > li > a[aria-expanded="true"] { color: #666; } /* OnClick */ .uk-navbar-nav > li > a:active { color: #333; } /* Active */ .uk-navbar-nav > li.uk-active > a { color: #333; } /* Parent icon modifier ========================================================================== */ .uk-navbar-parent-icon { margin-left: 4px; transition: transform 0.3s ease-out; } .uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon { transform: rotateX(180deg); } /* Item ========================================================================== */ .uk-navbar-item { padding: 0 0; color: #666; } /* * Remove margin from the last-child */ .uk-navbar-item > :last-child { margin-bottom: 0; } /* Toggle ========================================================================== */ .uk-navbar-toggle { padding: 0 0; color: #999; } .uk-navbar-toggle:hover, .uk-navbar-toggle[aria-expanded="true"] { color: #666; text-decoration: none; } /* * Icon * Adopts `uk-icon` */ /* Hover */ /* Subtitle ========================================================================== */ .uk-navbar-subtitle { font-size: 0.875rem; } /* Justify modifier ========================================================================== */ .uk-navbar-justify .uk-navbar-left, .uk-navbar-justify .uk-navbar-right, .uk-navbar-justify .uk-navbar-nav, .uk-navbar-justify .uk-navbar-nav > li, .uk-navbar-justify .uk-navbar-item, .uk-navbar-justify .uk-navbar-toggle { flex-grow: 1; } /* Style modifiers ========================================================================== */ /* Dropdown ========================================================================== */ /* * Adopts `uk-drop` * 1. Set a default width * 2. Style */ .uk-navbar-dropdown { --uk-position-offset: 15px; --uk-position-shift-offset: 0; --uk-position-viewport-offset: 15px; --uk-inverse: dark; /* 1 */ width: 200px; /* 2 */ padding: 25px; background: #fff; color: #666; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15); } /* * Remove margin from the last-child */ .uk-navbar-dropdown > :last-child { margin-bottom: 0; } .uk-navbar-dropdown :focus-visible { outline-color: #333 !important; } /* * Grid * Adopts `uk-grid` */ /* Gutter Horizontal */ .uk-navbar-dropdown .uk-drop-grid { margin-left: -30px; } .uk-navbar-dropdown .uk-drop-grid > * { padding-left: 30px; } /* Gutter Vertical */ .uk-navbar-dropdown .uk-drop-grid > .uk-grid-margin { margin-top: 30px; } /* * Width modifier */ .uk-navbar-dropdown-width-2:not(.uk-drop-stack) { width: 400px; } .uk-navbar-dropdown-width-3:not(.uk-drop-stack) { width: 600px; } .uk-navbar-dropdown-width-4:not(.uk-drop-stack) { width: 800px; } .uk-navbar-dropdown-width-5:not(.uk-drop-stack) { width: 1000px; } /* * Size modifier */ .uk-navbar-dropdown-large { --uk-position-shift-offset: 0; padding: 40px; } /* * Dropbar modifier * 1. Reset dropdown width to prevent to early shifting * 2. Reset style * 3. Padding */ .uk-navbar-dropdown-dropbar { /* 1 */ width: auto; /* 2 */ background: transparent; /* 3 */ padding: 25px 0 25px 0; --uk-position-offset: 0; --uk-position-shift-offset: 0; --uk-position-viewport-offset: 15px; box-shadow: none; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: 30px; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: 40px; } } .uk-navbar-dropdown-dropbar-large { --uk-position-shift-offset: 0; padding-top: 40px; padding-bottom: 40px; } /* Dropdown Nav * Adopts `uk-nav` ========================================================================== */ .uk-navbar-dropdown-nav { font-size: 0.875rem; } /* * Items */ .uk-navbar-dropdown-nav > li > a { color: #999; } /* Hover */ .uk-navbar-dropdown-nav > li > a:hover { color: #666; } /* Active */ .uk-navbar-dropdown-nav > li.uk-active > a { color: #333; } /* * Subtitle */ .uk-navbar-dropdown-nav .uk-nav-subtitle { font-size: 12px; } /* * Header */ .uk-navbar-dropdown-nav .uk-nav-header { color: #333; } /* * Divider */ .uk-navbar-dropdown-nav .uk-nav-divider { border-top: 1px solid #e5e5e5; } /* * Sublists */ .uk-navbar-dropdown-nav .uk-nav-sub a { color: #999; } .uk-navbar-dropdown-nav .uk-nav-sub a:hover { color: #666; } .uk-navbar-dropdown-nav .uk-nav-sub li.uk-active > a { color: #333; } /* Dropbar ========================================================================== */ /* * Adopts `uk-dropnav-dropbar` */ .uk-navbar-container { transition: 0.1s ease-in-out; transition-property: background-color; } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-navbar-left, .uk-navbar-right, [class*="uk-navbar-center"] { gap: 30px; } .uk-navbar-center-left { right: calc(100% + 30px); } .uk-navbar-center-right { left: calc(100% + 30px); } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-navbar-nav { gap: 30px; } } /* ======================================================================== Component: Subnav ========================================================================== */ /* * 1. Allow items to wrap into the next line * 2. Center items vertically if they have a different height * 3. Gutter * 4. Reset list */ .uk-subnav { display: flex; /* 1 */ flex-wrap: wrap; /* 2 */ align-items: center; /* 3 */ margin-left: -20px; /* 4 */ padding: 0; list-style: none; } /* * 1. Space is allocated solely based on content dimensions: 0 0 auto * 2. Gutter * 3. Create position context for dropdowns */ .uk-subnav > * { /* 1 */ flex: none; /* 2 */ padding-left: 20px; /* 3 */ position: relative; } /* Items ========================================================================== */ /* * Items must target `a` elements to exclude other elements (e.g. dropdowns) * Using `:first-child` instead of `a` to support `span` elements for text * 1. Center content vertically, e.g. an icon * 2. Imitate white space gap when using flexbox * 3. Style */ .uk-subnav > * > :first-child { /* 1 */ display: flex; align-items: center; /* 2 */ column-gap: 0.25em; /* 3 */ color: #999; font-size: 0.875rem; text-transform: uppercase; transition: 0.1s ease-in-out; transition-property: color, background-color; } /* Hover */ .uk-subnav > * > a:hover { color: #666; text-decoration: none; } /* Active */ .uk-subnav > .uk-active > a { color: #333; } /* Divider modifier ========================================================================== */ /* * Set gutter */ .uk-subnav-divider { margin-left: -41px; } /* * Align items and divider vertically */ .uk-subnav-divider > * { display: flex; align-items: center; } /* * Divider * 1. `nth-child` makes it also work without JS if it's only one row */ .uk-subnav-divider > ::before { content: ""; height: 1.5em; margin-left: 0px; margin-right: 20px; border-left: 1px solid transparent; } /* 1 */ .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before { border-left-color: #e5e5e5; } /* Pill modifier ========================================================================== */ .uk-subnav-pill > * > :first-child { padding: 5px 10px; background: transparent; color: #999; } /* Hover */ .uk-subnav-pill > * > a:hover { background-color: #f8f8f8; color: #666; } /* OnClick */ .uk-subnav-pill > * > a:active { background-color: #f8f8f8; color: #666; } /* Active */ .uk-subnav-pill > .uk-active > a { background-color: #1e87f0; color: #fff; } /* Disabled * The same for all style modifiers ========================================================================== */ .uk-subnav > .uk-disabled > a { color: #999; } /* ======================================================================== Component: Breadcrumb ========================================================================== */ /* * Reset list */ .uk-breadcrumb { padding: 0; list-style: none; } /* * 1. Doesn't generate any box and replaced by child boxes */ .uk-breadcrumb > * { display: contents; } /* Items ========================================================================== */ .uk-breadcrumb > * > * { font-size: 0.875rem; color: #999; } /* Hover */ .uk-breadcrumb > * > :hover { color: #666; text-decoration: none; } /* Disabled */ /* Active */ .uk-breadcrumb > :last-child > span, .uk-breadcrumb > :last-child > a:not([href]) { color: #666; } /* * Divider * `nth-child` makes it also work without JS if it's only one row * 1. Remove space between inline block elements. * 2. Style */ .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before { content: "/"; display: inline-block; /* 1 */ margin: 0 20px 0 calc(20px - 4px); /* 2 */ font-size: 0.875rem; color: #999; } /* ======================================================================== Component: Pagination ========================================================================== */ /* * 1. Allow items to wrap into the next line * 2. Center items vertically if they have a different height * 3. Gutter * 4. Reset list */ .uk-pagination { display: flex; /* 1 */ flex-wrap: wrap; /* 2 */ align-items: center; /* 3 */ margin-left: 0; /* 4 */ padding: 0; list-style: none; } /* * 1. Space is allocated solely based on content dimensions: 0 0 auto * 2. Gutter * 3. Create position context for dropdowns */ .uk-pagination > * { /* 1 */ flex: none; /* 2 */ padding-left: 0; /* 3 */ position: relative; } /* Items ========================================================================== */ /* * 1. Center content vertically, e.g. an icon * 2. Imitate white space gap when using flexbox * 3. Style */ .uk-pagination > * > * { /* 1 */ display: flex; align-items: center; /* 2 */ column-gap: 0.25em; /* 3 */ padding: 5px 10px; color: #999; transition: color 0.1s ease-in-out; } /* Hover */ .uk-pagination > * > :hover { color: #666; text-decoration: none; } /* Active */ .uk-pagination > .uk-active > * { color: #666; } /* Disabled */ .uk-pagination > .uk-disabled > * { color: #999; } /*@import "tab.scss";*/ /* ======================================================================== Component: Slidenav ========================================================================== */ /* * Adopts `uk-icon` */ .uk-slidenav { padding: 5px 10px; color: rgba(102, 102, 102, 0.5); transition: color 0.1s ease-in-out; } /* Hover */ .uk-slidenav:hover { color: rgba(102, 102, 102, 0.9); } /* OnClick */ .uk-slidenav:active { color: rgba(102, 102, 102, 0.5); } /* Icon modifier ========================================================================== */ /* * Previous */ /* * Next */ /* Size modifier ========================================================================== */ .uk-slidenav-large { padding: 10px 10px; } /* Container ========================================================================== */ .uk-slidenav-container { display: flex; } /* ======================================================================== Component: Dotnav ========================================================================== */ /* * 1. Allow items to wrap into the next line * 2. Reset list * 3. Gutter */ .uk-dotnav { display: flex; /* 1 */ flex-wrap: wrap; /* 2 */ margin: 0; padding: 0; list-style: none; /* 3 */ margin-left: -12px; } /* * 1. Space is allocated solely based on content dimensions: 0 0 auto * 2. Gutter */ .uk-dotnav > * { /* 1 */ flex: none; /* 2 */ padding-left: 12px; } /* Items ========================================================================== */ /* * Items * 1. Hide text if present */ .uk-dotnav > * > * { display: block; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; background: transparent; /* 1 */ text-indent: 100%; overflow: hidden; white-space: nowrap; border: 1px solid rgba(102, 102, 102, 0.4); transition: 0.2s ease-in-out; transition-property: background-color, border-color; } /* Hover */ .uk-dotnav > * > :hover { background-color: rgba(102, 102, 102, 0.6); border-color: transparent; } /* OnClick */ .uk-dotnav > * > :active { background-color: rgba(102, 102, 102, 0.2); border-color: transparent; } /* Active */ .uk-dotnav > .uk-active > * { background-color: rgba(102, 102, 102, 0.6); border-color: transparent; } /* Modifier: 'uk-dotnav-vertical' ========================================================================== */ /* * 1. Change direction * 2. Gutter */ .uk-dotnav-vertical { /* 1 */ flex-direction: column; /* 2 */ margin-left: 0; margin-top: -12px; } /* 2 */ .uk-dotnav-vertical > * { padding-left: 0; padding-top: 12px; } /* ======================================================================== Component: Dropdown ========================================================================== */ /* * Adopts `uk-drop` * 1. Reset drop and let text expand the width instead of wrapping * 2. Set a default width * 3. Style */ .uk-dropdown { --uk-position-offset: 10px; --uk-position-viewport-offset: 15px; --uk-inverse: dark; /* 1 */ width: auto; /* 2 */ min-width: 200px; /* 3 */ padding: 25px; background: #fff; color: #666; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15); } /* * Remove margin from the last-child */ .uk-dropdown > :last-child { margin-bottom: 0; } .uk-dropdown :focus-visible { outline-color: #333 !important; } /* Size modifier ========================================================================== */ .uk-dropdown-large { padding: 40px; } /* Dropbar modifier ========================================================================== */ /* * 1. Reset dropdown width to prevent to early shifting * 2. Reset style * 3. Padding */ .uk-dropdown-dropbar { /* 1 */ width: auto; /* 2 */ background: transparent; /* 3 */ padding: 5px 0 25px 0; --uk-position-viewport-offset: 15px; box-shadow: none; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-dropdown-dropbar { --uk-position-viewport-offset: 30px; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-dropdown-dropbar { --uk-position-viewport-offset: 40px; } } .uk-dropdown-dropbar-large { padding-top: 40px; padding-bottom: 40px; } /* Nav * Adopts `uk-nav` ========================================================================== */ .uk-dropdown-nav { font-size: 0.875rem; } /* * Items */ .uk-dropdown-nav > li > a { color: #999; } /* Hover + Active */ .uk-dropdown-nav > li > a:hover, .uk-dropdown-nav > li.uk-active > a { color: #666; } /* * Subtitle */ .uk-dropdown-nav .uk-nav-subtitle { font-size: 12px; } /* * Header */ .uk-dropdown-nav .uk-nav-header { color: #333; } /* * Divider */ .uk-dropdown-nav .uk-nav-divider { border-top: 1px solid #e5e5e5; } /* * Sublists */ .uk-dropdown-nav .uk-nav-sub a { color: #999; } .uk-dropdown-nav .uk-nav-sub a:hover, .uk-dropdown-nav .uk-nav-sub li.uk-active > a { color: #666; } /* ======================================================================== Component: Lightbox ========================================================================== */ /* * 1. Hide by default * 2. Set position * 3. Allow scrolling for the modal dialog * 4. Horizontal padding * 5. Mask the background page * 6. Fade-in transition * 7. Prevent cancellation of pointer events while dragging */ .uk-lightbox { /* 1 */ display: none; /* 2 */ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1010; /* 5 */ background: #000; /* 6 */ opacity: 0; transition: opacity 0.15s linear; /* 7 */ touch-action: pinch-zoom; } /* * Open * 1. Center child * 2. Fade-in */ .uk-lightbox.uk-open { display: block; /* 2 */ opacity: 1; } /* * Focus */ .uk-lightbox :focus-visible { outline-color: rgba(255, 255, 255, 0.7); } /* Page ========================================================================== */ /* * Prevent scrollbars */ .uk-lightbox-page { overflow: hidden; } /* Item ========================================================================== */ /* * 1. Center child within the viewport * 2. Not visible by default * 3. Color needed for spinner icon * 4. Optimize animation * 5. Responsiveness * Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera */ .uk-lightbox-items > * { /* 1 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* 2 */ display: none; justify-content: center; align-items: center; /* 3 */ color: rgba(255, 255, 255, 0.7); /* 4 */ will-change: transform, opacity; } /* 5 */ .uk-lightbox-items > * > * { max-width: 100vw; max-height: 100vh; } .uk-lightbox-items > * > :not(iframe) { width: auto; height: auto; } .uk-lightbox-items > .uk-active { display: flex; } /* Toolbar ========================================================================== */ .uk-lightbox-toolbar { padding: 10px 10px; background: rgba(0, 0, 0, 0.3); color: rgba(255, 255, 255, 0.7); } .uk-lightbox-toolbar > * { color: rgba(255, 255, 255, 0.7); } /* Toolbar Icon (Close) ========================================================================== */ .uk-lightbox-toolbar-icon { padding: 5px; color: rgba(255, 255, 255, 0.7); } /* * Hover */ .uk-lightbox-toolbar-icon:hover { color: #fff; } /* Button (Slidenav) ========================================================================== */ /* * 1. Center icon vertically and horizontally */ .uk-lightbox-button { box-sizing: border-box; width: 50px; height: 50px; background: rgba(0, 0, 0, 0.3); color: rgba(255, 255, 255, 0.7); /* 1 */ display: inline-flex; justify-content: center; align-items: center; } /* Hover */ .uk-lightbox-button:hover { color: #fff; } /* OnClick */ /* Caption ========================================================================== */ .uk-lightbox-caption:empty { display: none; } /* Iframe ========================================================================== */ .uk-lightbox-iframe { width: 80%; height: 80%; } /* ======================================================================== Component: Animation ========================================================================== */ [class*="uk-animation-"] { animation: 0.5s ease-out both; } /* Animations ========================================================================== */ /* * Fade */ .uk-animation-fade { animation-name: uk-fade; animation-duration: 0.8s; animation-timing-function: linear; } /* * Scale */ .uk-animation-scale-up { animation-name: uk-fade, uk-scale-up; } .uk-animation-scale-down { animation-name: uk-fade, uk-scale-down; } /* * Slide */ .uk-animation-slide-top { animation-name: uk-fade, uk-slide-top; } .uk-animation-slide-bottom { animation-name: uk-fade, uk-slide-bottom; } .uk-animation-slide-left { animation-name: uk-fade, uk-slide-left; } .uk-animation-slide-right { animation-name: uk-fade, uk-slide-right; } /* * Slide Small */ .uk-animation-slide-top-small { animation-name: uk-fade, uk-slide-top-small; } .uk-animation-slide-bottom-small { animation-name: uk-fade, uk-slide-bottom-small; } .uk-animation-slide-left-small { animation-name: uk-fade, uk-slide-left-small; } .uk-animation-slide-right-small { animation-name: uk-fade, uk-slide-right-small; } /* * Slide Medium */ .uk-animation-slide-top-medium { animation-name: uk-fade, uk-slide-top-medium; } .uk-animation-slide-bottom-medium { animation-name: uk-fade, uk-slide-bottom-medium; } .uk-animation-slide-left-medium { animation-name: uk-fade, uk-slide-left-medium; } .uk-animation-slide-right-medium { animation-name: uk-fade, uk-slide-right-medium; } /* * Kenburns */ .uk-animation-kenburns { animation-name: uk-kenburns; animation-duration: 15s; } /* * Shake */ .uk-animation-shake { animation-name: uk-shake; } /* * SVG Stroke * The `--uk-animation-stroke` custom property contains the longest path length. * Set it manually or use `uk-svg="stroke-animation: true"` to set it automatically. * All strokes are animated by the same pace and doesn't end simultaneously. * To end simultaneously, `pathLength="1"` could be used, but it's not working in Safari yet. */ .uk-animation-stroke { animation-name: uk-stroke; animation-duration: 2s; stroke-dasharray: var(--uk-animation-stroke); } /* Direction modifier ========================================================================== */ .uk-animation-reverse { animation-direction: reverse; animation-timing-function: ease-in; } /* Duration modifier ========================================================================== */ .uk-animation-fast { animation-duration: 0.1s; } /* Toggle animation based on the State of the Parent Element ========================================================================== */ .uk-animation-toggle:not(:hover):not(:focus) [class*="uk-animation-"] { animation-name: none; } /* Keyframes used by animation classes ========================================================================== */ /* * Fade */ @keyframes uk-fade { 0% { opacity: 0; } 100% { opacity: 1; } } /* * Scale */ @keyframes uk-scale-up { 0% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes uk-scale-down { 0% { transform: scale(1.1); } 100% { transform: scale(1); } } /* * Slide */ @keyframes uk-slide-top { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } @keyframes uk-slide-bottom { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } @keyframes uk-slide-left { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } @keyframes uk-slide-right { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } /* * Slide Small */ @keyframes uk-slide-top-small { 0% { transform: translateY(-10px); } 100% { transform: translateY(0); } } @keyframes uk-slide-bottom-small { 0% { transform: translateY(10px); } 100% { transform: translateY(0); } } @keyframes uk-slide-left-small { 0% { transform: translateX(-10px); } 100% { transform: translateX(0); } } @keyframes uk-slide-right-small { 0% { transform: translateX(10px); } 100% { transform: translateX(0); } } /* * Slide Medium */ @keyframes uk-slide-top-medium { 0% { transform: translateY(-50px); } 100% { transform: translateY(0); } } @keyframes uk-slide-bottom-medium { 0% { transform: translateY(50px); } 100% { transform: translateY(0); } } @keyframes uk-slide-left-medium { 0% { transform: translateX(-50px); } 100% { transform: translateX(0); } } @keyframes uk-slide-right-medium { 0% { transform: translateX(50px); } 100% { transform: translateX(0); } } /* * Kenburns */ @keyframes uk-kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } /* * Shake */ @keyframes uk-shake { 0%, 100% { transform: translateX(0); } 10% { transform: translateX(-9px); } 20% { transform: translateX(8px); } 30% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 50% { transform: translateX(-5px); } 60% { transform: translateX(4px); } 70% { transform: translateX(-3px); } 80% { transform: translateX(2px); } 90% { transform: translateX(-1px); } } /* * Stroke */ @keyframes uk-stroke { 0% { stroke-dashoffset: var(--uk-animation-stroke); } 100% { stroke-dashoffset: 0; } } /* ======================================================================== Component: Width ========================================================================== */ /* Equal child widths ========================================================================== */ [class*="uk-child-width"] > * { box-sizing: border-box; width: 100%; } .uk-child-width-1-2 > * { width: 50%; } .uk-child-width-1-3 > * { width: calc(100% / 3); } .uk-child-width-1-4 > * { width: 25%; } .uk-child-width-1-5 > * { width: 20%; } .uk-child-width-1-6 > * { width: calc(100% / 6); } .uk-child-width-auto > * { width: auto; } /* * 1. Reset the `min-width`, which is set to auto by default, because * flex items won't shrink below their minimum intrinsic content size. * Using `1px` instead of `0`, so items still wrap into the next line, * if they have zero width and padding and the predecessor is 100% wide. */ .uk-child-width-expand > :not([class*="uk-width"]) { flex: 1; /* 1 */ min-width: 1px; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-child-width-1-1\@s > * { width: 100%; } .uk-child-width-1-2\@s > * { width: 50%; } .uk-child-width-1-3\@s > * { width: calc(100% / 3); } .uk-child-width-1-4\@s > * { width: 25%; } .uk-child-width-1-5\@s > * { width: 20%; } .uk-child-width-1-6\@s > * { width: calc(100% / 6); } .uk-child-width-auto\@s > * { width: auto; } .uk-child-width-expand\@s > :not([class*="uk-width"]) { flex: 1; min-width: 1px; } /* Reset expand */ .uk-child-width-1-1\@s > :not([class*="uk-width"]), .uk-child-width-1-2\@s > :not([class*="uk-width"]), .uk-child-width-1-3\@s > :not([class*="uk-width"]), .uk-child-width-1-4\@s > :not([class*="uk-width"]), .uk-child-width-1-5\@s > :not([class*="uk-width"]), .uk-child-width-1-6\@s > :not([class*="uk-width"]), .uk-child-width-auto\@s > :not([class*="uk-width"]) { flex: initial; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-child-width-1-1\@m > * { width: 100%; } .uk-child-width-1-2\@m > * { width: 50%; } .uk-child-width-1-3\@m > * { width: calc(100% / 3); } .uk-child-width-1-4\@m > * { width: 25%; } .uk-child-width-1-5\@m > * { width: 20%; } .uk-child-width-1-6\@m > * { width: calc(100% / 6); } .uk-child-width-auto\@m > * { width: auto; } .uk-child-width-expand\@m > :not([class*="uk-width"]) { flex: 1; min-width: 1px; } /* Reset expand */ .uk-child-width-1-1\@m > :not([class*="uk-width"]), .uk-child-width-1-2\@m > :not([class*="uk-width"]), .uk-child-width-1-3\@m > :not([class*="uk-width"]), .uk-child-width-1-4\@m > :not([class*="uk-width"]), .uk-child-width-1-5\@m > :not([class*="uk-width"]), .uk-child-width-1-6\@m > :not([class*="uk-width"]), .uk-child-width-auto\@m > :not([class*="uk-width"]) { flex: initial; } } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-child-width-1-1\@l > * { width: 100%; } .uk-child-width-1-2\@l > * { width: 50%; } .uk-child-width-1-3\@l > * { width: calc(100% / 3); } .uk-child-width-1-4\@l > * { width: 25%; } .uk-child-width-1-5\@l > * { width: 20%; } .uk-child-width-1-6\@l > * { width: calc(100% / 6); } .uk-child-width-auto\@l > * { width: auto; } .uk-child-width-expand\@l > :not([class*="uk-width"]) { flex: 1; min-width: 1px; } /* Reset expand */ .uk-child-width-1-1\@l > :not([class*="uk-width"]), .uk-child-width-1-2\@l > :not([class*="uk-width"]), .uk-child-width-1-3\@l > :not([class*="uk-width"]), .uk-child-width-1-4\@l > :not([class*="uk-width"]), .uk-child-width-1-5\@l > :not([class*="uk-width"]), .uk-child-width-1-6\@l > :not([class*="uk-width"]), .uk-child-width-auto\@l > :not([class*="uk-width"]) { flex: initial; } } /* Large screen and bigger */ @media (min-width: 1600px) { .uk-child-width-1-1\@xl > * { width: 100%; } .uk-child-width-1-2\@xl > * { width: 50%; } .uk-child-width-1-3\@xl > * { width: calc(100% / 3); } .uk-child-width-1-4\@xl > * { width: 25%; } .uk-child-width-1-5\@xl > * { width: 20%; } .uk-child-width-1-6\@xl > * { width: calc(100% / 6); } .uk-child-width-auto\@xl > * { width: auto; } .uk-child-width-expand\@xl > :not([class*="uk-width"]) { flex: 1; min-width: 1px; } /* Reset expand */ .uk-child-width-1-1\@xl > :not([class*="uk-width"]), .uk-child-width-1-2\@xl > :not([class*="uk-width"]), .uk-child-width-1-3\@xl > :not([class*="uk-width"]), .uk-child-width-1-4\@xl > :not([class*="uk-width"]), .uk-child-width-1-5\@xl > :not([class*="uk-width"]), .uk-child-width-1-6\@xl > :not([class*="uk-width"]), .uk-child-width-auto\@xl > :not([class*="uk-width"]) { flex: initial; } } /* Single Widths ========================================================================== */ /* * 1. `max-width` is needed for the pixel-based classes */ [class*="uk-width"] { box-sizing: border-box; width: 100%; /* 1 */ max-width: 100%; } /* Halves */ .uk-width-1-2 { width: 50%; } /* Thirds */ .uk-width-1-3 { width: calc(100% / 3); } .uk-width-2-3 { width: calc(200% / 3); } /* Quarters */ .uk-width-1-4 { width: 25%; } .uk-width-3-4 { width: 75%; } /* Fifths */ .uk-width-1-5 { width: 20%; } .uk-width-2-5 { width: 40%; } .uk-width-3-5 { width: 60%; } .uk-width-4-5 { width: 80%; } /* Sixths */ .uk-width-1-6 { width: calc(100% / 6); } .uk-width-5-6 { width: calc(500% / 6); } /* Pixel */ .uk-width-small { width: 150px; } .uk-width-medium { width: 300px; } .uk-width-large { width: 450px; } .uk-width-xlarge { width: 600px; } .uk-width-2xlarge { width: 750px; } /* Auto */ .uk-width-auto { width: auto; } /* Expand */ .uk-width-expand { flex: 1; min-width: 1px; } /* Phone landscape and bigger */ @media (min-width: 640px) { /* Whole */ .uk-width-1-1\@s { width: 100%; } /* Halves */ .uk-width-1-2\@s { width: 50%; } /* Thirds */ .uk-width-1-3\@s { width: calc(100% / 3); } .uk-width-2-3\@s { width: calc(200% / 3); } /* Quarters */ .uk-width-1-4\@s { width: 25%; } .uk-width-3-4\@s { width: 75%; } /* Fifths */ .uk-width-1-5\@s { width: 20%; } .uk-width-2-5\@s { width: 40%; } .uk-width-3-5\@s { width: 60%; } .uk-width-4-5\@s { width: 80%; } /* Sixths */ .uk-width-1-6\@s { width: calc(100% / 6); } .uk-width-5-6\@s { width: calc(500% / 6); } /* Pixel */ .uk-width-small\@s { width: 150px; } .uk-width-medium\@s { width: 300px; } .uk-width-large\@s { width: 450px; } .uk-width-xlarge\@s { width: 600px; } .uk-width-2xlarge\@s { width: 750px; } /* Auto */ .uk-width-auto\@s { width: auto; } /* Expand */ .uk-width-expand\@s { flex: 1; min-width: 1px; } /* Reset expand */ .uk-width-1-1\@s, .uk-width-1-2\@s, .uk-width-1-3\@s, .uk-width-2-3\@s, .uk-width-1-4\@s, .uk-width-3-4\@s, .uk-width-1-5\@s, .uk-width-2-5\@s, .uk-width-3-5\@s, .uk-width-4-5\@s, .uk-width-1-6\@s, .uk-width-5-6\@s, .uk-width-small\@s, .uk-width-medium\@s, .uk-width-large\@s, .uk-width-xlarge\@s, .uk-width-2xlarge\@s, .uk-width-auto\@s { flex: initial; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { /* Whole */ .uk-width-1-1\@m { width: 100%; } /* Halves */ .uk-width-1-2\@m { width: 50%; } /* Thirds */ .uk-width-1-3\@m { width: calc(100% / 3); } .uk-width-2-3\@m { width: calc(200% / 3); } /* Quarters */ .uk-width-1-4\@m { width: 25%; } .uk-width-3-4\@m { width: 75%; } /* Fifths */ .uk-width-1-5\@m { width: 20%; } .uk-width-2-5\@m { width: 40%; } .uk-width-3-5\@m { width: 60%; } .uk-width-4-5\@m { width: 80%; } /* Sixths */ .uk-width-1-6\@m { width: calc(100% / 6); } .uk-width-5-6\@m { width: calc(500% / 6); } /* Pixel */ .uk-width-small\@m { width: 150px; } .uk-width-medium\@m { width: 300px; } .uk-width-large\@m { width: 450px; } .uk-width-xlarge\@m { width: 600px; } .uk-width-2xlarge\@m { width: 750px; } /* Auto */ .uk-width-auto\@m { width: auto; } /* Expand */ .uk-width-expand\@m { flex: 1; min-width: 1px; } /* Reset expand */ .uk-width-1-1\@m, .uk-width-1-2\@m, .uk-width-1-3\@m, .uk-width-2-3\@m, .uk-width-1-4\@m, .uk-width-3-4\@m, .uk-width-1-5\@m, .uk-width-2-5\@m, .uk-width-3-5\@m, .uk-width-4-5\@m, .uk-width-1-6\@m, .uk-width-5-6\@m, .uk-width-small\@m, .uk-width-medium\@m, .uk-width-large\@m, .uk-width-xlarge\@m, .uk-width-2xlarge\@m, .uk-width-auto\@m { flex: initial; } } /* Desktop and bigger */ @media (min-width: 1200px) { /* Whole */ .uk-width-1-1\@l { width: 100%; } /* Halves */ .uk-width-1-2\@l { width: 50%; } /* Thirds */ .uk-width-1-3\@l { width: calc(100% / 3); } .uk-width-2-3\@l { width: calc(200% / 3); } /* Quarters */ .uk-width-1-4\@l { width: 25%; } .uk-width-3-4\@l { width: 75%; } /* Fifths */ .uk-width-1-5\@l { width: 20%; } .uk-width-2-5\@l { width: 40%; } .uk-width-3-5\@l { width: 60%; } .uk-width-4-5\@l { width: 80%; } /* Sixths */ .uk-width-1-6\@l { width: calc(100% / 6); } .uk-width-5-6\@l { width: calc(500% / 6); } /* Pixel */ .uk-width-small\@l { width: 150px; } .uk-width-medium\@l { width: 300px; } .uk-width-large\@l { width: 450px; } .uk-width-xlarge\@l { width: 600px; } .uk-width-2xlarge\@l { width: 750px; } /* Auto */ .uk-width-auto\@l { width: auto; } /* Expand */ .uk-width-expand\@l { flex: 1; min-width: 1px; } /* Reset expand */ .uk-width-1-1\@l, .uk-width-1-2\@l, .uk-width-1-3\@l, .uk-width-2-3\@l, .uk-width-1-4\@l, .uk-width-3-4\@l, .uk-width-1-5\@l, .uk-width-2-5\@l, .uk-width-3-5\@l, .uk-width-4-5\@l, .uk-width-1-6\@l, .uk-width-5-6\@l, .uk-width-small\@l, .uk-width-medium\@l, .uk-width-large\@l, .uk-width-xlarge\@l, .uk-width-2xlarge\@l, .uk-width-auto\@l { flex: initial; } } /* Large screen and bigger */ @media (min-width: 1600px) { /* Whole */ .uk-width-1-1\@xl { width: 100%; } /* Halves */ .uk-width-1-2\@xl { width: 50%; } /* Thirds */ .uk-width-1-3\@xl { width: calc(100% / 3); } .uk-width-2-3\@xl { width: calc(200% / 3); } /* Quarters */ .uk-width-1-4\@xl { width: 25%; } .uk-width-3-4\@xl { width: 75%; } /* Fifths */ .uk-width-1-5\@xl { width: 20%; } .uk-width-2-5\@xl { width: 40%; } .uk-width-3-5\@xl { width: 60%; } .uk-width-4-5\@xl { width: 80%; } /* Sixths */ .uk-width-1-6\@xl { width: calc(100% / 6); } .uk-width-5-6\@xl { width: calc(500% / 6); } /* Pixel */ .uk-width-small\@xl { width: 150px; } .uk-width-medium\@xl { width: 300px; } .uk-width-large\@xl { width: 450px; } .uk-width-xlarge\@xl { width: 600px; } .uk-width-2xlarge\@xl { width: 750px; } /* Auto */ .uk-width-auto\@xl { width: auto; } /* Expand */ .uk-width-expand\@xl { flex: 1; min-width: 1px; } /* Reset expand */ .uk-width-1-1\@xl, .uk-width-1-2\@xl, .uk-width-1-3\@xl, .uk-width-2-3\@xl, .uk-width-1-4\@xl, .uk-width-3-4\@xl, .uk-width-1-5\@xl, .uk-width-2-5\@xl, .uk-width-3-5\@xl, .uk-width-4-5\@xl, .uk-width-1-6\@xl, .uk-width-5-6\@xl, .uk-width-small\@xl, .uk-width-medium\@xl, .uk-width-large\@xl, .uk-width-xlarge\@xl, .uk-width-2xlarge\@xl, .uk-width-auto\@xl { flex: initial; } } /* Intrinsic Widths ========================================================================== */ .uk-width-max-content { width: max-content; } .uk-width-min-content { width: min-content; } /* ======================================================================== Component: Height ========================================================================== */ [class*="uk-height"] { box-sizing: border-box; } /* * Only works if parent element has a height set */ .uk-height-1-1 { height: 100%; } /* * Useful to create image teasers */ .uk-height-viewport { min-height: 100vh; } .uk-height-viewport-2 { min-height: 200vh; } .uk-height-viewport-3 { min-height: 300vh; } .uk-height-viewport-4 { min-height: 400vh; } /* * Pixel * Useful for `overflow: auto` */ .uk-height-small { height: 150px; } .uk-height-medium { height: 300px; } .uk-height-large { height: 450px; } .uk-height-max-small { max-height: 150px; } .uk-height-max-medium { max-height: 300px; } .uk-height-max-large { max-height: 450px; } /* ======================================================================== Component: Text ========================================================================== */ /* Style modifiers ========================================================================== */ .uk-text-lead { font-size: 1.5rem; line-height: 1.5; color: #333; } .uk-text-meta { font-size: 0.875rem; line-height: 1.4; color: #999; } .uk-text-meta > a { color: #999; } .uk-text-meta > a:hover { color: #666; text-decoration: none; } /* Size modifiers ========================================================================== */ .uk-text-small { font-size: 0.875rem; line-height: 1.5; } .uk-text-large { font-size: 1.5rem; line-height: 1.5; } .uk-text-default { font-size: 16px; line-height: 1.5; } /* Weight modifier ========================================================================== */ .uk-text-light { font-weight: 300; } .uk-text-normal { font-weight: 400; } .uk-text-bold { font-weight: 700; } .uk-text-lighter { font-weight: lighter; } .uk-text-bolder { font-weight: bolder; } /* Style modifier ========================================================================== */ .uk-text-italic { font-style: italic; } /* Transform modifier ========================================================================== */ .uk-text-capitalize { text-transform: capitalize !important; } .uk-text-uppercase { text-transform: uppercase !important; } .uk-text-lowercase { text-transform: lowercase !important; } /* Decoration modifier ========================================================================== */ .uk-text-decoration-none { text-decoration: none !important; } /* Color modifiers ========================================================================== */ .uk-text-muted { color: #999 !important; } .uk-text-emphasis { color: #333 !important; } .uk-text-primary { color: #1e87f0 !important; } .uk-text-secondary { color: #222 !important; } .uk-text-success { color: #32d296 !important; } .uk-text-warning { color: #faa05a !important; } .uk-text-danger { color: #f0506e !important; } /* Background modifier ========================================================================== */ /* * 1. The background clips to the foreground text. Works in all browsers. * 2. Default color is set to transparent. * 3. Container fits the text * 4. Style */ .uk-text-background { /* 1 */ -webkit-background-clip: text; /* 2 */ color: transparent !important; /* 3 */ display: inline-block; /* 4 */ background-color: #1e87f0; background-image: linear-gradient(90deg, #1e87f0 0%, #411ef0 100%); } /* Alignment modifiers ========================================================================== */ .uk-text-left { text-align: left !important; } .uk-text-right { text-align: right !important; } .uk-text-center { text-align: center !important; } .uk-text-justify { text-align: justify !important; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-text-left\@s { text-align: left !important; } .uk-text-right\@s { text-align: right !important; } .uk-text-center\@s { text-align: center !important; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-text-left\@m { text-align: left !important; } .uk-text-right\@m { text-align: right !important; } .uk-text-center\@m { text-align: center !important; } } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-text-left\@l { text-align: left !important; } .uk-text-right\@l { text-align: right !important; } .uk-text-center\@l { text-align: center !important; } } /* Large screen and bigger */ @media (min-width: 1600px) { .uk-text-left\@xl { text-align: left !important; } .uk-text-right\@xl { text-align: right !important; } .uk-text-center\@xl { text-align: center !important; } } /* * Vertical */ .uk-text-top { vertical-align: top !important; } .uk-text-middle { vertical-align: middle !important; } .uk-text-bottom { vertical-align: bottom !important; } .uk-text-baseline { vertical-align: baseline !important; } /* Wrap modifiers ========================================================================== */ /* * Prevent text from wrapping onto multiple lines */ .uk-text-nowrap { white-space: nowrap; } /* * 1. Make sure a max-width is set after which truncation can occur * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis * 3. Fix for table cells */ .uk-text-truncate { /* 1 */ max-width: 100%; /* 2 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 2 */ th.uk-text-truncate, td.uk-text-truncate { max-width: 0; } /* * Wrap long words onto the next line and break them if they are too long to fit. * 1. Make it work with table cells in all browsers. * Note: Not using `hyphens: auto` because it hyphenates text even if not needed. */ .uk-text-break { overflow-wrap: break-word; } /* 1 */ th.uk-text-break, td.uk-text-break { word-break: break-word; } /* ======================================================================== Component: Column ========================================================================== */ [class*="uk-column-"] { column-gap: 30px; } /* Desktop and bigger */ @media (min-width: 1200px) { [class*="uk-column-"] { column-gap: 40px; } } /* * Fix image 1px line wrapping into the next column in Chrome */ [class*="uk-column-"] img { transform: translate3d(0, 0, 0); } /* Divider ========================================================================== */ /* * 1. Double the column gap */ .uk-column-divider { column-rule: 1px solid #e5e5e5; /* 1 */ column-gap: 60px; } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-column-divider { column-gap: 80px; } } /* Width modifiers ========================================================================== */ .uk-column-1-2 { column-count: 2; } .uk-column-1-3 { column-count: 3; } .uk-column-1-4 { column-count: 4; } .uk-column-1-5 { column-count: 5; } .uk-column-1-6 { column-count: 6; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-column-1-2\@s { column-count: 2; } .uk-column-1-3\@s { column-count: 3; } .uk-column-1-4\@s { column-count: 4; } .uk-column-1-5\@s { column-count: 5; } .uk-column-1-6\@s { column-count: 6; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-column-1-2\@m { column-count: 2; } .uk-column-1-3\@m { column-count: 3; } .uk-column-1-4\@m { column-count: 4; } .uk-column-1-5\@m { column-count: 5; } .uk-column-1-6\@m { column-count: 6; } } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-column-1-2\@l { column-count: 2; } .uk-column-1-3\@l { column-count: 3; } .uk-column-1-4\@l { column-count: 4; } .uk-column-1-5\@l { column-count: 5; } .uk-column-1-6\@l { column-count: 6; } } /* Large screen and bigger */ @media (min-width: 1600px) { .uk-column-1-2\@xl { column-count: 2; } .uk-column-1-3\@xl { column-count: 3; } .uk-column-1-4\@xl { column-count: 4; } .uk-column-1-5\@xl { column-count: 5; } .uk-column-1-6\@xl { column-count: 6; } } /* Make element span across all columns * Does not work in Firefox yet ========================================================================== */ .uk-column-span { column-span: all; } /* ======================================================================== Component: Cover ========================================================================== */ /* * Works with iframes and embedded content * 1. Use attribute to apply transform instantly. Needed if transform is transitioned. * 2. Reset responsiveness for embedded content * 3. Center object * Note: Percent values on the `top` property only works if this element * is absolute positioned or if the container has a height */ /* 1 */ [uk-cover]:where(canvas, iframe, svg), [data-uk-cover]:where(canvas, iframe, svg) { /* 2 */ max-width: none; /* 3 */ position: absolute; left: 50%; top: 50%; --uk-position-translate-x: -50%; --uk-position-translate-y: -50%; transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y)); } iframe[uk-cover], iframe[data-uk-cover] { pointer-events: none; } [uk-cover]:where(img, video), [data-uk-cover]:where(img, video) { /* 3 */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; object-fit: cover; object-position: center; } /* Container ========================================================================== */ /* * 1. Parent container which clips resized object * 2. Needed if the child is positioned absolute. See note above */ .uk-cover-container { /* 1 */ overflow: hidden; /* 2 */ position: relative; } /* ======================================================================== Component: Background ========================================================================== */ /* Color ========================================================================== */ .uk-background-default { background-color: #fff; } .uk-background-muted { background-color: #f8f8f8; } .uk-background-primary { background-color: #1e87f0; } .uk-background-secondary { background-color: #222; } /* Size ========================================================================== */ .uk-background-cover, .uk-background-contain, .uk-background-width-1-1, .uk-background-height-1-1 { background-position: 50% 50%; background-repeat: no-repeat; } .uk-background-cover { background-size: cover; } .uk-background-contain { background-size: contain; } .uk-background-width-1-1 { background-size: 100%; } .uk-background-height-1-1 { background-size: auto 100%; } /* Position ========================================================================== */ .uk-background-top-left { background-position: 0 0; } .uk-background-top-center { background-position: 50% 0; } .uk-background-top-right { background-position: 100% 0; } .uk-background-center-left { background-position: 0 50%; } .uk-background-center-center { background-position: 50% 50%; } .uk-background-center-right { background-position: 100% 50%; } .uk-background-bottom-left { background-position: 0 100%; } .uk-background-bottom-center { background-position: 50% 100%; } .uk-background-bottom-right { background-position: 100% 100%; } /* Repeat ========================================================================== */ .uk-background-norepeat { background-repeat: no-repeat; } /* Attachment ========================================================================== */ /* * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d` */ .uk-background-fixed { background-attachment: fixed; /* 1 */ backface-visibility: hidden; } /* * Exclude touch devices because `fixed` doesn't work on iOS and Android */ @media (pointer: coarse) { .uk-background-fixed { background-attachment: scroll; } } /* Image ========================================================================== */ /* Phone portrait and smaller */ @media (max-width: 639px) { .uk-background-image\@s { background-image: none !important; } } /* Phone landscape and smaller */ @media (max-width: 959px) { .uk-background-image\@m { background-image: none !important; } } /* Tablet landscape and smaller */ @media (max-width: 1199px) { .uk-background-image\@l { background-image: none !important; } } /* Desktop and smaller */ @media (max-width: 1599px) { .uk-background-image\@xl { background-image: none !important; } } /* Blend modes ========================================================================== */ .uk-background-blend-multiply { background-blend-mode: multiply; } .uk-background-blend-screen { background-blend-mode: screen; } .uk-background-blend-overlay { background-blend-mode: overlay; } .uk-background-blend-darken { background-blend-mode: darken; } .uk-background-blend-lighten { background-blend-mode: lighten; } .uk-background-blend-color-dodge { background-blend-mode: color-dodge; } .uk-background-blend-color-burn { background-blend-mode: color-burn; } .uk-background-blend-hard-light { background-blend-mode: hard-light; } .uk-background-blend-soft-light { background-blend-mode: soft-light; } .uk-background-blend-difference { background-blend-mode: difference; } .uk-background-blend-exclusion { background-blend-mode: exclusion; } .uk-background-blend-hue { background-blend-mode: hue; } .uk-background-blend-saturation { background-blend-mode: saturation; } .uk-background-blend-color { background-blend-mode: color; } .uk-background-blend-luminosity { background-blend-mode: luminosity; } /* ======================================================================== Component: Align ========================================================================== */ /* * Default */ [class*="uk-align"] { display: block; margin-bottom: 30px; } * + [class*="uk-align"] { margin-top: 30px; } /* * Center */ .uk-align-center { margin-left: auto; margin-right: auto; } /* * Left/Right */ .uk-align-left { margin-top: 0; margin-right: 30px; float: left; } .uk-align-right { margin-top: 0; margin-left: 30px; float: right; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-align-left\@s { margin-top: 0; margin-right: 30px; float: left; } .uk-align-right\@s { margin-top: 0; margin-left: 30px; float: right; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-align-left\@m { margin-top: 0; margin-right: 30px; float: left; } .uk-align-right\@m { margin-top: 0; margin-left: 30px; float: right; } } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-align-left\@l { margin-top: 0; float: left; } .uk-align-right\@l { margin-top: 0; float: right; } .uk-align-left, .uk-align-left\@s, .uk-align-left\@m, .uk-align-left\@l { margin-right: 40px; } .uk-align-right, .uk-align-right\@s, .uk-align-right\@m, .uk-align-right\@l { margin-left: 40px; } } /* Large screen and bigger */ @media (min-width: 1600px) { .uk-align-left\@xl { margin-top: 0; margin-right: 40px; float: left; } .uk-align-right\@xl { margin-top: 0; margin-left: 40px; float: right; } } /* ======================================================================== Component: SVG ========================================================================== */ /* * 1. Fill all SVG elements with the current text color if no `fill` attribute is set * 2. Set the fill and stroke color of all SVG elements to the current text color */ /* 1 */ .uk-svg, .uk-svg:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) { fill: currentcolor; } .uk-svg:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { stroke: currentcolor; } /* * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835 */ .uk-svg { transform: translate(0, 0); } /* ======================================================================== Component: Utility ========================================================================== */ /* Panel ========================================================================== */ .uk-panel { display: flow-root; position: relative; box-sizing: border-box; } /* * Remove margin from the last-child */ .uk-panel > :last-child { margin-bottom: 0; } /* * Scrollable */ .uk-panel-scrollable { height: 170px; padding: 10px; border: 1px solid #e5e5e5; overflow: auto; resize: both; } /* Clearfix ========================================================================== */ /* * 1. `table-cell` is used with `::before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit * 2. `table` is used again with `::after` because `clear` only works with block elements. * Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari */ /* 1 */ .uk-clearfix::before { content: ""; display: table-cell; } /* 2 */ .uk-clearfix::after { content: ""; display: table; clear: both; } /* Float ========================================================================== */ /* * 1. Prevent content overflow */ .uk-float-left { float: left; } .uk-float-right { float: right; } /* 1 */ [class*="uk-float-"] { max-width: 100%; } /* Overflow ========================================================================== */ .uk-overflow-hidden { overflow: hidden; } /* * Enable scrollbars if content is clipped */ .uk-overflow-auto { overflow: auto; } .uk-overflow-auto > :last-child { margin-bottom: 0; } /* Box Sizing ========================================================================== */ .uk-box-sizing-content { box-sizing: content-box; } .uk-box-sizing-border { box-sizing: border-box; } /* Resize ========================================================================== */ .uk-resize { resize: both; } .uk-resize-horizontal { resize: horizontal; } .uk-resize-vertical { resize: vertical; } /* Display ========================================================================== */ .uk-display-block { display: block !important; } .uk-display-inline { display: inline !important; } .uk-display-inline-block { display: inline-block !important; } /* Inline ========================================================================== */ /* * 1. Container fits its content * 2. Create position context * 3. Prevent content overflow * 4. Behave like most inline-block elements * 5. Force new layer without creating a new stacking context * to fix 1px glitch when combined with overlays and transitions in Webkit * 6. Clip child elements */ [class*="uk-inline"] { /* 1 */ display: inline-block; /* 2 */ position: relative; /* 3 */ max-width: 100%; /* 4 */ vertical-align: middle; /* 5 */ -webkit-backface-visibility: hidden; } .uk-inline-clip { /* 6 */ overflow: hidden; } /* Responsive objects ========================================================================== */ /* * Preserve original dimensions * Because `img, `video`, `canvas` and `audio` are already responsive by default, see Base component */ .uk-preserve-width, .uk-preserve-width canvas, .uk-preserve-width img, .uk-preserve-width svg, .uk-preserve-width video { max-width: none; } /* * Responsiveness * Corrects `max-width` and `max-height` behavior if padding and border are used */ .uk-responsive-width, .uk-responsive-height { box-sizing: border-box; } /* * 1. Set a maximum width. `important` needed to override `uk-preserve-width img` * 2. Auto scale the height. Only needed if `height` attribute is present */ .uk-responsive-width { /* 1 */ max-width: 100% !important; /* 2 */ height: auto; } /* * 1. Set a maximum height. Only works if the parent element has a fixed height * 2. Auto scale the width. Only needed if `width` attribute is present * 3. Reset max-width, which `img, `video`, `canvas` and `audio` already have by default */ .uk-responsive-height { /* 1 */ max-height: 100%; /* 2 */ width: auto; /* 3 */ max-width: none; } /* * Fix initial iframe width. Without the viewport is expanded on iOS devices */ [uk-responsive], [data-uk-responsive] { max-width: 100%; } /* Object ========================================================================== */ .uk-object-cover { object-fit: cover; } .uk-object-contain { object-fit: contain; } .uk-object-fill { object-fit: fill; } .uk-object-none { object-fit: none; } .uk-object-scale-down { object-fit: scale-down; } /* * Position */ .uk-object-top-left { object-position: 0 0; } .uk-object-top-center { object-position: 50% 0; } .uk-object-top-right { object-position: 100% 0; } .uk-object-center-left { object-position: 0 50%; } .uk-object-center-center { object-position: 50% 50%; } .uk-object-center-right { object-position: 100% 50%; } .uk-object-bottom-left { object-position: 0 100%; } .uk-object-bottom-center { object-position: 50% 100%; } .uk-object-bottom-right { object-position: 100% 100%; } /* Border ========================================================================== */ .uk-border-circle { border-radius: 50%; } .uk-border-pill { border-radius: 500px; } .uk-border-rounded { border-radius: 5px; } /* * Fix `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit */ .uk-inline-clip[class*="uk-border-"] { -webkit-transform: translateZ(0); } /* Box-shadow ========================================================================== */ .uk-box-shadow-small { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .uk-box-shadow-medium { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .uk-box-shadow-large { box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16); } .uk-box-shadow-xlarge { box-shadow: 0 28px 50px rgba(0, 0, 0, 0.16); } /* * Hover */ [class*="uk-box-shadow-hover"] { transition: box-shadow 0.1s ease-in-out; } .uk-box-shadow-hover-small:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .uk-box-shadow-hover-medium:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .uk-box-shadow-hover-large:hover { box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16); } .uk-box-shadow-hover-xlarge:hover { box-shadow: 0 28px 50px rgba(0, 0, 0, 0.16); } /* Box-shadow bottom ========================================================================== */ /* * 1. Set position. * 2. Set style * 3. Fix shadow being clipped in Safari if container is animated */ @supports (filter: blur(0)) { .uk-box-shadow-bottom { display: inline-block; position: relative; z-index: 0; max-width: 100%; vertical-align: middle; } .uk-box-shadow-bottom::after { content: ""; /* 1 */ position: absolute; bottom: -30px; left: 0; right: 0; z-index: -1; /* 2 */ height: 30px; border-radius: 100%; background: #444; filter: blur(20px); /* 3 */ will-change: filter; } } /* Drop cap ========================================================================== */ /* * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements * https://bugzilla.mozilla.org/show_bug.cgi?id=214004 * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height` * https://bugzilla.mozilla.org/show_bug.cgi?id=317933 */ .uk-dropcap::first-letter, .uk-dropcap > p:first-of-type::first-letter { display: block; margin-right: 10px; float: left; font-size: 4.5em; line-height: 1; margin-bottom: -2px; } /* 2 */ @-moz-document url-prefix() { .uk-dropcap::first-letter, .uk-dropcap > p:first-of-type::first-letter { margin-top: 1.1%; } } /* Logo ========================================================================== */ /* * 1. Style * 2. Required for `a` * 3. Behave like image but can be overridden through flex utility classes */ .uk-logo { /* 1 */ font-size: 1.5rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; color: #333; /* 2 */ text-decoration: none; } /* 3 */ :where(.uk-logo) { display: inline-block; vertical-align: middle; } /* Hover */ .uk-logo:hover { color: #333; /* 1 */ text-decoration: none; } .uk-logo :where(img, svg, video) { display: block; } .uk-logo-inverse { display: none; } /* Disabled State ========================================================================== */ .uk-disabled { pointer-events: none; } /* Drag State ========================================================================== */ /* * 1. Needed if moving over elements with have their own cursor on hover, e.g. links or buttons * 2. Fix dragging over iframes */ .uk-drag, .uk-drag * { cursor: move; } /* 2 */ .uk-drag iframe { pointer-events: none; } /* Dragover State ========================================================================== */ /* * Create a box-shadow when dragging a file over the upload area */ .uk-dragover { box-shadow: 0 0 20px rgba(100, 100, 100, 0.3); } /* Blend modes ========================================================================== */ .uk-blend-multiply { mix-blend-mode: multiply; } .uk-blend-screen { mix-blend-mode: screen; } .uk-blend-overlay { mix-blend-mode: overlay; } .uk-blend-darken { mix-blend-mode: darken; } .uk-blend-lighten { mix-blend-mode: lighten; } .uk-blend-color-dodge { mix-blend-mode: color-dodge; } .uk-blend-color-burn { mix-blend-mode: color-burn; } .uk-blend-hard-light { mix-blend-mode: hard-light; } .uk-blend-soft-light { mix-blend-mode: soft-light; } .uk-blend-difference { mix-blend-mode: difference; } .uk-blend-exclusion { mix-blend-mode: exclusion; } .uk-blend-hue { mix-blend-mode: hue; } .uk-blend-saturation { mix-blend-mode: saturation; } .uk-blend-color { mix-blend-mode: color; } .uk-blend-luminosity { mix-blend-mode: luminosity; } /* Transform ========================================================================== */ .uk-transform-center { transform: translate(-50%, -50%); } /* Transform Origin ========================================================================== */ .uk-transform-origin-top-left { transform-origin: 0 0; } .uk-transform-origin-top-center { transform-origin: 50% 0; } .uk-transform-origin-top-right { transform-origin: 100% 0; } .uk-transform-origin-center-left { transform-origin: 0 50%; } .uk-transform-origin-center-right { transform-origin: 100% 50%; } .uk-transform-origin-bottom-left { transform-origin: 0 100%; } .uk-transform-origin-bottom-center { transform-origin: 50% 100%; } .uk-transform-origin-bottom-right { transform-origin: 100% 100%; } /* ======================================================================== Component: Flex ========================================================================== */ .uk-flex { display: flex; } .uk-flex-inline { display: inline-flex; } /* Alignment ========================================================================== */ /* * Align items along the main axis of the current line of the flex container * Row: Horizontal */ .uk-flex-left { justify-content: flex-start; } .uk-flex-center { justify-content: center; } .uk-flex-right { justify-content: flex-end; } .uk-flex-between { justify-content: space-between; } .uk-flex-around { justify-content: space-around; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-flex-left\@s { justify-content: flex-start; } .uk-flex-center\@s { justify-content: center; } .uk-flex-right\@s { justify-content: flex-end; } .uk-flex-between\@s { justify-content: space-between; } .uk-flex-around\@s { justify-content: space-around; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-flex-left\@m { justify-content: flex-start; } .uk-flex-center\@m { justify-content: center; } .uk-flex-right\@m { justify-content: flex-end; } .uk-flex-between\@m { justify-content: space-between; } .uk-flex-around\@m { justify-content: space-around; } } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-flex-left\@l { justify-content: flex-start; } .uk-flex-center\@l { justify-content: center; } .uk-flex-right\@l { justify-content: flex-end; } .uk-flex-between\@l { justify-content: space-between; } .uk-flex-around\@l { justify-content: space-around; } } /* Large screen and bigger */ @media (min-width: 1600px) { .uk-flex-left\@xl { justify-content: flex-start; } .uk-flex-center\@xl { justify-content: center; } .uk-flex-right\@xl { justify-content: flex-end; } .uk-flex-between\@xl { justify-content: space-between; } .uk-flex-around\@xl { justify-content: space-around; } } /* * Align items in the cross axis of the current line of the flex container * Row: Vertical */ .uk-flex-stretch { align-items: stretch; } .uk-flex-top { align-items: flex-start; } .uk-flex-middle { align-items: center; } .uk-flex-bottom { align-items: flex-end; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-flex-stretch\@s { align-items: stretch; } .uk-flex-top\@s { align-items: flex-start; } .uk-flex-middle\@s { align-items: center; } .uk-flex-bottom\@s { align-items: flex-end; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-flex-stretch\@m { align-items: stretch; } .uk-flex-top\@m { align-items: flex-start; } .uk-flex-middle\@m { align-items: center; } .uk-flex-bottom\@m { align-items: flex-end; } } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-flex-stretch\@l { align-items: stretch; } .uk-flex-top\@l { align-items: flex-start; } .uk-flex-middle\@l { align-items: center; } .uk-flex-bottom\@l { align-items: flex-end; } } /* Large screen and bigger */ @media (min-width: 1600px) { .uk-flex-stretch\@xl { align-items: stretch; } .uk-flex-top\@xl { align-items: flex-start; } .uk-flex-middle\@xl { align-items: center; } .uk-flex-bottom\@xl { align-items: flex-end; } } /* Direction ========================================================================== */ .uk-flex-row { flex-direction: row; } .uk-flex-row-reverse { flex-direction: row-reverse; } .uk-flex-column { flex-direction: column; } .uk-flex-column-reverse { flex-direction: column-reverse; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-flex-row\@s { flex-direction: row; } .uk-flex-column\@s { flex-direction: column; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-flex-row\@m { flex-direction: row; } .uk-flex-column\@m { flex-direction: column; } } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-flex-row\@l { flex-direction: row; } .uk-flex-column\@l { flex-direction: column; } } /* Large screen and bigger */ @media (min-width: 1600px) { .uk-flex-row\@xl { flex-direction: row; } .uk-flex-column\@xl { flex-direction: column; } } /* Wrap ========================================================================== */ .uk-flex-nowrap { flex-wrap: nowrap; } .uk-flex-wrap { flex-wrap: wrap; } .uk-flex-wrap-reverse { flex-wrap: wrap-reverse; } /* * Aligns items within the flex container when there is extra space in the cross-axis * Only works if there is more than one line of flex items */ .uk-flex-wrap-stretch { align-content: stretch; } .uk-flex-wrap-top { align-content: flex-start; } .uk-flex-wrap-middle { align-content: center; } .uk-flex-wrap-bottom { align-content: flex-end; } .uk-flex-wrap-between { align-content: space-between; } .uk-flex-wrap-around { align-content: space-around; } /* Item ordering ========================================================================== */ /* * Default is 0 */ .uk-flex-first { order: -1; } .uk-flex-last { order: 99; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-flex-first\@s { order: -1; } .uk-flex-last\@s { order: 99; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-flex-first\@m { order: -1; } .uk-flex-last\@m { order: 99; } } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-flex-first\@l { order: -1; } .uk-flex-last\@l { order: 99; } } /* Large screen and bigger */ @media (min-width: 1600px) { .uk-flex-first\@xl { order: -1; } .uk-flex-last\@xl { order: 99; } } /* Item dimensions ========================================================================== */ /* * Initial: 0 1 auto * Content dimensions, but shrinks */ .uk-flex-initial { flex: initial; } /* * No Flex: 0 0 auto * Content dimensions */ .uk-flex-none { flex: none; } /* * Relative Flex: 1 1 auto * Space is allocated considering content */ .uk-flex-auto { flex: auto; } /* * Absolute Flex: 1 1 0% * Space is allocated solely based on flex */ .uk-flex-1 { flex: 1; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-flex-initial\@s { flex: initial; } .uk-flex-none\@s { flex: none; } .uk-flex-1\@s { flex: 1; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-flex-initial\@m { flex: initial; } .uk-flex-none\@m { flex: none; } .uk-flex-1\@m { flex: 1; } } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-flex-initial\@l { flex: initial; } .uk-flex-none\@l { flex: none; } .uk-flex-1\@l { flex: 1; } } /* Large screen and bigger */ @media (min-width: 1600px) { .uk-flex-initial\@xl { flex: initial; } .uk-flex-none\@xl { flex: none; } .uk-flex-1\@xl { flex: 1; } } /* ======================================================================== Component: Margin ========================================================================== */ /* * Default */ .uk-margin { margin-bottom: 20px; } * + .uk-margin { margin-top: 20px !important; } .uk-margin-top { margin-top: 20px !important; } .uk-margin-bottom { margin-bottom: 20px !important; } .uk-margin-left { margin-left: 20px !important; } .uk-margin-right { margin-right: 20px !important; } /* Small ========================================================================== */ .uk-margin-small { margin-bottom: 10px; } * + .uk-margin-small { margin-top: 10px !important; } .uk-margin-small-top { margin-top: 10px !important; } .uk-margin-small-bottom { margin-bottom: 10px !important; } .uk-margin-small-left { margin-left: 10px !important; } .uk-margin-small-right { margin-right: 10px !important; } /* Medium ========================================================================== */ .uk-margin-medium { margin-bottom: 40px; } * + .uk-margin-medium { margin-top: 40px !important; } .uk-margin-medium-top { margin-top: 40px !important; } .uk-margin-medium-bottom { margin-bottom: 40px !important; } .uk-margin-medium-left { margin-left: 40px !important; } .uk-margin-medium-right { margin-right: 40px !important; } /* Large ========================================================================== */ .uk-margin-large { margin-bottom: 40px; } * + .uk-margin-large { margin-top: 40px !important; } .uk-margin-large-top { margin-top: 40px !important; } .uk-margin-large-bottom { margin-bottom: 40px !important; } .uk-margin-large-left { margin-left: 40px !important; } .uk-margin-large-right { margin-right: 40px !important; } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-margin-large { margin-bottom: 70px; } * + .uk-margin-large { margin-top: 70px !important; } .uk-margin-large-top { margin-top: 70px !important; } .uk-margin-large-bottom { margin-bottom: 70px !important; } .uk-margin-large-left { margin-left: 70px !important; } .uk-margin-large-right { margin-right: 70px !important; } } /* XLarge ========================================================================== */ .uk-margin-xlarge { margin-bottom: 70px; } * + .uk-margin-xlarge { margin-top: 70px !important; } .uk-margin-xlarge-top { margin-top: 70px !important; } .uk-margin-xlarge-bottom { margin-bottom: 70px !important; } .uk-margin-xlarge-left { margin-left: 70px !important; } .uk-margin-xlarge-right { margin-right: 70px !important; } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-margin-xlarge { margin-bottom: 140px; } * + .uk-margin-xlarge { margin-top: 140px !important; } .uk-margin-xlarge-top { margin-top: 140px !important; } .uk-margin-xlarge-bottom { margin-bottom: 140px !important; } .uk-margin-xlarge-left { margin-left: 140px !important; } .uk-margin-xlarge-right { margin-right: 140px !important; } } /* Auto ========================================================================== */ .uk-margin-auto { margin-left: auto !important; margin-right: auto !important; } .uk-margin-auto-top { margin-top: auto !important; } .uk-margin-auto-bottom { margin-bottom: auto !important; } .uk-margin-auto-left { margin-left: auto !important; } .uk-margin-auto-right { margin-right: auto !important; } .uk-margin-auto-vertical { margin-top: auto !important; margin-bottom: auto !important; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-margin-auto\@s { margin-left: auto !important; margin-right: auto !important; } .uk-margin-auto-left\@s { margin-left: auto !important; } .uk-margin-auto-right\@s { margin-right: auto !important; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-margin-auto\@m { margin-left: auto !important; margin-right: auto !important; } .uk-margin-auto-left\@m { margin-left: auto !important; } .uk-margin-auto-right\@m { margin-right: auto !important; } } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-margin-auto\@l { margin-left: auto !important; margin-right: auto !important; } .uk-margin-auto-left\@l { margin-left: auto !important; } .uk-margin-auto-right\@l { margin-right: auto !important; } } /* Large screen and bigger */ @media (min-width: 1600px) { .uk-margin-auto\@xl { margin-left: auto !important; margin-right: auto !important; } .uk-margin-auto-left\@xl { margin-left: auto !important; } .uk-margin-auto-right\@xl { margin-right: auto !important; } } /* Remove ========================================================================== */ .uk-margin-remove { margin: 0 !important; } .uk-margin-remove-top { margin-top: 0 !important; } .uk-margin-remove-bottom { margin-bottom: 0 !important; } .uk-margin-remove-left { margin-left: 0 !important; } .uk-margin-remove-right { margin-right: 0 !important; } .uk-margin-remove-vertical { margin-top: 0 !important; margin-bottom: 0 !important; } .uk-margin-remove-adjacent + *, .uk-margin-remove-first-child > :first-child { margin-top: 0 !important; } .uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-margin-remove-left\@s { margin-left: 0 !important; } .uk-margin-remove-right\@s { margin-right: 0 !important; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-margin-remove-left\@m { margin-left: 0 !important; } .uk-margin-remove-right\@m { margin-right: 0 !important; } } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-margin-remove-left\@l { margin-left: 0 !important; } .uk-margin-remove-right\@l { margin-right: 0 !important; } } /* Large screen and bigger */ @media (min-width: 1600px) { .uk-margin-remove-left\@xl { margin-left: 0 !important; } .uk-margin-remove-right\@xl { margin-right: 0 !important; } } /* ======================================================================== Component: Padding ========================================================================== */ .uk-padding { padding: 30px; } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-padding { padding: 40px; } } /* Small ========================================================================== */ .uk-padding-small { padding: 15px; } /* Large ========================================================================== */ .uk-padding-large { padding: 40px; } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-padding-large { padding: 70px; } } /* Remove ========================================================================== */ .uk-padding-remove { padding: 0 !important; } .uk-padding-remove-top { padding-top: 0 !important; } .uk-padding-remove-bottom { padding-bottom: 0 !important; } .uk-padding-remove-left { padding-left: 0 !important; } .uk-padding-remove-right { padding-right: 0 !important; } .uk-padding-remove-vertical { padding-top: 0 !important; padding-bottom: 0 !important; } .uk-padding-remove-horizontal { padding-left: 0 !important; padding-right: 0 !important; } /* ======================================================================== Component: Position ========================================================================== */ :root { --uk-position-margin-offset: 0px; } /* Directions ========================================================================== */ /* * 1. Prevent content overflow. */ [class*="uk-position-top"], [class*="uk-position-bottom"], [class*="uk-position-left"], [class*="uk-position-right"], [class*="uk-position-center"] { position: absolute !important; /* 1 */ max-width: calc(100% - (var(--uk-position-margin-offset) * 2)); box-sizing: border-box; } /* * Edges * Don't use `width: 100%` because it's wrong if the parent has padding. */ .uk-position-top { top: 0; left: 0; right: 0; } .uk-position-bottom { bottom: 0; left: 0; right: 0; } .uk-position-left { top: 0; bottom: 0; left: 0; } .uk-position-right { top: 0; bottom: 0; right: 0; } /* * Corners */ .uk-position-top-left { top: 0; left: 0; } .uk-position-top-right { top: 0; right: 0; } .uk-position-bottom-left { bottom: 0; left: 0; } .uk-position-bottom-right { bottom: 0; right: 0; } /* * Center * 1. Fix text wrapping if content is larger than 50% of the container. * Using `max-content` requires `max-width` of 100% which is set generally. */ .uk-position-center { top: calc(50% - var(--uk-position-margin-offset)); left: calc(50% - var(--uk-position-margin-offset)); --uk-position-translate-x: -50%; --uk-position-translate-y: -50%; transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y)); /* 1 */ width: max-content; } /* Vertical */ [class*="uk-position-center-left"], [class*="uk-position-center-right"], .uk-position-center-vertical { top: calc(50% - var(--uk-position-margin-offset)); --uk-position-translate-y: -50%; transform: translate(0, var(--uk-position-translate-y)); } .uk-position-center-left { left: 0; } .uk-position-center-right { right: 0; } .uk-position-center-vertical { left: 0; right: 0; } .uk-position-center-left-out { right: 100%; width: max-content; } .uk-position-center-right-out { left: 100%; width: max-content; } /* Horizontal */ .uk-position-top-center, .uk-position-bottom-center, .uk-position-center-horizontal { left: calc(50% - var(--uk-position-margin-offset)); --uk-position-translate-x: -50%; transform: translate(var(--uk-position-translate-x), 0); /* 1 */ width: max-content; } .uk-position-top-center { top: 0; } .uk-position-bottom-center { bottom: 0; } .uk-position-center-horizontal { top: 0; bottom: 0; } /* * Cover */ .uk-position-cover { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* Margin ========================================================================== */ .uk-position-small { margin: 15px; --uk-position-margin-offset: 15px; } .uk-position-medium { margin: 30px; --uk-position-margin-offset: 30px; } .uk-position-large { margin: 30px; --uk-position-margin-offset: 30px; } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-position-large { margin: 50px; --uk-position-margin-offset: 50px; } } /* Schemes ========================================================================== */ .uk-position-relative { position: relative !important; } .uk-position-absolute { position: absolute !important; } .uk-position-fixed { position: fixed !important; } .uk-position-sticky { position: sticky !important; } /* Layer ========================================================================== */ .uk-position-z-index { z-index: 1; } .uk-position-z-index-zero { z-index: 0; } .uk-position-z-index-negative { z-index: -1; } .uk-position-z-index-high { z-index: 990; } /* ======================================================================== Component: Transition ========================================================================== */ /* Transitions ========================================================================== */ /* * The toggle is triggered on touch devices by two methods: * 1. Using `:focus` and tabindex * 2. Using `:hover` and a `touchstart` event listener registered on the document * (Doesn't work on Surface touch devices) */ :where(.uk-transition-fade), :where([class*="uk-transition-scale"]), :where([class*="uk-transition-slide"]) { --uk-position-translate-x: 0; --uk-position-translate-y: 0; } .uk-transition-fade, [class*="uk-transition-scale"], [class*="uk-transition-slide"] { --uk-translate-x: 0; --uk-translate-y: 0; --uk-scale-x: 1; --uk-scale-y: 1; transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y)) translate(var(--uk-translate-x), var(--uk-translate-y)) scale(var(--uk-scale-x), var(--uk-scale-y)); transition: 0.3s ease-out; transition-property: opacity, transform, filter; opacity: 0; } /* * Fade */ .uk-transition-toggle:hover .uk-transition-fade, .uk-transition-toggle:focus .uk-transition-fade, .uk-transition-toggle .uk-transition-fade:focus-within, .uk-transition-active.uk-active .uk-transition-fade { opacity: 1; } /* * Scale * 1. Make image rendering the same during the transition as before and after. Prefixed because of Safari. */ /* 1 */ [class*="uk-transition-scale"] { -webkit-backface-visibility: hidden; } .uk-transition-scale-up { --uk-scale-x: 1; --uk-scale-y: 1; } .uk-transition-scale-down { --uk-scale-x: 1.03; --uk-scale-y: 1.03; } /* Show */ .uk-transition-toggle:hover .uk-transition-scale-up, .uk-transition-toggle:focus .uk-transition-scale-up, .uk-transition-toggle .uk-transition-scale-up:focus-within, .uk-transition-active.uk-active .uk-transition-scale-up { --uk-scale-x: 1.03; --uk-scale-y: 1.03; opacity: 1; } .uk-transition-toggle:hover .uk-transition-scale-down, .uk-transition-toggle:focus .uk-transition-scale-down, .uk-transition-toggle .uk-transition-scale-down:focus-within, .uk-transition-active.uk-active .uk-transition-scale-down { --uk-scale-x: 1; --uk-scale-y: 1; opacity: 1; } /* * Slide */ .uk-transition-slide-top { --uk-translate-y: -100%; } .uk-transition-slide-bottom { --uk-translate-y: 100%; } .uk-transition-slide-left { --uk-translate-x: -100%; } .uk-transition-slide-right { --uk-translate-x: 100%; } .uk-transition-slide-top-small { --uk-translate-y: calc(-1 * 10px); } .uk-transition-slide-bottom-small { --uk-translate-y: 10px; } .uk-transition-slide-left-small { --uk-translate-x: calc(-1 * 10px); } .uk-transition-slide-right-small { --uk-translate-x: 10px; } .uk-transition-slide-top-medium { --uk-translate-y: calc(-1 * 50px); } .uk-transition-slide-bottom-medium { --uk-translate-y: 50px; } .uk-transition-slide-left-medium { --uk-translate-x: calc(-1 * 50px); } .uk-transition-slide-right-medium { --uk-translate-x: 50px; } /* Show */ .uk-transition-toggle:hover [class*="uk-transition-slide"], .uk-transition-toggle:focus [class*="uk-transition-slide"], .uk-transition-toggle [class*="uk-transition-slide"]:focus-within, .uk-transition-active.uk-active [class*="uk-transition-slide"] { --uk-translate-x: 0; --uk-translate-y: 0; opacity: 1; } /* Opacity modifier ========================================================================== */ .uk-transition-opaque { opacity: 1; } /* Duration modifier ========================================================================== */ .uk-transition-slow { transition-duration: 0.7s; } /* Disable modifier ========================================================================== */ .uk-transition-disable, .uk-transition-disable * { transition: none !important; } /* ======================================================================== Component: Visibility ========================================================================== */ /* * Hidden * `hidden` attribute also set here to make it stronger */ [hidden], .uk-hidden { display: none !important; } /* Phone landscape and bigger */ @media (min-width: 640px) { .uk-hidden\@s { display: none !important; } } /* Tablet landscape and bigger */ @media (min-width: 960px) { .uk-hidden\@m { display: none !important; } } /* Desktop and bigger */ @media (min-width: 1200px) { .uk-hidden\@l { display: none !important; } } /* Large screen and bigger */ @media (min-width: 1600px) { .uk-hidden\@xl { display: none !important; } } /* * Visible */ /* Phone portrait and smaller */ @media (max-width: 639px) { .uk-visible\@s { display: none !important; } } /* Phone landscape and smaller */ @media (max-width: 959px) { .uk-visible\@m { display: none !important; } } /* Tablet landscape and smaller */ @media (max-width: 1199px) { .uk-visible\@l { display: none !important; } } /* Desktop and smaller */ @media (max-width: 1599px) { .uk-visible\@xl { display: none !important; } } /* Visibility ========================================================================== */ .uk-invisible { visibility: hidden !important; } /* Based on the State of the Parent Element ========================================================================== */ /* * Mind that `display: none`, `visibility: hidden` and `opacity: 0` * remove the element from the accessibility tree and that * `display: none` and `visibility: hidden` are not focusable. * * The target stays visible if any element within receives focus through keyboard. */ /* * Remove space when hidden. * 1. Remove from document flow. * 2. Hide element and shrink its dimension. Current browsers and screen readers * keep the element in the accessibility tree even with zero dimensions. * Using `tabindex="-1"` will show the element on touch devices. * Note: `clip-path` doesn't work with `tabindex` on touch devices. */ .uk-hidden-visually:not(:focus):not(:active):not(:focus-within), .uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) { /* 1 */ position: absolute !important; /* 2 */ width: 0 !important; height: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; overflow: hidden !important; } /* * Keep space when hidden. * Hide element without shrinking its dimension. * Note: `clip-path` doesn't work with hover for elements outside of the toggle box. */ .uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; } /* Based on Hover Capability of the Pointing Device ========================================================================== */ /* * Hover */ /* Hide if primary pointing device doesn't support hover, e.g. touch screens. */ @media (hover: none) { .uk-hidden-touch { display: none !important; } } /* Hide if primary pointing device supports hover, e.g. mice. */ @media (hover) { .uk-hidden-notouch { display: none !important; } } /*@import "inverse.scss";*/ /* ======================================================================== Component: Print ========================================================================== */ @media print { *, *::before, *::after { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /*# sourceMappingURL=main.css.map */