.ui-widget li:nth-child(n+5) {
      display: none;
			
			   background: blue;
    border: 1px solid red;
  }
ul li:nth-child(4n+1) {  
  color: WHITE;
			   background:#343a40!important;
     width: 450px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

ul li:nth-child(4n+3) {  
  color: WHITE;
			   background: #343a40!important;

}
	
.bg-img {
    position: relative;
    text-align: center;
    color: white;
		
		    background-image: url("logo-zozzap-11.jpg");

    min-height:250px;
 max-height: 300px;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}


@media screen and (max-width: 800px) {
 #bg-img {     min-height: 170px; max-height: 170px; /* fixed width under 700px */ }
  }
}
.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.centered {
    position: absolute;
		font-size: 20px;
    top: 40%;
    left: 50%;

		  transform:translate(80px, 80px) rotate(5deg) scale(3) translate(-50px, -20px);
}
.btn {
background: url(http://izappyou.com/zozzap/background-botton-zozzap-2.jpg)  ;
    width: 80%;
    height: 7%;
    padding-left: 2% !important;
   border: none;
    color: white;
    padding: 15px 10px;
	
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
}

@media screen and (min-width: 801px) {
  div.centered {
    font-size: 16px;
  }
}
@media screen and (max-width: 800px) {
   div.centered  {
    font-size: 10px;
		  transform:translate(110px, 95px) rotate(8deg) scale(3) translate(-50px, -20px);
  }
}
@media screen and (max-width: 800px){
    //styles that account for narrow viewports
    //off the top of my head, maybe something like this (really depends on what the 'design' should do though):
    input[type="button"] {
        display: block;
        float: right;
				        width: 120%;
    }
	
@media screen and (max-width: 800px){
    //styles that account for narrow viewports
    //off the top of my head, maybe something like this (really depends on what the 'design' should do though):
    input[type="submit"] {
	
				        width: 120%;
    }

    input[type="text"] {
        width: 100%;
						padding-left: 5%;
			padding-right: 5%;
	
    }
}

th { background: #c5c5c5;}
table {
        border-collapse: collapse;
        border: 0px solid #cdcdcd;
        font: normal 12px arial; 
        width: 100%;
}
td, th { border: 0px  #cdcdcd; padding: 2px;}

/* Section two*/

@media (max-width: 768px) {
  .btn {

background-image: url('http://izappyou.com/zozzap/background-botton-zozzap-2.jpg');
    width: 100%;
    height: 10%;
    padding-left: 2% !important;
   border: none;
    color: white;
    padding: 25px 25px;
	
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
  }
}
input[type=search] {
 
    width: 100%;
  
    margin: 8px 0;
    box-sizing: border-box;

    -webkit-transition: 0.5s;
    transition: 0.5s;
    font-family: Century Gothic, sans-serif;
    font-size: 1.7em;
		text-align: center;
	  background-color: white;
		color:black;
   border-color:orange;
    border-radius: 4px;
	}	
	}
input[type=submit] {

    width: 100%;
  
    margin: 8px 0;
    box-sizing: border-box;

    -webkit-transition: 0.5s;
    transition: 0.5s;
    font-family: Century Gothic, sans-serif;
    font-size: 1.2em;
		text-align: center;
	  background-color: white;
		color:black;
   border-color:orange;
    border-radius: 6px;
		
	}	

}
input[type=text] {

    width: 100%;
  
    margin: 8px 0;
    box-sizing: border-box;

    -webkit-transition: 0.5s;
    transition: 0.5s;
    font-family: Century Gothic, sans-serif;
    font-size: 1.2em;
		text-align: center;
	  background-color: white;
		color:black;
   border-color:orange;
    border-radius: 6px;
		
	}	

}
	@media screen and (max-width: 800px){
    //styles that account for narrow viewports
    //off the top of my head, maybe something like this (really depends on what the 'design' should do though):
    input[type="text"] {
        display: block;
        float: right;
				        width: 120%;
								font-size: 0.7em;
    }
		 }
.btn {

    width: 100%;
  
    margin: 8px 0;
    box-sizing: border-box;

    -webkit-transition: 0.5s;
    transition: 0.5s;
    font-family: Century Gothic, sans-serif;
    font-size: 1.7em;
		text-align: center;
	  background-color: white;
		color:white;
   border-color:orange;
    border-radius: 4px;
		
	}	

}

.ui-autocomplete-input {

    width: 100%;
  
    margin: 8px 0;
    box-sizing: border-box;

    -webkit-transition: 0.5s;
    transition: 0.5s;
    font-family: Century Gothic, sans-serif;
    font-size: 1.7em;
		text-align: center;
	  background-color: white;
		color:white;
   border-color:orange;
    border-radius: 4px;
		
	}	

}








body {
    font-family: Arial;
}

* {
    box-sizing: border-box;
}

form.ContactForm input[type=text] {
    padding: 10px;
    font-size: 17px;
    border: 1px solid grey;
    float: left;
    width: 80%;
    background: #f1f1f1;
}

form.ContactForm button {
    float: left;
    width: 20%;
    padding: 10px;
    background: #2196F3;
    color: white;
    font-size: 17px;
    border: 1px solid grey;
    border-left: none;
    cursor: pointer;
}

form.ContactForm button:hover {
    background: #0b7dda;
}

form.ContactForm::after {
    content: "";
    clear: both;
    display: table;
}







 
div.example {
  background-color: lightgrey;
  padding-LEFT: 20px;
	  padding-RIGHT: 20px;
	  padding-TOP: 20px;
		 padding-BOTTOM: 20px;
	COLOR:BLACK;
	    font-size: 24px;
}
@media screen and (min-width: 801px) {
  div.example {
    font-size: 20px!IMPORTANT;
  }
}

@media screen and (min-width: 601px) {
  div.example {
    font-size: 40px;
  }
}

@media screen and (max-width: 600px) {
  div.example {
    font-size: 14px;
  }
}



div.ui-widget {
  background-color: lightgrey;

	COLOR:BLACK;
	    font-size: 24px;
					width:100%important;
}



@media screen and (min-width: 801px) {
  div.ui-widget {
    font-size: 20px!IMPORTANT;
				max-width:100%important;
  }
}

@media screen and (min-width: 601px) {
  div.ui-widget {
    font-size: 40px;
				width:95%!important;
  }
}

@media screen and (max-width: 600px) {
  div.ui-widget {
    font-size: 14px;
		width:95%!important;
  }
}










div.message {
margin-top:30px;
padding-top:20px;
padding-bottom:20px;
		padding-left:8px!important;
padding-right:8px!important;
  background-color: green!important;;
	width:20%!important;
heigth:30%!important;
	COLOR:white;
	    font-size: 24px;
					width:50%!important;
}
@media screen and (min-width: 801px) {
  div.message {
    font-size: 20px!IMPORTANT;
				max-width:50%!important;
						padding-left:8px!important;
padding-right:8px!important;
  }
}

@media screen and (min-width: 601px) {
  div.message {
		margin-top:10px;
    font-size: 18px;
				width:75%!important;
		padding-left:8px!important;
padding-right:8px!important;
  }
}

@media screen and (max-width: 600px) {
  div.message {
	margin-top:10px;
    font-size: 18px;
		width:75%!important;
		padding-left:8px!important;
padding-right:8px!important;
  }
}