/* Minification failed. Returning unminified contents.
(314,23): run-time error CSS1038: Expected hex color, found '#transparent'
(477,1): run-time error CSS1035: Expected colon, found 'margin'
(478,1): run-time error CSS1035: Expected colon, found 'position'
 */
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  content: " ";
  display: block;
  background: white;
  position: absolute;
  z-index: 30;
  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
  width: 3px;
  height: 9999px;
  left: 50%;
  margin-left: -1.5px; }

.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  width: 9999px;
  height: 3px;
  top: 50%;
  margin-top: -1.5px; }

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%; }

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s; }

.twentytwenty-before-label, .twentytwenty-after-label {
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  transition-property: opacity; }

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
  color: white;
  font-size: 13px;
  letter-spacing: 0.1em; }

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  line-height: 38px;
  padding: 0 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px; }

.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
  top: 10%;
  margin-top: -19px; }

.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
  left: 50%;
  margin-left: -45px;
  text-align: center;
  width: 90px; }

.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute; }

.twentytwenty-left-arrow, .twentytwenty-right-arrow {
  top: 50%;
  margin-top: -6px; }

.twentytwenty-up-arrow, .twentytwenty-down-arrow {
  left: 50%;
  margin-left: -6px; }

.twentytwenty-container {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none; }
  .twentytwenty-container img {
    max-width: 100%;
    position: absolute;
    top: 0;
    display: block; width: 100%;
    height: 100%;}
  .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
    background: rgba(0, 0, 0, 0); }
    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
    .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
      opacity: 0; }
  .twentytwenty-container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box; }

/*.twentytwenty-before-label {
  opacity: 0; }
  .twentytwenty-before-label:before {
    content: "Before"; }

.twentytwenty-after-label {
  opacity: 0; }
  .twentytwenty-after-label:before {
    content: "After"; }*/

.twentytwenty-horizontal .twentytwenty-before-label:before {
  left: 10px; }

.twentytwenty-horizontal .twentytwenty-after-label:before {
  right: 10px; }

.twentytwenty-vertical .twentytwenty-before-label:before {
  top: 10px; }

.twentytwenty-vertical .twentytwenty-after-label:before {
  bottom: 10px; }

.twentytwenty-overlay {
  -webkit-transition-property: background;
  -moz-transition-property: background;
  transition-property: background;
  background: rgba(0, 0, 0, 0);
  z-index: 25; }
  .twentytwenty-overlay:hover {
   /* background: rgba(0, 0, 0, 0.5); */ }
    .twentytwenty-overlay:hover .twentytwenty-after-label {
      opacity: 1; }
    .twentytwenty-overlay:hover .twentytwenty-before-label {
      opacity: 1; }

.twentytwenty-before {
  z-index: 20; }

.twentytwenty-after {
  z-index: 10; }

.twentytwenty-handle {
  height: 18px;
  width: 111px;
  position: absolute;
  left: 50%;
  top: 90%;
  margin-left: -59px;
 margin-top: -22px; 
  border: 2px solid white;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px; 
  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  z-index: 40;
  cursor: pointer; }

.twentytwenty-horizontal .twentytwenty-handle:before {
  bottom: 50%;
 /* margin-bottom: 22px;*/
  -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:after {
  top: 50%;
  /*margin-top: 22px;*/
  -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-vertical .twentytwenty-handle:before {
  left: 50%;
  margin-left: 22px;
  -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:after {
  right: 50%;
  margin-right: 22px;
  -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-left-arrow {
 /* border-right: 6px solid white; */
 
  left: 50%;
  margin-left: -31px;
  color:white;
  font-size: 10px !important;
  margin-left: -52px;
    margin-top: -17px;
    font-weight: bold;
}

.twentytwenty-right-arrow {
 /*border-left: 6px solid white; */
 /* border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);*/
  right: 50%;
  margin-right: -31px;
  color:white;
  font-size: 10px !important;
  margin-right: -17px;
    margin-top: -17px;
    font-weight: bold;
}

.twentytwenty-up-arrow {
  border-bottom: 6px solid white;
  top: 50%;
  margin-top: -17px; }

.twentytwenty-down-arrow {
  border-top: 6px solid white;
  bottom: 50%;
  margin-bottom: -17px; }

.twentytwenty-before-text-class {
   border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
   transform: rotate(135deg);
    -webkit-transform: rotate(135deg); 
}
.twentytwenty-after-text-class {
     border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); 
}
.twentytwenty-container-before-icon  {
    max-width: 100%;
    position: absolute;
    /* top: 0; */
    /* display: block; */
    /* width: 100%; */
    height: 100%;
}

.twentytwenty-container-before-icon-img  {
    margin-left: -17px;
    width: 17px !important;
    height: 24px !important;
    margin-top: -3px;
}
.twentytwenty-container-after-icon-img  {
    margin-left: 111px;
    width: 17px !important; 
    height: 24px !important;
    margin-top: -3px;
}
/** Stage container **/

.connected-carousels .stage {
    width: 100%;
    margin: 0px;
    position: relative;
}
 

/** Navigation container **/

.connected-carousels .navigation {
    width: 95%;
    margin: 10px auto;
    position: relative;
}

/** Shared carousel styles **/

.connected-carousels .carousel {
    overflow: hidden;
    position: relative;
}

.connected-carousels .carousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0px;
    padding: 0;
}

.connected-carousels .carousel li {
    float: left;
    display: inline-block;
	clear: none;
 }

/** Stage carousel specific styles **/

.connected-carousels .carousel-stage {
    height: 432px;   
}

/** Navigation carousel specific styles **/

.connected-carousels .carousel-navigation {
    height: 85px;
    width: 100%;
    background: #e4dfdc;
    border: 0px solid #transparent;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
}

.connected-carousels .carousel-navigation ul {
 margin: 10px 0px;
    padding: 0 10px;
}
.connected-carousels .carousel-navigation li {
    cursor: pointer;
	width: 100px;
    height: 67px;
	margin: 0 0 0 10px;
}

.connected-carousels .carousel-navigation li img {
    display: block;
    border: 3px solid darkgrey;
	width: 100px;
    height: 67px;
}

.connected-carousels .carousel-navigation li.active img {
    border-color: #ccc;
}

/** Stage carousel controls **/

.connected-carousels .prev-stage,
.connected-carousels .next-stage {
    display: block;
    position: absolute;
    top: 35%;
    width: 30px;
	height:30px;
     color: #fff;
	 margin: 0 1px;
}

.connected-carousels .prev-stage {
    left: 0px;
}

.connected-carousels .next-stage {
    right: 0px;
}

.connected-carousels .prev-stage.inactive,
.connected-carousels .next-stage.inactive {
    opacity: 0.3;
}

.connected-carousels .prev-stage span,
.connected-carousels .next-stage span {
     position: absolute;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #E8E8E8;
    color: #443F3F;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Roboto-regular, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

 

.connected-carousels .prev-stage:hover span,
.connected-carousels .next-stage:hover span {
    display: block;
}

/** Navigation carousel controls **/

.connected-carousels .prev-navigation,
.connected-carousels .next-navigation {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 16px/29px Roboto-regular, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

.connected-carousels .prev-navigation {
    left: -15px;
    top: 27px;
    text-indent: 6px;
}

.connected-carousels .next-navigation {
    right: -15px;
    top: 27px;
    text-indent: 20px;
}

.connected-carousels .prev-navigation.inactive,
.connected-carousels .next-navigation.inactive {
    opacity: .5;
    cursor: default;
}
.pagination {
padding-left: 30px;
 margin-bottom: 17px;
 overflow: hidden;
  
}
.pagination a {
    color: black;
    float: left;
    padding:5px 10px 2px 8px;
    text-decoration: none;
	  display: inline-block;
      font-weight: normal;
      list-style: none;

}
a.stepsClick.current {
    color: #fff!important;
    background:#66332B!important;
}

.innerContentWrapper li {
    clear: inherit;
}

.innerContentWrapper li  a{
font-weight:normal;
font-size:14px;
}
li.page-item.active a{
color: #fff!important;
    background:#66332B!important;
}

ul#pagination-demo {
    float: right;
    margin-right: 25px;
}
.displayNone {display: none;}
.noBorder {border:0 !important;}
#galleryContainer h3 { margin: 5px 0; color: #633; font-size: 25px;}
 #galleryContainer {max-width:1160px; margin:0px auto;position:relative}
 
#galleryContainer{
max-width:�1160px !important;�
margin:�0px auto;�
position:�relative; 
}
#galleryContainer a {border: 1px solid #ccc; cursor: pointer;color: #000;font-size: 16px; font-family: LatoBold;}
/*#galleryContainer .g_row {width:100%; background-color: #e4dfdc; margin: 10px 0px;} */
#carouselBox {background-color: #e4dfdc;} 
#galleryContainer #carouselBox { width:100%; display:inline-block; vertical-align: top; outline:1px solid #bbb1a3;}
.garageDoorLink{cursor: pointer !important;font-size: 16px !important; text-decoration: none !important;border: none !important;     font-family: 'HelveticaNeueW02-55Roma',arial,sans-serif !important; color:#3a3a3b !important}
#galleryContaine a.stepsClick.current {
color:#66332B!important;
}
 ul#pagination-demo li {
float: left;
list-style: none;
text-decoration: none;

 }
/* Carouse; styling */
/*#galleryContainer ul#mainCarouselView li img{ float: left;}*/
#galleryContainer .InfoBox { float: left; width: 220px; padding: 0 10px; background-color: #e4dfdc; opacity: 0.9; color: #633; height: 432px; overflow: hidden;}
#galleryContainer .InfoBox h3 { margin: 5px 0;  color: #633; font-size: 25px;}
#galleryContainer .InfoBox h4 { float: none; color: #633; margin-bottom: 20px;}


#galleryContainer .tt {display: block; min-height: 432px;} 
#galleryContainer .twentytwenty-wrapper {width:740px; float: left;}
#galleryContainer .comments {width:175px; min-height:auto; color: #000;} /*min-height:200px;*/ /*updated height by shankar*/
/*#galleryContainer .InfoBox {
        width: 28% !important;
}
#galleryContainer .comments�{
�width:�auto !important;
} 
 
#galleryContainer .twentytwenty-wrapper {
    width: 75%;
    margin-left: 36px;
}*/ 
.image-badge-header{
   z-index: 1000;
    position: absolute;
    color: white;
    /* left: 625px; */
    /* top: 338px; */
    border-top: 1px solid #fff8e6;
    /* width: 98px; */
    /* font-size: 14px; */
    margin-top: 5px;
    margin-left: 8px;
}
.image-badge{
 
      z-index: 1000;
   left: 620px;
    top: 334px;
    position: absolute;
    color: white;
    width: 112px;
    height: 96px;
    /*border: 1px solid #fff8e6;*/
    /*ze: 18px;*/
    text-align: center;
    padding-bottom: 1px;
    padding-top: -14px;
    padding-left: -8px;
    line-height: 22px;
    background-color: rgba(0,0,0,0.2)
}
.image-badge-topcontent{
 
    font-size: 26px;
    padding: 8px;
    
}
.image-badge-bottomcontent{
    font-weight: lighter !important;
        font-size: 21px;
}
.image-badge-container{
    border: 1px solid #fff8e6;
    margin-top: 32px;
    width: 94px;
    padding: 0px;
    height: 51px;
    padding-left: 1px;
    margin-left: 9px;
}
@media screen and (max-width:800px) {
	#galleryContainer .connected-carousels .carousel-stage li {float: left;  display: block; clear: none;  }
	#galleryContainer .twentytwenty-wrapper { float: none;  width: 90%;  margin: 0 auto;}
	#galleryContainer .InfoBox {  float: none; width: 100%; display:block; height: 232px;}
	#galleryContainer .comments { min-width: 100%; width:175px; min-height:0;} 
	.connected-carousels .navigation { width: 90%; margin:10px auto; } 
	.connected-carousels .carousel-stage { height: auto; }
}
 @media screen and (min-width:768px) and (max-width:1024px){
	#galleryContainer .tt {min-height: 432px;} 
	.connected-carousels .prev-stage, .connected-carousels .next-stage {top: 45%;}
}
@media screen and (max-width:768px){
	.connected-carousels .prev-stage, .connected-carousels .next-stage {top: 35%;}
}
 @media screen and (min-width:320px) and (max-width:1024px){

.pagination {
    padding-left: 15px;
    margin-bottom: 17px;
    overflow: hidden;
    text-align: center;
    float: right;
}

#galleryContainer a {
	font-size: 14px;
 }
 .pagination a {
 	padding:5px 8px 2px 8px; 
 }
}

@media screen and (min-width:600px) and (max-width:767px){
	#galleryContainer .tt {min-height: 340px;} 
	.connected-carousels .prev-stage, .connected-carousels .next-stage {top: 28%;}
}

@media screen and (min-width:480px) and (max-width:599px){
	#galleryContainer .tt {min-height: 300px;} 
	.connected-carousels .prev-stage, .connected-carousels .next-stage {top: 25%;}
}

@media screen and (min-width:320px) and (max-width:479px){
	#galleryContainer .tt {min-height: 203px;} 
 	#galleryContainer .twentytwenty-wrapper {width: 80%;} 
	.connected-carousels .prev-stage, .connected-carousels .next-stage {top: 20%;}
}


/*Dinesh css for contest form Start*/
.home_gallery_contest{
	margin: 0px 0 10px 0;
    overflow: hidden;
	width:100%;
}
.home_gallery_text{
	float: left;
	    width: 64%;
}
.home_gallery_contest h2{
	font-size: 36px;
	margin-bottom:0;
}
.home_gallery_contest h2 sup{
	font-size: 17px;
    line-height: 29px;
    vertical-align: top;
}
.home_gallery_contest p{
	    font-size: 22px;
    color: #656667;
	font-family: LatoBold;
	margin:0;
}
.home_gallery_contest span{
	color: #3a3a3b;
    font-size: 15px;
    line-height: 19px;
    margin-top: 5px;
    display: block;
}
.home_gallery_buttons{
	float: left;
    width: 36%;
    overflow: hidden;
    padding: 0 0 0 35px;
}
#galleryContainer .home_gallery_contest .home_gallery_buttons .enterBox{
    color: #5d2b20 !important;
    border: 1px solid #633;
    background: #fff url('/Sitefinity/WebsiteTemplates/Clopay/App_Themes/Clopay/Images/sprite.png') no-repeat 90px -145px;
    padding: 8px 32px 8px 10px;
    text-decoration: none;
    margin: 68px 0 0 0;
    display: inline-block;
    font-size: 15px;
    font-family: LatoBold;
}
@media screen and (max-width:435px){
	.home_gallery_text, .home_gallery_buttons{
	    width: 100%;
		padding: 0;
	}
	.home_gallery_contest {
    padding: 0 10px;
	}
	#galleryContainer .home_gallery_contest .home_gallery_buttons .enterBox{
		margin: 20px 0 6px 0;
    width: 100%;
	}
	.home_gallery_contest h2 {
    font-size: 24px;
	}
	.home_gallery_contest p {
    font-size: 20px;
	}
}

@media screen and (min-width:0px) and (max-width:320px){
	#galleryContainer .home_gallery_contest .home_gallery_buttons .enterBox{
	background-position:276px -145px;
	}
}
@media screen and (min-width:321px) and (max-width:360px){
	#galleryContainer .home_gallery_contest .home_gallery_buttons .enterBox{
	background-position:315px -145px;
	}
}
@media screen and (min-width:361px) and (max-width:375px){
	#galleryContainer .home_gallery_contest .home_gallery_buttons .enterBox{
	background-position:333px -145px;
	}
}
@media screen and (min-width:376px) and (max-width:414px){
	#galleryContainer .home_gallery_contest .home_gallery_buttons .enterBox{
	background-position:368px -145px;
	}
}
@media screen and (min-width:415px) and (max-width:435px){
	#galleryContainer .home_gallery_contest .home_gallery_buttons .enterBox{
	background-position:390px -145px;
	}
}
@media screen and (min-width:568px) and (max-width:773px) {
	.home_gallery_text, .home_gallery_buttons{
	    width: 100%;
		padding: 0;
	}
	.home_gallery_contest {
    padding: 0 10px;
	}
	#galleryContainer .home_gallery_contest .home_gallery_buttons .enterBox{
		margin: 20px 0 6px 0;
	}
}


 @media  (max-width:412px){
	//#galleryContainer .connected-carousels .carousel-stage li {width:412px;  }	 
}
@media  (max-width:732px){
	// #galleryContainer .connected-carousels .carousel-stage li {width:732px; }	 
} 
@media  (max-width:768px){
	// #galleryContainer .connected-carousels .carousel-stage li {width:768px; }	 
} 
/*Dinesh css for contest form End*/

@media(min-width: 1200px){
    #galleryContainer .comments,
    #galleryContainer .InfoBox{ 	/*updated height by shankar*/ /*min-width: 375px;*/
        min-width: 375px;
        max-width: 500px;
		overflow: inherit;
    }
}