@import url(https://fonts.googleapis.com/css?family=Raleway:700,400,300);

html, h1, h2, h3, h4, h5, h6, p {
    font-family: Calibri, sans-serif;
}
p {
    line-height: 24px;
    font-size: 15px;
}

h1, h2, h4{
	font-weight: bold;
}

h4{
	text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6, p, img, .btn {
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.dark-stroke, .white-stroke, .clients-stroke, .clients-logos img{
	display: block;
	margin: 0px auto;
}

.container{
	overflow: hidden;
	position: relative;  	
}


/*body{
	height: 100%;
	margin : 0; 
}*/

body form{
	padding: 0 !important;
	margin: 0 !important;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #4c4c4c;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #4c4c4c;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #4c4c4c;
}

html { 
  background: url(/perennial_website/static/src/img/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.head{	
    border-width: 0;  
    position: relative;        
     width: 100%;
    height: 100%;
    
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%), url('/perennial_website/static/src/img/bg-img-1.jpg') center;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;	  


}

.login_head {
	background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%), url('/perennial_website/static/src/img/bg-img-1.jpg') center;
}

.left_navigation {
	text-align: right;
	padding-top: 20px;

}

.left_navigation a{	
	padding-left: 15px;
	color: #fff;
}



input[type="checkbox"] {
  visibility: hidden;
  display: none;
}
label {
  cursor: pointer;
  font-weight:normal;
}
input[type="checkbox"] + label:before {
  border: 1px solid #333;
  background-color :#26262B;
  content: "\00a0";
  display: inline-block;
  font: 16px/1em sans-serif;
  height: 16px;
  margin: 0 .50em 0 0;
  padding: 0;
  vertical-align: top;
  width: 16px;
}
input[type="checkbox"]:checked + label:before {
  background: #fff;
  color: #333;
  content: "\2713";
  text-align: center;
}




/* Login Page */

.left_pane {position: relative;height: 100%}
.left_pane .abs{position: absolute;text-align: center;bottom: 0;width: 100%}
.left_pane .abs .block{padding: 50px 100px;}
.left_pane .abs .block img{padding-bottom: 10px;}
.left_pane .abs .block_header {width: 100%;color: #ccc;display: block;text-align: center;font-weight: bold;font-size: 17px;margin-bottom: 10px;}
.left_pane .abs .block_text {width: 100%;color: #ccc;display: block;text-align: center;}
.left_pane .abs .button_div {width: 100%;text-align: center;clear: both;}
.left_pane .abs .button_div .button{border-radius: 20px;background: transparent;border:1px solid #4594F3;margin:0 auto;padding: 10px;color: #fff;}
form.oe_login_form {margin:0 !important;}
.alert{margin-top: 10px !important;margin-bottom: 10px;}
.right_pane {background: #19191E;height: 100%}
.right_pane .logo_div{width: 100%;text-align: center;margin:0 auto;margin-top: 100px;}
.right_pane .logo_div img {margin:0 auto}
.right_pane .login_div {width: 100%;text-align: center;margin:0 auto;margin-top: 50px;background: #19191E}
.right_pane .login_div .header{font-weight: bold;color: #fff;font-size: 18px;margin-bottom: 10px;display: block;}
.right_pane .login_div .db_selection{width: 100%;text-align: center;margin:0 auto;margin-top: 10px;background: #19191E;color: #fff;border-radius: 5px;padding: 10px;}
.right_pane .login_div .field_div{padding: 10px;}
.right_pane .login_div .username{padding: 15px;width: 100%;background: #26262B;border:none;border-radius: 5px;color:#a0a0a0}
.right_pane .login_div .password{padding: 15px;width: 100%;background: #26262B;margin-top: 10px; border:none;border-radius: 5px;color:#a0a0a0}
.right_pane .login_div .forgot_div{color: #ccc;padding:10px;}
.right_pane .login_div .remember_me {float: left;text-align: left;}
.right_pane .login_div .checkbox_style{background: #26262B;border:none;vertical-align: text-bottom;padding-right: 5px;}
.right_pane .login_div .remember_text{padding-left: 5px;}
.right_pane .login_div .forgot_field{float: right;text-align: right;}
.right_pane .login_div .forgot_field a{color:#fff;font-size: 14px;padding:0;font-weight:bold}
.right_pane .login_div .forgot_field a:hover{text-decoration:none}
.right_pane .login_div .button_div{padding: 10px;padding-top: 35px;}
.right_pane .login_div .button_div button{background: #4594F3;color: #fff;padding: 15px;font-weight:bold;border:none;width: 100%;border-radius: 5px}
.right_pane .login_div .button_div button:hover,.right_pane .login_div .button_div button:focus{box-shadow:0px 0px 8px 2px #888888;transition: box-shadow 0.3s ease-in-out;}
.right_pane .login_div .footer{font-weight: bold;color: #fff;margin-top: 30px;display: block;}
.right_pane .login_div .footer a{color: #fff;}
.right_pane .login_div .footer a:hover{text-decoration:none}

.footer_links {padding-left: 0px;}
.footer_links li {list-style: none;display: inline-block;}
.footer_links li a {color: #fff}
.footer_links li a:hover {text-decoration: none;}
.footer_nav {text-align: center;border:0;background: #19191E;width: 95%;position: absolute;bottom: 20px;}
.footer_nav a{color:#fff;padding: 20px}

.header_subtext {display: block;padding: 25px 10px; color: #fff;}


.logo_img {
	width: 150px;
}

.download_button_a{
	width: 50%;float: left;padding-top: 30px
}

.download_button_a .btn_l {
	width: 90%;height: 70px
}
.download_button_a .btn_r {
	width: 90%;height: 70px;padding-left: 10px;
}

.social img{
	margin-top: 65px;
	float: right;
	padding-left: 14px;
}

.main-content{
	margin-top: 24px;
	color: #fff;
}

.header_content {
	margin-top: 50px;
}

.main-content h1{
	font-size: 42px;
	line-height: 54px;
}

.main-content p{
	font-weight: 400;
	font-size: 16px;
}

.phone-mockup img{
	float: right;
	vertical-align: bottom;
	height: 532px;
	width: auto;

}

.home-btn{
	margin-top: 22px;
	font-size: 13px;
	width: 180px;
	height: 42px;
	border-radius: 5px;
	color: #6b6868;
	background-color: #eeedec;
	margin-right: 20px;
	border: none;
}

.home-btn:hover{
	background-color: #D8D8D8;
}

.services{
	padding-top: 30px;
	padding-bottom: 30px;
	background-color: #6B6868;
	color: #fff;
	text-align: center;
}

.services-list{
	padding-top: 30px;
	padding-bottom: 30px;
}

.services h4, .services p{
	padding-right: 30px;
	padding-left: 30px;
}

.services h4{
	padding-bottom: 4px;
	margin-top: 28px;
}

.services-list:hover h4{
	letter-spacing: 0.5px;
}

.title-description{
	font-size: 16px;
}

.features{
	margin-bottom: 80px;
	margin-top: 70px;
	color: #6b6868;
}

.features-title{
	margin-bottom: 70px;
	text-align: center;
}

.dark-stroke{
	border-bottom: 2px solid #6b6868;
	width: 80px;
	margin-top: 12px;
	margin-bottom: 18px;
	
}

.features-left{
	text-align: right;
	margin-top: 40px;
}

.features-right{
	text-align: left;
	margin-top: 40px;
}

.features-left h4, .features-left p{
	padding-right: 60px;
}

.features-left div:hover h4, .features-right div:hover h4{
	color: #202020;
}

.features-right h4, .features-right p{
	padding-left: 60px;
}

.features-left div, .features-right div{
	margin-bottom: 36px;
}

.features-list-1 img, .features-list-2 img, .features-list-3 img{
	transform:translate(0px, 66px);
}

.features-list-4 img, .features-list-5 img, .features-list-6 img{
	transform:translate(0px, 66px);
}


.appmockup{
	position: relative;
	text-align: center;
}

.phone-img{
	position: absolute;
	text-align: center;
	transform:translate(-261px, 0px);
	top: 70px;

}

.screenshots-title{
	margin-bottom: 70px;
	text-align: center;
}

.screenshots{
	padding-top: 80px;
	padding-bottom: 80px;
	background-color: #f8f8f8;
}

#owl-slider .item{
	margin: 3px;
}
#owl-slider .item img{
	display: block;
	height: auto;
	width: 100%;
	border-radius: 5px;
	text-align: center;
	opacity: 0.9;
	transform: scale(0.95);
    }

#owl-slider .item img:hover{
	opacity: 1;
	transform: scale(1.0);
}

.form-inline{
	padding-top: 20px;
}

.form-inline .form-control{
	width: 412px;
	height: 46px;
	background-color: #545151;
	color: #fff;
	border-color: #666666;
}

.form-inline .btn{
	width: 120px;
	height: 46px;
	background-color: #545151;
	color: #fff;
	border-color: #666666;
}

.form-section{
	background-image: url('/perennial_website/static/src/img/bg-img-1.jpg');
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-width: 0;
    width: auto;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
    color: #fff;
}

.form-section p{
	margin-top: 14px;
}

.white-stroke{
	border-bottom: 2px solid #ffffff;
	width: 80px;
	margin-top: 12px;
	margin-bottom: 18px;
	
}

.our-clients{
	text-align: center;
	margin-top: 70px;
	margin-bottom: 70px;
	color: #6b6868;

}

.clients-title{
	margin-bottom: 70px;
	text-align: center;
}

.clients-stroke{
	border-bottom: 2px solid #6b6868;
	width: 80px;
	margin-top: 12px;
	margin-bottom: 14px;	
}

.our-clients div{
	padding-right: 30px;
	padding-left: 20px;	
}

.our-clients .col-md-4{
	padding-bottom: 20px;
	padding-top: 20px
}

.clients-list div:hover h4{
	color: #202020;
}

.clients-list h4{
	padding-top: 20px;
	padding-bottom: 0px;
	margin: 0px;
}

.clients-logos{
	padding-top: 30px;
	padding-bottom: 30px;
	background-color: #6B6868;

}

.faq{
	padding-top: 70px;
	padding-bottom: 70px;
	background-color: #f8f8f8;
}

.faq h4{
	text-transform: none;
	color: #6B6868;	
}

.faq-title{
	margin-bottom: 40px;
	text-align: center;
}

.faq-list div{
	padding-top: 30px;
}

.faq-list div:hover h4{
	color: #202020;
}

.download-section{
	margin-top: 50px;
	margin-bottom: 50px;
	color: #6b6868;
}

.download-section h2{
	font-size: 26px;
}

.btn-lg{
	float: right;
	border-radius: 5px;
	color: #fff;
	background-color: #6b6868;
	padding-top: 16px;
	padding-bottom: 16px;
	width: 384px;
	margin-top: 22px;
}

.btn-lg:hover{
	background-color: #202020;
	color: #fff;
}

.footer-info{
	padding-top: 30px;
	padding-bottom: 24px;
	background-color: #323232;
	color: #fff;
}

.footer-info img{
	width: 30px;
	height: auto;
}

.footer-nav ul{
	text-decoration: none;
	text-align: right;
	list-style-type: none;
	margin-top: 10px;
}

.footer-nav li{
	display: inline;
	padding-right: 6px;
}

.footer-nav li a{
	color: #c0c0c0;
}

.footer-info p{
	color: #fff;
	margin-top: 10px;
	text-align: right;
}
@media only screen and (max-width: 1350px) {
	.left_pane .abs .block{padding: 50px 20px;}	
}

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

		.features-left, .features-left div{
		margin-top: 0px;
		margin-bottom: 0px;
		}

		.features-right, .features-right div{
		margin-top: 0px;
		margin-bottom: 0px;
		}

		.appmockup img{
		width: 220px;
		height: auto;
		margin-top: 75px;
		}

		.phone-img{
		transform:translate(-205px, 0px);
		top: 55px;
		width: 190px !important;
		height: auto;
		}

		.download-section, .btn-lg{
		text-align: center;
		float: none;
		}
		
		body{
			min-height: 100%;			
			height: auto;
		}
		.header_content {
			margin-top: 20px;
		}
		.phone-mockup img{				
			margin-top: 20px;
		}

}

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

		.footer-info, .footer-info p{
			display: block;
			text-align: center;
			margin: 0px auto;
		}

		.form-inline .form-control{
		display: block;
		margin: 0px auto;
		}

		.footer-nav ul {
			margin-left: 0 !important;
			padding-left: 0 !important;
			text-align: center !important; 
		}

		.login_head {position:absolute}
		.footer_links {margin-bottom: 20px;}
		.left_pane{display: none;}
		.right_pane{width: 100% !important}
		.login_head {height: auto;}
		.footer_nav {position: relative;padding-top: 100px;display: block;bottom: 0;width: 100%}

}

@media only screen and (max-width : 600px) {
	.download_button_a {
		display: block;
		clear: both;
		width: 100%;
		text-align: center;
	}

	.download_button_a img{
		width: auto !important;
	}
	.phone-mockup img{				
		height: 330px;
	}
}



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

		.our-clients div{
		padding-right: 10px;
		padding-left: 10px;
		}

		.home-btn{
			width: 100%;
		}

		.form-inline .form-control{
		width: 100%;
		}

		.form-inline .btn{
		width: 50%;
		}

		.btn-lg{
			width: 100%;
		}
}