@font-face {

  font-family: 'SharpGrotesk';

  src: url('../fonts/SharpGroteskSmBold22Regular.eot');

  src: url('../fonts/SharpGroteskSmBold22Regular.eot') format('embedded-opentype'),

       url('../fonts/SharpGroteskSmBold22Regular.woff2') format('woff2'),

       url('../fonts/SharpGroteskSmBold22Regular.woff') format('woff'),

       url('../fonts/SharpGroteskSmBold22Regular.ttf') format('truetype'),

       url('../fonts/SharpGroteskSmBold22Regular.svg#SharpGroteskSmBold22Regular') format('svg');

       font-weight: normal;

       font-style: normal;       

}



@font-face {

  font-family: 'Sailec-regular';

  src: url('../fonts/Sailec.eot');

  src: url('../fonts/Sailec.ttf') format('truetype'),       

       url('../fonts/Sailec.woff') format('woff'),

       url('../fonts/Sailec.svf') format('svg');

      font-weight: normal;

      font-style: normal;       

}



@font-face {

  font-family: 'Sailec-light';

  src: url('../fonts/Sailec-Light.eot');

  src: url('../fonts/Sailec-Light.ttf') format('truetype'),       

       url('../fonts/Sailec-Light.woff') format('woff'),

       url('../fonts/Sailec-Light.svf') format('svg');

      font-weight: normal;

      font-style: normal;       

}



@font-face {

  font-family: 'Sailec-bold';

  src: url('../fonts/Sailec-Bold.eot');

  src: url('../fonts/Sailec-Bold.ttf') format('truetype'),       

       url('../fonts/Sailec-Bold.woff') format('woff'),

       url('../fonts/Sailec-Bold.svf') format('svg');

      font-weight: normal;

      font-style: normal;       

}



body {

  font-family: Sailec-regular;

  margin: 0;

  font-size: 23px;

  padding: 0;

  color: #000;

 

}

section {

 

  clear: both;

}



a,

a:hover {

  text-decoration: none;

}

.card {

  background: #fff;

  border-radius: 5px;

  padding: 20px;

  border: 0;

  display: block;

}



ul {

  padding: 0;

  margin: 0;

  list-style-type: none;

}

a:focus,

button:focus,

input:focus {

  outline: none;

  box-shadow: none;

}



h3 {

  font-size: 26px;

  font-family: Sailec-bold;

  margin-bottom: 30px;

}



.layer-btn {

  padding: 0 30px;

  color: #fff;

  text-decoration: underline;

  border: none;

  position: relative;

  overflow: hidden;

  line-height: 53px;

  font-family: 'Sailec-bold';

  z-index: 1;

  display: inline-block;

  height: 55px;

  -webkit-transition: all .3s ease-in-out;

  transition: all .3s ease-in-out;

  border-radius: 6px;

  font-size: 14px;

}



.layer-btn::after {

  display: inline-block;

  height: 55px;

  -webkit-transition: all .3s ease-in-out;

  transition: all .3s ease-in-out;

  position: absolute;

  content: "";

  background: linear-gradient(130deg,#f78200 20%,#e23838 50%,#973999);

  width: 100%;

  z-index: -1;

  left: 0;

  top: 0;

}



.layer-btn:hover {

  color: #fff;

  text-decoration: underline;

}

.layer-btn:hover::after {

  background: linear-gradient(130deg,#f78200 20%,#e23838 50%,#973999);

  width: 400%;

}



header {

  padding: 15px 0 14px 0;

  background:#fff;

}

header .logo img {
  max-width: 134px;
  height: auto;
}


.main-hero-banner {

  min-height: 100vh;

  display: flex;

  align-items: center;

  background-color: transparent;

}



.main-hero-banner .card {

  padding: 30px;

}

.main-hero-banner h6 {

  font-size: 24px;

  font-weight: 400;

  margin: 15px 0 0 0;

}



.main-hero-banner h1 {

  font-size: 42px;

  font-family: 'Sailec-bold';

  line-height: 55px;

  margin-top: 23px;

  max-width: 440px;

  margin-bottom: 30px;

  letter-spacing: 0;

}



.main-hero-banner p {

  font-size: 23px;

  margin-bottom: 30px;

}



.main-hero-banner .small {

  margin-top: 20px;

  padding: 10px 20px;

}



.main-hero-banner .small p {

  margin: 0;

}





/*about*/

.about {

  padding-top: 70px;

  padding-bottom: 70px;

}



.about li {

  margin-bottom: 7px;

}



.rob-work-place h2 {

  text-align: center;

  font-family: sailec-bold;

  font-size: 40px;

  line-height: 50px;

  text-align: center;

  margin-bottom: 60px;

}



.rob-work-place h2 span {

  font-family: sailec-regular; 

}



.rob-work-place .circel {

  border: 1px solid #000;

  height: 50px;

  width: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  font-size: 20px;

  margin-bottom: 30px;

  position: relative;

  overflow: hidden;

  transition: all ease-in-out 0.3s;

}



.rob-work-place .circel:before {

  height: 100%;

  width: 100%;

  content:"";

  position: absolute;

  left: 0;

  top: 0;

  background: #EE6317;

  -webkit-transform: scale(0);

  transform: scale(0);

  transition-property: -webkit-transform;

  transition-property: transform;

  transition-property: transform, -webkit-transform;

  transition-duration: .3s;

  transition-timing-function: ease-out;

  z-index: -1;

  border-radius: 50%;

}



.rob-work-place .col-lg-4:hover .circel {

  border: 0;

  color:#fff;

  transition: all ease-in-out 0.3s;

}



.rob-work-place .col-lg-4:hover .circel:before {

  transform: scale(1);

}



.rob-work-place a {

  color: #EE6317;

  font-family: sailec-bold;

  font-size: 24px;

  position: relative;

  display: inline-block;

}



.rob-work-place a::after, 

.rob-work-place a::before {

  height: 1px;

  content: "";

  position: absolute;

  bottom: 0;

}



.rob-work-place a::before {

  width: 100%;

  background: #EE6317;

  left: 0;

}



.rob-work-place a::after {

  width: 0;

  background: #000;

  left: auto;

  right: 0;

  -webkit-transition: all .2s linear;

  transition: all .2s linear;

}



.rob-work-place a:hover:after {

  width: 100%;

  left: 0;

  right: auto;

}



.rob-work-place h4 {

  text-align: center;

  font-family: sailec-bold;

  font-size: 26px;

  margin-top: 70px;

  margin-bottom: 30px;

}





/*gallery*/

.gallery .container {

  max-width: 1480px;

  padding: 0 30px;

}



.gallery .container .card {

  width: 20%;

  padding: 0;

  border: 0;

  border-radius: 0;

  float: left;

  position: relative;

  overflow: hidden;

}



.gallery .container .card div{

	position: absolute;

	background: #333;

	background: rgba(0,0,0,0.20);

	width: 100%;

  height: 100%;

  bottom: -400px;

}



.gallery .container .card img {

  max-width: 100%;

  float: left;

}



/*client-logo */

.text-center {

  text-align: center;

}



.client-logo {

  padding: 80px 0 80px;

  background: #000;

  overflow: hidden;

  text-align: center;

}

.client-logo .owl-carousel {

  display: block;

}



.client-logo ul, 

.client-logo ul li {

  display: flex;

}



.client-logo ul {

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

}



.client-logo ul li {

  padding: 0 13px;

}



.client-logo ul li {

  width: 11%;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  margin-bottom: 20px;

  padding: 0 13px;

}





.client-logo ul li img {

  max-height: 85px;

}



.client-logo h4 {

  color: #fff;

  font-family: Sailec-bold;

  margin-bottom: 50px;

}



.client-logo h2 {

  color: #fff;

  font-family: Sailec-regular;

  margin-top: 50px;

}



.client-logo h2 span {

  font-family: Sailec-bold;

}



img {

  max-width: 100%;

}



/*.best-designer*/

.best-designer {

  padding-top: 70px;

}

.best-designer h2 {

  font-family: Sailec-bold;

}



.best-designer h2 {

  font-family: Sailec-bold;

  font-size: 45px;

  line-height: 55px;

  margin-bottom: 50px;

  margin-top: 30px;

}



.best-designer p {

  font-size: 20px;

  line-height: 35px;

  margin-bottom: 60px;

}

.clearfix {

  clear: both;

}



/*new-brand*/

.new-brand {

  padding-bottom: 90px;

}

.new-brand h3 {

  font-size: 32px;

  position: relative;

  margin-top: 115px;

  

}



.new-brand h3:after {

  left: 0;

  top: -50px;

  content: "";

  position: absolute;

  height: 27px;

  width: 40px;

  background: url("../images/comma.png")no-repeat;

  background-position: -5px -34px;

  background-size: 50px;

}



.new-brand p {

  font-size: 21px;

  margin-bottom: 22px;

}



/* .new-brand .layer-btn {

  height: 60px;

  line-height: 20px;

  padding: 20px 40px;

  font-size: 17px;

  margin-bottom: 35px;

}



.new-brand .layer-btn:after {

  height: 60px;

} */



.new-brand small {

  font-size: 19px;

  margin-bottom: 12px;

  margin-top: 15px;

  display: block;

}





.new-brand .new-logos {

  display: flex;

  justify-content: space-between;

  max-width: 300px;

}



.new-brand .new-logos img {

  max-height: 75px;

  width: auto;

  margin-top: 10px;

}





/*aus-brand*/

.aus-brand h2 {

  font-size: 45px;

  font-family: Sailec-bold;

  line-height: 55px;

  margin-bottom: 20px;

}



.aus-brand h5 {

  font-size: 25px;

  font-weight: 400;

  margin: 0 0 70px 0;

}

.aus-brand h5 strong {

  font-family: Sailec-bold;

}



.aus-brand .card {

  text-align: center;

  padding: 0;

  text-align: center;

  margin-bottom: 70px;

}



.aus-brand .blocks .col-12:first-child .card{

  padding: 0 60px 0 0;

}

.aus-brand .blocks .col-12:nth-child(2) .card{

  padding: 0 30px;

}

.aus-brand .blocks .col-12:last-child .card{

  padding: 0 0 0 60px;

}



.aus-brand .blocks .card h2 {

  font-size: 45px;

  text-decoration: underline;

  font-weight: 400;  

  font-family: Sailec-regular;

}



.aus-brand-banner {

  background: #000;

  width: 100%;

  text-align: center;

}

.aus-brand-banner img {

  max-width: 85%;

}





/*opperunity*/

.opperunity {

  padding: 90px 0;  

}



.opperunity h2 {

  margin: 0 0 20px 0;

  font-family: Sailec-bold;

}



.opperunity p {

  max-width: 690px;

  margin-bottom: 30px;

}

.opperunity .inner {

  max-width: 460px;

  float: right;

  position: relative;

  cursor: pointer;

}

.opperunity small {

  font-size: 19px;

  display: block;

}

.opperunity .inner button {

  height: 75px;

  width: 75px;

  border: 0;

 background: none;

  border-radius: 50%;

  position: absolute;

  left: 50%;

  top: 50%;

  margin: -55px 0 0 -37.5px;

  -moz-box-shadow: 0px 0px 14px -4px rgba(0,0,0,.3);

  -webkit-box-shadow: 0px 0px 14px -4px rgba(0,0,0,.3);

  box-shadow: 0px 0px 14px -4px rgba(0,0,0,.3);

  pointer-events: none;
  overflow: hidden;

}

.opperunity .inner button:before {
  display: inline-block;
  height: 85px;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  position: absolute;
  content: "";
  background: linear-gradient(130deg,#f78200 20%,#e23838 50%,#973999);
  width: 100%;
  z-index: 0;
  left: 0;
  top: 0;

}

.opperunity .inner:hover button:before {
  background: linear-gradient(130deg,#f78200 20%,#e23838 50%,#973999);
  width: 400%;
 }

.opperunity .inner:hover button {

  background: rgba(255,255,255,0.7);

}



.opperunity .inner button:after {

  border-left: 15px solid transparent;

  border-right: 15px solid transparent;

  border-top: 20px solid #ddd;

  content: "";

  -moz-transform: rotate(-45deg);

  -webkit-transform: rotate(-45deg);

  transform: rotate(-92deg);

  position: absolute;

  top: 28px;

  left: 27px;

}



/*Contact bg*/

.contact {
  background-color: transparent;
  padding-top: 70px;
  padding-bottom: 70px;
}



.contact h2 {

  font-family: Sailec-bold;

  font-size: 45px;

  line-height: 55px;

  margin-bottom: 25px;

  margin-top: 20px;

}



.contact .card {

  padding: 20px 30px;

  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;

}



label {

  display: inline-block;

  margin-bottom: .5rem;

  font-size: 15px;

  margin: 0;

}



label.error {

  position: absolute;

  left: 0;

  bottom: -20px;

  color: red;

  font-size: 13px;

}



.form-control {

  border-radius: 0;

  margin-bottom: 11px;

  height: 45px;

  background-color: rgba(227,227,227,0.5);

  border-color:  rgba(227,227,227,0.5);

}



.form-control:focus {

  box-shadow: none;

  outline: none;

  background-color: rgba(227,227,227,0.5);

  border-color:  rgba(227,227,227,0.5);

}



.contact .layer-btn {

  width: 100%;

  margin-top: 25px;

}

.form-group {

  position: relative;

}

.form-group .field-wrap {

  position: relative;

}

.form-group .effect-7~.focus-border:after,

.form-group .effect-7~.focus-border:before {

 content:"";

 position:absolute;

 top:0;

 left:50%;

 width:0;

 height:1px;

 background-color:#f78200;

 -webkit-transition:.4s;

 transition:.4s

}

.form-group .effect-7~.focus-border:after {

 top:auto;

 bottom:0

}

.form-group .effect-7~.focus-border i:after,

.form-group .effect-7~.focus-border i:before {

 content:"";

 position:absolute;

 top:50%;

 left:0;

 width:1px;

 height:0;

 background-color:#f78200;

 -webkit-transition:.6s;

 transition:.6s

}

.form-group .effect-7~.focus-border i:after {

 left:auto;

 right:0

}

.form-group .effect-7:focus~.focus-border:after,

.form-group .effect-7:focus~.focus-border:before {

 left:0;

 width:100%;

 -webkit-transition:.4s;

 transition:.4s

}

.form-group .effect-7:focus~.focus-border i:after,

.form-group .effect-7:focus~.focus-border i:before {

 top:0;

 height:100%;

 -webkit-transition:.6s;

 transition:.6s

}



/*footer*/

footer {

  background: #000;

  text-align: center;

  padding: 80px 0 60px;

  /* box-shadow: 0px -3px 8px 1px rgba(0,0,0,.5); */

  position: relative;

}



footer h3 {

  font-size: 36px;

  font-family: SharpGrotesk;

  margin-bottom: 35px;

}



footer .inner a {

  font-size: 20px;

  font-family: Sailec-bold;

  display: inline-block;

  position: relative;

}



footer .inner a::after, 

footer .inner a::before {

  height: 1px;

  content: "";

  position: absolute;

  bottom: -3px;

}



footer .inner a::before {

  width: 100%;

  background: #fff;

  left: 0;

}



footer .inner a::after {

  width: 0;

  background: #e95631;

  left: auto;

  right: 0;

  -webkit-transition: all .2s linear;

  transition: all .2s linear;

}



footer .inner a:hover::after {

  width: 100%;

  left: 0;

  right: auto;

}



footer hr {

  border-color: #707070;

  margin: 80px 0 40px;

}



footer h4 {

  color: #fff;

  font-size: 22px;

  font-family: Sailec-regular;

  margin-bottom: 30px;

}



footer a, 

footer a:hover, 

footer h3, 

footer p {  

  color: #fff;

}



footer p {

  font-size: 16px;

  line-height: 28px;

  font-family: Sailec-light;



}





/*modal*/

.modal-dialog {

  max-width: 900px;

  display: flex;

  height: 100vh;

  align-items: center;

}



.modal-header {

  border-bottom: 0;

  padding: 0;

}



.modal-body {

  padding: 0;

}



.modal-content {

  padding: 0;

  border-radius: 0;

  border: 0;

  background-color: transparent;

  position: relative;

}



.modal-body {

  position: relative;

  padding-top: 56.25%;  

}



.modal-body iframe {

  position: absolute;

  left: 0;

  top: 0;

  height: 100%;

  width: 100%;

}



.modal .close {

  position: absolute;

  right: 0;

  top: -40px;

  text-shadow: none;

  color: #fff;

  opacity: 1;

  font-size: 40px;

}

section {

  overflow: hidden;

}



.contactmodal .modal-body {

  background:#fff;

  padding: 0;

}



.contactmodal .modal-body textarea.form-control{ 

  height: 100px;

}

.contactmodal .modal-body .left {

  float: left;

  width: 50%;

  padding: 0;

}

.contactmodal .modal-body .form-control {

  height: 40px;

}

.contactmodal .modal-body .right h3 {

  margin-bottom: 10px;

}

.contactmodal .modal-body .right {

  float: left;

  width: 50%;

  padding: 20px 20px 0 20px;

}



.no-gutter > [class*='col-'] {

  padding-right:0;

  padding-left:0;

}



.thankyou .container .row {

  background: #000;

  align-items: center;

  flex-direction: row-reverse;

}



.thankyou img {

  width: 100%;

}

.thankyou {

  text-align: center;

}



.thankyou h1 {

  color: #fff;

  font-family: SharpGrotesk;

  font-size: 36px; 

  line-height: 55px;  

  margin-bottom: 50px;

}

.thankyou h1 span {

  display: block;

  margin-top: 55px;

}



.thankyou p { 

  color:#fff;

  font-size: 32px;

  line-height: 40px;

}



.thankyou p a { 

  color:#fff;

  text-decoration: underline;

}


.janoff-support {
  margin-top: 0 !important;
  text-align: center;
  padding: 70px 0;
}

.janoff-support img {
  max-width: 350px;
  width: 100%;
}

.janoff-support h3 {
  font-size: 19px;
  margin-bottom: 30px;
  font-family: Sailec-light;
}

.terms p {
  color: #fff;
  font-size: 12px;
  font-family: Sailec-light;
  position: relative;
  top: 20px;
  display: inline-block;
  max-width: 750px;
  line-height: 18px;
  margin-bottom: 0;
}