/*
	Template Name 	: EasyPlay - App Coming Soon Creative Page
	Author 			: Awaiken Theme
	Author Url 		: https://awaikenthemes.com
*/

/************************************/
/***** 	     General css		 ****/
/************************************/
html{
	height: 100%;
}
body{
	font-size: 16px;
	height: 100%;
	font-family: 'Montserrat', sans-serif;
}
h1{
	text-transform: uppercase;
	font-size: 18px;
}
h2{
	font-family: 'Josefin Sans', sans-serif;
}
ul li{
	font-size: 13px;
}
a{
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}
.logo img{
	width: 128px;
	height: auto;
}
.colorone{
	color: #f60;
}
.colortwo{
	color: #fff;
}
.colorthree{
	color: #454545;
}
.colorfour{
	color:#7fbbff;
}
.btn-outline-primary {
    color: #f60 !important;
    border-color: #f60 !important;
}
.btn-outline-primary:hover {
    color: #fff !important;
    background-color: #f60 !important;
    border-color: #f60 !important;
}

.btn-primary {
    color: #fff !important;
	background-color: #f60;
    border-color: #f60 !important;
}

.btn-primary:hover {
    color: #fff !important;
    background-color: #c35207 !important;
    border-color: #c35207 !important;
}

.btn-success{
	color: #fff !important;
	background-color: #454545;
    border-color: #454545 !important;
}

.btn-success:hover{
	color: #fff !important;
	background-color: #757575;
    border-color: #757575 !important;
}

.slogan{
	margin-bottom: 40px;
}

.domaineregistre{
	margin-bottom: 40px;
}

.info-mada{
	background-image: url(../images/main-image.jpg);
	background-size: cover;
	background-position: center; 
	background-repeat: no-repeat; 
}
.contentform{
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80%;
	padding: 10px 50px 10px 50px;
}
.contentform h1{
	text-transform: uppercase;
	font-weight: 400;
	line-height: 1.5;
}

.contentform h2{
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
}

.contentform p{
	font-size: 13px;
	line-height: 1.5em;
}

.info-client{
	background-color: #454545;
	height: 100vh;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.info-client .block{
	padding: 0px 100px 0px 100px; 
	width: 100%;
}
.info-client p{
	color: #fff;
}
.info-client .block h1{
	text-align: left;
	font-size: 28px;
}
.about{
	margin-top: 30px;
}

.about p{
	color: #fff;
	font-size: 13px;
	line-height: 1.5em;
}

.info-client .block a{
	text-decoration: none;
	color: #f60;
}
.info-client .block a:hover{
	text-decoration: none;
	color: #fff;
}
/* IMG CENTER */
.imgcenter{
	position: absolute;
	top: 50%;
	left: 41%;
	width: 240px;
	z-index: 10;
	transform: translate(-50%,-50%);
}
.imgcenter img{
	width: 100%; 
}
/* RS */
.social-link{
	margin-top: 20px;
}
.social-link a{
	display: inline-block;
	background: #fff;
	color: #f60;
	width: 32px;
	height: 32px;
	text-align: center;
	padding-top: 6px;
	border-radius: 50%;
	margin-right: 4px;
}

.social-link a:hover{
	background: #f60;
	color: #fff;
}

/* BTN SEARCH */
.search-box{
	margin-bottom: 20px;
}

#animatedInput {
  width: 200px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}


  
/****************************************
		Responsive Media Query
****************************************/

@media only screen and (max-width:1600px){
	.contentform{
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40px 10px 10px 10px;
		height: 80%;
	}

	.contentform h1{
		text-transform: uppercase;
		font-weight: 400;
		line-height: 1.5;
	}

	.slogan{
		margin-bottom: 15px;
	}

	.slogan h1{
		font-size: 16px;
	}

	.domaineregistre{
		margin-bottom: 15px;
	}
	.info-client .block{
		padding: 0px 100px 0px 100px; 
		width: 100%
	}
	.info-client .block h1{
		text-align: left;
		font-size: 24px;
	}
	.info-client .block h2,.info-client .block h3{
		text-align: left;
		font-size: 18px;
	}
	.info-client .block p{
		padding-top: 50px;
		text-align: left;
	}
	.logo{
		text-align: left;
	}
	.about p{
		text-align: justify !important;
		padding-top: 0px !important;
	}
	.social-link{
		text-align: left;
	}
}

@media only screen and (max-width:1024px){
	.contentform{
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30px 10px 10px 10px;
	}
	.contentform h1{
		text-transform: uppercase;
		font-weight: 400;
		line-height: 1.5;
	}
	.info-client .block{
		padding: 0px 10px 0px 10px; 
		width: 100%
	}
	.info-client .block h1{
		text-align: center;
		font-size: 24px;
	}
	.info-client .block h2,.info-client .block h3{
		text-align: center;
		font-size: 16px;
	}
	.info-client .block p{
		padding-top: 50px;
		text-align: center;
	}
	.logo{
		text-align: center;
	}
	.about p{
		text-align: justify !important;
		padding-top: 0px !important;
	}
	.social-link{
		text-align: center;
	}
}

@media only screen and (max-width:768px){
	.imgcenter{
		display: none;
	}
	.contentform{
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30px 10px 0px 10px;
	}
	.contentform h1{
		text-transform: uppercase;
		font-weight: 400;
		line-height: 1.5;
	}
	.info-client .block{
		padding: 0px 10px 0px 10px; 
		width: 100%
	}
	.info-client .block h1{
		text-align: center;
		font-size: 24px;
	}
	.info-client .block h2,.info-client .block h3{
		text-align: center;
		font-size: 16px;
	}
	.info-client .block p{
		padding-top: 50px;
		text-align: center;
	}
	.logo{
		text-align: center;
	}
	.about p{
		text-align: justify !important;
		padding-top: 0px !important;
	}
	.social-link{
		text-align: center;
	}
}
