@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

* {
     margin: 0;
     padding: 0;
     user-select: none;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
}

body {
     background: #f2f2f2;
}

a {
     color: #fff;
     text-decoration: none;
}

nav {
     background: #1b1b1b;
     box-shadow: 5px 5px 4px #3d3c3c;
}

nav:after {
     content: '';
     clear: both;
     display: table;
}

nav .logo {
     float: left;
     color: white;
     font-size: 27px;
     font-weight: 600;
     line-height: 70px;
     padding-left: 60px;
}

nav .logo span {
     color: #66ffff;
}

nav ul {
     float: right;
     margin-right: 40px;
     list-style: none;
     position: relative;
}

nav ul li {
     float: left;
     display: inline-block;
     background: #1b1b1b;
     margin: 0 5px;
}

nav ul li a {
     color: white;
     line-height: 70px;
     text-decoration: none;
     font-size: 18px;
     padding: 8px 15px;
}

nav ul li a:hover {
     color: cyan;
     border-radius: 5px;
     box-shadow: 0 0 5px #33ffff,
          0 0 10px #66ffff;
}

nav ul ul li a:hover {
     box-shadow: none;
}

nav ul ul {
     position: absolute;
     top: 90px;
     border-top: 3px solid cyan;
     opacity: 0;
     visibility: hidden;
     transition: top .3s;
}

nav ul ul ul {
     border-top: none;
}

nav ul li:hover>ul {
     top: 70px;
     opacity: 1;
     visibility: visible;
}

nav ul ul li {
     position: relative;
     margin: 0px;
     width: 150px;
     float: none;
     display: list-item;
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

nav ul ul li a {
     line-height: 50px;
}

nav ul ul ul li {
     position: relative;
     top: -60px;
     left: 150px;
}

.show,
.icon {
     display: none;
}


@media all and (max-width: 968px) {
     nav ul {
          margin-right: 0px;
          float: left;
     }

     nav .logo {
          padding-left: 30px;
          width: 100%;
     }

     .show+a,
     ul {
          display: none;
     }

     nav ul li,
     nav ul ul li {
          display: block;
          width: 100%;
     }

     nav ul li a:hover {
          box-shadow: none;
     }

     .show {
          display: block;
          color: white;
          font-size: 18px;
          padding: 0 20px;
          line-height: 70px;
          cursor: pointer;
     }

     .show:hover {
          color: cyan;
     }

     .icon {
          display: block;
          color: white;
          position: absolute;
          top: 0;
          right: 40px;
          line-height: 70px;
          cursor: pointer;
          font-size: 25px;
     }

     nav ul ul {
          top: 70px;
          border-top: 0px;
          float: none;
          position: static;
          display: none;
          opacity: 1;
          visibility: visible;
     }

     nav ul ul a {
          padding-left: 40px;
     }

     nav ul ul ul a {
          padding-left: 80px;
     }

     nav ul ul ul li {
          position: static;
     }

     [id^=btn]:checked+ul {
          display: block;
     }

     nav ul ul li {
          border-bottom: 0px;
     }

     span.cancel:before {
          content: '\f00d';
     }
}

.mr-50 {
     margin-right: 50px;
}

/*-----------------------------------
Cards
------------------------------------*/
.container {
     margin: 5px auto;
     text-align: center;
}

.card-deck {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
}

.card {
     box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2);
     transition: 0.3s;
     border-radius: 15px;
     width: 320px;
     max-height: 500px;
     margin: 20px;
}

.card:hover {
     transform: scale(1.05);
}

.card-title {
     margin: 5 auto;
     line-height: 50px;
}

.card-image {
     width: 100%;
     height: 250px;
     border-radius: 5px 5px 0 0;
}

.btn-primary {
     background-color: #0096fe;
     font-weight: 600;
     border: none;
     color: #fff;
     padding: 5px 15px;
     border-radius: 4px;
     cursor: pointer;
}



.btn-hover:hover {
     transform: scale(1.3);
}

.btn-dark {
     background-color: #394043;
     font-weight: 600;
     border: none;
     color: #fff;
     padding: 5px 15px;
     border-radius: 4px;
     cursor: pointer;
}


.btn-danger {
     background-color: #fe4a49;
     font-weight: 600;
     /* background-color: #ff4d00; */
     border: none;
     color: #fff;
     padding: 5px 15px;
     border-radius: 4px;
     cursor: pointer;
}