/*
	 Auto Generating Photo Gallery
	 by Chris Coyier
	 http://css-tricks.com
*/

  body {
  	background-color: #eaeaea !important;
  }
        .ticket {
         padding: 5px;
         border-color: grey;
         border-style: solid;
         border-width: 1px;

        }
     
.image-container {
    background: #fff;
    box-shadow: 0px 0px 3px 0px rgba(0,0,0, 0.3);
    padding: 40px;
}
img.thumb{
	width: 100%;
}

.main-menu {
    text-align: right;
}

.main-menu nav ul {}

.main-menu nav ul li {
    display: inline-block;
}

.main-menu nav ul li a {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0;
    padding: 27px 36px;
    position: relative;
    padding-left: 0;
}

.main-menu nav ul li a:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 22px;
    height: 2px;
    width: 0%;
    background-color: #fff;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}


/*dropdown menu area start*/

.mobile_menu {}
.slicknav_menu .slicknav_menutxt {
    display: none;
}

.slicknav_menu {
    background: transparent;
    margin-top: 21px;
}

.slicknav_menu .slicknav_icon-bar {
    height: 2px;
    width: 19px;
    margin: 3px 0px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.slicknav_btn {
    background-color: transparent;
    position: relative;
    margin-top: -51px;
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(2) {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(1) {
    -webkit-transform: rotate(45deg) translate(1px, 7px);
    transform: rotate(45deg) translate(1px, 7px);
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(3) {
    -webkit-transform: rotate(-45deg) translateY(-6px);
    transform: rotate(-45deg) translateY(-6px);
}

.slicknav_menu {
    margin-top: 0;
}

.slicknav_nav {
    background: #13c5de;
    margin: 10px;
    padding: 6px 0px;
}

.slicknav_nav a:hover {
    background: #fefefe none repeat scroll 0 0;
    border-radius: 0;
}

.slicknav_nav a {
    font-size: 14px;
    letter-spacing: 0.01em;
}


.header-area {
 
    width: 100%;
   padding: 10px;
   margin-bottom: 60px;
  background-image: linear-gradient(to bottom, rgba(50, 50, 50, 0.7), rgba(50, 50, 50, 0));
}
.subfooter {
    background-color: #333;
    font-size: 10px;
    padding-top: 20px;
    padding-bottom: 10px;
    color: white;
    width: 100%;
}

.cartwheel {
	margin-bottom: 15px;
}

@media only screen and (max-width: 767px) {
	img.thumb {
	margin-bottom: 15px !important;
}
.cartwheel {
	margin-bottom: 0px;
}


}

.menu-area {
    display: flex;
    align-items: center;
}

img.header-logo {
    width: 100%;
}

#display {
    /*left: 50%;*/
    /*top: 50%;*/
    /*width: 400px;*/
    /*margin-top: -125px;*/
    /*margin-left: -115px; */
    /*position: absolute;*/
    border-style:solid;
    border-color: red;
    border-width:100%;
    
}

.upload-box {
    border-style: solid;
    border-color: blue;
    border-radius: 1px;
    
}


         .navbar-default {
         background-image: linear-gradient(to bottom, rgba(50, 50, 50, 0.7), rgba(50, 50, 50, 0));
         background-color: transparent !important;
         border-color: transparent !important;
         }
         .navbar {
             border: none !important;
         }
         .navbar-toggle {
             border-color:#2e6da4 !important;
             background-color: #2e6da4 !important;
         }
         .icon-bar {
             background-color: white !important;
         }
         .navbar-collapse {
             border-color: transparent !important;
         }
         .navbar-nav{
             float: right;
             margin-right: 5%;
         }
         .navbar-brand img {
         max-width: 140px !important;
         }
         .navbar-default .navbar-nav>li>a {
         color: #fff;
         }
         body {
         font-family: "Open Sans",sans-serif !important;
         font-size: 14px;
         line-height: 1.42857;
         color: #333;
         background-color: #eee;
         }
         h2, .h2 {
         font-size: 30px;
         }
         h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
         font-family: "Din-Regular",sans-serif !important;
         font-weight: bold !important;
         line-height: 1.1;
         }
         h1, .h1, h2, .h2, h3, .h3 {
         margin-top: 20px;
         margin-bottom: 10px;
         }
         h2 {
         display: block;
         font-size: 1.5em;
         margin-block-start: 0.83em;
         margin-block-end: 0.83em;
         margin-inline-start: 0px;
         margin-inline-end: 0px;
         font-weight: bold;
         }
         .cpc-product {
	cursor: pointer;
	margin-bottom: 15px
}

.navbar-nav>li>a:hover {
	background-color: #1A4782 !important;
	color: white !important;
}
.navbar-nav>li>a:active{
	background-color: #1A4782 !important;
	color: white !important;
}
.navbar-nav>li>a:visited{
	background-color: #1A4782 !important;
	color: white !important;
}

@media (min-width: 768px){
.navbar-nav {
    float: right !important;
    margin-right: 20%;
}
}

input#comm_submit {
    margin-top: 15px;
    float: right;
    width: 100px;
    margin-bottom: 40px;
}

@media only screen and (max-width: 768px) {
    .media-object {
    width: 40px;
}
.media-heading {
font-size: 14px;
}
.media-list { 
    font-size: 11px;
}
legend {
    font-size: 14px;
}

.indicator {
 
  transform: translate(-50%, -50%) scale(2);
    display: block;
    margin-left: 20px;
    margin-top: 27%;
    position: unset !important;
}
}
/* The message box is shown when the user clicks on the password field */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 1px;
  margin-top: 10px;
}

#message p {
  padding: 0px 35px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -35px;
  content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -35px;
  content: "✖";
}

.indicator {
 
  transform: translate(-50%, -50%) scale(2);
  position: absolute;
    top: 50%;
  left: 5%;
}
.indicator svg polyline {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.indicator svg polyline#back {
  stroke: rgba(255,0,0,0.3);
}
.indicator svg polyline#front {
  stroke: #8B0000;
  stroke-dasharray: 12, 36;
  stroke-dashoffset: 48;
  animation: dash 1s linear infinite;
}
.cta {
  position: fixed;
  bottom: 20px;
  right: 30px;
  color: #222;
  font-weight: bold;
}
@-moz-keyframes dash {
  62.5% {
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes dash {
  62.5% {
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-o-keyframes dash {
  62.5% {
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  62.5% {
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
  }
}