/* Theme Name: Borstein 1. >>> Headr Style 2. >>> Banner Style 3. >>> Resume Style 4. >>> Project Style 5. >>> Testimonials Style 6. >>> Email Style 7. >>> Footer Style */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ----------------------------------------------------------------*/ :root { --font_14:0.875rem; --font_16:1rem; --font_30:1.875rem; --font_36:2.25rem; --font_48:3rem; --40:2.5rem; --30:1.875rem; --margin_30:1.875rem; --margin-54:3.375rem; --margin-60:3.75rem; --margin-100:6.25rem; --margin-120:7.5rem; } html {font-family: 'Inter', sans-serif;background-color:#FFF} body {font-family: 'Inter', sans-serif;overflow-x: hidden; background-color:#FFF; font-weight:400;font-style: normal; color: #000; font-size: var(--font_14)} a,a:hover,a:focus,i,input,button,input:focus,.transition {text-decoration: none;outline: none;transition-delay: 0s;transition-duration: 0.4s;transition-property: all;transition-timing-function: ease;box-shadow: none;} a{color: #000} iframe {border: 0;outline: none;} ::-moz-selection {background: var(--red);text-shadow: none;color:var(--white)} ::selection {background:var(--red);text-shadow: none;color:var(--white)} img {max-width: 100%;border: none;outline: none;height: auto;} input,textarea {border-radius: 0;resize: none;} ul {padding: 0;margin: 0;} @font-face { font-family: 'DM Serif Display', serif; font-family: 'Inter', sans-serif;} input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {background-color: transparent;background-image: none;color:#000;} /* 1.2 Typography */ h1,h2,h3,h4,h5,h6 {font-family: 'DM Serif Display', serif;} figure{ margin: 0 } svg,img { max-width: 100%; height: auto; } /*----------------------------------------------------------------- 1. >>> Headr Style ----------------------------------------------------------------*/ .ds-header{ padding-top:3.75rem; text-align: center; position: relative; } .ds-logo a{font-family: 'DM Serif Display', serif; text-transform: uppercase; letter-spacing: 5px; font-size: 1.375rem} .ds-logo a:hover{color: #000} .ds-logo span{display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; margin-top: 0.9375rem} .ds-about-link-button{ position: absolute; right:3%; border: 1px solid #000; display: inline-block; padding: 0.7rem 0.4rem;line-height: 3px;top:61%;} .ds-about-link-button:hover{color: #000} .ds-about-link-button span{ display: block; color: #505050; font-size: 0.625rem; text-transform: uppercase; position: absolute; bottom:-13px;left: -12px;width: 55px; opacity: 0;transition-delay: 0s;transition-duration: 0.4s;transition-property: all;transition-timing-function: ease; } .ds-closebutton{ position: absolute; bottom:-5rem; left: 0; right: 0; margin: 0 auto; display: inline-block; width:3.125rem; height: 3.125rem;font-size: 1.125rem; line-height: 3.125rem; color: #687278; border: 1px solid #687278; border-radius: 100%} .ds-about-link-button:hover span{ opacity:1 } .ds-slider-section,.ds-main-section{ padding: 7.5rem 0 } .ds-slider{ margin:0 } .ds-slider-loop{ padding-right:30px } .ds-slider-loop span{ text-transform: uppercase; font-size: 0.625rem; letter-spacing: 0.1875rem; display: inline-block; vertical-align: middle; margin-top: 1.125rem } .ds-slider-loop span a{ color:#000; } .ds-slider-loop span a i{ font-size: 1rem;display: inline-block; vertical-align: middle; } .slick-track{ cursor: move; } .slick-arrow{ position: absolute; top: 50%; background-color: #000; border: none; outline: none; cursor: pointer; padding: 0; margin: 0; border-radius: 100%; width: 3.75rem; height: 3.75rem;z-index: 5;color: #FFF; font-size:1.25rem; opacity: 0;transition-delay: 0s;transition-duration: 0.6s;transition-property: all;transition-timing-function: ease; } .slick-arrow.slick-prev{ left:1% } .slick-arrow.slick-next{ right:6% } .ds-slider:hover .slick-arrow{ opacity: 1 } .ds-about-section figure{ width: 33%; display: inline-block; margin-bottom: 4.375rem } .ds-about-section article{ width: 50%; display: block; margin: 0 auto; padding-bottom:3.125rem } .ds-about-section article p{font-size: 1.125rem; line-height: 2.25rem;} .ds-info{ font-size: 1.125rem; line-height: 2.25rem } .ds-info span{ display: block; } .ds-info a{ display: inline-block; font-weight: 600; font-size: 1.125rem} .ds-info a:hover{ color: #000; text-decoration: underline; } .ds-info .ds-socail{ list-style: none; padding: 0;margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top:0.8125rem } .ds-info .ds-socail a{font-size:1.45rem;font-weight: 400; margin: 0 0.875rem} .ds-info .ds-socail a:hover{ text-decoration: none; } .ds-project-section aside{ padding-right:4.375rem } .ds-project-section aside figure{ margin-bottom: 2.5rem } .ds-project-section section{position: sticky;top: 0;padding-top: 10px;} .ds-project-section section h1{ font-weight: 500; font-size: 1.875rem; font-weight: 500;font-family: 'Inter', sans-serif; padding-bottom: 1.05rem } .ds-project-section section p{ font-size: 1.125rem; line-height: 2.25rem;padding-bottom: 1.05rem } .ds-projec-info{display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0;font-size: 1.125rem; margin-top: 1.25rem} .ds-projec-info li{ padding-right: 4.375rem } .ds-projec-info li:last-child{ padding-right: 0 } .ds-projec-info strong{ font-weight: 600;display: block; } /*----------------------------------------------------------------- 7. >>> Footer Style ----------------------------------------------------------------*/ .ds-footer{ padding: 2.5rem 0; text-align: center; color: #000; font-size:0.75rem } .ds-footer a{color: #000 } .ds-footer a:hover{color: #000; text-decoration: underline; } /*------------------------------------------------------------------------------- XS Style @media (max-width: 767px) -------------------------------------------------------------------------------*/ @media (max-width: 767px) { .ds-about-link-button{ position: static; margin-top: 1.25rem } .ds-slider-section, .ds-main-section{ padding: 4.5rem 0 } .ds-slider-loop{ padding-right: 20px } .slick-arrow.slick-next{ right: 1% } .ds-about-link-button span{ left: 0; right: 0; margin: 0 auto } .ds-closebutton{ position: static; margin-top:1.25rem } .ds-about-section figure,.ds-about-section article{ width: 75% } .ds-about-section figure{margin-bottom: 2.375rem;} .ds-about-section article{padding-bottom: 1.125rem;} .ds-project-section aside{ padding-right: 0 } .ds-project-section{ padding:0 1.875rem } } @media (min-width: 768px) and (max-width: 991px) { } @media (min-width: 992px) and (max-width: 1199px) { }