* { box-sizing:border-box; font-family: Helvetica;-webkit-font-smoothing: antialiased;}

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,900|Poppins:400,500');

* { margin: 0;padding: 0;text-decoration: none;box-sizing: border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

.login_creative .app {margin: 0;padding: 0;background: #f6f6f6;color: #fff;font-family: 'Poppins', sans-serif;overflow-x: hidden;height: 100vh;margin: auto;-webkit-box-align: center;-ms-flex-align: center; align-items: center;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center; justify-content: center;flex-flow: row wrap; -ms-flex-flow: row wrap;}

.login_creative img {max-width: 100%; height: 147px;}

.login_creative .app {background-color: #a0a0a0;width: 150px;margin: auto;border-radius: 5px;padding: 1em;position: relative;overflow: hidden;    height: 150px; margin-top: 50px;}

.login_creative h2 {font-weight: normal;margin: 10px auto;}

.login_creative h3 {color: #333;}

.login_creative a {text-decoration: none;color: #257aa6;}

.login_creative p {font-size: 13px;color: #fff;line-height: 1.5;}

.intro_viewer {width: 100%;height: 363px;background: #2F55A4;position: absolute;top: 0;left: 0;right: 0;margin: auto;text-align: center;padding: 2em 1em;}

.login_creative .img {width: 100%;}

.btn {position: absolute;bottom: 4.5em;left: 0;right: 0;margin: auto;text-align: center;background: #fff;padding: 10px;height: 70px;width: 70px;border-radius: 50%;transition: 0.45s ease all 0.1s;transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) all 0.1s;}

.login_creative button {color: white; height: 100%;width: 100%;border-radius: 50%;cursor: pointer;padding: 0.5em;border: none;background-color: #21D4FD;background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);outline: none;}

.none a , .none {color: white!important; font-weight: bold;}

.login_creative .app:hover{box-shadow: 0px 0px 5px rgb(83, 83, 83);     margin-top: 40px;transition: 0.5s all;}

.login_creative{cursor: pointer;}

.app h1{color: white;}

/* 

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

			.app {

				width: 100%;

				height: 100vh;

				border-radius: 0;

			}

			header {

				width: 90%;

				height: 250px;

			}

			.inputs {

				margin: 0;

			}

			input, button {

				padding: 18px 15px;

			}

		} */

		.open-login form {

		    -webkit-transform: translateY(0px);

		          transform: translateY(0px);

		  opacity: 1;

		  transition-delay: 0.15s;

		  visibility: visible;

		}



		.open-login .intro_viewer {

		  height: 200px;

		  transition-delay: 0.25s;

		}

		.display {

			opacity: 0;

			visibility: hidden;

			z-index: 0;

			display: none;

		}

		.open-login .none {

			opacity: 0;

			visibility: hidden;

			z-index: 0;

		}

		.open-login .display {

			opacity: 1;

			visibility: visible;

			display: block;

		}

		.open-login .btn {

			transform: rotate(90deg);

		  transition-delay: 0.35s;

		}

		.open-login footer {

		  opacity: 1;

		  transition-delay: 0.50s;

		  visibility: visible;

		}





a{text-decoration: none;color: black; outline: 0; }

a:hover{color:black;}

header.nav_bar{position: relative; z-index: 11; box-shadow: 1px 1px 15px #b8b8b8}

.nav_bar_aj{padding-left: 25px; font-family: 'Source Sans Pro', sans-serif;}

.nav_bar_detail{padding-right: 25px;}

.nav_bar .nav_bar{width: 100%;background-color: white;}

.nav_bar .nav_bar_aj > a:last-child{color: #c1c1c1;}

.nav_bar .nav_bar_aj > a , .nav_bar_detail > a{padding: 30px 10px; display: inline-block; font-size: 24px; letter-spacing: 1px;}

.nav_bar_detail > a:hover{color: rgb(206, 49, 49); transition: 0.5s all;}

.nav_bar .nav_bar_detail{display: flex;    justify-content: flex-end;}

.nav_bar .nav_bar_detail .closebtn{display:none;}

.nav_bar .menu_button{display: none;}



.about_t{margin-top: 50px;background-color: #dddddd;padding: 10px;text-align: center;}

.container_about{padding-top: 78px;}

.about_icon{display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 40px;}

.about_detail h5{color: #545454; font-weight: bold; font-size: 26px;}

.about_detail{width: 215px; text-align: center; padding: 5px 10px;}

.about_i{width: 40px;height: 40px;background-color: black;display: flex;justify-content: center;align-items: center; color: white; margin: auto;margin-bottom: 10px;} 

.about_detail1{padding: 0px;  width: 87px;}



.request_more .subscribe-me input[type="checkbox"] {margin-right: 5px;}   

.request_more .subscribe-me p { font-size: 14px;  width: 80%; color: #666666;}     

.request_more .subscribe-me .popup-newsletter {display: inline-block;width: 100%;}        

.request_more .subscribe-me .modal-backdrop-test.in {opacity: .5;}

.request_more .subscribe-me .fade.in {opacity: .5;  }

.request_more .subscribe-me .model-box-outer{position: sticky;top: 0;z-index:999;margin:0;}

.request_more .subscribe-me .close{ font-size:44px;position:absolute;top:-100px;right:-22px;color:red;}

.request_more .subscribe-wrap {padding: 45px 42px 15px;padding-top: 0px;}        

.request_more .subscribe-me .main-title { text-align: Center;color: #000 !important;font-size: 38px;text-shadow: 0px 0.8px 1px;opacity: 0.8;width: 100% !important;line-height: 10px !important;margin-top: 20px !important; margin-bottom: 0 !important;text-transform: uppercase;letter-spacing: 1px;font-weight: 600;font-family: 'Montserrat', sans-serif;}    

.request_more .subscribe-me {background-color: #fff;height: auto;left: 0;width: 90%;padding: 12px;right: 0;top: 20%;background-image: url('https://images.unsplash.com/photo-1542012713374-595feea1ddf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=340&q=100&h=480'); background-repeat: no-repeat;background-position: 100% center;}

.request_more .subscribe-me .theme-btn-2:hover{color:#000 !important;}

.request_more .subscribe-me .popup-newsletter:before{background-color:none !important;background:none !important;}   

.request_more .subscribe-me #paragraph_div{text-align: Center;font-size: 18px;line-height: 28px;text-shadow: 0px 0.8px 0.5px;opacity: 0.8;width: 100% !important;margin: auto auto 30px !important;}  

.request_more .subscribe-me .form-control.text::placeholder{font-size: 13px;}

.request_more .subscribe-me .form-control.text {border: 2px solid #cccccc;text-align: center;background-color: transparent;font-size: 19px;height: 45px;line-height: 37px;margin-bottom: 25px;padding: 0 15px;width: 100%;}  

.request_more .subscribe-me #button_change{width: 140px;background: red;color: #fff;padding-top: 10px;padding-bottom: 8px;}       

.request_more .subscribe-me .list-inline {padding-left: 0;margin-left: -5px;list-style: none;}

.request_more .subscribe-me .mail-info{margin-top: 15px;}

.request_more .subscribe-me .captcha_main{width:292px; margin-left: 45px;}

.request_more .subscribe-me .captcha {background-color:#f9f9f9;border:2px solid #d3d3d3;border-radius:5px;color:#4c4a4b;display:flex;align-items:center;padding: 6px;}

.request_more .subscribe-me #agree_chk_error{text-align: initial;}

.request_more .subscribe-me .text {font-size:18px;font-weight:500;}

.request_more .spinner {position:relative;width:2em;height:2em;display:flex;align-items:center;justify-content:center;}

.request_more .subscribe-me input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; }

.request_more .subscribe-me input[type="checkbox"]+.checkmark {display:inline-block;width:25px;height:25px;background-color:#fcfcfc;border:2.5px solid #c3c3c3;border-radius:3px;display:flex;justify-content:center;align-items:center;cursor: pointer;}

.request_more .subscribe-me input[type="checkbox"]+.checkmark span {content:'';position:relative;margin-top:-3px;transform:rotate(45deg);width:.75em;height:1.2em;opacity:0;}

.request_more .subscribe-me input[type="checkbox"]+.checkmark>span:after {content:'';position:absolute;display:block;height:3px;bottom:0;left:0;background-color:#029f56;}

.request_more .subscribe-me input[type="checkbox"]+.checkmark>span:before {content:'';position:absolute;display:block;width:3px;bottom:0;right:0;background-color:#029f56;}

.request_more .subscribe-me input[type="checkbox"]:checked+.checkmark { animation:2s spin forwards;}

.request_more .subscribe-me input[type="checkbox"]:checked+.checkmark>span { animation:1s fadein 1.9s forwards;}

.request_more .subscribe-me input[type="checkbox"]:checked+.checkmark>span:after {animation:.3s bottomslide 2s forwards;}

.request_more .subscribe-me input[type="checkbox"]:checked+.checkmark>span:before {animation:.5s rightslide 2.2s forwards;}

.please-select{text-align: center; padding-top: 100px;}

.login_form{display: flex;justify-content: center;align-items: center;width: 100%;height: 215px;font-family: 'Roboto', sans-serif;background-color: rgb(229, 231, 235);}

.login_form h2 {text-align:center;font-size: 2rem;font-weight: 900;color: rgb(55, 65, 81);}

.login_form form {flex-direction: column;justify-content: flex-start;align-items: flex-start;padding: 48px;margin-top: 2rem;width: 370px;background-color: #fff;border-radius: 4px;box-shadow: 0px 0px 10px lightgray; margin: auto;margin-top: 25px;}

.login_form label { display: flex;text-transform: capitalize;margin-bottom: 0.3rem;font-size: 15px; letter-spacing: 0.5px; font-weight:400;color: rgb(55, 65, 81);}

.login_form input {width: 100%;line-height: 3rem;background-color: rgb(229, 231, 235);border: 1px solid #89b7ed;border-radius: 4px; padding-left: 8px;}

input[type="submit"].login_btn {margin-top: 1.2rem;width: 100%;height: 3rem;text-transform: capitalize;font-size: 0.9rem;font-weight: 700;font-family: 'Roboto', sans-serif;color: rgb(220, 229, 247);background-color: rgb(37, 99, 235); transition: 0.5s all; border-radius: 4px;border: none;cursor: pointer;}

input[type="submit"].login_btn:hover{background-color: rgb(18, 84, 226);}

.login_main{background-color:rgb(229, 231, 235) ; height: 100vh;}

.aj_creative h3 a{ color: rgb(55, 65, 81); text-align: center; display: block; margin-top: -106px;}

.aj_Imaging h3 a{ color: rgb(55, 65, 81); text-align: center;display: block;margin-top: -106px;}

.login_form_continer , .login_imaging , .login_creative{width: 33%;}

@keyframes fadein {

	0% {opacity:0;}

	100% {opacity:1;}

}

@keyframes bottomslide {

	0% {width:0;}

	100% {width:100%;}

}

@keyframes rightslide {

	0% {height:0;  }

	100% {height:100%;}

}

.logo {display:flex;flex-direction:column;align-items:center;height:100%;align-self:flex-end;display: block;margin-left: auto;margin-right: 5px;}

.logo img {height:2em;width:2em;}

.logo p {color:#9d9ba7;margin:0;font-weight:700;font-size: 12px;}

.logo small {color:#9d9ba7;margin:0; font-size: 10px;}

@keyframes spin {

	10% {width:0;height:0;border-width:6px;}

	30% {width:0;height:0;border-radius:50%;border-width:1em;transform: rotate(0deg);border-color:rgb(199,218,245);}

	50% {width:2em;height:2em;border-radius:50%;border-width:4px;border-color:rgb(199,218,245);border-right-color:rgb(89,152,239);}

	70% {border-width:4px;border-color:rgb(199,218,245);border-right-color:rgb(89,152,239);}

	90% {border-width:4px;}

	100% {width:2em;height:2em;border-radius:50%;transform: rotate(720deg);border-color:transparent;}

}



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

	.captcha_main{margin-left: 28px;}

}     
@media (max-width: 1199px) {
	.captcha_main{margin-left: 8px;}

	.subscribe-me .main-title{}
	.intro_viewer{    height: 278px;}
	.login_creative .app{width: 265px;}
	.none a, .none{font-size: 20px;}
	.btn{bottom: 5em;}
	.login_creative .app{    width: 265px;}
	.login_form form{padding: 37px;     width: 304px;}
  }

  @media (max-width: 991px) {
	.container-login{    max-width: 780px;}
	.login_creative .app{width: 200px; height: 200px;}
	.intro_viewer {
    height: 266px;
}
h3.none{margin: 0px;}
.login_form h2{margin: 0px;}
.login_creative img{height: 100px;}
.btn{bottom: 3em;}
.login_form form{width:257px;}
  }
  @media (max-width: 768px) {
	.login_form{    justify-content: space-evenly;}
	.login_form_continer, .login_imaging, .login_creative{width: auto;}
	.login_creative .app{width:  167px; height: 167px;}
	.login_form form{width: 310px;}
	.login_form_continer{margin-top: 25px;}
  }
@media screen and (max-width: 500px) {

	.captcha {flex-direction:column;}

	.text {margin:.5em!important;text-align:center;}

	.logo {align-self: center!important;}

	.spinner {margin:2em .5em .5em .5em!important;}

}
@media screen and (max-width: 575px) {
.login_form{flex-direction: column;     justify-content: inherit;}
.login_creative .app {
    width: 114px;
    height: 114px;
}

}