/*=======================================================================================
| Project Name: Amazon Transcribe Medical
| Author: Berkine
| Author URL: https://codecanyon.net/user/berkine/portfolio
| Version: 1.0
| File name: client/styles.css
| Date Created: 15.11.2020
| Website: envato.berkine.cloud/medical
========================================================================================= */


/* -------------------------------------------- */
/*             TABLE OF CONTENTS
/* -------------------------------------------- */
/*   01 - Global Styles				            */
/*   02 - Title	Layout				           	*/
/*   03 - Demo Layout				            */
/*   04 - Features Layout			            */
/*   05 - Copyright  				            */



/* ==========================================================================           
 *
 *    01 - GLOBAL STYLES
 *
 * ========================================================================== */

body {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #0E2E40;
}

section {
	background: #FFF;
}

h3 {
	font-family: 'Poppins', sans-serif;
	color: #25252B;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 20px;
	text-shadow: 0 1px 2px rgba(37,37,37,.3);
}

h3 span.highlight {
	color: #7B83EB;
}

h6 {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	color: #25252B;
	font-weight: 800;
	text-transform: uppercase;
}

h6 span {
	color: #4B53BC;
}

h6 span.highlight {
	color: #7B83EB;
}

a,
a:hover,
a:focus {
  outline: none;
  text-decoration: none;
}



/* ==========================================================================           
 *
 *    02 - TITLE LAYOUT
 *
 * ========================================================================== */

#title {
	box-shadow: 0 3px 6px rgba(37,37,43,.8);
	padding: 2rem;
	background: #000;
}

#title h3 {
	color: #FFF;
	margin-bottom: 0;
	text-shadow: 0 1px 3px rgba(37,37,43,.7);
}

#title h6 {
	color: #FFF;
	margin-bottom: 0;
}



/* ==========================================================================           
 *
 *    03 - DEMO LAYOUT
 *
 * ========================================================================== */

#demo {
	padding-top: 80px;
	padding-bottom: 80px;
}

#demo h3 {
	margin-bottom: 1rem;
}

#demo hr {
	border: 2px solid #4B53BC;
	width: 5%;
	margin-bottom: 3.5rem;
}

#demo h6 {
	margin-bottom: 4rem;
	text-shadow: 0 1px 2px rgba(37,37,37,.3);
}

#demo p {
	font-size: 10px;
	text-transform: uppercase;
	color: #505050;
}

#demo .box-wrapper {
	padding-left: 2rem;
	padding-right: 2rem;
}

#demo .box-wrapper h6 {
	margin-bottom: 1.5rem;
}

#demo .box {
	position: relative;
	overflow: hidden;
	height: 300px;
	margin-bottom: 1rem;
	background-position: top;
	transition: ease-in-out 0.5s;
	-webkit-box-shadow: 0px 0px 7px 2px rgba(37,37,43,0.3);
	-moz-box-shadow: 0px 0px 7px 2px rgba(37,37,43,0.3);
	box-shadow: 0px 0px 7px 2px rgba(37,37,43,0.3);
}

#demo .box1 {
	background: url('../img/file.jpg');
	background-size: cover;
}

#demo .box2 {
	background: url('../img/record.png');
	background-size: cover;
}

#demo .box:hover {
	background-position: bottom;
}

#demo .box-hover {
  top: 0;
  position: absolute;
  background: rgba(10, 10, 10, 0.7);
  opacity: 0 ;
  transition: all 0.5s ease;
  width: 100%;
  height: 100%;
}

#demo .box-button {
  bottom: -50px;
  position: absolute;
  text-align: center;
  width: 100%;
  color: #FFF;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
} 

#demo .box-button a {
  color: #FFF;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 30px;
  text-align: center;
  border: 1px solid #4B53BC;
  background: #4B53BC;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-box-shadow: 0px 0px 7px 2px rgba(37,37,43,0.5);
	-moz-box-shadow: 0px 0px 7px 2px rgba(37,37,43,0.5);
	box-shadow: 0px 0px 7px 2px rgba(37,37,43,0.5);
}

#demo .box:hover .box-hover,
#demo .box:hover .box-button {
  	opacity: 1;
}

#demo .box:hover .box-button {
  	-webkit-transform: translateY(-190px);
  	-moz-transform: translateY(-190px);
  	transform: translateY(-190px);
}

#demo .box-button a:hover {
  	background-color: #000;
  	color: #FFF;
  	border-color: #000;
}



/* ==========================================================================           
 *
 *    04 - FEATURES LAYOUT
 *
 * ========================================================================== */

#features {
	padding-top: 64px;
	background: #FFF;
/*	-webkit-box-shadow: 0px -3px 6px 0px rgba(37,37,43,.8), 0 3px 6px rgba(37,37,43,.8);
	-moz-box-shadow: 0px -3px 6px 0px rgba(37,37,43,.8), 0 3px 6px rgba(37,37,43,.8);
	box-shadow: 0px -3px 6px 0px rgba(37,37,43,.8), 0 3px 6px rgba(37,37,43,.8);*/
}

#features h3 {
	color: #25252b;
	margin-bottom: 4rem;
}

#features .col-md-3 {
	margin-bottom: 1rem;
}

#features .no-btm-mg {
	margin-bottom: 0;
}

#features .feature {
	background: #F7f7f7;
	color: #25252b;
	vertical-align: middle;
	padding: 2rem;
	font-size: 12px;
	margin-bottom: 1rem;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1);
	box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1);
}

#features .feature i {
	font-size: 48px;
	margin-bottom: 1rem;
	color: #4B53BC;
}

#features .feature i.special {
	font-size: 38px;
	padding-top: 1.1rem;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	color: #4B53BC;
}


#features .feature p {
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 800;
}

#features .feature p.ligth {
	font-weight: 600;
}

#features .feature p:last-child {
	margin-bottom: 0;
}

#features .feature:hover {
	background: #25252b;
	color: #fff;
	cursor: pointer;
	transition: all 0.5s ease;
}

#features .feature:hover i {
	color: #FFF;
}

#features #logo {
	margin-top: 4rem;
	margin-bottom: 4rem;
}

#features #logo h6 {
	color: #25252b;
	font-size: 10px;
	text-shadow: 0 1px 2px rgba(37,37,37,.3);
}

#features #logo img {
	width: auto;
	height: 40px;
}



/* ==========================================================================           
 *
 *    06 - COPYRIGHT LAYOUT
 *
 * ========================================================================== */

#copyright {
	box-shadow: 0 -3px 6px rgba(37,37,43,.8);
	background: #000;
	padding: 32px;
}

#copyright p {
	color: #FFF;
	margin-bottom: 0.5rem;
	font-size: 10px;
}

#copyright p span {
	color: #7B83EBC;
}

#copyright p:last-child {
	margin-bottom: 0;
}