@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800');

body {
    font-family: 'Nunito Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: auto;
}

.no-padding {
    padding: 0;
}

section.left {
    height: 100vh;;
    background-color: #F4F6FA;
    padding: 50px 80px;
    background-image: url(../img/section-left.png);
    background-size: cover;
}

section.right {
    background-color: #FFF;
    padding: 36px 50px 50px 50px;
}

section.right span {
    font-size: 22px;
    font-weight: 300;
    color: #707070;
    margin-bottom: 20px;
    margin-top: 5px;
    display: inline-block;
}

section.right span.color {
    color: #736CFB;
}

.scroll-downs {
 float: right;
 margin-top: 10px;
  }
  .mousey {
    width: 3px;
    padding: 0px 2px 0px 5.5px;
    height: 20px;
    border: 1.5px solid #736CFB;
    border-radius: 15px;
    opacity: 0.75;
    box-sizing: content-box;
  }
  .scroller {
    width: 1.5px;
    height: 6px;
    border-radius: 25%;
    background-color: #736CFB;
    animation-name: scroll;
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(.15,.41,.69,.94);
    animation-iteration-count: infinite;
  }
  @keyframes scroll {
    0% { opacity: 0; }
    10% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(15px); opacity: 0;}
  }







section.left .logo {
    height: 50px;
}

section.left .content-box {
    position: absolute;
    top:50%;
    width: 80%;
    transform:translate(0%, -50%);
    -webkit-transform:translate(0%, -50%)
}

section.left h1 {
    font-size: 38px;
    font-weight: 200;
    line-height: 54px;
    color: #707070;
}

section.left h1 span {
    font-weight: 400;
    color: #736CFB;
}

section.left h4 {
    font-size: 18px;
    font-weight: 200;
    line-height: 34px;
    color: #9BA4B9;
    margin-top: 35px;
}

section.left span.icon {
    position: absolute;
    bottom: 50px;
    left: 75px;
}

section.left span.icon a {
    text-decoration: none;
    margin-right: 10px;
    color: #736CFB;
}

section.left span.icon a.twitter {
    margin: 0 15px 0 0px;
    vertical-align: middle;
}

section.left span.icon a:hover {
    text-decoration: none;
}

section.left span.icon i {
    font-size: 22px;
    color: #736CFB;
}

section.left .contact-us {
    margin-top: 30px;
    background-color: #736CFB;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    padding: 7px 50px 8px;
    text-align: center;
    transition: 0.3s;
    margin-bottom: 8px;
}

section.left .contact-us:hover {
    background-color: #736CFB;
    color: #fff;
    padding: 7px 62px 8px 38px;
    text-align: center;
}

section.left button.contact-us:focus {
    outline: 0 none;
    box-shadow: none;
}

section.left .contact-us i {
 opacity: 0;
 position: absolute;
 transition: 0.3s;
 margin: 8.5px 0 0 -5px;
 font-size: 10px;
}

section.left .contact-us:hover i {
    opacity: 1;
    position: absolute;
    padding: 0 15px;
    margin-left: 0px;
}

section.left span.status {
    display: inline;
}

section.left span.dot {
    background-color: #68C66E;
    min-height: 8px;
    min-width: 8px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px -11px 30px;
}

section.left .availability {
    font-size: 14px;
    position: absolute;
    color: #9BA4B9;
    opacity: 0.8;
    font-weight: 200;
    font-display: inline-block;
    margin: 40px 0 0 10px;
}

.modal-backdrop {
    background-color: rgba(244, 246, 250, 1);
}

.modal-backdrop.show {
    opacity: 1;
}

.modal-content {
    border: 0px;
    box-shadow: 0 5px 20px -5px rgba(0,0,0,.1);
    padding: 25px;
}

.modal-header {
    background-color: #736CFB;
    margin: -25px -25px 20px -25px;
}

.modal-header span {
    color: #FFF;
    font-size: 22px;
    font-weight: 300;
    text-align: center;
    margin: 0 auto;
}

.modal-body {
    border: 0px;
    background-color: #FFF;
}

.contact-half {
    width: calc((100% - 16px) / 2);
    padding: 0px 0px;
    display: inline-table;

}

@media (min-width: 992px) {
    .modal-md {
      max-width: 500px;
    }
  }

/* ================================================== */
/* contact section */
/* ================================================== */

.error {
border:none;
display: none;
color: #FD131F;
float: right;
padding-top: 15px;
font-size: 16px;
position: relative;
margin-bottom: -40px;
margin-right: 10px;
z-index: 1;
}
.errorName {
border:none;
display: none;
color: #C5020C;
float: right;
margin-top: 100px;
margin-bottom: -60px;
margin-right: 20px;
font-size: 12px;
position: relative;
}
.errorMail {
border:none;
display: none;
color: #C03;
float: right;
margin-top: 50px;
margin-bottom: -50px;
margin-right: 20px;
font-size: 12px;
position: relative;
}
.errorSubject {
border:none;
display: none;
color: #C03;
float: right;
margin-top: 50px;
margin-bottom: -50px;
margin-right: 20px;
font-size: 12px;
position: relative;
}
.errorMessage {
border:none;
display: none;
color: #C03;
float: right;
margin-top: 50px;
margin-bottom: -50px;
margin-right: 20px;
font-size: 12px;
position: relative;
}

.success_sent i.success {
color: #68C66E;
font-size: 60px;
line-height: 80px;
}

.success_sent p.success {
font-weight: 300;
background:none;
margin: 10px 0 10px;
font-size: 16px;
}

.contact label {
font-size: 16px;
font-weight: 200;
color: #666666;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    rgba(155, 164, 185, 0.5)!important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    rgba(155, 164, 185, 0.5)!important;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    rgba(155, 164, 185, 0.5)!important;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    rgba(155, 164, 185, 0.5)!important;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color:    rgba(155, 164, 185, 0.5)!important;
}

::placeholder { /* Most modern browsers support this now. */
    color:    rgba(155, 164, 185, 0.5)!important;
}

.inner-addon input[type=text] {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(235, 238, 245, 1);
    outline: none;
    height: 50px;
    margin-bottom: 15px;
    color: rgba(155, 164, 185, 0.5)!important;
    transition: 0.3s all;
    font-weight: 200;
    font-size: 15px;
}

.inner-addon textarea{
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(235, 238, 250, 1);
    outline: none;
    margin-bottom: -3px;
    color: rgba(155, 164, 185, 0.5)!important;
    transition: 0.3s all;
    font-weight: 200;
    resize: none;
    font-size: 15px;
}

.inner-addon input[type=text]:focus,
.inner-addon textarea:focus{
border: 1px solid rgba(115, 108, 251, 1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset, 0 0 8px rgba(255, 105, 0, 0);
outline: 0 none;
color: rgba(155, 164, 185, 1)!important;
background: rgba(255, 255, 255, 1);
transition: 0.3s all;
}

@-webkit-keyframes autofill {
    to {
        color: rgba(155, 164, 185, 0.5);
        background: #FFF;
        transition: 0.3s all;
    }
}

@-webkit-keyframes autofill-focus {
    to {
        color: rgba(155, 164, 185, 1);
        background: #FFF;
        transition: 0.3s all;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
    transition: 0.3s all;
}

input:-webkit-autofill:focus {
    -webkit-animation-name: autofill-focus;
    -webkit-animation-fill-mode: both;
    transition: 0.3s all;
}

/* enable absolute positioning */
.inner-addon { 
position: relative; 
}

/* style icon */
.inner-addon i {
  position: absolute;
padding: 15px 14px 10px 15px;
margin: 1px 1px 0 1px;
height: 50px;
border-radius: 5px 0 0 5px;
pointer-events: none;
font-size: 18px;
color: rgba(155, 164, 185, 0.3)!important;
}

/* align icon */
.left-addon i { 
left: 0px;
}

/* add padding  */
.left-addon input {
padding-left: 48px;
}

.left-addon textarea {
padding: 11px 20px 11px 50px;
}

.send-message {
margin: 33px auto 0 auto;
background-color: #736CFB;
color: #fff;
font-size: 16px;
font-weight: 300;
padding: 7px 50px 8px;
text-align: center;
transition: 0.3s;
}

.send-message:hover {
margin-top: 33px;
background-color: #736CFB;
color: #fff;
padding: 7px 62px 8px 38px;
text-align: center;
}

.send-message.disabled {
    pointer-events: none;
}

.send-message.not-allowed {
    cursor: not-allowed;
    background-color: transparent;
    border: 1px solid rgba(235, 238, 250, 1);
    color: rgba(155, 164, 185, 0.5)!important;
    pointer-events: none;
}

.send-message:focus {
    outline: 0 none;
    box-shadow: none;
}

.send-message i {
opacity: 0;
position: absolute;
transition: 0.3s;
margin: 5.5px 0 0 -2px;
font-size: 14px;
}

.send-message:hover i {
opacity: 1;
position: absolute;
padding: 0 15px;
margin-left: 0px;
}

a .box {
    display: block;
    padding: 0px 0px 0 0px;
    border-radius: 3px;
    margin: 5px 0;
    padding: 50px 40px 50px;
    background-color: #F4F6FA;
}

a .box span.notification {
    position: absolute;
    top: 17px;
    right: 26px;
    color: #68C66E;
    font-size: 12px;
    font-weight: 300;
}

a.box {
    display: block;
}

a.box:hover {
    text-decoration: none;
}

a.box:focus {
    outline: 0 none;
    box-shadow: none;
}

a.box .box h4 {
    font-size: 18px;
    color: #FFF;
    font-weight: 300;
    margin: 0 0 10px 0;
}

a.box .box h4.right {
    text-align: right;
}

a.box .box ul {
    margin: 0;
    padding: 0;
}

a.box .box ul.right {
    text-align: right;
}

a.box .box ul li {
    display: inline;
    color: #FFF;
    opacity: 0.8;
    font-size: 16px;
    font-weight: 200;
    z-index: 2;
    position: relative;
}

a.box .box ul li::before {
    content: '/';
    margin: 0 10px 0 6px;
    font-weight: 100;
    opacity: 0.4;
}

a.box .box ul li:first-child::before {
    content: '';
}

a.box div.themarketune {
    background-image: url(../img/portfolio/themarketune/themarketune.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-color: #8532DE;
    transition: all .2s ease-in-out;
}

a.box div.themarketune:hover {
    transform: scale(0.96);
}

a.box div.spartanclix {
    background-image: url(../img/portfolio/spartanclix/spartanclix.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-color: #7A0000;
    transition: all .2s ease-in-out;
}

a.box div.spartanclix:hover {
    transform: scale(0.96);
}

a.box div.hostalpha {
    background-image: url(../img/portfolio/hostalpha/hostalpha.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-color: #006BFD;
    transition: all .2s ease-in-out;
    margin-bottom: 50px;
}

a.box div.hostalpha:hover {
    transform: scale(0.96);
}


.img-hidden {
    visibility: hidden;
}