@font-face {
  font-family: 'Roboto';
  src:  url('../fonts/Roboto-Regular.ttf');
  src:  url('../fonts/Roboto-Bold.ttf');
}
@font-face {
  font-family: 'Kaushan Script';
  src:  url('../fonts/KaushanScript-Regular.ttf');
}
html {
  scroll-behavior: smooth;
}
body{
  margin:0;
  box-sizing: border-box;
  font-family: 'Roboto';
  font-size:1rem;
  font-weight:normal;
  line-height:1.5;
  color:#333;
  overflow-x:hidden;
}/*
.item {
  position: relative;
  height: 300px;
}
.item:hover h3 {
  max-height: 300px;
  font-size: 32px;
  padding-top: 25px;
  background-color: rgba(237, 237, 237, 0.75);
}
.item h3:hover {
  text-decoration: underline;
}
.item a h3{
  margin: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #000;
  background-color: rgba(237, 237, 237, 0.5);
  font-size: 18px;
  transition: all 900ms ease-in-out;
}*/
nav {
  position: absolute;
  top: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  height: 50px;
  width: 100%;
  z-index: 1500;
  position: fixed;
  transition: all 600ms ease-in-out;
}
nav.scrolled-nav {
    background-color: #222;
	opacity: 0.9;
	border-bottom: 1px solid #fff;
}
nav ul {
  display: inline-block;
}
#logoWide {
  display: inline-block;
  text-decoration: none;
  vertical-align: top;
  margin-left: 7%;
}
#logoWide a {
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  padding-left: 5px;
  font-size: 25px;
  color: #fff;
}
#logoWide #logo-img {
  display: inline-block;
}
#logoWide #logo-txt {
  display: inline-block;
  position: relative;
  top: -17px;
  left: 10px;
}
ul {
  text-align: right;
  width: 70%;
  margin: 0 auto;
  padding: 0;
  display: inline-block;
}

ul li {
  list-style: none;
  display: inline-block;
  padding: 15px;
  cursor: pointer;
  -webkit-transition: background-color 400ms linear;
  -moz-transition: background-color 400ms linear;
  -o-transition: background-color 400ms linear;
  transition: background-color 400ms linear;
}

ul li a {
  text-decoration: none;
  color: #fff;
  -webkit-transition: color 400ms linear;
  -moz-transition: color 400ms linear;
  -o-transition: color 400ms linear;
  transition: color 400ms linear;
}
ul li a:hover {
	/*color: #225470; videcu vec sta cu  */
}
nav ul li.return a {
  color: #FBA92E;
}
#shrinked {
  height: 55px;
}
.toggle {
  width: 100%;
  height: 100%;
  background-color: transparent;
  box-sizing: border-box;
  color: #fff;
  font-size: 30px;
  display: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 600ms, visibility 600ms;
            transition: opacity 600ms, visibility 600ms;
}
.toggle i {
  float:right;
  padding: 13px 12px;
  cursor: pointer;
  color: #fff;
}

.toggle a {
  margin-left: 5%;
}

@media (max-width:1050px) {
  .toggle {
    display: block;
    visibility: visible;
    opacity: 1;
    animation: fade 1s;
  }

  #logoWide {
	display: none;
  }
ul {
  position: absolute;
    right: 0;
    background: #333;
    padding: 0;
    width: 65%;
    transform-origin: right;
    transform: translateX(100%);
    transition: 0.5s;

  }
  ul li {
    display: block;
    text-align: center;
    border: 1px solid #fff;
    z-index: 25;
  }
  ul li a {
    display: block;
    color: #fff;
    z-index: 30;
  }
  .active1 {
    transform: translateX(0%);
  }
  .active2 {
    overflow: visible;
    -webkit-transition: visibility 600ms;
            transition: visibility 600ms;
  }
}
.overlaid {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.75); /* Black background with opacity */
  z-index: 50; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}
.overlay-appear {
	display: block;
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.v-header{
  height:100vh;
  display:flex;
  align-items:center;
  color:#fff;
}
.container{
  max-width:1200px;
  padding-left:1rem;
  padding-right:1rem;
  margin:auto;
  text-align:center;
}
/**/
.fullscreen-video-wrap{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

.fullscreen-video-wrap > video {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
@media screen and (max-aspect-ratio: 1920/1080) {
  .fullscreen-video-wrap > video {
    height: 100%;
  }
}
@media screen and (min-aspect-ratio: 1920/1080) {
  .fullscreen-video-wrap > video {
    width: 100%;
  }
}
.header-overlay{
  height:100vh;
  position: absolute;
  top:0;
  left:0;
  width:100vw;
  z-index:1;
  background:#225470;
  opacity:0.7;
}

.header-content{
  margin: 0 auto;
  z-index:2;
}

.header-content h1{
  font-size:60px;
  font-family: 'Kaushan Script', cursive;
}
.header-content h4 {
  font-family: 'Merriweather', serif;
}
.header-content h3{
  font-size:1.5rem;
  display:block;
}
.header-content h5{
  font-size:1.3rem;
  display:block;
}

.btn{
  background: #34b3a0;
  color:#fff;
  font-size:1.2rem;
  padding: 1rem 2rem;
  text-decoration: none;
  border-radius: 3px;
  cursor: pointer;
}
.img-holder, .txt-holder {
  display: inline-block;
  width: 500px;
}
.img-holder img {
  border: 2px solid #777;
  border-radius: 3px;
}
.txt-holder {
  padding: 0 5%;
}
.txt-holder p {
  margin-bottom: 2rem;
}
.txt2holder {
  position: relative;
  padding: 1.5rem;
  font-size: 1.25em;
}
.row {
  display: flex;
}
.col {
  flex: 1;
}
.pt-175 {
  padding-top: 1.75rem;
}
.imgbkg {
  background: url(../img/promo.gif) no-repeat center center;
  height: 100vh;
}
section h2 {
  font-size: 42px;
  padding: 5% 5% 1% 0;
  margin: 0 3%;
  border-bottom: 3px solid;
}
button.go-back {
  background-color: transparent;
  color: #ddd;
  font-family: 'Roboto';
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  border: none;
  cursor: pointer;
  transition: color 400ms ease-in-out;
}
button.go-back:hover {
  color:#74D5DD;
  text-decoration: underline;
}
.about-wrap {
  padding-top: 4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#about .btn {
	background-color: #398AD7;
}
.section{
  padding:20px 0;
  min-height: 100vh;
}

.section-b{
  background:#333;
  color:#fff;
}
.card-holder {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 1.5rem;
}
.card-holder i {
  margin: 2rem 0;
  font-size: 280px;
  transition: all 500ms ease-in-out;
}
.card-holder i:hover {
  cursor: pointer;
  color: #fff;
  transform: scale(1.2);
}
.big-card {
	position: relative;
  background-color: #111;
	height: auto;
	width: 500px;
	border: 3px solid #ddd;
	border-radius: 3px;
	margin-bottom: 1rem;
}
.card-holder h4 {
	margin: 0;
	font-size: 32px;
}
#hot span{
    position:absolute;
    padding:5px;
    background-color:#FFD800;
    color:#333;
    font-weight:700;
    border-radius:4px;
    line-height:1
}
.big-card .date{
    top:3%;
    left:3%
}
.big-card .location{
    top:3%;
    right:3%
}
.small-card-holder{
    display:inline-block;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}
.small-card{
    position:relative;
    background-color:#111;
    width:500px;
    height:210px;
    border:3px solid #ddd;
    border-radius:3px;
    margin-bottom:1rem;
    display:flex
}
#hot .small-card span{
    font-size:12px;
    font-weight:400
}
.small-card .date{
    top:2%;
    left:2%
}
.small-card .location{
    bottom:2%;
    left:2%
}
.small-card-img{
    display:inline-block;
    height:100%;
    width:165px;
    object-fit:cover;
    border-right:1px solid #ddd
}
.small-card-txt{
    display:inline-block;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 5px
}
.descr{
    padding-left:5px;
    padding-right:5px
}
#members .small-card-txt{
    min-width:215px
}
.card{
    display:inline-block;
    height:400px;
    width:310px;
    background-color:#fff;
    border:3px solid #333;
    border-radius:3px;
    margin-bottom:1rem
}
.card:hover h4{
    text-decoration:underline
}
#timetable{
    background-color:#d7d7d7
}
.card-img-top{
    width:100%;
    height:60%;
    object-fit:cover;
    border-bottom:1px solid #ddd
}
.card h4{
    margin:3px 0; padding: 0 4px;
}
a .card{
    color:#333
}
#gallery{
    background-color:#225470;
    min-height:50vh
}
#gallery a{
    text-decoration:none;
    letter-spacing:2px;
    color:#ddd
}
#gallery a p{
    text-align:center;
    margin:0
}
.card-holder a{
    text-align:center
}
#hot .card-holder a{
    text-decoration:none;
    color:#ddd
}
.noimg div{
    padding-left:5px;
    padding-right:5px
}
.narrow{
    width:130px
}
#gallery a:hover{
    text-decoration:underline;
    color:#fff
}
#timetable .goSmaller{
    font-size:24px
}
.card:hover .goSmaller{
    text-decoration:none
}
.gallery-text{
    margin:5rem 2rem 0 2rem;
    color:#fff;
    font-size:1.5em;
    opacity:0;
    transition:opacity ease-out 250ms
}
@media(max-width:600px){
    .bio-head .memb-pic{
        width:90%;
        height:auto
    }
    .memb-pic-holder{
        margin:1rem auto
    }
}
#blog a{
    text-decoration:none;
    text-align:center;
    letter-spacing:2px;
    color:#444
}
#blog a:hover{
    text-decoration:underline;
    color:#000
}
.friends{
    text-align:center;
    padding:10px 20px 20px 20px;
    font-family:'Kaushan Script'
}
.friends .ribbon{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around
}
.friends #spc{
  padding-top: 25px;
    border-radius:3px;
}
.friends #spc img {
    background-color:#333;
}
#contact{
    padding-bottom:0;
    min-height:0;
    background-color:#444;
    color:#ddd
}
.contact-grid a{
    color:#398AD7;
    text-decoration:none
}
.contact-grid{
    margin:2rem 1rem;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:auto;
    grid-gap:1em;
    justify-items:stretch;
    align-items:stretch
}
.contact-col{
    grid-column:1;
    grid-row:1
}
.contact-col2{
    grid-column:2;
    grid-row:1;
    font-family:'Kaushan Script';
    color:#fff
}
.contact-col2 h1{
    margin:20px 0 0 0;
    font-size:2em
}
.contact-col2 p{
    margin:0
}
.contact-col3{
    grid-column:3;
    grid-row:1
}
.icon-holder i{
    font-size:2rem;
    color:#398AD7;
    padding:0 .5rem;
    transition:color 500ms ease-out
}
.icon-holder i:hover,#bottom-line a:hover,.contact-grid a:hover{
    color:#74D5DD
}
#bottom-line{
    padding-bottom:.5rem;
    padding-top:.5rem;
    text-align:center;
    color:#ddd;
    background-color:#555;
    width:100%
}
#bottom-line a{
    color:#ddd
}
#contact #bottom-line a{
    color:#398AD7
}
@media (max-width: 780px) {
	.contact-grid {
	grid-template-columns:repeat(1, 1fr);
	}
	.contact-col {
	grid-column: 1;
	grid-row: 1;
	}
	.contact-col2 {
	display: none;
	}
	.contact-col3 {
	grid-column: 1;
	grid-row: 2;
	}
}

/*  чланови */
#about-us {
	padding-top: 3rem;
}
#founders .card {
	display: inline-block;
	margin: 1rem;
	width: 200px;
	height: 450px;
	border: none;
}
#founders .card-img-top {
    width: 100%;
    height: 45%;
    object-fit: cover;
    border: 2px solid #333;
    border-radius: 50%;
}
/*
#founders p {
	position: relative;
}
#founders p:before {
  position: absolute;
  top: -40px;
  left: -40px;
  font-size: 50px;
  color: rgba(0,0,0, 0.1);
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f10d";
}	*/
#founders a {
  color: #333;
  text-decoration: none;
}
#founders .card:hover h4 {
  text-decoration: underline;
}
/* about slide style */

.slider {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.slide.current {
  opacity: 1;
}

.slide .content {
  position: absolute;
  bottom: 70px;
  left: -600px;
  opacity: 0;
  width: 600px;
  background-color: rgba(255, 255, 255, 0.5);
  color: #333;
  padding: 35px;
}

.slide .content h1 {
  margin-bottom: 10px;
}

.slide.current .content {
  opacity: 1;
  transform: translateX(600px);
  transition: all 0.7s ease-in-out 0.3s;
}
.buttons button#next {
  position: absolute;
  top: 40%;
  right: 15px;
}

.buttons button#prev {
  position: absolute;
  top: 40%;
  left: 15px;
}

.buttons button {
  border: 2px solid #fff;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
  padding: 13px 15px;
  border-radius: 50%;
  outline: none;
}

.buttons button:hover {
  background-color: #fff;
  color: #333;
}

@media (max-width: 500px) {
  .slide .content {
    bottom: -300px;
    left: 0;
    width: 300px;
    padding: 15px;
  }

  .slide.current .content {
    transform: translateY(-400px);
  }
}
/* Backgorund Images */
.slide:first-child {
  background: url('img/slider/1.jpeg') no-repeat
    center/cover;
}
.slide:nth-child(2) {
  background: url('img/slider/2.JPG') no-repeat
    center/cover;
}
.slide:nth-child(3) {
  background: url('img/slider/3.jpeg') no-repeat
    center top/cover;
}
.slide:nth-child(4) {
  background: url('img/slider/4.jpeg') no-repeat
    center/cover;
}
.slide:nth-child(5) {
  background: url('img/slider/5.JPG') no-repeat
    center top/cover;
}
.slide:nth-child(6)  {
  background: url('img/slider/6.JPG') no-repeat
    center center/cover;
}
.slide:nth-child(7)  {
  background: url('img/slider/7.jpg') no-repeat
    center center/cover;
}
.slide:nth-child(8)  {
  background: url('img/slider/8.jpg') no-repeat
    center center/cover;
}
.slide:nth-child(9)  {
  background: url('img/slider/9.jpg') no-repeat
    center center/cover;
}
.slide:nth-child(10)  {
  background: url('img/slider/10.jpg') no-repeat
    center center/cover;
}

/*about-us   */
#about-us h4 {
  font-size: 32px;
  padding-top: 0;
  margin-top: 0;
}
@media (max-width: 1158px) {
  .img-holder, .txt-holder {
  display: block;
  width: 100%;
  padding: 0 5%;
  }
  #about-us .img-holder {
  order: 1;
  }
}
#members {
  background-color: #225470;
  color: #fff;
}
#members .container {
  padding-top: 15px;
  padding-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#members a {
  text-decoration: none;
}
#members .small-card-txt h3{
  color: #fff;
  font-size: 1.5em;
  margin: 0;
  border-top: 3px solid #ddd;
}
.member-card:hover h3 {
  text-decoration: underline;
  color: #333;
}
#members .small-card-txt p {
  margin: 0.2em;
  color: #ddd;
  line-height: 1;
  font-size: 11px;
  padding-bottom: 3px;
  border-bottom: 3px solid #ddd;
}
.member-card  {
  height: 80px;
  width: 320px;
  display: flex;
  margin-bottom: 2rem;
}
.member-pic {
  display: inline-block;
  height: 100%;
  border: 2px solid #ddd;
  border-radius: 50%;
}
.bio {
  padding-top: 10rem;
  padding-bottom: 3rem;
}
.bio .container .bio-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
}
.bio h1 {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 2.5em;
  letter-spacing: 3px;
}
.bio h3, .bio h4 {
  margin-bottom: 0;
}
.memb-pic {
	position: relative;
  	display: inline-block;
  	height: 400px;
  	border-radius: 3px;
  	z-index: 2;
}
.memb-pic-holder {
  position: relative;
  line-height: 0;
}
.memb-pic-holder::before, .memb-pic-holder::after {
  position: absolute;
  top: -18px;
  bottom: -18px;
  left: -18px;
  right: -18px;
  content: '';
  background-color: #FBA92E;
  z-index: 0;
}
.memb-pic-holder::before {
  -webkit-clip-path: polygon(50% 0, 50% 50%,100% 50% ,100% 0%);
  clip-path: polygon(0 50%, 50% 50%, 50% 100%, 0% 100%);
}
.memb-pic-holder::after {
  -webkit-clip-path: polygon(50% 0, 50% 50%,100% 50% ,100% 0%);
  clip-path: polygon(50% 0, 50% 50%,100% 50% ,100% 0%);
}
.bio-text {
  width: 50%;
  vertical-align: top;
  padding: 0;
}
.verticalCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 850px) {
  .bio {
    padding-top: 5rem;
  }
  .bio-text {
  width: 90%;
  }
  .memb-pic-holder::before, .memb-pic-holder::after {
  top: -12px;
  bottom: -12px;
  left: -12px;
  right: -12px;
  }
  .bio-content .rew-moto {
    width: 320px;
  }
}
.bio-text, .bio-text h4 {
  display: inline-block;
}
.bio-content {
  width: 90%;
  text-align: left;
  display: block;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.rew-moto {
  display: inline-block;
  width: 500px;
}
.roles {
  display: inline-block;
  position: relative;
  width: 320px;
}
.roles::before {
  position: absolute;
  top: 50px;
  right: 0;
  font-size: 180px;
  color: rgba(0,0,0,0.1);
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f630";
}
.rewards::before {
  position: absolute;
  top: 50px;
  right: 50px;
  font-size: 200px;
  color: rgba(0,0,0,0.1);
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f5a2";
}
.text-count {
  border-left: 4px solid rgba(0,0,0, 0.3);
  padding-left: 10px;
}
.roles h3, .rew-moto h3 {
  font-size: 2em;
  font-family: 'Kaushan Script', cursive;
}
.rewards {
  display: inline-block;
  position: relative;
}
.moto {
  display: inline-block;
}
.moto h2 {
  margin: 1em 0 0 0;
  text-transform: uppercase;
}
.blockquote {
  margin: 0;
  padding: 10px 20px 10px;
  position: relative;
}
.blockquote p {
    font-family: 'Merriweather', serif;
    font-size: 35px;
    text-align: center;
}
.blockquote:before {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 50px;
  color: rgba(255,255,255, 0.1);
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f10d";
}
#about-novak {
  padding-top: 40px;
  background-color: #225470;
  color: #ddd;
  min-height: 50vh;
}
#about-novak .card-holder {
  width: 100
  background-color: #ddd;
}
.pics {
  padding: 10px 0;
  background-color: #ddd;
}
.pics .memb-pic {
  border: 2px solid #333;
  margin-bottom: 25px;
}
#gallery .memb-pic {
  border: 2px solid #ddd;
}
@media (max-width: 785px) {
  .pics .memb-pic {
    max-width: 85%;
    height: auto;
  }
}
/* blog */
.section-blog {
  min-height: 30rem;
  background-color: #ddd;
}
.section-blog  .card-holder {
  margin-bottom: 0;
}
.section-blog .container {
  text-align: left;
}
.section-blog a {
  text-decoration: none;
}
.blg-crd {
  width: 500px;
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
}
.blg-crd .small-card-txt {
  padding: 20px;
}
.blg-crd .small-card-txt h4 {
  font-size: 2.25rem;
}
.blg-crd .small-card-txt h5 {
  font-size: 1.5rem;
  text-align: right;
}
.blg-crd:hover h4 {
  text-decoration: underline;
}
@media (max-width: 565px) {
  .blg-crd {
  width: 300px;
  }
  .blg-crd .small-card-txt h4 {
  font-size: 1.2rem;
  }
  .blg-crd .small-card-txt h5 {
  font-size: 1rem;
  text-align: right;
  }
}
/*article pages*/
.section-art {
  background-color: #225470;
  color: #ddd;
}
.artcl {
  display: flex;
  font-family: 'Montserrat', sans-serif;
}
.section-rep {
  background-color: #225470;
  color: #ddd;
}
.additional, .additional2 {
  display: none;
}
.iconcredit {
  font-size: 0.7em;
}
@media(max-width:960px){
  .big-card, .small-card {
    width: 310px;
  }
  .big-card {
    height: auto;
  }
  #hot .small-card .goSmall {
    font-size: 19px;
  }
  .under-txt {
    display: none;
  }
  .card-holder .h4goSmall {
    font-size: 28px;
  }
}
@media (max-width: 768px) {
  .row {
    display: block;
  }
  .additional {
    display: inline-block;
  }
  .md-vis {
    display: none;
  }
  .section h2 {
    padding-top: 36px;
  }
  .article h3 {
    margin-bottom: 0;
  }
  .article .auth {
    display: block;
    line-height: 30px;
  }
  .artBlog {
  width: 90%;
  }
  .imgBlog {
    display: none;
  }
}
#topper {
  text-align: center;
  display: none;
}
#topper img {
  max-width: 100%;
  max-height: 100vh;
}
.article {
  display: inline-block;
  margin: 2%;
  padding: 5%;
  background-color: #fff;
  color: #000;
  text-align: left;
  width: 50%;
}
.article h3 {
  font-size: 32px;
  margin-top: 0;
}
.article .auth {
  margin-right: 10px;
  white-space: nowrap;
}
.article p {
  font-size: 1.25em;
}
.ending {
  text-align: left;
  margin: 2% 0 0 3%;
  padding-bottom: 2%;
}
.ending a {
  color: #fff;
}
.art-side-img {
  display: inline-block;
  margin-top: 2%;
  margin-bottom: 2%;
  width: 40%;
  line-height: 0;
}
.art-side-img a img, .art-side-img video {
  margin-top: 0.75rem;
}
.art-side-img a .asi1 {
  margin-top: 0;
}
@media(max-width:600px) {
  #topper {
    display: block;
  }
  .art-side-img {
    display: none;
  }
  .article {
    width: 90%;
  }
  .bio-head .memb-pic {
    width: 90%;
    height: auto;
  }
  .memb-pic-holder {
    margin: 1rem auto;
  }
}
/*  testemnials  */
.sldwrp{
    position:relative;
    border-bottom:5px solid #333;
    border-top:5px solid #333
}
.sldr{
    min-height:25rem;
    position:relative;
    margin:0;
    line-height:1.6;
    background:url(../img/testemonials-bkg5.jpeg) no-repeat center center fixed;
    padding:10px 150px
}
.sld{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.4s ease-in-out
}
.sld.curr{
    opacity:1
}
.sld .cont{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    opacity:0;
    width:600px;
    background-color:rgba(255,255,255,.8);
    color:#333;
    padding:35px
}
.sld .cont h2{
    margin-bottom:10px;
    text-align:right
}
.sld.curr .cont{
    opacity:1;
    transition:all 0.7s ease-in-out 0.3s
}
.cont p:before{
    content:"„"
}
.cont p:after{
    content:"”"
}
.butt button#nex{
    position:absolute;
    top:40%;
    right:15px
}
.butt button#pre{
    position:absolute;
    top:40%;
    left:15px
}
.butt button{
    background-color:transparent;
    font-size:2em;
    color:#fff;
    cursor:pointer;
    padding:13px 15px;
    outline:none
}
.butt button:hover{
    background-color:#fff;
    color:#333
}
.special{
    padding-left:25px;
    border-left:3px solid #ddd
}
.takeme{
    text-decoration:none;
    color:#ddd
}
.takeme:hover{
    text-decoration:underline
}
@media (max-width:850px){
    .sldr{
        min-height:30rem
    }
    .sld .cont{
        padding-left:40px;
        padding-right:40px
    }
    .butt button{
        font-size:1em;
        padding:5px;
        color:#333
    }
    .sld .cont{
        width:70%
    }
}
@media (max-width:500px){

#ordPop{
    padding: 1.5rem 1rem;
    width: 80%;
    height: 70%;
}
    .additional2{
        display:inline-block
    }
    .card-holder i{
        font-size:220px
    }
    .butt button#nex{
        right:5px
    }
    .butt button#pre{
        left:5px
    }
    .card-holder .h4goSmall{
        font-size:28px
    }
}
#hot .small-card-txt .under-txt{
    margin-top:0;
    font-weight:400;
    font-size:.8rem
}
#hot .card-holder p{
    margin-left:.25em;
    margin-right:.25em
}
.orange{
    color:#FBA92E
}
#hot .card-holder #outsourced{
    background-color:#FBA92E;
    color:#222
}
#hot span.specAnounce{
    left:3%;
    top:40%;
    transform:rotate(-25deg);
    background-color:#f14f2d;
    color:#fff;
    font-size:14px;
    letter-spacing:2px
}
#hot span.specAnounce2{
    left:7%;
    top:55%;
    transform:rotate(-25deg);
    background-color:#f14f2d;
    color:#fff;
    font-size:12px
}
.takeme2{
    text-decoration:none;
    color:#333
}
.takeme2:hover{
    text-decoration:underline
}
.popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 2.5rem 4rem;
    width: 50%;
    height: 50%;
    min-height: 430px;
    background-color: #ddd;
    border-radius: 4px;
    text-align: center;
    z-index: 1500;
    display: none;
}
.popupAppear {
    display: block;
    animation: fade 1s;
}
.lead {
    font-size: 2em;
    margin-bottom: 0.5em;
}
.popup input {
    padding: 4px 6px;
    margin-bottom: 10px;
    text-align: center;
}
.popup #xClose{
    position: absolute;
    top: 3px;
    right: 6px;
    margin: 0;
    line-height: 1;
    font-size: 2em;
    cursor: pointer;
}
.popup form{
    margin: 2em auto;
}
.popup textarea {
    width: 70%;
    height: 40px;
}
.popup2 {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 1.5rem 3rem;
    width: 35%;
    height: auto;
    background-color: #ddd;
    border-radius: 4px;
    text-align: center;
    z-index: 1300;
    display: none;
}
.alert.alert-success {
    font-size: 35px;
}
.dissApp {
    display: none;
}
#school a{
    text-decoration: none;
}
.crd {
    display: inline-block;
    position: relative;
    margin: 1rem;
    width: 200px;
    height: 200px;
    line-height: 0;
}
.crd img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius:7px;
}
.crd h4 {
    position: absolute;
    bottom: 10px;
    left: 0;
    line-height: 1.5;
    margin: 0;
    padding: 5px 12px;
    background-color: orange;
    color: #111;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 16px;
    z-index: 2;
}