.col-red { color: red; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .actioncolor { background-color: #f4511e !important; } .flexAlign { display: flex; align-items: center; min-height: 24em; justify-content: center; } .flexAlign .flexCenter { flex: none; } .flexAlign .flexTop { align-self: flex-start; } .flexAlign .flexBottom { align-self: flex-end; } .flexAlign .flexMiddle { align-self: center; } .flexCenter { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; justify-content: center; } .flexCenter .flexBottom { align-self: flex-end; } .glow-grad { background: #282537; background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); } .spotted-grad { background: #092756; background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), -moz-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%); background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%, #092756 100%); background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), -o-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), -o-linear-gradient(-45deg, #670d10 0%, #092756 100%); background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), -ms-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%, #092756 100%); background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%), linear-gradient(135deg, #670d10 0%, #092756 100%); } .wow { visibility: none; } img { outline: 0; max-width: 100%; height: auto; } UL { margin-bottom: 24px; } UL LI { font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: -1px; color: #37474f; } P { margin-bottom: 16px; } .margTBBig { margin-top: 100px !important; margin-bottom: 100px !important; } .margTBMedium { margin-top: 50px !important; margin-bottom: 50px !important; } .margTBSmall { margin-top: 125px; margin-bottom: 125px; } .margT45 { margin-top: 45px !important; } .margT100 { margin-top: 100px !important; } .marg0 { margin: 0 !important; } .margB0 { margin-bottom: 0 !important; } .margB10 { margin-bottom: 10px !important; } .margB15 { margin-bottom: 15px !important; } .margB45 { margin-bottom: 45px !important; } .padd0 { padding: 0 !important; } .projectCard { border-radius: 25px; padding: 56px 36px; box-shadow: 0px 0px 25px lightgray; } .projectCard.bluecard { background-color: aliceblue; } .cardShadow { box-shadow: 0px 0px 25px lightgray; } .green-color { color: green; } P.highlight { font-size: 36px !important; line-height: 54px !important; padding: 20px 15% !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -2px !important; } P.highlight::before { content: "“"; font-size: 52px !important; line-height: 0 !important; margin-right: 15px; } P.highlight::after { content: '”'; font-size: 52px !important; line-height: 0 !important; } P.highlight_long { font-size: 26px !important; line-height: 46px !important; padding: 20px 5% !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -1px !important; } P.highlight_long::before { content: "“"; font-size: 32px !important; line-height: 0 !important; } P.highlight_long::after { content: '”'; font-size: 32px !important; line-height: 0 !important; } BODY, HTML { height: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } BODY#work H1.work { line-height: 54px; font-size: 32px; text-align: center; } BODY#work H1.work SPAN.highlight { display: inline-block; background: #00bfff; padding: 5px 10px; color: white; font-weight: 700; } BODY#work SECTION#portfolio2 { padding-top: 30px; } BODY#work SECTION#portfolio2 .card .card-content { padding: 0px 24px 24px 24px; } BODY#work SECTION.project { background-color: whitesmoke; } BODY#work SECTION.project .container { background-color: white; border-radius: 25px; padding: 24px 56px 48px; } .navbar-toggle .icon-bar { background-color: #00bfff; } .nav > li { text-align: center; } BODY { font-family: "Work Sans", sans-serif; line-height: 1.5; font-weight: 500; font-size: 18px; color: #37474f; } I.letterspace { letter-spacing: 5px; font-style: normal; } SECTION H1 { font-weight: 700; font-size: 48px; letter-spacing: -2px; font-family: "Work Sans", sans-serif; color: #333; text-align: center; margin: 70px 0 48px 0; text-transform: capitalize; } DIV.backgroundGradient { position: relative; overflow: hidden; } DIV.homepttrn { position: relative; overflow-y: visible; } OL { margin: 0px 0 0 24px; padding: 0px; } OL LI { font-size: 18px; font-family: "Work Sans", sans-serif; font-weight: 500; margin-bottom: 8px; } NAV { padding: 20px 0; } NAV.navbar-static-top { margin: 0 auto; position: fixed; z-index: 1000; top: 0; left: 0; bottom: 0; right: 0; height: 170px; } NAV UL.nav { margin-top: 15px; } NAV UL.nav LI { position: relative; display: inline-block; } NAV UL.nav LI A { position: relative; text-decoration: none; font-size: 18px; display: block; background-color: transparent; color: #00bfff; font-weight: 700; letter-spacing: 0px; display: inline-block; } NAV UL.nav LI A:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 3px; transform: scaleX(0); background-color: #f4511e; transition: transform 0.3s; } NAV UL.nav LI A:focus { background-color: transparent; } NAV UL.nav LI A:hover { background-color: transparent; color: #f4511e; } NAV UL.nav LI A:hover:after { transform: scaleX(1); } NAV UL.nav LI A.last { padding-right: 0; padding-top: 11px; } NAV .navbar-brand { display: block; width: 232px; height: 95px; padding: 0 0 0 15px !important; } NAV .navbar-brand.work { width: 95px; height: 95px; } NAV.navbar-static-top { position: fixed; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%); border: none; } NAV.navbar-static-top > div.container { background-color: transparent; } NAV.navbar-static-top.mobNavBG { background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.01) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.01) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.01) 100%); -moz-transition: all 2s ease-in; -webkit-transition: all 2s ease-in; -o-transition: all 2s ease-in; transition: all 2s ease-in; } .navbar-toggle .icon-bar { width: 35px; height: 5px; } @media (min-width: 768px) { .navbar-right { margin-right: 0; } } #landing-sketch { display: table-cell; vertical-align: middle; padding: 0px; z-index: 4; position: relative; padding-top: 130px; } #landing-sketch #hero { position: relative; max-height: 512px; } #landing-sketch H1 { /*margin-top: 80px; margin-top: 222px;*/ margin-top: -53px; color: #00bfff; font-size: 72px; line-height: 60px; } #landing-sketch H1 SPAN { font-family: 'Shadows Into Light Two', cursive; color: #00bfff; font-size: 25px; display: block; line-height: 36px; } #landing-sketch H1 IMG { max-width: 512px; } #landing-sketch #btnwrap { margin: 8% 0 0px 0; } DIV.backgroundGradient { background-color: snow ; } .uiletters { right: -5%; position: absolute; top: 420px; max-width: 32%; } .uxletters { right: -16px; left: auto; position: absolute; top: 160px; max-width: 40%; } SECTION#home2 { background: linear-gradient(109deg, #45AAD4 11.48%, #5765A7 40.67%, #652D81 67.82%, #243559 96.33%); height: 100vh; max-height: unset; height: 98vh; } SECTION#home2 .heropattern { background-image: url("data:image/svg+xml,%3Csvg width='3988' height='331' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23heromask__a)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m79 259.991-79-21v92h3988v-92l-79 21-81-18.753-49-43.247-17-19-50 33.96-61 3.17-54-12.13-117 29-74-16.87-61-44.13-35-50-15-37-81 43h-60l-78-20-53-47-61 47-74 20-92-6-72-52-18-25-110 32-84-7-52-25-48 25-79 33-98 10-59-5-60-17-67-30-25-27-30-23-30 23-25 27-67 30-60 17-59 5-98-10-79-33-48-25-52 25-84 7-110-32-18 25-72 52-92 6-74-20-61-47-53 47-78 20h-60l-81-43-15 37-35 50-61 44.13-74 16.87-117-29-54 12.13-61-3.17-50-33.96-17 19-49 43.247-81 18.753Z' fill='snow'/%3E%3Cg filter='url(%23heromask__b)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 241.55v-15.155c24.561 15.449 53.633 24.385 84.791 24.385 60.11 0 112.451-33.256 139.631-82.373 26.189 26.488 62.547 42.899 102.738 42.899 25.994 0 50.384-6.865 71.457-18.88 30.245 19.92 66.461 31.512 105.385 31.512 90.889 0 167.016-63.206 186.824-148.06 33.68 29.28 77.674 47.007 125.807 47.007 62.099 0 117.307-29.505 152.369-75.261 35.058 45.756 90.268 75.261 152.368 75.261 68.04 0 127.81-35.421 161.87-88.83 34.68 21.29 75.5 33.567 119.18 33.567 46.84 0 90.37-14.11 126.6-38.313 58.93 48.597 134.47 77.787 216.82 77.787 97.79 0 185.97-41.158 248.16-107.096v16.846c-62.13 65.321-149.89 106.039-247.16 106.039-82.35 0-157.89-29.19-216.82-77.786-36.23 24.202-79.76 38.312-126.6 38.312-43.68 0-84.5-12.276-119.18-33.566-34.06 53.408-93.83 88.83-161.87 88.83-62.1 0-117.31-29.506-152.368-75.262-35.062 45.756-90.27 75.262-152.369 75.262-48.133 0-92.126-17.727-125.807-47.008-19.808 84.855-95.935 148.06-186.824 148.06-38.923 0-75.14-11.592-105.384-31.512-21.074 12.016-45.464 18.881-71.458 18.881-40.191 0-76.549-16.412-102.738-42.899-27.179 49.116-79.521 82.372-139.63 82.372-31.583 0-61.021-9.181-85.792-25.019Z' fill='url(%23heromask__c)'/%3E%3C/g%3E%3Cg filter='url(%23heromask__d)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3988 241.55v-15.155c-24.56 15.449-53.63 24.385-84.79 24.385-60.11 0-112.45-33.256-139.63-82.373-26.19 26.488-62.55 42.899-102.74 42.899-25.99 0-50.38-6.865-71.46-18.88-30.24 19.92-66.46 31.512-105.38 31.512-90.89 0-167.02-63.206-186.83-148.06-33.68 29.28-77.67 47.007-125.8 47.007-62.1 0-117.31-29.505-152.37-75.261-35.06 45.756-90.27 75.261-152.37 75.261-68.04 0-127.81-35.421-161.87-88.83-34.68 21.29-75.5 33.567-119.18 33.567-46.84 0-90.37-14.11-126.6-38.313-58.93 48.597-134.47 77.787-216.82 77.787-97.79 0-185.97-41.158-248.16-107.096v16.846c62.13 65.321 149.89 106.039 247.16 106.039 82.35 0 157.89-29.19 216.82-77.786 36.23 24.202 79.76 38.312 126.6 38.312 43.68 0 84.5-12.276 119.18-33.566 34.06 53.408 93.83 88.83 161.87 88.83 62.1 0 117.31-29.506 152.37-75.262 35.06 45.756 90.27 75.262 152.37 75.262 48.13 0 92.12-17.727 125.8-47.008 19.81 84.855 95.94 148.06 186.83 148.06 38.92 0 75.14-11.592 105.38-31.512 21.08 12.016 45.47 18.881 71.46 18.881 40.19 0 76.55-16.412 102.74-42.899 27.18 49.116 79.52 82.372 139.63 82.372 31.58 0 61.02-9.181 85.79-25.019Z' fill='url(%23heromask__e)'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='heromask__c' x1='26.483' y1='3.561' x2='480.365' y2='895.121' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%235B3645'/%3E%3Cstop offset='.349' stop-color='%2345354D'/%3E%3Cstop offset='.667' stop-color='%23383A59'/%3E%3Cstop offset='1' stop-color='%23243559'/%3E%3C/linearGradient%3E%3ClinearGradient id='heromask__e' x1='3961.52' y1='3.561' x2='3507.63' y2='895.121' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%235B3645'/%3E%3Cstop offset='.349' stop-color='%2345354D'/%3E%3Cstop offset='.667' stop-color='%23383A59'/%3E%3Cstop offset='1' stop-color='%23243559'/%3E%3C/linearGradient%3E%3Cfilter id='heromask__b' x='-39.4' y='-30.4' width='2072.8' height='345.369' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='9'/%3E%3CfeGaussianBlur stdDeviation='19.7'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0.295918 0 0 0 0 0.141939 0 0 0 0 0.734166 0 0 0 0.76 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_312_9'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_312_9' result='shape'/%3E%3C/filter%3E%3Cfilter id='heromask__d' x='1954.6' y='-30.4' width='2072.8' height='345.369' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='9'/%3E%3CfeGaussianBlur stdDeviation='19.7'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0.295918 0 0 0 0 0.141939 0 0 0 0 0.734166 0 0 0 0.76 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_312_9'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_312_9' result='shape'/%3E%3C/filter%3E%3CclipPath id='heromask__a'%3E%3Cpath fill='%23fff' d='M0 0h3988v330.991H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: left 101%; background-size: 160%; } SECTION#home2 .heropattern .grid { background: transparent url("../img/heropattern.png") top left repeat; } SECTION#home2 .heroHeight { height: 100%; } SECTION#home2 .col-xs-12 { height: 100vh; max-height: unset; } SECTION#home2 .container { position: relative; } SECTION#home2 h1 { text-align: left; font-family: "Work Sans"; font-size: 86px; font-weight: 800; line-height: 86px; letter-spacing: -3px; text-transform: none; color: white; text-shadow: 1px 1px 2.8px rgba(125, 52, 83, 0.5); margin: 0; padding: 0; } SECTION#home2 h1 img { display: inline-block; max-width: 250px; } SECTION#home2 .hero-gradient-heading { font-size: 86px; font-weight: 800; line-height: 96px; letter-spacing: -3px; text-transform: capitalize; font-family: "Work Sans"; position: relative; display: block; padding-right: 5px; background-image: linear-gradient(277deg, #B16CEA 34.82%, #FF5E69 60.89%, #FF8A56 91.04%, #FFA84B 101.63%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(1px 1px 1px rgba(125, 52, 83, 0.5)); } SECTION#home2 SPAN.highlight { display: inline-block; font-weight: bold; background-image: linear-gradient(108deg, #b16cea 8%, #ff5e69 40%, #ff8a56 77%, #ffa84b 91%); background-image: url("../img/hero_underline_lg.svg"); background-position: 5px 28px; padding-bottom: 15px; background-repeat: no-repeat; } SECTION#home2 UL.skill-list { padding: 0; margin: 0 0 0 20px; } SECTION#home2 UL.skill-list LI { color: white; font-size: 18px; font-weight: 100; line-height: 30px; } SECTION#home2 P.skill-list-p { color: white; font-size: 18px; font-weight: 500; line-height: 27px; text-align: left; margin-bottom: 24px; } SECTION#home2 P.skill-list-p.first { margin-bottom: 0; } SECTION#home2 .margBsm { margin-bottom: 24px; } SECTION#home2 #resumeDownload { position: absolute; bottom: -60px; z-index: 99; right: 0; padding: 140px 0 0 60px; } A#scrollmore { transition: background-color 0.5s ease, border-radius 0.5s ease, padding 0.5s ease; background-color: #f4511e; font-size: 22px; border-radius: 0; padding: 20px 35px; border: none; color: white; display: inline-block; } A#scrollmore:HOVER { background-color: #d53b0a; text-decoration: none; /*border-radius: 50px;*/ /*padding: 40px;*/ } I.block { display: block; font-style: normal; } SECTION#portfolio { /*position: relative; z-index: 1; transform: rotate(-10deg); top: -30vh;*/ background: transparent url("../img/portfolio-pattern.png") top left repeat; } SECTION#portfolio .pattrn { padding-top: 40px; } SECTION#portfolio .container-fluid { max-width: 1200px; margin: 0 auto; } SECTION#portfolio .row.border { border: 1px solid #F9F9F9; } SECTION#portfolio .row { margin: 0 !important; } SECTION#portfolio .row > DIV { padding: 0 !important; margin: 0 !important; } SECTION#portfolio DIV.pImg { position: relative; } SECTION#portfolio DIV.pImg H3 { display: inline-block; background-color: black; color: white; font-size: 12px; text-align: center; padding: 4px 10px; position: absolute; font-weight: 700; top: 0; left: 0; margin: 0; z-index: 101; } SECTION#portfolio DIV.pImg A { display: block; width: 100%; height: 100%; position: relative; border: 1px solid #F9F9F9; overflow: hidden; } SECTION#portfolio DIV.pImg A IMG { -webkit-transform: all 0.5s ease; /* Safari and Chrome */ -moz-transform: all 0.5s ease; /* Firefox */ -ms-transform: all 0.5s ease; /* IE 9 */ -o-transform: all 0.5s ease; /* Opera */ transition: all 0.5s ease; } SECTION#portfolio DIV.pImg A:HOVER IMG, SECTION#portfolio DIV.pImg A:VISITED { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ filter: grayscale(100%) brightness(1.2); -webkit-transform: scale(1.1); /* Safari and Chrome */ -moz-transform: scale(1.1); /* Firefox */ -ms-transform: scale(1.1); /* IE 9 */ -o-transform: scale(1.1); /* Opera */ transform: scale(1.1); } SECTION#portfolio DIV.pImg .pHolder { position: absolute; top: 0; left: 0; background: transparent url("../img/thumbs/placeholder.svg") top left no-repeat; width: 100%; height: 100%; z-index: 100; opacity: 0; -webkit-transform: opacity 0.5s ease; /* Safari and Chrome */ -moz-transform: opacity 0.5s ease; /* Firefox */ -ms-transform: opacity 0.5s ease; /* IE 9 */ -o-transform: opacity 0.5s ease; /* Opera */ transition: opacity 0.5s ease; } SECTION#portfolio DIV.pImg .pHolder:HOVER { opacity: 1; } /********************* PORTFOLIO 2 ****************************/ SECTION#portfolio2 { /*position: relative; z-index: 1; transform: rotate(-10deg); top: -30vh;*/ padding-bottom: 230px; margin-top: 104px; } SECTION#portfolio2 .card { border-radius: 14px; border: 1px solid white; margin-bottom: 35px; } SECTION#portfolio2 .card .card-action { border-radius: 0 0 14px 14px; } SECTION#portfolio2 .card .card-image .card-title { padding-bottom: 6px; padding: 10px 24px; text-align: left; z-index: 100; background-color: #fff; color: #333; width: 100%; } SECTION#portfolio2 .card .card-content { padding-top: 0; } SECTION#portfolio2 .container-fluid { max-width: 1200px; margin: 0 auto; } SECTION#portfolio2 .card .card-content p { font-size: 16px; line-height: 24px; } SECTION#portfolio2 .btn-large { line-height: 43px; } SECTION#portfolio2 .btn-floating.btn-large i { line-height: 36px; } SECTION#portfolio2 .btn-floating { z-index: 100; bottom: 0; bottom: 12px; width: 36px !important; height: 36px !important; } SECTION#portfolio2 .btn-floating .btn-large { width: 36px !important; height: 36px !important; } SECTION#portfolio2 .btn-floating .btn-large i { line-height: 36px; } SECTION#portfolio2 DIV.pImg { position: relative; /*H3{ display: block; background-color: rgba(33,33,33,0.85); color: white; font-size: 15px; text-align: center; padding: 8px 10px; position: absolute; font-weight: 700; top: 0; left: 0; margin: 0; z-index: 101; width: 100%; }*/ } SECTION#portfolio2 DIV.pImg A.cardLinkThumb { display: block; width: 100%; position: relative; overflow: hidden; } SECTION#portfolio2 DIV.pImg A.cardLinkThumb IMG { -webkit-transform: all 0.5s ease; /* Safari and Chrome */ -moz-transform: all 0.5s ease; /* Firefox */ -ms-transform: all 0.5s ease; /* IE 9 */ -o-transform: all 0.5s ease; /* Opera */ transition: all 0.5s ease; border-radius: 14px 14px 0 0; } SECTION#portfolio2 DIV.pImg A.cardLinkThumb:HOVER IMG, SECTION#portfolio2 DIV.pImg A.cardLinkThumb:VISITED { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ filter: grayscale(100%) brightness(1.2); -webkit-transform: scale(1.1); /* Safari and Chrome */ -moz-transform: scale(1.1); /* Firefox */ -ms-transform: scale(1.1); /* IE 9 */ -o-transform: scale(1.1); /* Opera */ transform: scale(1.1); } SECTION#portfolio2 DIV.pImg .pHolder { position: absolute; top: 0; left: 0; background: transparent url("../img/thumbs/placeholder.svg") top left no-repeat; width: 100%; height: 100%; z-index: 1; opacity: 0; -webkit-transform: opacity 0.5s ease; /* Safari and Chrome */ -moz-transform: opacity 0.5s ease; /* Firefox */ -ms-transform: opacity 0.5s ease; /* IE 9 */ -o-transform: opacity 0.5s ease; /* Opera */ transition: opacity 0.5s ease; } SECTION#portfolio2 DIV.pImg .pHolder:HOVER { opacity: 1; } SECTION#portfolio2 .btn-large i:HOVER { font-size: 2.6rem; } /***************************************************************************/ @media (max-width: 768px) { SECTION#portfolio .container-fluid { padding: 0; } #landing-sketch H1 { margin-top: 0; } } .palette { height: 5px; line-height: 5px; font-size: 5px; } SECTION#expertise { text-align: center; background-color: white; } SECTION#expertise H1 { margin-bottom: 40px; } SECTION#expertise .odd { background-color: #efefef; } SECTION#expertise .row { padding: 80px 0; } SECTION#expertise H2 { color: #263238; font-size: 30px; letter-spacing: -1px; line-height: 45px; } SECTION#expertise P { font-size: 18px; color: #37474f; line-height: 30px; } SECTION#resume { overflow: hidden; -webkit-clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%); background-image: linear-gradient(139deg, #3d5afe 0%, #00bcd4 31%, #f06292 56%, #4a148c 84%, #0b003b 100%); background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); background: #282537; margin-top: -140px; /*#resumeDownload{ background: transparent url("../img/resumeArrow.png") 0 0 no-repeat; position: absolute; bottom: -60px; z-index: 99; right: 0; padding: 140px 0 0 60px; A{ //transition: width 0.3s ease, height 0.3s ease; width: 120px; height: 120px; display: inline-block; &:HOVER{ //width: 130px; //height: 130px; } } }*/ } SECTION#resume .pattrn { background: transparent url("../img/style2.png?v=248") bottom left no-repeat; background-size: 60%; padding-top: 160px; padding-bottom: 160px; } SECTION#resume .container { position: relative; } SECTION#resume #myLowPolyFace { margin-top: -60px; } SECTION#resume H1 { font-size: 48px; color: white; } SECTION#resume H3 { color: white; margin: 24px 0; } SECTION#resume UL.skill-list { padding: 0; margin: 0 0 0 20px; } SECTION#resume UL.skill-list LI { color: deepskyblue; font-size: 18px; line-height: 30px; } SECTION#resume P { color: white; font-size: 18px; font-weight: 500; line-height: 27px; letter-spacing: -1px; } SECTION#resume P.skill-list-p { color: white; text-align: center; } SECTION#resume IMG.scuba { width: 32px; } SECTION#resume DIV.features { margin-bottom: 24px; margin-top: 24px; } SECTION#resume DIV.features DIV { padding-left: 5px; padding-right: 5px; } SECTION#resume DIV.features IMG { max-width: 65px; } SECTION#resume DIV.features H4 { font-size: 14px; font-weight: 300; color: deepskyblue; } SECTION#resume DIV.features P { font-size: 15px; line-height: 22px; } SECTION#resume #resumeDownload { background: transparent url("../img/resumeArrow-pink.png") 0 0 no-repeat; position: absolute; bottom: -195px; z-index: 99; right: 0; padding: 125px 0 0 60px; } SECTION#resume #resumeDownload A { width: 120px; height: 120px; display: inline-block; position: relative; background: transparent url("../img/ic_description_white_48dp.png") 0 0 no-repeat; } SECTION#resume #resumeDownload A SPAN { background: transparent url("../img/dl_resume.gif") 0 0 no-repeat; position: absolute; width: 70px; height: 70px; left: 50%; top: 50%; margin: -35px 0 0 -37px; text-indent: -10000px; } SECTION#contact { position: relative; border-top: 5px solid white; padding: 120px 0; background: #1a1923; } SECTION#contact #octopus { position: absolute; right: 100px; top: -100px; height: 200px; width: 200px; rotate: 25deg; } SECTION#contact H1 { color: white; margin-bottom: 23px; } SECTION#contact H1 IMG { max-width: 90px; margin-top: -25px; } SECTION#contact P.tagline { font-size: 18px; font-weight: 500; line-height: 27px; letter-spacing: -1px; color: white; text-align: center; } SECTION#contact INPUT, SECTION#contact TEXTAREA { margin: 10px 0 !important; border: none; border-radius: 4px !important; padding: 20px 15px; } SECTION#contact input[type=text], SECTION#contact input[type=email] { height: 55px; } SECTION#contact INPUT#emailSubmit { padding: 13px 35px !important; font-weight: 700 !important; border-radius: 4px !important; height: auto; font-size: 22px !important; transition: all 0.5s ease, color 0.5s ease; color: #fff !important; border: 1px solid white !important; background-color: transparent !important; box-shadow: none; } SECTION#contact INPUT#emailSubmit:HOVER { color: #E74D14 !important; background-color: white !important; } SECTION#contact .help-block { color: white; font-weight: bold; text-decoration: underline; } SECTION#contact A#copyButton { border: 1px solid white; background-color: transparent; color: white; border: none; font-size: 14px; line-height: 35px; cursor: pointer; padding: 10px; } SECTION#contact A#copyButton SPAN { vertical-align: middle; } DIV#breadcrumbs { padding-top: 200px; } DIV#breadcrumbs P { font-weight: 300; color: #00bfff; color: #37474f; font-size: 18px; line-height: 22px; } DIV#breadcrumbs P A { color: #00bfff; font-weight: 300; color: #37474f; } /*.row.container-height { overflow: hidden; } .row.container-height > [class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px; }*/ LABEL.photolabel { text-align: center; font-weight: normal; display: block; line-height: 16px; font-size: 14px; margin-bottom: 15px; } SECTION.project { padding: 52px 0 32px 0; } SECTION.project.conclusion { margin: 24px 0; background-color: #efefef; } SECTION.project.highlight { padding: 48px 0; background-color: aliceblue; } SECTION.project.highlight H2 { margin-top: 0px; font-size: 20px; line-height: 28px; } SECTION.project.highlight H3 { margin-top: 0px; margin-bottom: 36px; } SECTION.project.highlight P { font-size: 16px; line-height: 24px; } SECTION.project.highlight2 { background-color: aliceblue; } SECTION.project IMG { margin-top: 20px; margin-bottom: 20px; } SECTION.project IMG.nofx { border: none; box-shadow: none; } SECTION.project IMG.imgNoMarg { margin: 0; } SECTION.project .material-placeholder .materialboxed { display: inline-block; } SECTION.project .material-placeholder .materialboxed IMG { margin: 0; } SECTION.project H1 { margin-bottom: 48px; margin-top: 10px; } SECTION.project.advertising H2, SECTION.project.advertising H3 { margin: 36px 0 24px 0; } SECTION.project.advertising SPAN.subH2 { display: block; font-size: 14px; font-weight: normal; margin-top: 12px; } SECTION.project.no_spacing .row { margin: 0 !important; } SECTION.project.no_spacing .row > DIV { padding: 0 !important; margin: 0 !important; } SECTION.project H2, SECTION.project H3 { margin-top: 38px; } SECTION.project#snapapp IMG { border: 1px solid #666; margin: 12px 0; } SECTION.project P.disclaimer { font-size: 11px; font-style: italic; } SECTION.project .carousel P { font-weight: 700; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6); color: #121212; } SECTION.project .carousel .carousel-indicators .active { background-color: #528c00; } SECTION.project .carousel .carousel-indicators li { border: 1px solid #528c00; } SECTION.project .carousel .carousel-indicators { bottom: -12px; } SECTION.project IMG.logo-center { margin-top: 100px; } SECTION.project .row.spacing IMG { margin-top: 10px; margin-bottom: 10px; } SECTION.project .card IMG { margin: 0; } SECTION.project .card .card-content { text-align: left; padding: 10px 10px; } SECTION.project .card .card-content .card-title { line-height: 24px; color: #333; font-size: 19px; } SECTION.first { background-color: #aaa; padding: 0; margin-top: 164px; } SECTION.first H1 { margin-bottom: 25px; margin-top: 70px; letter-spacing: -1px; } SECTION.first.monstercocktails { background-color: #f57f17; } SECTION.first.monstercocktails H1, SECTION.first.monstercocktails P, SECTION.first.monstercocktails A { color: white; } SECTION.first.monstercocktails A { text-decoration: underline; } SECTION.first.monstercocktails A:HOVER { text-decoration: none; } SECTION.first.snapetteapp { background-color: #2e2f3d; } SECTION.first.snapetteapp H1, SECTION.first.snapetteapp P { color: white; } SECTION.first.smartstores { background-color: #a9c344; } SECTION.first.smartstores H1, SECTION.first.smartstores P { color: white; } SECTION.first.pricegrabber { background-color: #528c00; } SECTION.first.pricegrabber H1, SECTION.first.pricegrabber P { color: white; } SECTION.first.ads { background-color: #03a9f4; } SECTION.first.ads H1, SECTION.first.ads P { color: white; } SECTION.first.threeD { background-color: #03a9f4; } SECTION.first.threeD H1, SECTION.first.threeD P { color: white; } SECTION.first.threeD H1 { margin-top: 38px; } SECTION.first.negotools { background-color: #66c9ee; } SECTION.first.negotools H1, SECTION.first.negotools P { color: white; } SECTION.first.negotools H1 { margin-top: 40px; } SECTION.first.socialgiver { background-color: royalblue; } SECTION.first.socialgiver H1, SECTION.first.socialgiver P { color: white; } SECTION.first.socialgiver H1 { margin-top: 40px; } SECTION.first.brentwoodhome { background-color: #96A395; } SECTION.first.brentwoodhome H1, SECTION.first.brentwoodhome P { color: white; } SECTION.first.brentwoodhome H1 { margin-top: 38px; } SECTION.first.avo1 { background-color: #96A395; } SECTION.first.avo1 H1, SECTION.first.avo1 P { color: white; } SECTION.first.avo1 H1 { margin-top: 38px; } SECTION.first.uiux { background-color: #ff9800; } SECTION.first.uiux H1, SECTION.first.uiux P { color: white; } SECTION.first.uiux H1 { margin-top: 38px; } SECTION.first.projects { background-color: #48c0ff; } SECTION.first.projects H1, SECTION.first.projects P { color: white; } SECTION.first .alignText H1, SECTION.first .alignText P { text-align: left; } SECTION.first .alignText P { font-size: 18px; } SECTION.first IMG.negMargin { margin-top: -100px; } .advertising .modal { background-color: rgba(20, 20, 20, 0.5); } BODY.modal-open { padding-right: 17px; } .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } P.projectsBtn { text-align: center; margin-top: 85px; } P.projectsBtn A { /*display: inline-block; transition: background-color 0.5s ease; padding: 20px 35px; font-weight: 700; background-color: @sketch-blue; color: white; font-size: 22px; &:HOVER{ text-decoration: none; background-color: lighten(#333, 10%); }*/ } .parallax-container { position: relative; overflow: hidden; height: 400px; margin: 40px 0; } .parallax { position: absolute; top: 0; left: 0; right: 0; bottom: 0; /*z-index: -1; */ z-index: 1; } .parallax img { display: none; position: absolute; left: 50%; bottom: 0; min-width: 100%; min-height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transform: translateX(-50%); } FOOTER { text-align: center; background: #1a1923; -moz-box-shadow: 0 -5px 0 #B73E18; -webkit-box-shadow: 0 -5px 0 #B73E18; box-shadow: 0 -5px 0 #B73E18; padding: 24px 0 10px; color: white; font-size: 12px; } FOOTER IMG#wings { width: 330px; height: 133px; } FOOTER P { color: white; } /*BUTTON*/ /*@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: normal; src: local('Pacifico'), url('http://themes.googleusercontent.com/font?kit=fKnfV28XkldRW297cFLeqfesZW2xOQ-xsNqO47m55DA') format('truetype'); } body { text-align: center; }*/ .mainbutton, .mainbutton2, .mainbutton3 { display: inline-block; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px; -webkit-transition: -webkit-box-shadow 0.1s ease-in-out; -moz-transition: -moz-box-shadow 0.1s ease-in-out; -o-transition: -o-box-shadow 0.1s ease-in-out; transition: box-shadow 0.1s ease-in-out; font-size: 25px; color: #fff; outline: 0; text-transform: uppercase; font-size: 18px; font-weight: bold; letter-spacing: 3px; } .mainbutton.hundred, .mainbutton2.hundred, .mainbutton3.hundred { width: 100%; } .mainbutton em, .mainbutton2 em, .mainbutton3 em { display: inline-block; width: 100%; padding: 8px 52px; font-style: normal; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px; line-height: 1; -webkit-transition: background-color 0.2s ease-in-out, -webkit-transform 0.1s ease-in-out; -moz-transition: background-color 0.2s ease-in-out, -moz-transform 0.1s ease-in-out; -o-transition: background-color 0.2s ease-in-out, -o-transform 0.1s ease-in-out; transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out; outline: 0; } .mainbutton em SPAN.glyphicon, .mainbutton2 em SPAN.glyphicon, .mainbutton3 em SPAN.glyphicon { margin: 0 15px; top: 2px; } .mainbutton:active em, .mainbutton2:active em, .mainbutton3:active em { -webkit-transform: translate(0, 4px); -moz-transform: translate(0, 4px); -o-transform: translate(0, 4px); transform: translate(0, 4px); outline: 0; } .mainbutton:focus, .mainbutton2:focus, .mainbutton3:focus { outline: 0; } .mainbutton.orange { -webkit-box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.35); box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.35); } .mainbutton.orange em { background-color: #f4511e; /*background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(14, 90%, 80%, .8)), to(hsla(198, 90%, 70%, .2))); background-image: -webkit-linear-gradient(hsla(14, 90%, 80%, .8), hsla(14, 90%, 70%, .2)); background-image: -moz-linear-gradient(hsla(14, 90%, 80%, .8), hsla(14, 90%, 70%, .2)); background-image: -o-linear-gradient(hsla(14, 90%, 80%, .8), hsla(14, 90%, 70%, .2));*/ -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.15); -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.15); box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.15); text-shadow: 0 -1px 1px rgba(120, 63, 14, 0.7); } .mainbutton.orange:hover em { background-color: #f4511e; color: #fff; } .mainbutton.orange:active, .mainbutton.orange:focus { -webkit-box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); color: #fff; } .mainbutton.blue { -webkit-box-shadow: 0 4px 0 #008cd8, 0 5px 10px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 4px 0 #008cd8, 0 5px 10px rgba(0, 0, 0, 0.35); box-shadow: 0 4px 0 #008cd8, 0 5px 10px rgba(0, 0, 0, 0.35); } .mainbutton.blue em { background-color: #00bfff; -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.15); -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.15); box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.15); text-shadow: 0 -1px 1px rgba(22, 207, 229, 0.7); } .mainbutton.blue:hover em { background-color: #00bfff; color: #fff; text-shadow: 0 -1px 1px rgba(22, 207, 229, 0.9), 0 0 5px rgba(255, 255, 255, 0.8); } .mainbutton.blue:active, .mainbutton.blue:focus { -webkit-box-shadow: 0 4px 0 #008cd8, 0 5px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 0 #008cd8, 0 5px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 0 #008cd8, 0 5px 10px rgba(0, 0, 0, 0.3); color: #fff; } .mainbutton2 { font-size: 25px; color: #fff; outline: 0; width: 100%; margin-top: 20px; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px; } .mainbutton2.orange { /*-webkit-box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, .35); -moz-box-shadow: 0 4px 0#C64500, 0 5px 10px rgba(0, 0, 0, .35); box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, .35);*/ -webkit-box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); background-color: transparent; } .mainbutton2.orange em { background-color: #f4511e; /*background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(14, 90%, 80%, .8)), to(hsla(198, 90%, 70%, .2))); background-image: -webkit-linear-gradient(hsla(14, 90%, 80%, .8), hsla(14, 90%, 70%, .2)); background-image: -moz-linear-gradient(hsla(14, 90%, 80%, .8), hsla(14, 90%, 70%, .2)); background-image: -o-linear-gradient(hsla(14, 90%, 80%, .8), hsla(14, 90%, 70%, .2));*/ /*-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15); -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15); box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15); text-shadow: 0 -1px 1px rgba(120, 63, 14, .7);*/ text-transform: uppercase; font-size: 18px; font-weight: bold; letter-spacing: 3px; border-radius: 45px; line-height: normal; } .mainbutton2.orange:hover em { background-color: #f4511e; color: #fff; text-shadow: 0 -1px 1px rgba(229, 105, 22, 0.9), 0 0 5px rgba(255, 255, 255, 0.8); } .mainbutton2.orange:active, .mainbutton2.orange:focus { -webkit-box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); color: #fff; } a#btn3D-orange { position: relative; color: #ffffff; text-decoration: none; background-color: #db5705; font-family: 'Yanone Kaffeesatz'; font-weight: 700; font-size: 3em; display: block; padding: 4px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 45px; -webkit-box-shadow: 0px 9px 0px #db1f05, 0px 9px 25px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 9px 0px #db1f05, 0px 9px 25px rgba(0, 0, 0, 0.7); box-shadow: 0px 9px 0px #db1f05, 0px 9px 25px rgba(0, 0, 0, 0.7); margin: 100px auto; width: 160px; text-align: center; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -ms-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; } a#btn3D-orange:active { -webkit-box-shadow: 0px 3px 0px #db1f05, 0px 3px 6px rgba(0, 0, 0, 0.9); -moz-box-shadow: 0px 3px 0px #db1f05, 0px 3px 6px rgba(0, 0, 0, 0.9); box-shadow: 0px 3px 0px #db1f05, 0px 3px 6px rgba(0, 0, 0, 0.9); position: relative; top: 6px; } A.mainbutton_2024 { border-radius: 45px; border-top: 2px solid rgba(255, 255, 255, 0.2); border-left: 2px solid rgba(255, 255, 255, 0.2); text-decoration: none; box-shadow: 2px 3px 3px 0px #6D2C09; padding: 12px 62px; display: inline-block; margin-top: 24px; } A.mainbutton_2024 EM { color: #FFF; text-align: center; font-family: "Work Sans"; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; } A.mainbutton_2024.orange { -webkit-box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); background-color: #E55203 !important; } A.mainbutton_2024.orange:hover { background-color: #f4511e; color: #fff; text-shadow: 0 -1px 1px rgba(229, 105, 22, 0.9), 0 0 5px rgba(255, 255, 255, 0.8); text-decoration: none; } A.mainbutton_2024.orange:active, A.mainbutton_2024.orange:focus { -webkit-box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 0 #C64500, 0 5px 10px rgba(0, 0, 0, 0.3); color: #fff; } A.mainbutton_2024.blue { -webkit-box-shadow: 0 4px 0 #008cd8, 0 5px 10px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 4px 0 #008cd8, 0 5px 10px rgba(0, 0, 0, 0.35); box-shadow: 0 4px 0 #008cd8, 0 5px 10px rgba(0, 0, 0, 0.35); background-color: #00bfff !important; } A.mainbutton_2024.blue:hover { background-color: #00bfff; color: #fff; text-decoration: none; text-shadow: 0 -1px 1px rgba(22, 207, 229, 0.9), 0 0 5px rgba(255, 255, 255, 0.8); } A.mainbutton_2024.blue:active, A.mainbutton_2024.blue:focus { -webkit-box-shadow: 0 4px 0 #008cd8, 0 5px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 0 #008cd8, 0 5px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 0 #008cd8, 0 5px 10px rgba(0, 0, 0, 0.3); color: #fff; } /************************* STRIPES ********************************/ #contact-stripes, .home-stripes { overflow: hidden; width: 100%; height: 100%; transform: skewY(-12deg); transform-origin: 0; background: linear-gradient(150deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%); } #stripes, #stripes span { position: absolute; } #stripes { width: 100%; height: 100%; overflow: hidden; transform: skewY(-12deg); transform-origin: 0; /*background:linear-gradient(150deg,#53f 15%,#05d5ff 70%,#a6ffcb 94%);*/ /*background: #4e3d6f; background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%); background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%); background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg, #670d10 0%,#092756 100%); background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%,#092756 100%); background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);*/ } #stripes span { height: 40px; } #stripes :nth-child(1) { width: 50%; left: 50%; top: 40px; background: #6832d14d; } #stripes :nth-child(2) { width: 14%; right: 0; bottom: 40px; background: #aa40ff4d; } #stripes :nth-child(3) { width: 25%; bottom: 0; right: 0; background: #a6e0e71a; } @media (min-width: 670px) { #stripes span { height: 150px; } #stripes :nth-child(1) { top: 0; background: #6832d14d; } #stripes :nth-child(2) { width: 16.66667%; top: 300px; bottom: auto; background: #aa40ff4d; } #stripes :nth-child(3) { width: 33.33333%; right: auto; background: #a6e0e71a; } } @media (min-width: 880px) { #stripes span { height: 190px; } #stripes :nth-child(1) { width: 33.33333%; left: -16.66666%; background: #6832d14d; } #stripes :nth-child(2) { width: 33.33333%; top: 0; left: 16.66666%; right: auto; background: #aa40ff4d; } #stripes :nth-child(3) { width: 33.33333%; left: 49.99999%; bottom: auto; background: #a6e0e71a; } #stripes :nth-child(4) { width: 33.33333%; top: 380px; right: -16.66666%; background: #25ddf533; } #stripes :nth-child(5) { width: 33.33333%; bottom: 0; background: #1fa2ff; } } /*intro copy*/ .container, .container-fluid, .container-lg, .container-wide, .container-xl { margin: 0 auto; padding: 0 20px; width: 100%; } .container, .container-lg { max-width: 1160px; } .container-wide, .container-xl { max-width: 1160px; } #intro { position: relative; } @media (min-width: 670px) { #intro { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; height: 600px; } } @media (min-width: 880px) { #intro { height: 760px; } } #intro .container-lg { padding-top: 70px; padding-bottom: 100px; } @media (min-width: 670px) { #intro .container-lg { margin-top: -7%; padding-top: 0; padding-bottom: 0; } } #intro .announcement { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center; align-items: center; width: calc(100% + 20px * 2); padding: 10px 20px; margin: 0 0 30px -20px; font-size: 14px; line-height: 17px; font-weight: 500; color: #fff; text-decoration: none; background: rgba(0, 0, 140, 0.08); } #intro .message { -ms-flex: 1; flex: 1; margin: 0 12px; } @media (min-width: 670px) { @supports (width:auto) { #intro .announcement { width: auto; } } #intro .announcement { line-height: 26px; margin: 0 0 55px; padding: 0 12px 0 5px; border-radius: 15px; } #intro .message { margin: 0 7px 0 6px; } } #intro .announcement .new-pill { padding: 0 6px; font-size: 12px; line-height: 16px; font-weight: 600; background: #24b47e; text-transform: uppercase; border-radius: 10px; } #intro .announcement:after { content: '\27A2'; font: normal 16px StripeIcons; position: relative; bottom: 1px; } #intro p.header-CTA { width: auto; color: white; } #intro h1 { font-size: 32px; font-weight: 400; color: #fff; text-align: left; margin: 20px 0; } @media (min-width: 880px) { #intro h1 { font-size: 40px; } } #intro p { max-width: 500px; margin-top: 20px; color: #d9fcff; } @media (min-width: 670px) { #intro p { max-width: 60%; } } @media (min-width: 880px) { #intro p { max-width: 50%; } } #intro ul { display: -ms-flexbox; display: flex; margin-top: 40px; } @media (min-width: 670px) { #intro ul { margin-top: 65px; } } #intro li:first-child a { margin-right: 23px; color: #fff; background: #3ecf8e; text-shadow: 0 1px 3px rgba(36, 180, 126, 0.4); } #intro li:first-child svg { position: relative; top: 1px; margin-right: 5px; } #intro li:last-child { display: none; } @media (min-width: 670px) { #intro li:last-child { display: block; } #intro li:last-child a { color: #7795f8; } } /*devices*/ #app-illustrations { pointer-events: none; position: absolute; display: -ms-flexbox; display: flex; width: 1287px; left: 50%; margin-left: -644px; transform: scale(0.5) rotate(-12deg) translateX(50px); transform-origin: 50% 20%; } #app-illustrations.hidden-preload { visibility: hidden; } #app-illustrations div { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; border-radius: 38px; background: #fff; box-shadow: inset 0 4px 7px 1px #fff, inset 0 -5px 20px rgba(173, 186, 204, 0.25), 0 2px 6px rgba(0, 21, 64, 0.14), 0 10px 20px rgba(0, 21, 64, 0.05); } #app-illustrations .tablet-landscape { width: 512px; height: 352px; margin: 115px 50px 0; } #app-illustrations .phone-big { display: none; } #app-illustrations .phone-small { -ms-flex-order: -1; order: -1; width: 225px; height: 467px; } #app-illustrations .tablet-portrait { width: 450px; height: 675px; margin-top: 115px; } @media (min-width: 670px) { #app-illustrations { -ms-flex-wrap: wrap; flex-wrap: wrap; width: 512px; margin-left: -50px; top: 215px; transform: rotate(-12deg); transform-origin: 100% 0; } #app-illustrations.hidden-preload { visibility: visible; } #app-illustrations [class^=tablet] { margin: 0; } #app-illustrations .tablet-landscape { width: 512px; height: 352px; } #app-illustrations .phone-small { width: 225px; height: 467px; margin: 0 0 50px 176px; } #app-illustrations .tablet-portrait { display: none; } } @media (min-width: 880px) { #app-illustrations { width: 829px; margin-left: -10px; top: 20px; top: -170px; margin-left: -80px; } #app-illustrations .tablet-landscape { -ms-flex-item-align: end; align-self: flex-end; margin-right: 50px; } #app-illustrations .phone-big { display: -ms-flexbox; display: flex; width: 267px; height: 553px; } #app-illustrations .phone-small { -ms-flex-order: 0; order: 0; margin: 50px 50px 0 0; } #app-illustrations .tablet-portrait { display: -ms-flexbox; display: flex; width: 450px; height: 675px; margin-top: 50px; } } /***********************************************************************/ .no-svgclippaths .palette { display: block; } .svgclippaths .homepttrn .palette { display: none; } .materialboxed.active { max-width: none; } SECTION.first H1 { letter-spacing: -2px; font-size: 48px; font-family: "Work Sans", sans-serif; margin-bottom: 16px; margin-top: 40px; text-transform: capitalize; font-weight: 700; } SECTION.first P { font-size: 18px; font-weight: 500; line-height: 27px; } SECTION.project H2 { font-size: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: 0px; color: deepskyblue; } SECTION.project H3 { font-size: 38px; line-height: 48px; letter-spacing: -1px; margin-bottom: 20px; margin-top: 36px; text-transform: capitalize; font-weight: 700; } SECTION.project .rowMT50 { margin-top: 68px; } SECTION.project .rowMT50 H3 { margin-top: 0; } SECTION.project H4 { line-height: 32px; letter-spacing: 0px; font-size: 22px; font-weight: 700; margin-bottom: 12px; } SECTION.project H5 { font-size: 21px; line-height: 28px; letter-spacing: 0px; margin-bottom: 20px; margin-top: 50px; text-transform: capitalize; text-align: center; font-weight: 700; } SECTION.project P { margin: 4px 0 24px; font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: -1px; color: #37474f; } SECTION.project SPAN.material-symbols-outlined.alignh4 { display: inline-flex; line-height: 25px; vertical-align: middle; align-items: center; margin-right: 0; font-size: 26px; margin-top: -3px; } BLOCKQUOTE { margin: 30px 0 30px 30px; border-left: 5px solid #00bfff; font-style: italic; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; --x-height-multiplier: 0.375; --baseline-multiplier: 0.17; font-size: 21px; font-weight: 400; } BLOCKQUOTE.testimonials { margin-left: 0; margin-right: 0; } .btn.hide-content { border-radius: 10px; height: 50px; font-size: 1.5rem; } #contact-stripes, .home-stripes { overflow: hidden; width: 100%; height: 100%; transform: skewY(-12deg); transform-origin: 0; background: linear-gradient(150deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%); } #stripes, #stripes span { position: absolute; } #stripes { width: 100%; height: 100%; overflow: hidden; transform: skewY(-12deg); transform-origin: 0; /*background:linear-gradient(150deg,#53f 15%,#05d5ff 70%,#a6ffcb 94%);*/ /*background: #4e3d6f; background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%); background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%); background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg, #670d10 0%,#092756 100%); background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%,#092756 100%); background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);*/ } #stripes span { height: 40px; } #stripes :nth-child(1) { width: 50%; left: 50%; top: 40px; background: #6832d14d; } #stripes :nth-child(2) { width: 14%; right: 0; bottom: 40px; background: #aa40ff4d; } #stripes :nth-child(3) { width: 25%; bottom: 0; right: 0; background: #a6e0e71a; } @media (min-width: 670px) { #stripes span { height: 150px; } #stripes :nth-child(1) { top: 0; background: #6832d14d; } #stripes :nth-child(2) { width: 16.66667%; top: 300px; bottom: auto; background: #aa40ff4d; } #stripes :nth-child(3) { width: 33.33333%; right: auto; background: #a6e0e71a; } } @media (min-width: 880px) { #stripes span { height: 190px; } #stripes :nth-child(1) { width: 33.33333%; left: -16.66666%; background: #6832d14d; } #stripes :nth-child(2) { width: 33.33333%; top: 0; left: 16.66666%; right: auto; background: #aa40ff4d; } #stripes :nth-child(3) { width: 33.33333%; left: 49.99999%; bottom: auto; background: #a6e0e71a; } #stripes :nth-child(4) { width: 33.33333%; top: 380px; right: -16.66666%; background: #25ddf533; } #stripes :nth-child(5) { width: 33.33333%; bottom: 0; background: #1fa2ff; } } .emphasize { margin-bottom: 25px; border-radius: 16px; padding: 20px 20px 20px 10px; font-weight: bold; } .emphasize P { color: white !important; padding-left: 20px; } .emphasize P.title { font-size: 26px; text-align: center; color: white; padding-left: 0; } .emphasize P.title SPAN { display: inline-flex; line-height: 28px; vertical-align: middle; align-items: center; margin-right: 3px; font-size: 32px; margin-top: -8px; } .emphasize.eblue { background-color: #00bfff; color: white !important; } .emphasize.eorange { background-color: #f4511e; color: white !important; } .emphasize.bwhgreen { background-color: #96A395; color: white !important; } .emphasize.bwhblue { background-color: #454d5a; color: white !important; } .emphasize.bwhgray { background-color: #a4a6a3; color: white !important; } .emphasize.avomain { background-color: #537156; color: white !important; } .emphasize.avomain P.title.white { color: white !important; background-color: transparent !important; } .emphasize.avosecondary { background-color: #d4e2cf; color: #537156 !important; } .emphasize.avosecondary P.title { color: #537156 !important; } .emphasize.avosecondary P.title.white { background-color: transparent !important; } .emphasize.avosecondary .data.big { color: #537156 !important; } .emphasize.avothird { background-color: #e22f00; color: white !important; } .emphasize .data.big { font-weight: 900; font-size: 60px; letter-spacing: -5px; margin-top: 35px; } .emphasize2 { margin: 20px 0 10px 0px; border-radius: 16px; padding: 15px; font-weight: bold; } .emphasize2 P.title { font-size: 26px; text-align: center; color: white; padding-left: 0; } .emphasize2 P.title SPAN { display: inline-flex; line-height: 28px; vertical-align: middle; align-items: center; margin-right: 3px; font-size: 24px; margin-top: -3px; } .emphasize2.avomain { background-color: #537156; color: white !important; } .emphasize2.avomain P.title.white { color: white !important; background-color: transparent !important; } .emphasize2.highlight1 { background-color: #fff; color: #333 !important; margin: 0; padding: 50px; } .emphasize2.highlight1 P { font-style: italic; font-size: 23px; line-height: 41px; font-weight: 700; color: #333; margin: 0; padding: 0; } .emphasize2.avosecondary { background-color: #fff; color: #537156 !important; margin: 0; padding: 20px 0px 20px 0px; } .emphasize2.avosecondary P { color: #537156; text-align: center; font-size: 16px; margin-bottom: 10px; line-height: 26px; } .emphasize2.avosecondary P.title { color: #537156 !important; font-size: 20px; margin-bottom: 20px; } .emphasize2.avosecondary P.title.white { background-color: transparent !important; } .emphasize2.avosecondary H4 { margin-bottom: 20px; } .emphasize2.avosecondary .data.big { color: #537156 !important; } .emphasize2.avosecondary.pad10 { padding: 10px; } .emphasize2.avothird { background-color: #e22f00; color: white !important; } .emphasize2 .data.big { font-weight: 700; font-size: 48px; letter-spacing: -3px; margin-top: 20px; } SECTION#otherprojects .card { border-radius: 14px; border: 1px solid white; } SECTION#otherprojects .card .card-action { border-radius: 0 0 14px 14px; } #otherprojects .work_cards_description { padding: 24px; } #otherprojects .work_cards_description P { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0; } #otherprojects .work_cards_description P.company_logo { position: relative; top: unset; right: unset; margin-bottom: 12px; } .card .card-image .card-title { padding-bottom: 6px; padding: 10px 24px; text-align: left; z-index: 100; background-color: #fff; color: #333; width: 100%; } .card .card-content { padding-top: 0; } .card a.card-title { font-size: 24px; font-weight: 500 !important; color: #333; display: inline-block; text-align: center; width: 100%; margin-top: 10px; margin-bottom: 16px; } .card .card-content { padding-top: 0; text-align: center; } .card .card-action { border-radius: 0 0 6px 6px; text-align: center; } .card { border-radius: 6px; border: 1px solid white; } :root { --card-height: 100%; --card-width: 600px; } A.work_cards_anchor.avo-addons .mft-wrapper { background-color: #304534; } A.work_cards_anchor.brentwood-redesign .mft-wrapper { background-color: #1B3540; } A.work_cards_anchor.bwh-pdp-details .mft-wrapper { background-color: #1B3540; } .mft-card { width: 100%; aspect-ratio: 16 / 9; /* over method is AR doesn't work width: 20%; height: 0; padding-bottom: 20%; (same as width) */ position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 0 36px; perspective: 6000px; margin: 0 0px 30px; } .mft-wrapper { transition: all 0.5s; position: absolute; width: 100%; z-index: -1; border-radius: 25px; } .mft-wrapper img { border-radius: 25px 0 0 25px; max-width: 630px; } .mft-card:hover .mft-wrapper { transform: perspective(2500px) translateY(-5%) rotateX(25deg) translateZ(0); box-shadow: 2px 35px 100px -8px rgba(35, 0, 54, 0.75); border-radius: 25px; } .mft-title { width: 100%; transition: transform 0.5s; } .mft-card:hover .mft-title { transform: translate3d(0%, -50px, 100px); } .mft-character { width: 45%; opacity: 0; transition: all 0.5s; position: absolute; z-index: -1; bottom: -60px; left: 0%; } .mft-card:hover .mft-character { opacity: 1; transform: translate3d(0%, -10%, 90px); bottom: -40px; } .mtf-wrapper::before { top: 0; height: 100%; background-image: linear-gradient(to top, transparent 46%, rgba(12, 13, 19, 0.5) 68%, rgba(12, 13, 19) 97%); } .mtf-wrapper::after { bottom: 0; opacity: 1; background-image: linear-gradient(to bottom, transparent 46%, rgba(12, 13, 19, 0.5) 68%, rgba(12, 13, 19) 97%); } .mtf-wrapper::before, .mtf-wrapper::after { content: ""; opacity: 0; width: 100%; height: 80px; transition: all 0.5s; position: absolute; left: 0; } A.work_cards_anchor { display: inline-block; width: 100%; } .work_cards_description { position: absolute; width: 100%; top: 0px; left: 0px; padding: 36px; } .work_cards_description H3 { color: #FFF; text-align: left; font-family: "Work Sans"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -1px; margin: 0 0 8px; padding: 0; } .work_cards_description P { color: #FFF; font-family: "Work Sans"; font-size: 24px; font-style: normal; font-weight: 600; line-height: 36px; /* 150% */ letter-spacing: -1px; } P.work_cards_btn { color: white; border: 1px solid white; border-radius: 45px; padding: 8px 32px; display: inline-block; font-size: 16px; } .work_cards_description P.work_cards_btn2 { color: white; border: 1px solid white; border-radius: 45px; padding: 0px 32px; display: inline-block; font-size: 16px; position: absolute; z-index: 100; letter-spacing: 0; } .work_cards_description P.company_logo { /* max-width: 215px; */ line-height: 0; margin-bottom: 0px; position: absolute; top: 38px; right: 37px; } .work_cards_description P.company_logo IMG { border-radius: 0; max-height: 25px; max-width: 160px; } .mft-card:hover .mft-wrapper P.work_cards_btn2 { color: #333; border: none; background-color: white; } .work_cards_description { text-align: right; width: 45%; right: 0; left: auto; } .work_cards_description { height: 100%; } .work_cards_description .flexAlign.work { display: flex; align-items: flex-end; min-height: unset; justify-content: center; flex-direction: column; align-content: flex-end; gap: 24px; height: 100%; } .work_cards_description H3 { text-align: right; } .work_cards_description P.company_logo { margin-bottom: 16px; position: relative; top: unset; right: unset; } .work_cards_description P.work_cards_btn2 { position: relative; } #otherprojects .mft-card { display: block; padding: 0; } #otherprojects .mft-wrapper { position: relative; } #otherprojects .mft-wrapper .work_cards_description { text-align: left; width: 100%; } #otherprojects .mft-wrapper img.mft-cover-image { border-radius: 25px; max-width: -webkit-fill-available; } #otherprojects .mft-character { display: none; } #otherprojects A.work_cards_anchor { width: 100%; } /* :root { --card-height: 300px; --card-width: calc(var(--card-height) / 1.5); } .mft-card { width: var(--card-width); height: var(--card-height); position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 0 36px; perspective: 2500px; margin: 0 50px; } .mft-wrapper { transition: all 0.5s; position: absolute; width: 100%; z-index: -1; } .mft-card:hover .mft-wrapper { transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); } .mft-title { width: 100%; transition: transform 0.5s; } .mft-card:hover .mft-title { transform: translate3d(0%, -50px, 100px); } .mft-character { width: 100%; opacity: 0; transition: all 0.5s; position: absolute; z-index: -1; } .mft-card:hover .mft-character { opacity: 1; transform: translate3d(0%, -30%, 100px); } .mtf-wrapper::before { top: 0; height: 100%; background-image: linear-gradient( to top, transparent 46%, rgba(12, 13, 19, 0.5) 68%, rgba(12, 13, 19) 97% ); } .mtf-wrapper::after { bottom: 0; opacity: 1; background-image: linear-gradient( to bottom, transparent 46%, rgba(12, 13, 19, 0.5) 68%, rgba(12, 13, 19) 97% ); } .mtf-wrapper::before, .mtf-wrapper::after { content: ""; opacity: 0; width: 100%; height: 80px; transition: all 0.5s; position: absolute; left: 0; } */ .d-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } @media (min-width: 576px) { .d-sm-none { display: none !important; } .d-sm-inline { display: inline !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-block { display: block !important; } .d-sm-table { display: table !important; } .d-sm-table-row { display: table-row !important; } .d-sm-table-cell { display: table-cell !important; } .d-sm-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-sm-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media (min-width: 768px) { .d-md-none { display: none !important; } .d-md-inline { display: inline !important; } .d-md-inline-block { display: inline-block !important; } .d-md-block { display: block !important; } .d-md-table { display: table !important; } .d-md-table-row { display: table-row !important; } .d-md-table-cell { display: table-cell !important; } .d-md-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-md-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media (min-width: 992px) { .d-lg-none { display: none !important; } .d-lg-inline { display: inline !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-block { display: block !important; } .d-lg-table { display: table !important; } .d-lg-table-row { display: table-row !important; } .d-lg-table-cell { display: table-cell !important; } .d-lg-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-lg-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media (min-width: 1200px) { .d-xl-none { display: none !important; } .d-xl-inline { display: inline !important; } .d-xl-inline-block { display: inline-block !important; } .d-xl-block { display: block !important; } .d-xl-table { display: table !important; } .d-xl-table-row { display: table-row !important; } .d-xl-table-cell { display: table-cell !important; } .d-xl-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-xl-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } } .flex-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } @media (min-width: 576px) { .flex-sm-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-sm-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-sm-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-sm-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-sm-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-sm-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-sm-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-sm-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-sm-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-sm-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-sm-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-sm-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-sm-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-sm-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-sm-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-sm-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-sm-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-sm-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-sm-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-sm-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-sm-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-sm-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-sm-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-sm-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-sm-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-sm-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-sm-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-sm-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-sm-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } } @media (min-width: 768px) { .flex-md-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-md-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-md-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-md-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-md-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-md-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-md-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-md-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-md-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-md-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-md-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-md-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-md-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-md-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-md-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-md-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-md-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-md-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-md-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-md-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-md-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-md-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-md-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-md-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-md-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-md-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-md-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-md-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-md-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } } @media (min-width: 992px) { .flex-lg-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-lg-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-lg-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-lg-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-lg-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-lg-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-lg-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-lg-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-lg-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-lg-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-lg-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-lg-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-lg-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-lg-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-lg-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-lg-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-lg-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-lg-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-lg-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-lg-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-lg-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-lg-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-lg-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-lg-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-lg-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-lg-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-lg-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-lg-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-lg-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } } @media (min-width: 1200px) { .flex-xl-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-xl-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-xl-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-xl-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-xl-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-xl-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-xl-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-xl-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-xl-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-xl-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-xl-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-xl-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-xl-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-xl-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-xl-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-xl-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-xl-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-xl-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-xl-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-xl-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-xl-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-xl-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-xl-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-xl-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-xl-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-xl-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-xl-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-xl-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-xl-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } } .float-left { float: left !important; } .float-right { float: right !important; } .float-none { float: none !important; } @media (min-width: 576px) { .float-sm-left { float: left !important; } .float-sm-right { float: right !important; } .float-sm-none { float: none !important; } } @media (min-width: 768px) { .float-md-left { float: left !important; } .float-md-right { float: right !important; } .float-md-none { float: none !important; } } @media (min-width: 992px) { .float-lg-left { float: left !important; } .float-lg-right { float: right !important; } .float-lg-none { float: none !important; } } @media (min-width: 1200px) { .float-xl-left { float: left !important; } .float-xl-right { float: right !important; } .float-xl-none { float: none !important; } }