/*----------------------------------------------
css settings for HTML div exactCenter
------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Raleway);

*{
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

.close {
  position: absolute;
  left: auto;
  top: 20px;
  right: 20px;
  bottom: auto;
  width: 20px;
  height: 20px;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  cursor: pointer
}

.close:hover {
  -webkit-transform: rotate(90deg) scale(1.15);
  -ms-transform: rotate(90deg) scale(1.15);
  transform: rotate(90deg) scale(1.15)
}

#main{
  font-family:raleway;
}

html, body {
  height: 100%;
  margin: 0
}

.wrapper {
  min-height: 100%;
  height: 100%;
  margin: auto;
  max-width: 1333px
}

.button{
  background-color:#ff9900;
  color: white;
  padding: 8px 16px;
  border: 0;
  font-style: normal;
  font-weight: normal;
  line-height: 12px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: 0.3s
}

.stroke{
  background-color: #111
}

.stroke:hover{
  font-size: 18px
}

.circle{
  padding: 16px;
  border-radius: 50%;
  height: 60px;
  width: 60px
}

.circle img{
  width: 100%
}

body{
  background-color: #c5c5c5
}

#listSigned{
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: auto;
}

.card{
  width: 320px;
  flex-shrink: 0;
  background-color: #eee;
  border: 1px solid #ddd;
  margin-left: 12px;
  margin-right: 12px;
  padding-left: 12px;
  padding-right: 12px;
  box-shadow: 24px 17px 16px -10px rgba(0,0,0,0.1);
  min-height: 190px;
  position: relative;
  cursor: pointer
}

.card h4{
  font-weight: 200
}

.bottom{
  position: absolute;
  bottom: 8px;
  left: 12px
}

span{
  color:red
}

nav{
  text-align: center;
  width: 100%;
  background-color: #eee;
  display: flex;
  height: 48px;
  box-shadow: 0px 18px 18px -12px rgba(0,0,0,0.2);
  padding: 12px
}

.v-center{
  vertical-align: middle;
  align-items: center;
  display: flex
}

.pointer{
  cursor: pointer
}

.mr-8{
  margin-right: 8px
}

nav img {
  height: 100%
}

.left{
  text-align: left
}

img.interactive{
  transition: 0.3s all;
  cursor: pointer
}

img.interactive:hover{
  scale: 0.9
}

.w-25{
  width: 25%
}

.w-50{
  width: 50%
}

.w-100{
  width: 100%
}

.h-100{
  height: 100%
}

.center{
  text-align: center
}

.right{
  text-align: right
}

.dropdown-content:after{
  bottom: 84%;
  left: -10px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  transform: rotate(270deg);
}

.dropdown-content:before {
  bottom: 80%;
  left: -11px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  transform: rotate(270deg)
}

.dropdown-content:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 5px;
  left: 5px;
  background-clip: padding-box
}

.dropdown-content:before {
	border-color: rgba(184, 184, 184, 0);
	border-bottom-color: #b8b8b8;
	border-width: 6px;
  background-clip: padding-box
}

.dropdownLinks-container {
  display: none
}

.links{
  position: relative
}

.links:hover .dropdownLinks-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 24px;
  left: 0px;
  box-shadow: 0 3px 4px 0.08px rgba(0, 0, 0, 0.2)
}

.dropdownLinks-links {
  position: relative;
	background: white;
	border: 1px solid #b8b8b8;
}

.dropdownLinks-links:after, .dropdownLinks-links:before {
	bottom: 100%;
	left: 4px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.dropdownLinks-links:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 5px;
  left: 5px;
  background-clip: padding-box
}

.dropdownLinks-links:before {
	border-color: rgba(184, 184, 184, 0);
	border-bottom-color: #b8b8b8;
	border-width: 6px;
  background-clip: padding-box;
}

.dropdownLinks-links, .flex-col {
  display: flex;
  flex-direction: column;
}

.dropdownLinks-link {
  text-decoration: none;
  padding: 8px 38px 8px 8px;
  color: black;
}

.gear{
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

div.main{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 28;
  padding: 8px 16px
}

#login h2{
  background-color:#ff9900;
  text-align:center;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  line-height: normal;
  font-size: 20px;
  color:white;
  margin-top: -10px;
  padding: 15px
}

h2.man{
  background-color:rgba(245,245,245,1.00);
  text-align:center;
  color:rgba(15,15,15,1.00);
  border-radius: 4.5px 4.5px 0 0;
  margin: -10px -40px;
  padding: 15px
}

hr{
  border:0;
  border-bottom:1px solid #ccc;
  margin: 10px -40px;
  margin-bottom: 30px
}

#login{
  width:400px;
  font-style: normal;
  padding-bottom: 20px;
  background-color:#F5F5F5;
  color:rgba(15,15,15,1.00);
  margin: auto;
  margin-top: 40px;
  box-shadow: 16px 23px 17px -1px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(-50px)
}

#sms{
  font-size:12px;font-weight:300;color:#ff9900
}

#login form{
  padding: 0 58px
}

#login label{
  font-weight: 300;
  line-height: 14px;
  font-size: 12px;
  color: #111
}

input[type=text],input[type=password]{
  width:99.5%;
  padding: 10px;
  margin-top: 8px;
  border: 0px solid #ccc;
  padding-left: 5px;
  font-size: 16px;
  border-radius:1px;
  font-family:raleway;
  color:rgba(15,15,15,1.00)
}

input[type=submit]{
  width: 100%;
  background-color:#ff9900;
  color: white;
  padding: 10px;
  border: 0;
  height: 40px;
  font-style: normal;
  font-weight: normal;
  line-height: 12px;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase
}
#profile{
  padding:50px;
  border:1px dashed grey;
  font-size:20px;
  background-color:#DCE6F7
}

#logout{
  float:right;
  padding:5px;
  border:dashed 1px gray
}

a{
  text-decoration:none;
  color: cornflowerblue
}

i{
  color: cornflowerblue
}
/*-----------------------------------------------------------------
css settings for right side advertisement
------------------------------------------------------------------*/
#formget{
  float:right
}

.flex-center{
  align-content: center;
  justify-content: center
}

#container{
  width:190px; height:190px;
  position:relative;
  left:50%;transform: translateX(-50%);
  border:7px solid rgba(0,0,0,0.8);
  border-radius:50%;
  box-shadow: 0px 0px 30px 0px #ff9900 , 0px 0px 150px 0px #ffb649 , inset 0px 0px 50px 0px rgba(0,0,0,0.7) ;
  background:rgba(255,255,255,0.2);
}

.R-T , .R-D{
  width:300px; height:300px;
  position:absolute;
  left:50%; top:50%; transform: translate(-50%,-50%);
  opacity:0.8;
  overflow:visible;
  z-index:1;
}

.R-T {clip:rect(0px 300px 150px 0px);   }
.R-D {clip:rect(150px 300px 300px 0px);  }

#core{
  text-align:center;
  position:absolute;
  left:50%; top:50%;
  display: flex;
  align-items: center;
  align-content: center;
  width:80px; height:80px;
  background-color:#ff9900;
  border-radius:50%;
  transform: translate(-50%,-50%);
  z-index:1;
  box-shadow: inset 0px 0px 2px 5px rgba(0,0,0,0.3) , inset 0px 0px 30px 0px rgba(0,0,0,0.5) ;
  text-shadow: 0px 4px 0px rgba(0,0,0,0.5);
}

svg{overflow:visible}