@charset "utf-8";
/* CSS Document */

body {margin:0; padding:0;font-family: 'Work Sans', sans-serif;}
*{margin:0; padding:0; box-sizing:border-box;}
h1,h2,h3,h4,h5,h6 {font-family: 'Ubuntu', sans-serif;}
h1 {font-size:24px; padding:0 0 30px;}
h2 {font-size:22px;}
h3 {font-size:20px; padding:0 0 30px;}
h4 {font-size:18px; padding:30px 0;}
h5 {font-size:16px;}
h6 {font-size:14px;}
.full-width,
.header,
.main {width:100%; float:left;}
.header {padding:20px 0; text-align:center;}
.container {display:table; width:100%; height:100vh; height:548px; padding:30px;}
.container h1 {color:#ffffff; font-size:60px; text-align:center; font-weight:300; text-shadow:1px 1px 1px rgba(0,0,0,0.5)}
.container h3 {color:#ffffff; font-size:24px; text-align:center; font-weight:500;}
.container h4 {color:#ffffff; text-align:center; font-weight :300;}
.container h4 span {font-weight:500;}
.container p {color:#ffffff; font-size:18px; padding:15px 0; text-align:center; font-weight:500;}
.wrapper {max-width:1250px; margin:0 auto; display:block; padding:0;}
.bg-graident {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cd1169+0,f48a5b+100 */
background: #cd1169; /* Old browsers */
background: -moz-linear-gradient(top, #cd1169 0%, #f48a5b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #cd1169 0%,#f48a5b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #cd1169 0%,#f48a5b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd1169', endColorstr='#f48a5b',GradientType=0 ); /* IE6-9 */}

.formBx {width:100%; max-width:500px; margin:0 auto;}
.formBx .colBx {float:left; width:100%; margin:0 0 5% 0; padding:0; position:relative;}
.formBx .colBx input[type="text"] {width:100%;}
.formBx .colBx input[type="Submit"] {float:right;}
input[type="text"] {border:#fbd0e4 1px solid; padding:12px 8px; background:#ffffff; font-size:14px; color:#454545; border-radius:5px;}
input[type="button"],
input[type="Submit"],
input[type="Submit"]:focus {color:#ffffff; border:#000000 1px solid; background:#454545; font-size:14px; font-weight:normal; line-height:22px; padding:8px 20px; border-radius:5px; text-transform:uppercase;}

input:focus {outline-color:#cbe9f6; background:#dff3fb;}

.validate-message-bx {position:absolute; right:0; top:-42px; z-index:1;color:#ffffff; background:rgba(0,0,0,.8); border-radius:5px; padding:8px; font-size:13px; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
.validate-message-bx:after {content:''; position:absolute; left:0; right:0; bottom:-7px; z-index:1; margin:0 auto; width:13px; height:13px; background:rgba(0,0,0,.8); border:rgba(0,0,0,.8) 1px solid; border-width:0 1px 1px 0; transform:rotate(46deg); -webkit-transform:rotate(46deg); -moz-transform:rotate(46deg); -o-transform:rotate(46deg); -ms-transform:rotate(46deg); -sand-transform:rotate(46deg);}


.footer {width:100%; display:table; background:#454545; min-height:100px;}
.footer p {width:100%; text-align:center; vertical-align:middle; display:table-cell; color:#ffffff; font-size:14px; font-family: 'Work Sans', sans-serif;}
.footer p a {color:#ffffff; font-weight:500;font-family: 'Work Sans', sans-serif;}


/*Profile Page*/

.circleBase {
  border-radius: 50%;text-align:center;
  margin:0 auto;
}

.circle1 {
  width: 100px;
  height: 100px;
  background: #eeeeee;
  border: 2px solid #ffffff;
  
}

.circle2 {
  width: 150px;
  height: 150px;
  background: #a1a1a1;
  border: 1px solid #000;
}

@media screen and (max-width:767px){
input[type="text"] {font-size:16px;}
.container {height:auto;}
}