@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
   font-family: 'Open Sans', sans-serif;
}

.nav-responsive {
   height: 50px;
   background: rgb(42, 42, 42);
   position: relative;
}

.nav-responsive img {
   width: 100px;
   position: absolute;
   top: 50%;
   left: 2%;
   transform: translateY(-50%);
}

.nav-responsive .ul-nav {
   position: absolute;
   top: 50%;
   right: 25px;
   transform: translateY(-50%);
}

.li-nav {
   display: inline-block;
   margin: 0 15px;
   line-height: 49.5px;
}

.li-nav a {
   position: relative;
   color: rgb(245,245,245);
   font-size:  .87em;
   text-transform: uppercase;
   padding: 1em 0;
   font-family: 'Open Sans',sans-serif;
}

.li-nav a::before {
   position: absolute;
   content: '';
   left:0;
   bottom: 0;
   height: 2px;
   width: 100%;
   background: rgb(245, 245, 245);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform .25s linear;
}

.li-nav a:hover::before {
   transform: scaleX(1);
   transform-origin: left;
}

label #btn ,
label #cancel {
   color:rgb(245, 245, 245);
   font-size: 1.3em;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 10px;
   line-height: 50px;
   cursor: pointer;
   display: none;
}

#check {
   display: none;
}

/* ======= 
   content
   ======= */

.page {
   background: rgb(54, 54, 54);
}

.container {
   width: 75%;
   margin-right: auto;
   margin-left: auto;
   box-sizing: border-box;
} 

.row {
   width: 100%;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

.card-01 {
   /* background: #03D29F; */
   position: relative;
   flex: 1;
   max-width: 100%;
   height: 300px;
   margin: 10px;
   border-radius: 8px;
   /* box-shadow: 0 0 5px rgba(0,0,0,0.2); */
}

.card-01 video {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 8px;
}

.card-01 span {
   text-align: center;
   position: absolute;
   top: 10px;
   right: 30px;
   font-size: 4rem;
   border-radius: 5px;
   /* background: rgba(255,255,255,.4); */
   color: rgb(42, 42, 42);
   width: 210px;
   height: 150px;
   text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
   font-family: 'Open Sans';
}

.btn {
   border: none;
   border-radius: 5px;
   width: 150px;
   height: 60px;
   background:  rgba(245, 245, 245, 0.582);
   cursor: pointer;
   outline: none;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.541);
}

.btn:active {
   transform: translateY(2px);
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.301);

}

.a-btn {
   text-align: center;
   text-decoration: none;
   color:rgb(42, 42, 42);
   font-size: 1.5em;
   font-family: 'Open Sans',sans-serif;
   text-transform: uppercase;
   font-weight: 600;
   letter-spacing: .1em;
   padding: 16px 13px;
}

.card-02 {
   background: #50a7ff;
   position: relative;
   flex: 1;
   max-width: 50%;
   height: 250px;
   margin: 10px;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.card-03 {
   background: #FF7675;
   position: relative;
   flex: 1;
   max-width: 100%;
   height: 400px;
   margin: 10px;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/* ===========   
   media query
   =========== */

@media screen and (max-width: 576px) {

   /* =========================
      responsive navigation bar 
      ========================= */
   label #btn {
      display: block;
   }
   .nav-responsive .ul-nav{
      position: absolute;
      width: 100%;
      height: calc(100vh - 100px);
      left: -100%;
      text-align: center;
      background:rgb(54, 54, 54);
      transition: all .5s;
      z-index: 2;
   }
   .li-nav a {
      font-size: .65em;
   }
   .li-nav {
      display: block;
      margin: 30px 0;
      line-height: 20px;
   }
   #check:checked ~ ul {
      left: 0;
   }
   #check:checked ~ label #btn {
      display: none;
   }
   #check:checked ~ label #cancel {
      display: block;
   }

   /* ================
      background video
      ================ */
   .container {
      width: 100%;
   }
   .row {
      width: 100%;
   }
   .card-01{
      height: 200px;
   }
   .card-01 video {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }
   .card-01 span {
      top: 10px;
      right: 10px;
      font-size: 2rem;
      background :rgba(245, 245, 245, 0.582);
      width: 100px;
      height: 100px;
   }
   .btn {
      margin-top: 15px;
      width: 80px;
      height: 40px;
      box-shadow: 0px .5px 1px rgba(0, 0, 0, 0.541);
   }
   .a-btn {
      font-size: .8em;
      padding: 0;
      font-weight: 500;

   }
   .btn:active {
      transform: translateY(1px);
      box-shadow: 0px .5px .5px rgba(0, 0, 0, 0.24);
   
   }
   .card-02 {
      background: #50a7ff;
      position: relative;
      flex: 100%;
      max-width: 80%;
      height: 100px;
   }
   .card-03 {
      background: #FF7675;
      position: relative;
      flex: 1;
      max-width: 50%;
      height: 200px;
   }

}

@media only screen and (min-width: 577px) and (max-width: 768px) {
   .nav-responsive .ul-nav{
      right: 5px;
   }
   .li-nav a {
      font-size: .6em;
      padding: 15px 0;
   }
   .li-nav a::before {
      height: 1px;
   }
   /* ================
      background video
      ================ */
      .container{
         width: 100%;
      }
      .row {
         width: 100%;
      }
      .card-01{
         height: 300px;
      }
      .card-01 video {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
      .card-01 span {
         top: 10px;
         right: 10px;
         font-size: 2rem;
         background :rgba(245, 245, 245, 0.582);
         width: 100px;
         height: 100px;
      }
      .btn {
         margin-top: 15px;
         width: 80px;
         height: 40px;
         box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.541);
      }
      .a-btn {
         font-size: .8em;
         padding: 1em .372em;
         font-weight: 500;
   
      }
      .btn:active {
         transform: translateY(2px);
         box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.24);
      
      }
      .card-02 {
         background: #50a7ff;
         position: relative;
         flex: 100%;
         max-width: 70%;
         height: 150px;
      }
      .card-03 {
         background: #FF7675;
         position: relative;
         flex: 100%;
         max-width: 100%;
         height: 200px;
      }
}

@media only screen and (min-width: 769px) and (max-width: 992px) {
   .nav-responsive .ul-nav{
      right: 10px;
   }
   .li-nav a {
      font-size: .8em;
      padding: 15px 0;
   }
   /* ================
      background video
      ================ */ 
      .card-01{
         height: 300px;
      }
      .card-01 video {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
      .card-01 span {
         top: 10px;
         right: 20px;
         font-size: 3rem;
         background :rgba(245, 245, 245, 0.582);
         width: 150px;
         height: 120px;
      }
      .btn {
         margin-top: 10px;
         width: 100px;
         height: 50px;
         box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.541);
      }
      .a-btn {
         font-size: 1em;
         padding: 1em .372em;
         font-weight: 600;
         font-family: sans-serif;
   
      }
      .btn:active {
         transform: translateY(2px);
         box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.24);
      
      }
      .card-02 {
         background: #50a7ff;
         position: relative;
         flex: 2;
         max-width: 100%;
         height: 150px;
      }
      .card-03 {
         background: #FF7675;
         position: relative;
         flex: 100%;
         max-width: 100%;
         height: 200px;
      }

}

@media only screen and (min-width: 993px) and (max-width: 1200px) {
   .nav-responsive .ul-nav{
      right: 0px;
   }
   .li-nav a {
      font-size: .8em;
      padding: 15px 0;
   }
   .li-nav a::before {
      height: 2px;
   }
   /* ================
      background video
      ================ */
      .card-01{
         height: 300px;
      }
      .card-01 video {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
      .card-01 span {
         top: 10px;
         right: 20px;
         font-size: 3rem;
         background :rgba(245, 245, 245, 0.582);
         width: 150px;
         height: 120px;
      }
      .btn {
         margin-top: 10px;
         width: 100px;
         height: 50px;
         box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.541);
      }
      .a-btn {
         font-size: 1em;
         padding: 1em .372em;
         font-weight: 600;
         font-family: sans-serif;
      }
      .btn:active {
         transform: translateY(2px);
         box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.24);
      }
      .card-02 {
         background: #50a7ff;
         position: relative;
         flex: 2;
         max-width: 100%;
         height: 150px;
      }
      .card-03 {
         background: #FF7675;
         position: relative;
         flex: 100%;
         max-width: 100%;
         height: 200px;
      }

}

@media only screen and (min-width: 1201px) and (max-width: 1400px) {
   .nav-responsive .ul-nav{
      right: 0px;
   }
   .li-nav a {
      font-size: .8em;
      padding: 15px 0;
   }
   .li-nav a::before {
      height: 2px;
   }
   /* ================
      background video
      ================ */
      .card-01{
         height: 300px;
      }
      .card-01 video {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
      .card-01 span {
         top: 10px;
         right: 20px;
         font-size: 3rem;
         background :rgba(245, 245, 245, 0.582);
         width: 150px;
         height: 120px;
      }
      .btn {
         margin-top: 10px;
         width: 100px;
         height: 50px;
         box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.541);
      }
      .a-btn {
         font-size: 1em;
         padding: 1em .372em;
         font-weight: 600;
         font-family: sans-serif;
   
      }
      .btn:active {
         transform: translateY(2px);
         box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.24);
      
      }
      .card-02 {
         background: #50a7ff;
         position: relative;
         flex: 2;
         max-width: 100%;
         height: 150px;
      }
      .card-03 {
         background: #FF7675;
         position: relative;
         flex: 100%;
         max-width: 100%;
         height: 250px;
      }

}