/* Style the header */
.header {
  padding: 10px 16px;
  	 position: center;
  background: white;
  color: #f1f1f1;
}




body{
	
	font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
	font-size:17px;
	line-height:1.7}

.top-tamogatas-StariLogo {
 height:20%;

	
}
.euTopLogo {
 
  background-color: white;
  position: fixed;
  top: 0;
  float: left;
  width: 100%;
 overflow: hidden;
  
}


#tamogatasStariLogo
{
	 position: center;
     max-width: 100%;
	height: auto;




}



.tamogatas_cimsor {
  padding: 16px;
  margin-top: 250px;
  text-align: center;
  background-color: white;

}


.euDivSzoveg {
  border: 5px outset;
  width: 70%; 
  text-align: center;
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active_coll, .collapsible:hover {
  background-color: orange;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active_coll:after {
  content: "\2212";
}

.contentColl {
  
  padding: 3px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: white;
}


.product-item{

border-style: double;
 border-color: lightgrey;
  height:595px;
}

.product-image{
	height:300px;
	width: auto;
}


.product-name{
 height:150px;

   top: 0px;
 position: left;
}

.product-termekinfo{
 

     top: 77px;
}

.product-ar{
 
 
     top: 80px;
}

.product-kosarba{


     top: 90px;
}

#loader {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(images/ajax-loader.gif) center center no-repeat;
}


.note {color: #ff0000}
.success_msg{color:red}

/* unvisited link */
a:link {
  color: green;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: orange;
}

/* selected link */
a:active {
  color: blue;
}

/* Page content */
.content {
  padding: 16px;
  }
  
  .content_kicsi {
  padding: 16px;
  max-width:1350px;

    margin-left: auto;
    margin-right: auto;
text-align:justify;
  }



/*The sticky class is added to the header with JS when it reaches its scrollposition */
.sticky {
 position: fixed;
  top: 0px;
  width: 100%;
  
}




/* Addsome top padding to the page content to prevent sudden quick movement (as theheader gets a new position at the top of the page (position:fixed andtop:0) */
.sticky + .content {
 padding-top: 102px;
 
} 


#topLogo
{
	
	 position: center;
     max-width: 100%;
  height: auto;
}

.menuLogo {

  float:left;

} 
.adatlapok {
	
	 position: center;
     width: 70%;
  height: auto;
}


.topnav {
 	 margin:  auto;
width:70%;

  overflow: hidden;
  background-color: white;

}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: orange;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 800px) {
	.menuLogo { float:right;}
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

#piacLogo
{
	
		
	 position: center;
     max-width: 100%;
  height: auto;
  
}
 
.openinghours p {
	
		width: 100%;
	margin: 0 auto;
	line-height: 1,1;
	font-size: 14px;
	text-align: justify;	
}

.openinghours h3 {
		font-size: 18px;


}
 
 .containerForContact h2{
	 
	 	font-size: 18px;
	 
	 
 }
 
.sorok p {
	width: 100%;
	margin: 0 auto;
	line-height: 1,1;
	font-size: 14px;
	text-align: justify;
}
 
.sorok h1 {
		font-size: 26px;
	padding:10px;
	text-transform: uppercase;

}

.sorok h2 {
		font-size: 14px;
	margin: 0 auto;
	padding-bottom: 70px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 10px;
}
 
 .asymmetric p {
	width: 80%;
	margin: 0 auto;
	line-height: 1,1;
	font-size: 14px;
	text-align: justify;
}
 
.asymmetric h1 {
		font-size: 26px;
	padding:10px;
	text-transform: uppercase;

}

.asymmetric h2 {
		font-size: 14px;
	margin: 0 auto;
	padding-bottom: 70px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 10px;
}
 
 
 
}

@media screen and (max-width: 800px) {
		.menuLogo { float:right;}
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;

  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


 


/* Slideshow container */
.slideshow-container {

              

  	 position: center;
	   margin: auto;

}


/* Hide the images by default */
.mySlides {
  display: none;
 
  	
}

/* Next & previous buttons */



.prev, .next {
  cursor: pointer;
  position: relative;

  margin-top: -22px;
  
    padding: 16px;
  
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
 
}





/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;

}


/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);

}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  color: black;
  width: 90%;
  text-align: center;
  z-index: -10;
}


/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;

}


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

 .active, .dot:hover {
  background-color: #717171;
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.5s;
  animation-name: fade;
  animation-duration: 2.5s;
}




/* Style the footer */
.footer2 {



  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;

}


/*.beersheader {
	
  margin: 40px 0px 40px 0px;
	
  overflow: hidden;
  background-color: orange;
  padding: 20px;
  text-align: center;
  font-size: 35px;
  color: black;
}
*/
.beersheader {
	
  margin: 40px 0px 40px 0px;
	
  overflow: hidden;
  background-color: orange;
  padding: 20px;
  text-align: center;
  color: black;
    color: black;
	  font-size: 35px;
}

.sortipusok {
	
  margin: 100px 0px 0px 0px;
	
  overflow: hidden;
  background-color: orange;
  padding: 10px;
  text-align: left;
  color: black;
    color: black;
	  font-size: 35px;
}

.sortipusok2 {
	
  margin: 40px 0px 0px 0px;
	
  overflow: hidden;
  background-color: orange;
  padding: 10px;
  text-align: left;
  color: black;
    color: black;
	  font-size: 35px;
}

.asymmetric {
	position: relative;
	background-color: orange;
	z-index: -10;
}



.asymmetric::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: orange;
	transform-origin: bottom left;
	transform: skewY(3deg);
	z-index: -10;

}


.blank-space {
	height: 1px;
}


h1 {
	padding:10px;
	text-transform: uppercase;

}

h2 {
	margin: 0;
	padding-bottom: 70px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 10px;
}

p {
	width: 70%;
	margin: 0 auto;
	line-height: 2;
	font-size: 18px;
	text-align: justify;
}

li {
	width: 70%;
	margin: 0px auto;
	line-height: 2;
	font-size: 14px;
	  list-style-position: inside;
}


.mozgoUvegek {
	 width: 1000px;
margin: 30px 0px 0px 0px;
	z-index: -10;
}

.sorok {
margin: 30px 0px 0px 0px;
}



/* Clear floats after the columns */
.sorok:after {
  content: "";
  display: table;
  clear: both;
}

.jobb {

  
  float: left;
  padding: 20px;
  width: 20%;

  height: 568px; /* only for demonstration, should be removed */
}

/* Create two columns/boxes that floats next to each other */
.bal {
  float: left;
  width: 65%;
 /* height: 568px;  only for demonstration, should be removed */
 
  padding: 20px;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 850px) {
  .bal, .jobb {
    width: 91%;
    height: auto;
  }






}


.uveg {
  width: auto;
  height: 100%;
}




#myDIV {
  height: 250px;
  width: 250px;
  overflow: auto;
}

.blinking{
    animation:blinkingText 1.2s infinite;
 color: red;
}
@keyframes blinkingText{
 color: red;
	0%{     color: #000;    }
    49%{    color: #000; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #000;    }
}

.google-maps {

    	
          
       /*
	   padding-bottom: 75%; // This is the aspect ratio
        height: 0;
	*/
    
    overflow: hidden;
		
    }
}

.google-maps iframe{
      position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
	
}


/* Style inputs */
input[type=text], select, textarea {
  width: 95%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

/* Style the container/contact section */
.containerForContact {
   
    margin-left: auto;
    margin-right: auto;
	
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
  width: 75%;
}

.containerForContact2 {
	
   
    margin-left: auto;
    margin-right: auto;
	
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
  width: 100%;
}


/* Create two columns that float next to eachother */
.column {
	  box-sizing: border-box;
  float: left;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 1350px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1350px) {
  .column, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

/*nyitva-tartás kezdete */
.openinghours {


  		font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
    border-radius:4px;
    margin:10px;
    box-shadow: 0 0 10px black;
    padding:0 10px 0 10px;
    overflow: hidden;
    display: inline-block;
}





.openinghourscontent2 {
    float:left;
}
.openinghourscontent2 h2 {
	  color:red;
    display:block;
    text-align:center;
    margin-top:.33em;
}



.openinghourscontent {
    float:left;
}
.openinghourscontent h2 {
	  color:black;
    display:block;
    text-align:center;
    margin-top:.33em;
}

.today {
    color: #8AC007;
}
.opening-hours-table tr td:first-child {
    font-weight:bold;
}
#open-status {
	  color: black;
    display:block;
    margin-top:-3em;
    text-align:center;
    border:dotted lightgrey 3px;
}
.openorclosed:after {
    content:" ezekben az órákban van nyitva:";
}
.open {
    color:green;
}
.open:after {
    content:" Nyitva";
    color: #6C0;
}
.closed:after {
    content:" Zárva";
    color: red;
}
.opening-hours-table tr td {
    padding:5px;
}

/*nyitva-tartás vége*/

.openinghourscontent h1 {
	  color:black;
 		font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
    text-align:left;
  
		width: 100%;
	margin: 0 auto;
	line-height: 2;
	font-size: 13px;
	   
}

.facse{
	

	overflow: hidden;
}


.kep {
  width: 80%;
  height: auto;
} 

.footer p	{
	
		width: 100%;
	margin: 0px;

	text-align:left;
	font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
	font-size:15px;
	line-height:1.7
}

.clearfix::after{content:".";display:block;height:0;clear:both;visibility:hidden}
.wrapper{width:1300px;padding:0 15px;margin:0 auto}
.appeal{font-size:17px;background:orange;color:#fff;padding:15px 0;text-align:left}
.appeal p{margin:0}
.appeal em{font-style:normal}
/*.footer{display:block;font-size:14px;margin-top:30px;color:rgba(255,255,255,0.7);}*/
.footer{display:block;font-size:14px;margin-top:30px;color:rgba(0,0,0,0.8);}
/*.footer a{color:rgba(255,255,255,0.7);text-decoration:none}*/
.footer a{color:rgba(0,0,0,0.8);text-decoration:none}

/*.footer a:hover{color:#fff}*/
.footer a:hover{color:gray}

/*.footer-inner{background:#0d2235;min-height:220px;padding:50px 0 30px}*/
.footer-inner{background:white;min-height:220px;padding:50px 0 30px}

/*.bottom-strip{font-size:13px;background:#0b1d2d;padding:12px 0;height:58px;line-height:26px}*/
.bottom-strip{font-size:13px;background:orange;padding:12px 0;height:38px;line-height:26px}


/*.footer h4{color:#fff;margin-top:5px;display:inline-block;position:relative;text-transform:uppercase;font-style:italic;margin-bottom:15px;font-size:16px;font-weight:700;font-family:Roboto,"Segoe UI","Helvetica Neue",Arial,sans-serif}*/
.footer h4{ color:black;margin-top:5px;display:inline-block;position:relative;text-transform:uppercase;font-style:italic;margin-bottom:15px;font-size:16px;font-weight:700;font-family:Roboto,"Segoe UI","Helvetica Neue",Arial,sans-serif}

    .footer-logo{float:left;text-align:right;width:100px;position:relative;top:5px}
/*.footer-logo img{height:200px;opacity:.5}  */
.footer-logo img{height:200px;opacity:.9}  
.footer h4::after{content:"";height:2px;background:orange;position:absolute;left:0;width:82%;bottom:-5px}
.footer a:last-child i{font-weight:700;top:2px;left:-.5px}
.footer a:first-child i{left:-.5px}
.tool-box,.link-box,.link-box2{float:left}
.link-box{margin-right:40px;border-right:1px solid rgba(0,0,0,0.2);padding-bottom:20px;width:175px}
.link-box a{margin:3px 0;clear:both}

.link-box2{margin-right:40px;border-right:1px solid rgba(0,0,0,0.2);padding-bottom:20px;width:230px}
.link-box2 a{margin:3px 0;clear:both}        


.notice{float:left;margin-top:3px}




.tools-list a,.link-box a{float:left;display:block;line-height:26px;margin-top:4px;margin-bottom:4px}

.link-box2 a{float:left;display:block;line-height:16px;margin-top:4px;margin-bottom:4px}

.tools-list{margin-left:-4%;width:450px}
.tools-list a{margin:0 4%;width:50%}
.tools-list a:nth-child(2n){width:30%}
.tools-list span{font-size:18px;line-height:normal;position:relative;top:3px}



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

.footer p	{
	
		width: 100%;
	margin: 10px;
}
.wrapper{width:100%;padding:0}
.footer-logo{width:100%;float:none;text-align:center;margin:0}
 

.footer-inner{padding-top:30px}
.footer h4::after{right:0;margin:0 auto}
.appeal{padding:15px 10px;text-align:center}
.link-box,.tool-box,.tools-list,.link-box2 {width:100%;float:none;text-align:center;margin:0}
.link-box,.link-box2 a{float:none;display:block;margin:0}


.tools-list a,.link-box a,.link-box2 a{float:none;display:block;margin:0}
.tools-list a,.tools-list a:nth-child(2n){width:100%}


.bottom-strip{height:auto}
.notice,.social-media{float:none;text-align:center}
}


#age-verification .usadist{
	margin-left:-25px;
	font-size:12px!important;
	}
	
#age-verification .usadist a{
	font-size:12px!important;
	font-style:normal!important;
	text-shadow:none;
	}
	
#age-verification .dist{
	font-weight:bold;
	background-color:#fce597;
	padding:1px 3px;
	color:#000;
}
	

#age-verification {
	position: relative;
	top:50%;
	left:50%;
	width: 380px;
	height: 350px;
	margin:-175px 0 0 -202px;
	background:orange;
	color: #fff;
	
}
#age-verification #logo {
	position: absolute;
	top: 15px;
	left: 90px;
	width: 200px;
	height: 150px;
	background: url(images/stari_age_logo.jpg) no-repeat;
}
#age-verification ul {
	margin:160px 0 0 0;
	padding: 0 0 0 50px;
	
}
#age-verification li {
	position: relative;
	float: left;
	width: 145px;
	height: 16px;
	margin-bottom: 6px;

}

#age-verification li a, #proceed-choose a {
	font: 15px 'Abel', Arial Narrow, sans-serif;
	text-decoration: none;
	color: #fff;
	line-height: 16px;
	padding-left: 30px;
}

#proceed-choose a {
	font-style:italic;
}

#proceed-choose .cookies {font: 11px 'Abel', Arial Narrow, sans-serif;
display:block;
background-color:#000;
margin-top:20px;
padding-bottom:10px;}


#age-verification li a:hover, #proceed-choose a:hover {
	color: #D8AF4D;
	
	
}

#proceed-to, #proceed-choose {
	font: 22px 'Droid Serif', sans-serif;
	
	color: #fff;
	text-align: center;
	padding-top: 165px;
	position: relative;
}
#proceed-btn {
    font:31px abel;
    position: absolute;
    top: 292px;
    left: 0;
    text-align: center;
    width: 404px;
    height: 53px;
    line-height: 53px;
    color:#7B797D;
    text-shadow: none;
    background-image:url(images/age-inactive.png);
    background-repeat:repeat-x;
	
}
#proceed-button {
	position: absolute;
	top: 125px;
	left: 50px;
	width: 300px;
	height: 75px;
	cursor: pointer;
}
#proceed-age {
	position: absolute;
	top: 206px;
	left: 0;
	text-align: center;
	text-transform: uppercase;
	
}
#proceed-age h1 {
	font: bold 25px 'Droid Sans', sans-serif;
	padding: 15px 0 10px 0;
	line-height:1;
			margin: 0;
	padding-bottom: 10px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0px;
}
#proceed-age h2 {
	font: 14px 'Abel', Arial Narrow, sans-serif;
	text-shadow: none;
	line-height:1;
		margin: 0;
	padding-bottom: 0px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0px;
	
}

#proceed-age input {
    font:48px Abel;
    color:#fff;
    background:url(images/bg-input-age.png) no-repeat;
    width: 96px;
    height: 59px;
    line-height: 59px;
    border: 0;
    padding: 0;
    margin:8px 0 0 20px;
    text-align: center;
}
.nlAge {
    padding-left: 15px;
}

#proceed-btn.btnGreen{

    background-image:url(images/age-active.png);
    }

#proceed-yes {
	float: left;
	width: 190px;
	height: 0;/*104px;*/
	cursor: pointer;
	overflow: hidden;
	position: relative;
}
.proceed-yes {
	background: url(images/bg-lang-btn.png) repeat-x #98c153;
}
.proceed-yes-hover {
	background: url(images/bg-lang-btn.png) repeat-x #7a9b42;
}
#proceed-no {
	float: left;
	width: 190px;
	height: 0;/*104px;*/
	cursor: pointer;
	overflow: hidden;
	position: relative;
}
.proceed-no {
	background: url(images/bg-lang-btn.png) repeat-x #ce3c3a;
}
.proceed-no-hover {
	background: url(images/bg-lang-btn.png) repeat-x #922a29;
}

.sorvalaszto-table {
	
position: static;
margin-top: 40px;
margin-bottom: 1px;
margin-left: 30px;
}	


.sorvalaszto-table img{

	  display: block;

	height: 100%;
}


.zoom {
		
	height: 270px;
	
transition: transform .2s;
  margin: 0px, 0px, 20px ;
}

.zoom:hover {
  -ms-transform: scale(1.3); 
  -webkit-transform: scale(1.3); 
  transform: scale(1.3); 
}



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

.sortipusok {
	
  margin: 60px 0px 0px 0px;
	
  overflow: hidden;
  background-color: orange;
  padding: 10px;
  text-align: left;
  color: black;
    color: black;
	  font-size: 25px;
}

.sortipusok2 {
	
  margin: 40px 0px 0px 0px;
	
  overflow: hidden;
  background-color: orange;
  padding: 10px;
  text-align: left;
  color: black;
    color: black;
	  font-size: 25px;
}

.sorvalaszto-table {
	position: static;
margin-top: 30px;
margin-bottom: 1px;
margin-left: -20 px;

}	


.sorvalaszto-table img{

	height: 80%;

}

.zoom {
		
	height: 140px;
	
transition: transform .2s;
/*
margin-top: 10px;
margin-bottom: -221px;
margin-left: -200 px;
*/


 /* margin: 0px, 0px, 20px ;*/
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0 px;

}

.zoom:hover {
  -ms-transform: scale(1.3); 
  -webkit-transform: scale(1.3); 
  transform: scale(1.3); 
}
}


#totop a {

	display: block;
	display: none;
	z-index: 999;
	opacity: .8;
	position: fixed;
	top: 100%;
	margin-top: -150px;
	right: 0;
	width: 190px;
	height: 20px;
	padding: 14px 0 0 0;
	 transition: background-color .3s;
	background:  no-repeat 15px 22px #262423;
	font: italic 16px "Segoe UI","Helvetica Neue",Arial,sans-serif;
	color: #777;
	text-decoration: none;
	text-indent: 30px;
	background: url(images/icon-arrow-top.png) no-repeat 15px 22px #262423;

}


}
#totop a:hover {
		background: url(images/icon-arrow-top.png) no-repeat 15px 22px #262423;
	background:  no-repeat 15px 22px #262423;
	color: #999;
}

#ugrik {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 12px;
  border: none;
  outline: none;
  background-color: orange;
  opacity: 0.9;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#ugrik:hover {
  background-color: #555;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.clearfix {
 /* overflow: auto;
*/
}

.img2 {

  float: right;
  width: 100px;
  height: auto;
}