/* Full-width input fields */
input[type=text], input[type=email], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
/* button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
} */

button:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
    background-color: #337ab7;
    border-radius: 5px;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}


.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */


/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}

img.avatar {
  width: 15%;
  border-radius: 50%;
}
.container.login {
    width: 100%;
}
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 5% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 100%; /* Could be more or less, depending on screen size */
}
.modal-content.login {
    width: 35%;
}


.p-30 {
    padding: 30px !important;
}
.mail-content {
    padding: 100px 20px;
    margin-top: 50px;
}
h1.mail-verify.red {
    color: red;
}

h1.mail-verify {
    margin: 0;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -1px;
    color: #7799c1;
    line-height: 48px;
}
p.mail-verify {
    padding: 20px;
    font-family: Source Sans Pro, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}
.row.messages {
    border: 1px solid #ddd;
    padding: 10px;
    height: 617px;
    overflow-y: scroll;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.panel-heading.msg {
    overflow: hidden;
}
.msg_logo {
    width: 32px;
    height: auto;
}
.p-l-10 {
	padding-left : 10px;
}
.p-l-20 {
	padding-left : 20px;
}
.p-l-30 {
	padding-left : 30px;
}
.p-l-40 {
	padding-left : 40px;
}
.p-l-50 {
	padding-left : 50px;
}
::-webkit-scrollbar {
    display: none;
}
.m-b-10 {
	margin-bottom : 10px;
}
.m-b-20 {
	margin-bottom : 20px;
}
.m-b-30 {
	margin-bottom : 30px;
}
.m-b-40 {
	margin-bottom : 40px;
}
.m-b-50 {
	margin-bottom : 50px;
}

span.glyphicon.glyphicon-trash {
    color: red;
    font-size: 18px;
}
span.glyphicon.glyphicon-pencil {
    color: blue;
    font-size: 18px;
}
.remove-msg {
    border: none;
	margin-left: 3%;
}
.remove-cmnt {
    border: none;
	background-color: #fff;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.hover:hover .home_page_photo {
  opacity: 0.3;
}

.hover:hover .middle {
  opacity: 1;
}

.photo_title {
  background-color: #888;
  color: #fff;
  font-size: 16px;
  padding: 16px 32px;
}

.bg-image-body{
    background-image: url(../images/Global-Day-Of-Parents-1.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}
.h1-mobile {
    display: none;
}
.img_tit_st {
    bottom: 25px;
    position: absolute;
    padding: 5px;
    background-color: #888;
    overflow: hidden;
    max-width: 80%;
    width: 100%;
	text-align: center;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.img_tit_st_s {
    bottom: 25px;
    position: absolute;
    padding: 5px;
    background-color: #888;
    overflow: hidden;
    max-width: 77%;
    width: 100%;
	text-align: center;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.img_tit_st1 {
    bottom: 0px;
    position: absolute;
    padding: 5px;
    background-color: #888;
    overflow: hidden;
    max-width: 82.5%;
    width: 100%;
	text-align: center;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


#loading{
  visibility: hidden;
  display: none;
}
#loading.visible{
  display:flex;
  justify-content: center;
  visibility: visible;
  min-height: 490px;
}
.loader {
	margin-top: 150px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.statusMessage, .statusMessage1 {
    color: #28a745;
    font-weight: bold;
    text-align: center;
	display: none;
}
.statusMessage.visible, .statusMessage1.visible {
    display: block;
}
.errormessage, .errormessage1 {
    color: red;
    text-align: center;
    font-weight: bold;
	display: none;
}
.errormessage.visible, .errormessage1.visible {
    display: block;
}
@media only screen and (max-width: 600px) {
	img.avatar {
	width: 40%;
	border-radius: 50%;
}
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 100%; /* Could be more or less, depending on screen size */
}
.modal-content.login {
    width: 100%;
}
.bg-image-body{
    background-image: url(../images/Global-Day-Of-Parents-2.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}
.pop-container {
    width: 100% !important;
}
}
@media only screen and (max-width: 767px) {
	.h1-mobile {
    display: block;
}
}