/* Author Olga Maraeva http://codezona.com/ */
.imageDisplay button:hover {
cursor: pointer;
}
.modal-close:hover {
cursor: pointer;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);	

html {
  color: #2a2a2a;
    /*background: #FFE0F3;*/
}

html, body {
  margin: 0;
  padding: 0;
 /* font-family: 'Open Sans';*/
   /* overflow-x:hidden;*/
}

h1 {
  color: #888;
  text-align: center;
  font-weight: 300;
  font-size:2em;
}

a:active {
border:none;
}

p {
margin:0.5em 0;
}

div:hover {
   /* cursor:pointer;*/
}

#main {
    position:relative;
    display:block;
    width:100%;
    max-width:600px;
   margin:0 auto;
    text-align:center;
}


#content {
  width:100%;
  height:auto;
  max-width:580px;
    display:block;
    text-align:center;
    margin:0 auto;
    padding: 20px 0;


 
}

#slider {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 4px;
  max-width:550px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 100px;
  text-align: center;
    
}



#slider ul li img {
    display:block;
    float:left;
  width:30%;
  height:auto;
  max-height:100px;

}

.btnLeft {
    position:absolute;
    z-index:20;
     top:25px;
    background-image: url('../../images/modal/btn-left.png');
	background-repeat:no-repeat;
	height:61px;
    width:26px;
    overflow:hidden;
}

.btnRight {
    position:absolute;
    z-index:20;
     top:25px;
    right:0;
    background-image: url('../../images/modal/btn-right.png');
	background-repeat:no-repeat;
    height:62px;
    width:20px;
    overflow:hidden;
}

.btnModal-left {
position:absolute;
    z-index:999;
	height:61px;
    width:26px;
    overflow:hidden;
left:0!important;

}

.btnModal-right {
position:absolute;
    z-index:999;
    height:61px;
    width:20px;
    overflow:hidden;
right:0!important;
}

.btnModal-left img, .btnModal-right img {
width:100%;
max-width:100%;
height:auto;
}

.imageDisplay {
position: absolute;
z-index: 999;
height: auto;
width: 100%;
overflow: hidden;
/*max-width: 800px;*/width: 800px;
display: block;
top: 45%;
height: 61px;
}

.imageDisplay-wrapper {
position: relative;
display: block;
width: auto;
max-width: 800px;
background: rgb(226, 226, 226);
height: 500px;
}

.imageDisplay button {
position: absolute;
z-index: 999;
overflow: hidden;
border: none!important;
outline: none!important;
margin: 0 auto;
width: 40px;

background-repeat: no-repeat;
}


.prev-b {
left: 0!important;
background: url('../../images/modal/btn-left.png');
border: none;
background-size: cover;
-webkit-background-size: cover;
background-position: center center;
height: 59px;
background: rgba(0,0,0,0.4);
background-image: url('../../images/modal/classic-map.png');
background-repeat: no-repeat;
}

.next-b {
right: 0!important;
background: url('../../images/modal/btn-left.png');
border: none;
background-size: cover;
-webkit-background-size: cover;
background-position: center center;
height: 59px;
background: rgba(0,0,0,0.4);
background-image: url('../../images/modal/classic-map.png');
background-repeat: no-repeat;

  
}

.gallery li p, .gallery li a  {
display:none;
}

.dark-wrapper {
display:block;
    position:relative;
    float:left;
  width:auto;
  height:auto;
/*border-right:2px solid #fff;*/
/*max-height:100px;*/



}
button.nextPrev.prev-b {
opacity: 0.3;
filter: alpha(opacity=30);
background-position: 10px 50%;
}
button.nextPrev.prev-b:hover {
opacity: 1.3;
filter: alpha(opacity=130);
background-position: 10px 50%;
}
button.nextPrev.next-b {
right: 0;
opacity: 0.3;
filter: alpha(opacity=30);
background-position: 10px 50%;
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
button.nextPrev.next-b:hover {
right: 0;
opacity: 1.3;
filter: alpha(opacity=130);
background-position: 10px 50%;
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
div.dark-wrapper:last-child {
    padding:0!important;
}



.slide-title {
    position:absolute;
    bottom:0;
    left:0;
    display:none;
    width:100%;
    height:100px;
    background:rgba(0,0,0,.5);
    color:#fff;
    z-index:10;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
padding-top: 40px;

}

.title {
color:#5C5C5C;
font-weight:bold;
margin-top:0;
}

#modal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: .80;
    -webkit-opacity: .8;
    -moz-opacity: .8;
    filter: alpha(opacity=80);
    z-index: 1000;
}

.modal-content {
    background-color: white;
/* border-radius: 10px; */
/* -webkit-border-radius: 10px; 
-moz-border-radius: 10px;*/
box-shadow: 0 0 20px 0 #222;
-webkit-box-shadow: 0 0 20px 0 #222;
-moz-box-shadow: 0 0 20px 0 #222;
display: none;
min-width: 50px;
padding: 10px 10px 10px 10px;
position: fixed;
z-index: 1000;
/*max-width: 600px;*/
width: 800px;

}


.modal-content img {
    display:block;
	position:relative;
   /* width:100%;
	max-width:100%;*/
	/*width: 940px;
max-width: 940px;*/
    /*height: 620px;*/
width: auto;
max-width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

}

.modal-close {
overflow: hidden;
background: url('../../images/modal/close-filter.png');
width: 24px;
height: 24px;
padding: 0;
margin: 0;
text-indent: -9999px;
line-height: 33px;
position: absolute;
right: 14px;
top: 14px;
z-index: 4;
webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
background-position: 28px 29px;
}
.modal-close:hover {
overflow: hidden;
background: url('../../images/modal/hclose-filter.png');
width: 24px;
height: 24px;
padding: 0;
margin: 0;
text-indent: -9999px;
line-height: 33px;
position: absolute;
right: 14px;
top: 14px;
z-index: 4;
webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
background-position: 28px 29px;
}

.link{
 /* background: #7a7a7a;
  background-image: -webkit-linear-gradient(top, #7a7a7a, #7a7a7a);
  background-image: -moz-linear-gradient(top, #7a7a7a, #7a7a7a);
  background-image: -ms-linear-gradient(top, #7a7a7a, #7a7a7a);
  background-image: -o-linear-gradient(top, #7a7a7a, #7a7a7a);
  background-image: linear-gradient(to bottom, #7a7a7a, #7a7a7a);
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: Arial;
  color: #ffffff;
  font-size: 16px;
  padding: 5px 20px 5px 20px;
  border: solid #d2d5d6 2px;
  text-decoration: none;
  width: 100%;
display: block;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;*/
}

.link:hover {
 /* background: #858585;
  background-image: -webkit-linear-gradient(top, #858585, #949194);
  background-image: -moz-linear-gradient(top, #858585, #949194);
  background-image: -ms-linear-gradient(top, #858585, #949194);
  background-image: -o-linear-gradient(top, #858585, #949194);
  background-image: linear-gradient(to bottom, #858585, #949194);
  text-decoration: none;*/
}


#modal-background.active, .modal-content.active, .image-title.active  {
    display: block;
}

/*----------------drop shadow---------------------*/

.drop-shadow {
            position:relative;
            width:100%;    
            margin:0 auto 2em auto; 
            background:#fff;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
        }

        .drop-shadow:before,
        .drop-shadow:after {
            content:"";
            position:absolute; 
            z-index:-2;
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
        }

        .drop-shadow:after{                 
            right:10px; 
            left:auto;
        }
        
        .round {
            -moz-border-radius:4px; 
                 border-radius:4px;
        }
        
        .round:before,
        .round:after { 
            max-width:300px;
            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
               -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
                    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform:rotate(-3deg);    
               -moz-transform:rotate(-3deg);   
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }
        
        .round:after {
            -webkit-transform:rotate(3deg);   
               -moz-transform:rotate(3deg);  
                 -o-transform:rotate(3deg);
                    transform:rotate(3deg);
        }

/*----------------line---------------------*/

.wrap-line {
  width: 100%;
    max-width:580px;
  background: #fff;
  position: relative;
    margin:40px 10px 0 10px;
    padding-top:5px;
   
}

.heading {
  width:103%;
  height: 30px;
  background: #E1EC91;
  position: relative;
  left: -7px;


}

.heading h2 {
  color: #478852;
  font-family: "Tahoma", sans-serif;
  margin-left: 5%;
  font-size: 16px;
  padding-top: 5px;
}

.heading:before {
  z-index: -1;
  position: absolute;
  bottom: -5px;
  display: block;
  width: 100%;
  height: 7px;
  background: black;
  content: "";
  border-bottom-left-radius: 31px 11px;
  border-bottom-right-radius: 31px 11px;
}

/*----------------media queries---------------------*/
@media only screen 
and (max-width : 601px) {
    
    #slider {
   
    max-width:500px;
 
}

}


@media only screen 
and (max-width : 550px) {
    
    #slider {
   
    max-width:470px;
 
}

}

@media only screen 
and (max-width : 520px) {
    
    #slider {
   
    max-width:450px;
 
}

}



@media only screen 
and (max-width : 500px) {
#content {
    max-width:500px;
}
    
#slider {
max-width: 450px;
}
    
    

}


@media only screen 
and (max-width : 480px) {
#content {
    max-width:450px;
}
    
#slider {
max-width: 420px;
}
    

}

@media only screen 
and (max-width : 460px) {

#slider ul li img {
max-height:80px;
}

.btnRight, .btnLeft {
top:15px;
}

#content {
    padding:0;
}

.slide-title {
height:0;
padding-top:0;
visibility:hidden;
}

.heading {
margin-bottom:15px;
}
}


@media only screen 
and (max-width : 450px) {
#content {
    max-width:410px;
}
    
#slider {
max-width: 380px;
}
    

}

@media only screen 
and (max-width : 420px) {
#content {
    max-width:400px;
}
    
#slider {
max-width: 350px;
}

   

}

@media only screen 
and (max-width : 400px) {
.imageDisplay {
top: 30%;
}
    

}

@media only screen 
and (max-width : 380px) {

#content {
    max-width:350px;
}
    
#slider {
max-width: 300px;
}
    
    
 
}

@media only screen 
and (max-width : 330px) {

#content {
    max-width:330px;
}
    
#slider {
max-width: 280px;
}
    
    
 
}

@media only screen 
and (max-width : 300px) {
#content {
    max-width:200px;
}
    
    .btnRight {
   
    right:0;
   
}
    
    

}


@media only screen 
and (max-width : 200px) {
#slider {
    display:none;
}
   
    
}