body {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
}
.bg{
  background-color:#060606;
}
.container {
  margin: 0 auto;
  width: 100%;
  padding: 0 2rem;
}
.row{
  margin-left:-2rem;
  margin-right:-2rem;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
.hero-section .container{
  position: relative;
}
.site-navigation {
  width: 50%;
  padding:2rem;
}
.site-navigation.show{
  position:absolute;
  top:0;
  right:0;
  height:100vh;
  background-color: #ff1964;
}
.site-navigation ul {
  opacity:0;
  pointer-events: none;
}
.site-navigation.show ul {
  opacity: 1;
  pointer-events: initial;
}

.site-navigation li {
  display: block;
  padding: 1.5rem 0;
}

.site-navigation li:not(:last-child) {
  margin-right: 1rem;
}

.site-header {
  padding: 1rem 1rem;
  position: fixed;
  width: 100%;
  z-index: 10;
}
.hamburger-menu {
  padding-top: 1rem;
  color: #ff1964;
  position: absolute;
  top: 1rem;
  right: 2rem;
  transition: 0.3s ease-in-out;
}
.show .hamburger-menu{
  color:white;
}

.w-half {
  width: calc(100%/2);
  padding:0 1rem;
}
.w-100{
  width: 100%;
  padding:1rem 1rem;
}

.push-left {
  float: left;
}
.button{
  padding: 1rem 2rem;
  font-size: 1.5rem;
  display: inline-block;
}
.btn-w-100{
  width: 100%;
}
.button-primary{
  background-color: #ff1964;
}
.button-secondary{
    border:1px solid white;
    margin-top: 10px;
    transition: .3s;
}
.hero-section{
  padding: 7rem 1rem 0 1rem;
}
.hero-content p {
  margin-bottom: 2rem;
}
.hero-content h1 {
  font-size: 3.5rem;
  padding-bottom: 1rem;
}
.hero-content span {
  font-size: 1.5rem;
}
.work-section,.aboutMe-section,.contact-section{
  padding: 0 1rem;
}

.color-primary{
  color: white;
}
.color-secondary{
  color: #ff1964;
}
.section-header span{
  font-size: 1rem;
}
.section-header h2 {
  font-size: 3rem;
}
.section-header{
  margin: 2rem 1rem;
}
.section-sub-header{
  margin-bottom: 2.5rem;
}
.pad-2{
  padding: 2rem;
}
.mar-tp-2{
  margin-top: 2rem;
}

.margin-tp-dw{
  margin: 5rem 0;
}
.scroll-container{
  position:absolute;
  bottom: -3rem;
  left:0;
}
.scroll-wrapper span{
  position:relative;
  animation: bounce 1s ease-in-out infinite both;
}
@keyframes bounce {
  0%{
    top:0rem;
    color:white;
  }
  50%{
    top:1rem;
    color:#ff1964;
  }
  100%{
    top:0rem;
    color:white;
  }
}

.card {
  border: 1px solid rgba(255, 255, 255, 0.897);
  transition: .3s ease-in-out;
}
.aboutMe-section .card img{
  height: 400px;
  width: 100%;
  object-fit: cover;
  object-position: 0% 19%;
  transform: rotateY(180deg);
}
.card:hover{
  transform: scale(1.009);
  transition: .3s;
}
.border-radius{
  border-radius: 6px;
}
.borderless{
  border: none;
}
.button-secondary:hover {
  background-color: #ff1964;
  border: #ff1964 solid 1px;
  transition: .3s;
}
.content {
  margin-bottom: 1rem;
}

.fab{
  font-size: 1.5rem;
  transition: .3s ease-in-out;
}
.fab:hover{
  color: #ff1964;
  transition: .3s ease-in-out;
}
.contact i,.contact span{
  padding: 1rem 1.5rem 1rem 0;
  
}
.social-links a{
  padding-right: .3rem;
}
.form-field{
  padding: 1rem 2px .5rem 0;
  margin-bottom: 2rem ;
  width:100%;
  color: white;
  background-color: #060606;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
}
.form-field:focus{
  outline:  none;
}

.copyright-section{
  background-color: #ff1964;
  padding:1rem 0;
}
.copyright-section span{
  padding: 2px;
}
.copyright-section p{
    text-align: center;
    color:white;
}
.display-hide{
  display:none;
}
.contact-address{
  margin-left: 5px;
}

@media (min-width: 640px) {
  .container {
    max-width: 560px;
  }
  
}
@media (min-width: 768px) {
  .container {
    max-width: 700px;
  }

  .md-w-half{
    width:50%;
  }
  
}
@media (min-width: 1020px) {
  .container {
    max-width: 900px;
  }
  .site-navigation{
    padding: 0;
    width:100%;
    text-align:right;
  }
  .site-navigation ul {
    opacity: 1;
    height: auto;
    pointer-events: initial;
    padding:0;
  }
  .site-navigation li{
    display:inline-block;
  }
  .hamburger-menu{
    display:none;
  }
  .hero-section {
    background-image: url("../images/bg.jpg");
    background-position: 0%;
    min-height: 100vh;
  }
  .hero-section .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .lg-w-40{
    width:40%;
    padding: 3.1rem 1rem;
  }
  .lg-w-60{
    width: 60%;
    padding: 0 1rem;
  }
  .margin-tp-dw{
    margin: 10rem 0;
  }
  .lg-w-33{
    width:calc(100%/3);
    padding: 0 1rem;
  }
  .lg-w-half{
    width:50%;
    padding: 0 1rem;
  }
  .contact-info{
    padding-left: 10rem;
  }
  .site-navigation.show{
    display: contents;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}

@media (min-width:768px) and (max-width:1019px){
  .md-display-show{
    display:block;
  }
}