/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
	
table {
	border-collapse: collapse;
	border-spacing: 0;	
}

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

/** end **/

body {
	background-color: white;	
    color: #757474;
	font-family: 'Poppins', sans-serif;
 }

a:hover {
	color:#D4D4D4;
    text-decoration:none;
}

table {
	float:none;
}


img {
	max-width: 100%;
}

/* ----- FORM ------*/

#form {
	margin:10px auto;
	width: 98%;	
	height:auto;	 
    letter-spacing:0.06em;
    font-family: 'Poppins', sans-serif;	
}

#form p {
	padding:5px;	
	line-height:1.2;
	font-size:15px;
    }
    
#form a {
	text-decoration: none;
	color: #8B008B;
	font-size:15px;
	font-weight:500;
	letter-spacing:0.04em;   
	}

::-webkit-input-placeholder { /* Edge */
  color: grey;
  font-size:13px;
}

:-ms-input-placeholder { /* Internet Explorer */
  color: grey;
  font-size:13px;
}

::placeholder {
  color: grey;
  font-size:13px;
}
/* ------ End FORM ------*/

.text-slate {color: #990099;}
.text-darkmag {color: #4682B4;}

#navbar {  
 box-shadow: 0px 1px 10px #c0c0c0;	
 background-color: #990099;
 color: #fff;
 font-family: 'Poppins', sans-serif;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

textarea {
  width: 80%;
  height: inherit;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}


/* ------------- LOGO ---------------- */

#logo {	
    width:100%;	
	padding:5px 0px 5px 0px;	
	text-align:center;    
	}
	
#logo p {		
	margin-bottom:10px;
	font-size: 38px;
	color: #5a91bf;	
    font-family: 'Exo', sans-serif;	
	text-shadow: 3px 1px 3px rgba(176, 196, 222, 1);	
	}


/* ------------------ featured ads --------------------*/

.responsive {
  padding: 0 8px;
  float: left;
  width: 16.66666%;
}

.responsive4 {
  padding: 0 8px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 1100px) {
.responsive4, .responsive {
    width: 33.333333%;
    margin: 6px 0;
  }
  
  .lis {  
  width: 49.99999%;  
}

}

@media only screen and (max-width: 500px) {
.responsive4, .responsive {
    width: 49.99999%;
  } 

}

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

/*----------------- CARD --------------------------------*/

#adf {
	margin:20px auto;
	width: 90%;	
	height:auto;
	color:#757474;
    letter-spacing:0.05em;
	font-family: 'Poppins', sans-serif;
	}
	
#adf h4 {	
	font-family: 'Poppins', sans-serif;}

#adf p {text-align:left; padding: 0px 3px 5px 7px; } 
	
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;  
}

.title {
  color:#483D8B;
  font-size:14px;
  height:40px;
  font-family: 'Poppins', sans-serif;
}

	
.code {
	width:75%;
	height:250px;
}

/* -------- ADVERT -------------*/

#advert {
	margin:0 auto;
	width: 100%;	
	height:auto;	 
    letter-spacing:0.06em;
    font-family: 'Poppins', sans-serif;	
}

#advert p {
	padding:5px;	
	line-height:1.2;
	font-size:15px;
    }
    
#advert a {
	text-decoration: none;
	color: #8B008B;
	font-size:15px;
	font-weight:500;
	letter-spacing:0.04em;   
	}

#advert h4 {
text-align:left;
color:#154f85;
letter-spacing:1.2px;
margin-bottom:-5px;
font-size:15px;
} 

#advert h3 {
text-align:left;
color:#154f85;
letter-spacing:1.2px;
font-size:18px;
font-weight:bold;
margin-bottom:5px;
} 

#advert h2 {
text-align:left;
color:#990099;
letter-spacing:1.2px;
font-size:20px;
}
    
#advert ul{	
	width: 100%;	
	margin: 0px auto;
}

#advert li{
	text-align: left;	
	display:inline;	
	padding-left: 0px;	
	padding-right: 20px;	
	line-height:10px;   
	}    
      

.photo {			
	float: left;	
	margin-top:5px;
	margin-bottom:0px;
	text-align:center;
    max-width:100px;
	 }
/*------ ADVRT END ------*/


/*-- FOOTER --*/

footer{    
	box-shadow: 5px 5px 25px #888888;	
	background-color: #8b008b;		
	font-size:12px;
	padding:25px 0px 25px 0px;	 	
	width: 100%;    
	text-align:center;
	margin-top:50px;    
	}	
	
footer p {		        
		text-align:center;
		color:white;
	}
	
@media (max-width: 980px) {	
.code {
	width:90%;	
}

}
	
@media (max-width: 666px) {
		
	#ad {	
	width:94%;	
	}	
}

@media (max-width: 480px) {
	
#advert p {text-align:center;}
#advert h4 {text-align:center;}
#advert h3 {text-align:center;}


.photo {			
	float: none;	
	text-align:center;
}
ul{	
	
	text-align:center;
}
li {
	padding-right:0px;
	}
}