@charset "UTF-8";
/* CSS Document */

body {
   font-family: "roc-grotesk", sans-serif;
   font-weight: 300;
   font-style: normal;
   background-color:#FFFFFF;
   color:black;
   margin:0;
  padding:0;
  width:100vw;
  overflow-x:hidden;
}

h1 {
   font-family: "roc-grotesk", sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size:22px;
}

h2 {
   font-family: "roc-grotesk", sans-serif;
   font-weight: 300;
   font-style: normal;
   line-height:1.45;
}

h3 {
   font-family: "roc-grotesk", sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size:15px;
   line-height:11px;
}

a {
    color: #0d6efd;
    text-decoration: underline;
}

.blackboy {
   color:black;
}

.cover {
   background-size: cover;
   background-position: center center
}

.cover:hover {
   background-size: cover;
   opacity:0.85;
}

.listly {
   margin-left:20px;
   line-height:33px;
   font-weight:100;
   font-size:12px;
   padding-bottom:15px
}

.main {
   padding: 0px;
  width:100%;
}

.mantitle {
   padding-top:5px;
   padding-left:5px;
   font-weight:600;
   font-size:14px;
}

.tyler {
   background-image: url("Images/tyler.png");
   height:100vh;
   background-position: right; /* Center the image */
   background-repeat: no-repeat; /* Do not repeat the image */
   background-size: cover;
}

.sideSidey {
  width:580px;
  padding:50px;
}

@media (max-width:1650px){
  .sideSidey {
    width:484px;
    padding:43px;
  }
}

@media (max-width:1455px){
  .sideSidey {
    width:384px;
    padding:33px;
  }
}

.boldboy {
    font-weight:600;
}

.itemM {
  height:33vh;
  background-size:cover;
  background-position: center center;
  color:rgba(255,255,255,0);
  align-content: center;
  font-weight:300;
  font-size:18px;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
  transition-timing-function: ease;
  
}




.itemM:hover {
  color:white;
  background-color: black;
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.75);
  vertical-align:middle;
}

.rowRow {
  width:100%;
}

@media (max-width: 768px) {
  .rowRow {
    margin-top:95px;
  }
  .main {
    margin-top:95px
  }
}

@media (max-width: 576px) {
  .itemM {
    width:100%;
    height:50vh;
    background-size:cover;
    
  }
  .rowRow {
    margin-top:95px;
  }
  }

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.backarrow {
  width:45px;
  position:fixed;
  top: 35px;
  margin-left:35px;
}

.backarrow:hover {
  opacity: 0.5;
}

.parapara {
  margin:150px;
}



@media (max-width: 1020px) {
  .parapara {
    margin:80px;
    
  }
}


@media (max-width: 768px) {
  .parapara {
    margin:40px;
  }
  
  .backarrow {
    width:25px;
    margin-top:72px;
    margin-left:15px;
  }
}


.hammen {
  display:none;
}

.hammen:hover {
  opacity:0.8;
}



@media (max-width: 768px) {
  .hammen {
    display:block;
  }
  .itsme {
    display:none;
  }
}

.itsme {
  display:block;
}

@media (max-width: 350px) {
  .itsme {
    display:none;
  }
}