body {
	background-color: #1f1f1f;
	font-family: 'Lato', sans-serif;

	margin: 0;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	color: white;
}

.black-bg {
	background-color: black;
}

a {
	color: white;
	text-decoration: none;
}

.container {
	width: 92%;
	margin: 20px auto;
}

.container::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

header {
	margin-top: 40px;
	line-height: 55px;
}

header .logo img {
	width: 220px;
}

header .logo, header .categories {
	float: left; text-transform: uppercase;
}

header .user , header .search {
	float: right;
	margin-left: 50px;
}

ul, li {
	margin: 0; padding: 0;
}

div {
	box-sizing: border-box;
}

.search .search-container {
	width: 250px;
	background-color: black;
	border-radius: 10px;	line-height: 45px;
	padding: 0px; padding-left: 20px;
	display: inline-block;
}

.search .search-container button {
	width: 40%;
	font-size: 11px;
	text-transform: uppercase;
	text-align: right;
	margin-right: 5px;
}

.search .search-container input {
	width: 55%;	height: 40px;
	cursor: pointer;
}

.search .search-container button, .search .search-container input {
	background-color: transparent;
	border:none;	display: inline-block;
	color: white;
}

.dropdown {
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.dropdown a {
	color: white;
	text-decoration: none;
}
.dropdown-content {
	margin-top: 10px;
    display: none;
    position: absolute;
    right: 0;
    background-color: rgba(0,0,0,0.8);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

}

.dropdown-content a {
    color: white;
    padding: 2px 16px;
    text-decoration: none;
    display: block;
    			transition: all 0.2s ease-in-out;

}

.dropdown-content a:hover {background-color: #f1f1f1; color: black;}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}


.btn {
	background-color: #60A2DC;
	border: none;
	border-radius: 5px;
	padding: 10px 25px;
	font-family: 'Lato', sans-serif;
	color: #fff;
	cursor: pointer;
	font-size: 15px;
	transition: all 0.2s ease-in-out;

	border: 1px solid #60A2DC;
}

.btn:hover {
	background-color: transparent;
	border: 1px solid #60A2DC;
	color: #60A2DC;
}





/************************Admin*****************************/
.members h2 {color:#758A87; font-size:24px; text-transform:uppercase}
.members h3 {color:#758A87; font-size:18px; text-transform:uppercase}

.members li {list-style:none}


.members .button {background-color:#30B5E1; color:#fff; border: 2px solid #30B5E1; font-size:1.2em}
.members .button:hover {background-color:transparent; color:#2BB3E8}

.members #toggle_admin_nav i {color:#fff;}



.members #message {color:#fff}

.user_content {color:#758A87;}

/*********************Modal*******************************/

.members #modal {background-color:#3a3737;color:#FFF;border: 1px solid #b4b4b4; }
.members #modal h2 {font-weight:200;}
.members .v1 {text-align: center; margin-bottom:20px;}

.members #modal hr {margin:auto; width:30%; margin-top:20px; margin-bottom:20px}

.members #modal ul {list-style:none}
.members #modal li {line-height:2em}

.members #modal .button {color:#2BB3E8; text-transform:uppercase; background-color:transparent; border: 2px solid #2BB3E8; font-size:1.2em}

.members .pro_list {background-color:#505050;}

.members #newsletter {width:10px !important; margin-left:3% !important}
.members #paymenttype_cc {width:10px !important; margin-right:3! !important}

/*********************success box*******************************/
.members .success {color:#fff; text-align:center}





footer {
		background-color: black;
		width: 100%;
	}

	footer .column {
		width: 25%;
		float: left;
		padding: 15px;

		font-size: 12px;
	}

	footer h3 {
		text-transform: uppercase;
		font-size: 14px;
	}

	footer li {
		list-style: none;
		line-height: 25px;
	}

	.copyright {
		font-size: 12px;
		line-height: 50px;	border-top: 1px solid #1f1f1f; height: 80px;
	}

	.grey {
		color: #777;
	}


.mobile_search {
	display: none;
}





					#modal {
									z-index: 100000000011 !important;
									position: fixed !important;
									line-height: 30px !important;
									display: none;
								}

								#message {
									color: red;
									font-weight: bold;
								}

								#modal a {
									color: white !important;
								}

								#modal2 {
									display: none;								    top: 100px;
								    float: right;
								    right: 25%;
								    padding: 10px;
								    z-index: 100000000011 !important;
									position: absolute !important;
									line-height: 30px !important;
									background-color: #3a3737;
									color: #FFF;
									border: 1px solid #b4b4b4;
								}

								.xs {
																		max-width: 800px !important;


								}

								#modal_bg {
									display: none;
									z-index: 100000000;
									background-color: rgba(0,0,0,0.8);
									width: 100%;
									top: 0px; left: 0px;
									height: 5500px;
									overflow: hidden;
									position: absolute;
								}

								.modal_close  {
									position: relative;
								}
								.modal_close img {
									position: absolute;
									right: -20px;
									top: -20px;
								}

								#modal .button  {
									width: 100%;
									text-align: center;
									padding: 10px 0px !important;
									margin:  0 auto !important;
								}

								#modal input {
									padding: 10px 12px;
									width: 92%;
									margin: 0 !important;
									margin-bottom: 10px !important;
								}

								#modal .button {
									width: 100% !important;
									margin: 0 !important;
									margin-bottom: 10px !important;
									max-width: 100% !important;
								}


.mobile_menu {
	display: none;
}

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


.mobile_search {
		display: none;
		position: fixed;
		top: 0;
		background-color: rgba(0,0,0,0.9) !important;
		width: 100%;
		min-height: 2000px;
		padding: 20px;
		z-index: 10000000001;
		text-align: center;

	}



.mobile_menu {
		position: absolute;
		right: 20px;
		top: 5px !important;
		display: block !important;
		font-size: 30px;
	}



	.slider {
		overflow: hidden;
	}
footer .column {
	width: 100%;

}

.categories, .user, .search {
	display: none;
}

header {
	margin-top: 15px;
}

header .container {
	margin: 0px auto !important;
}

header .logo {
	width: 40%;

	margin-right: 0px !important;
	margin-left: 30% !important;
}

header .logo img {
	width: 100%;
}
.slider {
	margin: 0 auto !important;
	padding: 0 !important;
}


.mobile_search input {
	width: 80%;	max-width: 300px;
	margin: 0; padding: 0;
border-radius: 0px;
	padding: 10px 5px;
}

.mobile_search button {
width: 80%;	max-width: 300px;	border-radius: 0px;
}

div {
	box-sizing: border-box;
}

div.ui-input-text.ui-body-inherit.ui-corner-all.ui-shadow-inset {
	display: inline-block;
	width: 50%;
}

.search .search-container input {
	width: 100% !important;
}

.mobile_search .btn {
	margin: 0;
}



	.mobile_menu a{
		margin-left: 20px;
	}

}

/*******************default*********************/

.default .center

{

width:100% !important;
left: calc(50% - 38%);



}

.default .column {
		width: 32%;
		float: left;
		padding: 15px 4px 15px 5px;
		font-size: 14px;
		color:white;
		line-height:1.4em
		}

.default .column p {text-align:left; padding:0 10px 0 10px}

.default .column .app-icon {width:45%; padding:3% 1% 3% 0}


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


            .default .column {
				width:90%;
				font-size:12px;
			}

			.default .column img {width:50%}
			.default .column .app-icon {width:90%; padding:3% 1% 3% 0}

}


@media only screen and (min-width: 480px) and (max-width: 1024px) {

	.default .center {

	width:95% !important;
	left: calc(50% - 45%) !important;
	top: calc(65% - 35%) !important;

	}


	.default .column {
		width: 30%;

		}



	h3 {font-size:18px !important}

}