body {

	/*font-family: "Verdana";*/
	/*font-family: "Impact";*/

	font-family: "Helvetica";
	font-weight: bold;
		
}

table {
	
	font-size: 15px;
	margin-left: 30px;
}

table caption{

	font-size: 20px;
}

.wrapper {
	width: 60%;
	max-width: 1300px;
	margin: 0 auto;
	background-color: #e3e4e5;
	padding: 0 35px 0 35px;
}

.titlefield {
	align-items: center;
	margin: 0;
	font-size: 40px;	
    padding: 20px 0 20px 30px;
}

.loader {
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 50px !important;

	-webkit-animation-name: spin;
	-webkit-animation:anirotate 1.5s ease infinite;
}

.material-icons {
	font-size: 12px;
}


.book_roll {
	position: relative;
	width: 50%;
	/*margin: 0 auto;*/
	color: #404040;
}


.book_cell {
	display: flex;
	cursor:pointer;
	align-items: center;
	position: relative;
	width: 100%;
	height: 70px;
	background-color: white; 
	padding: 2px 0px 2px 0px;
	transition: height .05s ease-out, width .4s ease-out ;
}

.book_cell:hover {
	background-color: #ccf2ff;
}

.book_cell:active {
	background-color:  #00bfff;
}

.chevronUp {

	margin: 0 0 0 20px;
}

.card {

	/*cursor:pointer;*/
	position: relative;
	width: 100%;
	height: 100%;
	/*font-size: 10px;*/
	background-color: #f7f9f9; 
	padding: 30px 0 30px 0px;
	border-style: solid;
	border-color: #8e8e8e;
	border-width: 0 0 1px 0;
	-webkit-animation: fadeIn 0.5s;

}

.editable {
	background-color: white;
	box-shadow: inset 0px 1px 30px rgba(0,0,10,0.5);
}

.contact_icon {
	position: relative;
	height: 70%;
	border-radius: 50%;
	margin:0 30px 0 30px;
	pointer-events: none;

}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.textfield {
	position: relative;
	width: 100%;
	heigth: 100%;
}

.buttonfield {
	position: relative;
	display:block;
	width: 100%;
}

.btn {
	float: right;
	position: relative;
	background-color: #f7f9f9;
	text-align: center;
	font-size: 13px;
	font-weight: bolder;
	margin-right: 30px;
}

.edit_btn {
	border-radius: 5px;
	background-color: white;
	text-align: center;
	font-size: 13px;
	font-weight: bolder;
	margin: 5px;
	padding: 15px 10px 15px 10px;
}

.btn:hover, .editable:hover {
	background-color: #ccf2ff;
	cursor: pointer;
}

.btn:active {
	background-color: #00bfff;
}


.hide {
	display: none !important ;
}


/* Animations */

@-moz-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    33% { color:#404040}
	66%	{ color:grey}
    to   {-webkit-transform: rotate(360deg);} 
}

@-webkit-keyframes anirotate {
    from {-webkit-transform: rotate(0deg);}
    33% { color:#404040}
	66%	{ color:grey}
    to   {-webkit-transform: rotate(360deg);} 
}

@keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    33% { color:#404040}
	66%	{ color:grey}
    to   {-webkit-transform: rotate(360deg);} 
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}


/* Adaptive */


@media (max-width:1000px){
	
	

	.wrapper {
	width: 100%;
	padding: 0 !important;

	}

	 .book_roll {
	width: 100%;

	}

	.book_cell {
		height: 200px;
		font-size: 60px;
	}
	
	.titlefield{
		font-size: 90px;
	}


	table {font-size: 40px !important;}
	
	.material-icons {font-size: 60px !important;}
	
	.chevronUp {font-size: 70px !important;}

}