@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
/** general **/
body {  max-width: 100%; overflow-x: hidden; font-family: 'Open Sans', Helvetica, Arial, sans-serif; color: #333; font-size: 16px; }

.navbar
{
    background-color: #000000;
}



/* Buttons */
.btn { border-color: #373536; text-decoration: none; text-transform: none; text-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden; outline: 0; background: #373536; color: #fff; }
.btn:hover { background: #eaeaea; color: #000000; border-color: #433832; }
.btn-default { background: #373536; color: white; border-color: #373536; font-size: 14px; }
.btn-default i { font-size: 16px; }
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { background: #433832; color: #fff; border-color: #433832; }
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { background: #0079c0; border-color: #000000; }

nav .navbar-nav li a { color: #000000 !important; }
.x-navbar {
background-color: rgba(116,203,209,0.5);
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  padding-left: 10px;
  color: C0C0C0;
}
::-moz-placeholder { /* Firefox 19+ */
  padding-left: 10px;
  color: C0C0C0;
}
:-ms-input-placeholder { /* IE 10+ */
  padding-left: 10px;
  color: C0C0C0;
}
:-moz-placeholder { /* Firefox 18- */
  padding-left: 10px;
  color: C0C0C0;
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    padding-right: 5rem;
    padding-left: 2rem;
  }
}
@media (min-width: 992px) {
  .footer-lg {

    padding-left: 2rem;
  }

}
.carousel-caption {
    width: 100%;
    top: 30%;
    left: 25%;
    bottom: auto;
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #C0C0C0;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

.bg-dark {
    background-color: #7e7f81 !important;
}

.bg-white { background-color: #FFFFFF; opacity: 1.0 !important;
}

.bg-custom { background-color: #000000 !important; opacity: 1.0 !important; }

.nav-link { font-size: 18px; }
.navbar li a:hover { color: #9dc3e6 !important; }

.navbar-nav > li{
  margin-left:10px;
  margin-right:10px;
}

.date-card{
  border:1px solid #ddd;
  background-color: #000000;
  border-radius: 20px;
  width:75px;
  height: 75px;
  padding:0px;
  display:flex;
  align-items:center;
  text-align: center;
}

.date-card .day{
  font-size:20px;
  font-weight: bold;
width: 100%;
margin: 0 auto;
  color:#FFFFFF;
  text-align: center;
}

.date-card .month{
  font-weight: bold;
color:#FFFFFF;
}

.cards{
	
    transition: all 0.2s ease;
    cursor: pointer;
    

  }
    


.card:hover{

box-shadow: 0px 8px 10px gray, 
        -10px 8px 15px gray, 10px 8px 15px gray;
filter: drop-shadow(5px 5px 5px 5px rgba(0,0,0,0.3));

}

.cards-wrapper {
  display: flex;
  justify-content: center;
padding-right: 50px;
padding-left: 50px;
}
.card img {
width: 192px;
margin: auto;
display: block;
  margin-left: auto;
  margin-right: auto;
  height: 192px;
  }
.card {
  margin: 0 0.5em;
  min-height: 475px;
  min-width: 192px;
  max-height: 475px;
  border: none;
  border-radius: 0;
margin-right: 30px;
margin-left: 30px;
margin-bottom: 30px;
margin-top: 10px;
padding-top: 20px;
}

.card-small {
  margin: 0 0.5em;
  min-height: 180px;
  max-height: 180px;
  min-width: 330px;
  max-width: 330px;
background-color: #FFFFFF;
box-shadow: 5px 5px 5px 5px #7a7a7a;
  border: none;
  border-radius: 0;
margin-right: 30px;
margin-left: 30px;
margin-bottom: 30px;
margin-top: 0px;
padding-top: 0px;
a:hover background-color: lightgreen;
}


.card.small a:hover {
 
}

.card-small:hover {
  box-shadow: 5px 5px 5px 5px #4c88bf;
}

.card-body { padding-left: 10px; padding-right: 10px; }

.carousel-control-prev,
.carousel-control-next {
  background-color: #e1e1e1;
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 768px) {
  .card img {
    height: 11em;
  }
}

.center-card-btn {
  margin: 0;
  position: absolute;
  bottom: 0px;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/* About Area */
#aboutArea { padding: 150px 0 0 0; overflow: hidden; width: 100%; border-top: 1px solid #e6e9ee; background: #f6f6f6; }
#aboutArea h1 { margin: 0px 0 20px; color: #007fc4; font-size: 28px; line-height: 30px; font-weight: 700; text-decoration: underline; }
#aboutArea h2 { margin: 0px 0 20px; color: #007fc4; font-size: 22px; line-height: 22px; font-weight: 700; }
#aboutArea p { line-height: 20px; font-size: 18px; text-align: justify; overflow: hidden; }

/* logo Area */
#logoArea { padding: 0px 0; overflow: hidden; width: 100%; border-top: 1px solid #e6e9ee; background: #FFFFFF; }
#logoArea h2 { margin: 0px 0 20px; color: #007fc4; font-size: 24px; line-height: 22px; font-weight: 700; }
#logoArea h3 { margin: 0px 0 20px; color: #007fc4; font-size: 16px; line-height: 22px; font-weight: 700; }
#logoArea h3 smaller { margin: 0px 0 20px; color: #007fc4; font-size: 12px; line-height: 22px; font-weight: 700; }
#logoArea a { display: block; text-align: center; line-height: 20px; color: #373536; font-size: 12px; }
#logoArea a:hover { color: #000; }
#logoArea p { line-height: 20px; font-size: 15px; max-width: 350px; margin: auto; width: 50%; text-align: center; overflow: hidden; }
#logoArea ul { list-style:none; overflow: hidden; }
#logoArea ul.slides li { margin-right: 30px; }
#logoArea .flex-direction-nav { width: 100px; height: 30px; z-index: 99999; position: absolute; right: 0px; bottom: 0px; }
#logoArea .flex-direction-nav li { float:left; width: 24px; height: 24px; line-height: 24px; }
#logoArea .flex-prev { z-index: 9999; width: 24px; height: 24px; margin: 0px; line-height: 24px; display: block; border-radius: 3px; -webkit-border-radius: 3px; position: absolute; left: auto; opacity: 10 !important; right: 45px; top: auto; bottom: 0px; background: #373536; }
#logoArea .flex-prev span { width: 24px; height: 24px; display: block; color: #000; font-size: 13px; font-weight: 400; line-height: 24px; color: #fff; }
#logoArea .flex-next span { width: 24px; height: 24px; display: block; color: #000; font-size: 13px; font-weight: 400; line-height: 24px; color: #fff; }
#logoArea .flex-next { z-index: 9999; width: 24px; height: 24px; margin: 0px; display: block; line-height: 24px; border-radius: 3px; -webkit-border-radius: 3px; position: absolute; right: 15px; bottom: 0px; opacity: 10 !important; top: auto; left: auto; background: #373536; }
#logoArea .flex-next:hover, #logoArea .flex-prev:hover { background: #433832; }
#logoArea #logo { padding-bottom: 40px; position: relative; }




/* advantage Area */
#advantageArea { padding: 20px 0; overflow: hidden; width: 100%; background: #FFFFFF; background-image: url(../images/quilt-pattern.png); background-repeat: repeat; }
#advantageArea container { width: 95%; }
#advantageArea p { line-height: 20px; font-size: 16px; margin: 0px 10px 20px 10px; overflow: hidden; color: #000000; }
#advantageArea .large { line-height: 22px; font-size: 18px; margin: 0px 10px 20px 10px; overflow: hidden; color: #000000; }
#advantageArea h2 { margin: 0px 0 20px; color: #0079c0; font-size: 28px; line-height: 22px; font-weight: bold; }
#advantageArea h5 { margin: 0px 0 10px; color: #0079c0; font-size: 22px; line-height: 22px; font-weight: bold; }
#advantageArea .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { text-align: center; }
#advantageArea .card-text { text-align: center; }

@media only screen and (min-width: 1200px) and (max-width: 1299px) {
	.float-right { float: right; }
	}

/* trending Area */
#trendingArea { padding: 20px 0; overflow: hidden; width: 100%; background: #f2f2f2; }
#trendingArea container { width: 95%; }
#trendingArea a { text-decoration: none; }
#trendingArea p { line-height: 20px; font-size: 14px; margin: 0px 10px 20px 10px; text-align: center; overflow: hidden; color: #000000; }
#trendingArea h2 { padding: 20px 0px 20px 0px; color: #000000; font-size: 28px; line-height: 22px; font-weight: bold; text-align: left; }
#trendingArea h5 { margin: 0px 0 20px; color: #000000; font-size: 18px; line-height: 22px; font-weight: bold; text-align: center; }
#trendingArea .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { text-align: center; }
#trendingArea .card-text { text-align: center; }

.carousel-indicators {
  position: static;
}
.carousel-indicators li {
  width: 500px;
  height: 100%;
  opacity: 0.8;
}

/* Product Area */
#SpecArea { padding: 10px 0 0 0; overflow: hidden; width: 100%; border-top: 1px solid #e6e9ee; background: #FFFFFF; }
#SpecArea h1 { margin: 0px 0 20px; color: #007fc4; font-size: 28px; line-height: 30px; font-weight: 700; text-decoration: underline; }
#SpecArea h2 { margin: 0px 0 20px; color: #007fc4; font-size: 24px; line-height: 22px; font-weight: 700; }
#SpecArea h3 { margin: 0px 0 20px; color: #000000; font-size: 20px; line-height: 22px; font-weight: bold; }
#SpecArea a { display: block; text-align: center; line-height: 20px; color: #373536; font-size: 12px; }
#SpecArea a:hover { color: #000; }
#SpecArea .btn-primary { background: #0079c0; border-color: #000000; color: #FFFFFF; font-size: 16px; }
#SpecArea .btn-primary:hover { background: #d9d9d9; color: #000000; border-color: #000000; font-size: 16px; }


/* Product Area */
#productArea { padding: 150px 0 0 0; overflow: hidden; width: 100%; border-top: 1px solid #e6e9ee; background: #f6f6f6; }
#productArea h1 { margin: 0px 0 20px; color: #007fc4; font-size: 28px; line-height: 30px; font-weight: 700; text-decoration: underline; }
#productArea h2 { margin: 0px 0 20px; color: #007fc4; font-size: 24px; line-height: 22px; font-weight: 700; }
#productArea h3 { margin: 0px 0 20px; color: #000000; font-size: 20px; line-height: 22px; font-weight: bold; }
#productArea a { text-align: center; line-height: 20px; color: #373536; font-size: 12px; }
#productArea a:hover { color: #000; }
#productArea .btn-primary { background: #0079c0; border-color: #000000; color: #FFFFFF; font-size: 16px; }
#productArea .btn-primary:hover { background: #d9d9d9; color: #000000; border-color: #000000; font-size: 16px; }

#productArea p { line-height: 20px; font-size: 15px; margin: auto; overflow: hidden; }
#productArea ul { overflow: hidden; }
#productArea ul.slides li { margin-right: 30px; }
#productArea .flex-direction-nav { width: 100px; height: 30px; z-index: 99999; position: absolute; right: 0px; bottom: 0px; }
#productArea .flex-direction-nav li { float:left; width: 24px; height: 24px; line-height: 24px; }
#productArea .flex-prev { z-index: 9999; width: 24px; height: 24px; margin: 0px; line-height: 24px; display: block; border-radius: 3px; -webkit-border-radius: 3px; position: absolute; left: auto; opacity: 10 !important; right: 45px; top: auto; bottom: 0px; background: #373536; }
#productArea .flex-prev span { width: 24px; height: 24px; display: block; color: #000; font-size: 13px; font-weight: 400; line-height: 24px; color: #fff; }
#productArea .flex-next span { width: 24px; height: 24px; display: block; color: #000; font-size: 13px; font-weight: 400; line-height: 24px; color: #fff; }
#productArea .flex-next { z-index: 9999; width: 24px; height: 24px; margin: 0px; display: block; line-height: 24px; border-radius: 3px; -webkit-border-radius: 3px; position: absolute; right: 15px; bottom: 0px; opacity: 10 !important; top: auto; left: auto; background: #373536; }
#productArea .flex-next:hover, #logoArea .flex-prev:hover { background: #433832; }
#productArea #logo { padding-bottom: 40px; position: relative; }

/* Event Area */
#eventArea { padding: 50px 0 0 0; overflow: hidden; width: 100%; border-top: 1px solid #e6e9ee; background: #f6f6f6; }
#eventArea h1 { margin: 0px 0 20px; color: #007fc4; font-size: 28px; line-height: 30px; font-weight: 700; text-decoration: underline; }
#eventArea h2 { margin: 0px 0 20px; color: #007fc4; font-size: 24px; line-height: 22px; font-weight: 700; }
#eventArea h3 { margin: 0px 0 20px; color: #000000; font-size: 20px; line-height: 22px; font-weight: bold; }
#eventArea a { text-align: center; line-height: 20px; color: #373536; font-size: 12px; }
#eventArea a:hover { color: #000; }
#eventArea .btn-primary { background: #0079c0; border-color: #000000; color: #FFFFFF; font-size: 16px; }
#eventArea .btn-primary:hover { background: #d9d9d9; color: #000000; border-color: #000000; font-size: 16px; }

/* info Area */
#infoArea { padding: 50px 0 0 0; overflow: hidden; width: 100%; border-top: 1px solid #e6e9ee; background: #f6f6f6; }
#infoArea h1 { margin: 0px 0 20px; color: #007fc4; font-size: 28px; line-height: 30px; font-weight: 700; text-decoration: none; text-align: center; }
#infoArea h2 { margin: 0px 0 20px; color: #007fc4; font-size: 22px; line-height: 22px; font-weight: 700; }
#infoArea h3 { margin: 0px 0 20px; color: #000000; font-size: 20px; line-height: 22px; font-weight: bold; }
#infoArea a { text-align: center; line-height: 20px; color: #0070c0; font-weight: bold; font-size: 16px; }
#infoArea a:hover { text-decoration: underline; }
#infoArea .btn-primary { background: #0079c0; border-color: #000000; color: #FFFFFF; font-size: 16px; }
#infoArea .btn-primary:hover { background: #d9d9d9; color: #000000; border-color: #000000; font-size: 16px; }

/* Support Area */
#supportArea { padding: 50px 0 0 0; overflow: hidden; width: 100%; border-top: 1px solid #e6e9ee; background: #f6f6f6; }
#supportArea h1 { margin: 0px 0 20px; color: #007fc4; font-size: 28px; line-height: 30px; font-weight: 700; text-decoration: underline; }
#supportArea h2 { margin: 0px 0 20px; color: #007fc4; font-size: 24px; line-height: 22px; font-weight: 700; }
#supportArea h3 { margin: 0px 0 20px; color: #000000; font-size: 20px; line-height: 22px; font-weight: bold; }
#supportArea a { text-align: center; line-height: 20px; color: #373536; font-size: 12px; }
#supportArea a:hover { color: #000; }
#supportArea .btn-primary { background: #0079c0; border-color: #000000; color: #FFFFFF; font-size: 16px; }
#supportArea .btn-primary:hover { background: #d9d9d9; color: #000000; border-color: #000000; font-size: 16px; }

#supportArea p { line-height: 20px; font-size: 15px; margin: auto; overflow: hidden; }
#supportArea ul { overflow: hidden; }
#supportArea ul.slides li { margin-right: 30px; }
#supportArea .flex-direction-nav { width: 100px; height: 30px; z-index: 99999; position: absolute; right: 0px; bottom: 0px; }
#supportArea .flex-direction-nav li { float:left; width: 24px; height: 24px; line-height: 24px; }
#supportArea .flex-prev { z-index: 9999; width: 24px; height: 24px; margin: 0px; line-height: 24px; display: block; border-radius: 3px; -webkit-border-radius: 3px; position: absolute; left: auto; opacity: 10 !important; right: 45px; top: auto; bottom: 0px; background: #373536; }
#supportArea .flex-prev span { width: 24px; height: 24px; display: block; color: #000; font-size: 13px; font-weight: 400; line-height: 24px; color: #fff; }
#supportArea .flex-next span { width: 24px; height: 24px; display: block; color: #000; font-size: 13px; font-weight: 400; line-height: 24px; color: #fff; }
#supportArea .flex-next { z-index: 9999; width: 24px; height: 24px; margin: 0px; display: block; line-height: 24px; border-radius: 3px; -webkit-border-radius: 3px; position: absolute; right: 15px; bottom: 0px; opacity: 10 !important; top: auto; left: auto; background: #373536; }
#supportArea .flex-next:hover, #logoArea .flex-prev:hover { background: #433832; }
#supportArea #logo { padding-bottom: 40px; position: relative; }

@media (max-width: 1000px) {
#productArea .tabs .tabs-list li{ width: 95%; overflow: hidden; }
}

#productArea .tabs{ width:100%; height:auto; margin:0 auto; overflow: hidden; }

/* tab list item */
#productArea .tabs .tabs-list{ list-style:none; margin:0px; padding:0px; overflow: hidden; }
#productArea .tabs .tabs-list li{ min-width:300px; max-width: 100%; float:left; margin:0px; margin-right:2px; padding:10px 5px; text-align: center; background-color: #d9d9d9; border-radius:3px; overflow: hidden; }
#productArea .tabs .tabs-list li:hover{ cursor:pointer; }
#productArea .tabs .tabs-list li a{ text-decoration: none; color: #000000; font-weight: bold; font-size: 16px; overflow: hidden; }

/* Tab content section */
#productArea .tabs .tab{ display:none; width:96%; min-height:250px; height:auto; border-radius:3px; padding:20px 15px; background-color: #FFFFFF; color: darkslategray; clear:both; overflow: hidden; }
#productArea .tabs .tab h3{ border-bottom:3px solid cornflowerblue; letter-spacing:1px; font-weight:normal; padding:5px; }
#productArea .tabs .tab p{ line-height:20px; letter-spacing: 1px }

/* When active state */
#productArea .active{ display:block !important; }
#productArea .tabs .tabs-list li.active{ background-color: #0079c0 !important; color: #black !important; }
#productArea .active a{ color: #FFFFFF !important; }

 .strike {
        display: block;
        text-align: center;
        overflow: hidden;
        white-space: nowrap; 
    }

    .strike > span {
        position: relative;
        display: inline-block;
margin: 10px 0 10px 0;
    }
	
    .strike > span:before,
    .strike > span:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 9999px;
	        height: 1px;
        background: #000000;
    }

    .strike > span:before {
        right: 100%;
        margin-right: 5px;
    }

    .strike > span:after {
        left: 100%;
        margin-left: 5px;
    }

/* media query */
@media screen and (max-width:360px){
    .tabs{
        margin:0;
        width:96%;
    }
    .tabs .tabs-list li{
        width:80px;
    }
}



/* footer Area */

#footerNew { padding: 0px; overflow: hidden; min-width: 100vw; background: #464647; min-height: 30vh; min-width: 100%; font-size: 18px; }

#footerNew .left { color: #FFFFFF; background: #9dc3e6; padding-top: 20px; padding-left: 40px; overflow: hidden; background-image: url(../images/footer-bg-new.png); background-size: cover; background-repeat:no-repeat; width: 100%; min-height: 30vh; }

@media (min-width: 768px) {
  .row.equal {
    padding-top: 10px;
	display: flex;
    flex-wrap: wrap;
  }
}

#footerNew .left p { color: #FFFFFF; }
#footerNew .left a { color: #FFFFFF; }
#footerNew .left img { padding-left: 7px; }
#footerNew .left a:hover { }
#footerNew .left h5 { color: #0c2a46; font-size: 20px; font-weight: bold; padding-bottom: 10px; }
#footerNew .middle { color: #FFFFFF; padding-top: 20px; padding-left: 20px; overflow: hidden; background: #1a77a3; min-height: 280px;  }
#footerNew .middle li a { color: #FFFFFF; }
#footerNew .right { padding-top: 20px;  padding-left: 0px; overflow: hidden; background: #bdd7ee; min-height: 280px; text-align: center; }
@media (min-width: 1780px) {
#footerNew .right {
    padding-right: 147px;
  }
}

#footerNew .right p { color: #0c2a46; font-size: 18px; -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: 100%; }
#footerNew .right a { color: #0c2a46; }
#footerNew .right a:hover { }
#footerNew .right li { padding: 0 0 10px 0px; width: auto; border: none; font-size: 16px; }
#footerNew .right h5 { color: #0c2a46; font-size: 20px; font-weight: bold; padding-bottom: 10px; }
 
#footerNew .fa-stack        .fa { color: #FFFFFF; }
#footerNew .fa-stack        .fa.fa-circle-thin { color: black; }
#footerNew .fa-stack        .fa.fa-circle { opacity:1.0; color: #0c2a46; }

#footerNew .fa-stack:hover  .fa { color: #000000; }
#footerNew .fa-stack:hover  .fa.fa-user-plus { color: white; }
#footerNew .fa-stack:hover  .fa.fa-circle-thin { color: green; }
#footerNew .fa-stack:hover  .fa.fa-circle { opacity:1.0; color: #C0C0C0; }
#footerNew .left li { padding: 0 0 10px 0px; width: auto; border: none; font-size: 16px; }
#footerNew .left a { color: #FFFFFF; }
#footerNew .left h5 { color: #FFFFFF; }

/* footer Area */
#footerArea { padding: 0; overflow: hidden; width: 100%; background: #FFFFFF; }
#footerArea .footer-left { padding: 0; overflow: hidden; width: 70%; background: blue; }
#footerArea .footer-right { padding: 0; overflow: hidden; width: 30%; background: green; }


#footerArea .footer_top { padding: 30px 0; border-bottom: 1px solid #464647; width: 100%; background: #353739;  }
#footerArea h4 { color: #0c78be; text-transform: uppercase; font-size: 16px; font-weight: 400; }
#footerArea h5 { color: #fff; text-transform: uppercase; font-size: 15px; margin: 0px; font-weight: 400; }
#footerArea a { color: #0c2a46;  font-size: 13px; font-weight: bold; }
#footerArea p { padding: 10px 0; margin: 0px; color: #0c2a46; float: left; font-size: 14px; line-height: 24px; font-weight: bold; }
#footerArea p a { display: inline; font-size: 14px; }
#footerArea a:hover { color: #C0C0C0; }
#footerArea ul { padding: 0px; list-style: none; }
#footerArea li { width: 100%; float: left; line-height: 40px;  }
#footerArea .photo ul { list-style: none; overflow: hidden; }
#footerArea .photo li { width: 60px; height: 60px; margin: 10px 10px 0 0; float:left; border: none; }
#footerArea .photo li a { display: block; color: #fff; border: 3px solid #212730; }
#footerArea .photo li a img { width: 100%; height: auto; }
#footerArea .photo li a:hover { border-color: #373536; }
#footerArea .footer_bottom { padding: 10px 0; }
#footerArea .footer_bottom ul { margin: 0px; float:right; }
#footerArea .footer_bottom p { margin: 0px; float:left; display: block; }
#footerArea .footer_bottom li { padding: 0 0 0 10px; width: auto; border: none; }

.cover {
  background: linear-gradient(to right, rgb(60, 13, 20) 3px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.25) 7px, rgba(255, 255, 255, 0.25) 10px, transparent 12px, transparent 16px, rgba(255, 255, 255, 0.25) 17px, transparent 22px), url(../images/book-shell.png);

  margin: auto;
  border-radius: 5px;
  width: 389px;
  height: 500px;
}

.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  perspective: 1000px;
}
.button-container .button-flipper {
  transition: 0.8s cubic-bezier(0.775, 0.07, 0.575, 0.995);
  transform-style: preserve-3d;
  position: absolute;
}
.button-container .button-flipper:hover {
  transform: rotateX(-180deg);
}
.button-container .front-button {
  cursor: pointer;
  width: 190px;
  height: 29px;
  background-color: #0079c0;
  border-color:#000000;
  border-radius: 4px;
  font-size: 14px;
  color: #FFFFFF;
  backface-visibility: hidden;
  z-index: 2;
  transform: rotateX(0deg);
  position: absolute;
  
}
.button-container .back-button {
  cursor: pointer;
  width: 190px;
  height: 29px;
  background-color: #d9d9d9;
  border-color:#000000;
  border-radius: 4px;
  font-size: 14px;
  color: #000000;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  position: relative;
  
}


.button-container-small {
  right: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  perspective: 1000px;
}
.button-container-small .button-flipper-small {
  transition: 0.8s cubic-bezier(0.775, 0.07, 0.575, 0.995);
  transform-style: preserve-3d;
  position: absolute;
  }
.button-container-small .button-flipper-small:hover {
  transform: rotateX(-180deg);
}
.button-container-small .front-button-small {
  cursor: pointer;
  width: 80px;
  height: 29px;
  background-color: #0079c0;
  border-color:#000000;
  border-radius: 4px;
  font-size: 14px;
  color: #FFFFFF;
  backface-visibility: hidden;
  z-index: 2;
  transform: rotateX(0deg);
  position: absolute;
  
}
.button-container-small .back-button-small {
  cursor: pointer;
  width: 80px;
  height: 29px;
  background-color: #d9d9d9;
  border-color:#000000;
  border-radius: 4px;
  font-size: 14px;
  color: #000000;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  position: relative;
  
}


.button-container-arrow-left {
  right: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  perspective: 1000px;
}
.button-container-arrow-left .button-flipper-arrow-left {
  transition: 0.8s cubic-bezier(0.775, 0.07, 0.575, 0.995);
  transform-style: preserve-3d;
  position: absolute;
  }
.button-container-arrow-left .button-flipper-arrow-left:hover {
  transform: rotateX(-180deg);
}
.button-container-arrow-left .front-button-arrow-left {
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: #1a2223;
  border-color: #1a2223;
  border-width: 0px;
  font-size: 14px;
  color: #54acd2;
  backface-visibility: hidden;
  z-index: 2;
  transform: rotateX(0deg);
  position: absolute;
  
}
.button-container-arrow-left .back-button-arrow-left {
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: #54acd2;
  border-color: #54acd2;
  border-width: 0px;
  font-size: 14px;
  color: #1a2223;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  position: relative;
  
}

.button-container-arrow-right {
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  perspective: 1000px;
}
.button-container-arrow-right .button-flipper-arrow-right {
  transition: 0.8s cubic-bezier(0.775, 0.07, 0.575, 0.995);
  transform-style: preserve-3d;
  position: absolute;
  }
.button-container-arrow-right .button-flipper-arrow-right:hover {
  transform: rotateX(-180deg);
}
.button-container-arrow-right .front-button-arrow-right {
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: #1a2223;
  border-color: #1a2223;
  border-width: 0px;
  font-size: 14px;
  color: #54acd2;
  backface-visibility: hidden;
  z-index: 2;
  transform: rotateX(0deg);
  position: absolute;
  
}
.button-container-arrow-right .back-button-arrow-right {
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: #54acd2;
  border-color: #54acd2;
  border-width: 0px;
  font-size: 14px;
  color: #1a2223;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  position: relative;
  
}


.button-container-arrow-left-small {
  right: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  perspective: 1000px;
}
.button-container-arrow-left-small .button-flipper-arrow-left-small {
  transition: 0.8s cubic-bezier(0.775, 0.07, 0.575, 0.995);
  transform-style: preserve-3d;
  position: absolute;
  }
.button-container-arrow-left-small .button-flipper-arrow-left-small:hover {
  transform: rotateX(-180deg);
}
.button-container-arrow-left-small .front-button-arrow-left-small {
  cursor: pointer;
  width: 30px;
  height: 30px;
  background-color: #1a2223;
  border-color: #1a2223;
  border-width: 0px;
  font-size: 14px;
  color: #54acd2;
  backface-visibility: hidden;
  z-index: 2;
  transform: rotateX(0deg);
  position: absolute;
  
}
.button-container-arrow-left-small .back-button-arrow-left-small {
  cursor: pointer;
  width: 30px;
  height: 30px;
  background-color: #54acd2;
  border-color: #54acd2;
  border-width: 0px;
  font-size: 14px;
  color: #1a2223;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  position: relative;
  
}

.button-container-submit {
  right: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 38px;
  perspective: 1000px;
}
.button-container-submit .button-flipper-submit {
  transition: 0.8s cubic-bezier(0.775, 0.07, 0.575, 0.995);
  transform-style: preserve-3d;
  position: absolute;
  }
.button-container-submit .button-flipper-submit:hover {
  transform: rotateX(-180deg);
}
.button-container-submit .front-button-submit {
  cursor: pointer;

  width: 80px;
  height: 38px;
  background-color: #0079c0;
  border-color:#000000;
  border-radius: 4px;
  font-size: 14px;
  color: #FFFFFF;
  backface-visibility: hidden;
  z-index: 2;
  transform: rotateX(0deg);
  position: absolute;
  
}
.button-container-submit .back-button-submit {
  cursor: pointer;

  width: 80px;
  height: 38px;
  background-color: #d9d9d9;
  border-color:#000000;
  border-radius: 4px;
  font-size: 14px;
  color: #000000;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  position: relative;
  
}

.button-container-circle {
  right: 0px;
  display: flex;
  align-items: center;
  justify-content: left;
  padding-left: 50px;
    width: 100%;
background-image: url("images/titan-series-circle.png");
  perspective: 1000px;
}
.button-container-circle .button-flipper-circle {
  transition: 0.8s cubic-bezier(0.775, 0.07, 0.575, 0.995);
  transform-style: preserve-3d;
  position: absolute;
  }
.button-container-circle .button-flipper-circle:hover {
  transform: rotateX(-180deg);
}
.button-container-circle .front-button-circle {
  cursor: pointer;
  width: 150px;
  height: 150px;
  background-color: #FFFFFF;
  background-image: url(../images/titan-series-circle.png);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  border: 1px solid #0070c0;
  font-size: 14px;
  color: #FFFFFF;
  backface-visibility: hidden;
  z-index: 2;
  transform: rotateX(0deg);
  position: absolute;
  
}
.button-container-circle .back-button-circle {
  cursor: pointer;
  width: 150px;
  height: 150px;
  background-color: #000000;
  background-image: url(../images/titan-series-circle-over.png);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  border: 1px solid #0070c0;
  font-size: 14px;
  color: #000000;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  position: relative;
  
}

/* BG Area */
#bg_area {
 height: 100vh;
    background-image: url(../images/footer-bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

@media only screen and (min-width: 1300px) and (max-width: 1399px) {
	.nav-link { font-size: 17px; }
	}
@media only screen and (min-width: 1200px) and (max-width: 1299px) {
	.nav-link { font-size: 16px; }
	}
@media only screen and (min-width: 1100px) and (max-width: 1199px) {
	.nav-link { font-size: 15px; }
	}
@media only screen and (min-width: 1000px) and (max-width: 1099px) {
	.nav-link { font-size: 14px; }
	}
@media only screen and (max-width: 768px) {
	.caption-156 { display: none; }
	.caption-189 { display: none; }
	.caption-246 { display: none; }
	.caption-300 { display: none; }
	}
@media only screen and (min-width: 769px) and (max-width: 999px) {
	.caption-110 { display: none; }
	.caption-189 { display: none; }
	.caption-246 { display: none; }
	.caption-300 { display: none; }
	}
@media only screen and (min-width: 1000px) and (max-width: 1199px) {
	.caption-110 { display: none; }
	.caption-156 { display: none; }
	.caption-246 { display: none; }
	.caption-300 { display: none; }
	}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.caption-110 { display: none; }
	.caption-156 { display: none; }
	.caption-189 { display: none; }
	.caption-300 { display: none; }
	}
@media only screen and (min-width: 1400px) {
	.caption-110 { display: none; }
	.caption-156 { display: none; }
	.caption-189 { display: none; }
	.caption-246 { display: none; }
	 }

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 1400px) {

.navbar-nav > li { margin-left:10px; margin-right:10px; }
	}

/* All Desktop Sizes (devices and browser) */
@media only screen and (min-width: 1150px) {

.hide-large { display: none !important; }

	
	}

/* All Desktop Sizes (devices and browser) */
@media only screen and (min-width: 1200px) {
.circle-desktop > div { margin-top: 120px; }
	
	}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 1200px) {
.circle-mobile > div { margin-bottom: 100px; }
	
	}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 1150px) {

.hide-small { display: none; }
	
	}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

.hide-mobile { display: none; }
	
	}