/*
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: 'Poppins', sans-serif;background-color:#2A2A2A}
body {font-family: 'Poppins', sans-serif;overflow-x: hidden; background-color:#2A2A2A; font-weight:400;font-style: normal; color: #FFF; 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: 'Poppins', 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:2.5rem; padding-bottom: 7.8125rem; position: relative;  }
.ds-logo a{ display: inline-block; background-color: #CBFE00; font-weight: 600; font-size: 1.125rem; padding: 0  0.4375rem; color: #000}
.ds-logo a:hover,.ds-logo a:focus{color: #000}
/*-----------------------------------------------------------------
  2. >>> Banner Style
----------------------------------------------------------------*/
.ds-banner{ margin-bottom: 8.125rem }
.ds-banner-hed{ font-size: 5.3125rem; line-height:5rem  }
.ds-image-shadow{box-shadow:30px 30px #C7F900;}
/*.ds-banner-left{display: flex; justify-content: space-between; flex-direction: column;}*/
.ds-social{ list-style: none; display: flex; align-items: center;margin-top: 2.5rem }
.ds-social li{ margin-right: 15px }
.ds-social li:alst-child{ margin-right: 0 }
.ds-social a{ width: 30px; height: 30px; background-color: #CBFE00; border-radius: 100%; text-align: center; display: flex; justify-content: center; align-items: center; font-size:1.25rem; color:#2A2A2A }
.ds-social li:hover a{background-color: #CBFE00; color:#000 }

.ds-banner figure{width: 370px; position: relative;}
.ds-banner figure figcaption{ color: #FFF; font-size:1.875rem; position: absolute; bottom: 0; width: 100%; text-align: center; padding-bottom:2.5rem  }
/*-----------------------------------------------------------------
  3. >>> Resume Style
----------------------------------------------------------------*/
.ds-resume-section{ background-color: #000; padding: 7.5rem 0 }
.ds-resume-section h2{ font-size: 2.5rem; line-height: 3.375rem; width: 100%;max-width: 80%;margin: 0 }
.ds-resume-section p{ color:#9C9C9C; font-size: 1rem; line-height: 1.875rem }
.ds-download-button{ display: inline-block; color: #CBFE00; border: 1px solid #CBFE00; letter-spacing: 3px; text-transform: uppercase; font-size: 0.75rem; padding:0.875rem 1.25rem; margin-top: 30px  }
.ds-download-button i{ font-size:1.125rem; vertical-align: middle;  }
.ds-download-button:hover{ color: #000; background-color:#CBFE00  }
/*-----------------------------------------------------------------
  4. >>> Projects Style
----------------------------------------------------------------*/
.ds-projects-section{padding: 7.5rem 0 }
.ds-projects-section h2{ font-size: 2.5rem; line-height: 3.375rem; width: 100%;max-width:40%;margin: 0}
.ds-projects-section h2 span{ display: block; font-family: 'Poppins', sans-serif; text-transform: uppercase; color: #CBFE00; font-weight: 600; letter-spacing: 3px; font-size: 0.75rem; margin-bottom: 0.625rem}

.ds-projects-listing-section{ margin-top:5rem  }
.ds-projects-loop figure{ margin-right: 60px; position: relative; }
.ds-projects-loop:hover figure img.ds-image-shadow{box-shadow:20px 20px #C7F900;}
.ds-link-button{ position: absolute; right:0.4375rem; top:0.4375rem; width: 2rem; height: 2rem; border-radius: 3px; background-color: #000; display: block; justify-content: center; align-items: center; color: #CBFE00; font-size: 1.125rem; text-align: center; opacity: 0 }
.ds-projects-loop:hover .ds-link-button{ opacity: 1 }
.ds-projects-loop section{ margin-top: 5.875rem }
.ds-projects-loop section h3{font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.25rem}
.ds-projects-loop section span{ font-size: 1rem; font-weight: 400 }
/*-----------------------------------------------------------------
  5. >>> Testimonials Style
----------------------------------------------------------------*/
.ds-testimonials-section{ background-color: #000;padding: 7.5rem 0 }
.ds-testimonials-section h2 span{ display: block; font-family: 'Poppins', sans-serif; text-transform: uppercase; color: #CBFE00; font-weight: 600; letter-spacing: 3px; font-size: 0.75rem; margin-bottom:2.5rem}

.ds-testimonials-loop article{ color: #9C9C9C; font-size: 2rem; line-height: 2.8125rem }
.ds-testimonials-loop section{ margin-top: 3.75rem }
.ds-testimonials-loop section span{ display: block; font-size: 1rem; line-height: 1.375rem }
.ds-testimonials-loop section span.ds-name{ font-weight: 600 }
.ds-testimonials-slider .slick-arrow{ display: inline-block; outline: none; cursor: pointer; font-size:1.5rem; line-height:3.75rem; text-align: center;  border: 1px solid #575757; padding: 0; width: 3.75rem; height: 3.75rem; border-radius: 100%; background-color:#000; color: #575757; position: absolute; bottom: 0; right: 0; z-index: 2 }
.ds-testimonials-slider .slick-arrow:hover{ color: #CBFE00; border-color: #CBFE00 }
.ds-testimonials-slider .slick-arrow.slick-prev{ right: 4.375rem }
/*-----------------------------------------------------------------
  6. >>> Email Style
----------------------------------------------------------------*/
.ds-email-section{padding: 7.5rem 0; background-color: #CBFE00; text-align: center;}
.ds-email-section h2{ font-size: 3.75rem;color: #000; margin-bottom: 1.875rem }
.ds-email-section a{ font-size:1.25rem; font-weight: 500; text-decoration: underline;  }
.ds-email-section a:hover{ color: #000; text-decoration: none; }
/*-----------------------------------------------------------------
  7. >>> Footer Style
----------------------------------------------------------------*/
.ds-footer{ padding: 2.5rem 0; text-align: center; color: #CECECE; font-size: 1.25rem }
.ds-footer a{color: #CECECE }
.ds-footer a:hover{color: #CECECE; text-decoration: underline; }
/*-------------------------------------------------------------------------------
 XS Style @media (max-width: 767px) 
-------------------------------------------------------------------------------*/
@media (max-width: 767px) {
	.ds-header {padding-top: 2.5rem;padding-bottom:2.5rem;}
	.ds-banner-hed {font-size: 2.3125rem;line-height: 3rem;}
	.ds-banner .container{ position: relative; padding-bottom: 90px }
	.ds-social{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
	.ds-banner figure{ width: 90%; margin: 0 auto; margin-top: 40px }
	.ds-image-shadow {box-shadow:20px 20px #c7f900;}
	.ds-banner {margin-bottom: 3.5rem;}
	.ds-resume-section,.ds-projects-section,.ds-testimonials-section,.ds-email-section{ padding: 3.5rem 0 }
	.ds-resume-section h2,.ds-projects-section h2{ max-width: 100% }
	.ds-projects-section h2 span{ margin-bottom: 0 }
	.ds-projects-listing-section {margin-top: 3rem;}
	.ds-projects-loop section{margin-top: 2.875rem;}
	.ds-projects-loop figure{ margin-right: 20px }
	.ds-projects-loop{margin-bottom: 3.5rem;}
	.ds-projects-loop:last-child{ margin-bottom: 0 }
	.ds-testimonials-loop article{ font-size:1rem; line-height: 2rem  }
	.ds-email-section h2{ font-size: 2rem }
	.ds-testimonials-slider .slick-arrow{width: 2.75rem;height: 2.75rem;line-height: 2.75rem;}
}


@media (min-width: 768px) and (max-width: 991px) {
.ds-header{padding-bottom: 3.8125rem;}
.ds-banner-hed{font-size: 3.3125rem;line-height: 4rem;}
.ds-banner figure{ margin-right: 1.875rem }
.ds-projects-section h2{ max-width: 60% }
.ds-projects-loop figure{ margin-right: 40px }
}

@media (min-width: 992px) and (max-width: 1199px) {
.ds-banner figure{ margin-right: 1.875rem }

}