@media (max-width:767px) {
    body {
        font-family: Lato;
        display: grid;
        grid-template-columns: [boxes-background-start] 10px 1fr 1fr 1fr 1fr 1fr 10px [boxes-background-end];
        grid-template-rows: 100px 100px 100px auto auto 20px 50px 30px [boxes-background-start] auto auto auto auto [boxes-background-end] 10px auto 10px auto 100px 40px;
        grid-template-areas: 'navbar navbar navbar navbar navbar navbar navbar' '. main-title main-title main-title main-title . .' '. . main-title2 main-title2 main-title2 main-title2 .' '. message message message message message .' '. sub-message sub-message sub-message sub-message sub-message .' '. . . . . . .' '. . . scrollbelow . . .' '. . . . . . .' 'box1 box1 box1 box1 box1 box1 box1' 'box2 box2 box2 box2 box2 box2 box2' 'box3 box3 box3 box3 box3 box3 box3' 'box4 box4 box4 box4 box4 box4 box4' '. . . . . . .' 'whyus whyus whyus whyus whyus whyus whyus' '. . . . . . .' 'contactus contactus contactus contactus contactus contactus contactus' '. . . . . . .' 'footer footer footer footer footer footer footer';
    }
}

@media (min-width:768px) {
    body {
        font-family: Lato;
        display: grid;
        grid-template-columns: [boxes-background-start] 30px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 30px [boxes-background-end];
        grid-template-rows: 120px 100px 100px 100px auto 70px 100px 30px 150px [boxes-background-start] 150px auto 150px auto 150px 150px auto 150px auto [boxes-background-end] 150px 10px auto 10px auto 100px 40px;
        grid-template-areas: 'navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar' '. . . . . . . . . . .' '. main-title main-title main-title . message message message message message .' '. . main-title2 main-title2 main-title2 message message message message message .' '. . . . . sub-message sub-message sub-message sub-message sub-message .' '. . . . . . . . . . .' '. . . . . scrollbelow . . . . .' '. . . . . . . . . . .' '. . box1 box1 box1 . . . . . .' '. . box1 box1 box1 . . . . . .' '. . box1 box1 box1 . box2 box2 box2 . .' '. . box1 box1 box1 . box2 box2 box2 . .' '. . . . . . box2 box2 box2 . .' '. . box3 box3 box3 . box2 box2 box2 . .' '. . box3 box3 box3 . . . . . .' '. . box3 box3 box3 . box4 box4 box4 . .' '. . box3 box3 box3 . box4 box4 box4 . .' '. . . . . . box4 box4 box4 . .' '. . . . . . box4 box4 box4 . .' '. . . . . . . . . . .' '. whyus whyus whyus whyus whyus whyus whyus whyus whyus .' '. . . . . . . . . . .' '. contactus contactus contactus contactus contactus contactus contactus contactus contactus .' '. . . . . . . . . . .' 'footer footer footer footer footer footer footer footer footer footer footer';
    }
}

.itrayn-main-title {
    font-family: Lato;
    font-size: 75px;
    grid-area: main-title;
    font-weight: 300;
    text-align: center;
}

.itrayn-main-title2 {
    font-family: Lato;
    font-size: 50px;
    font-weight: 300;
    grid-area: main-title2;
    margin-top: -20px;
    margin-left: 30px;
    color: #c5c5c5;
    text-align: center;
    margin-right: 10px;
}

@media (max-width:767px) {
    .itrayn-message {
        grid-area: message;
        font-family: Lato;
        font-weight: 300;
        font-size: 45px;
        border-left: 0 solid #f5c536;
        border-top: 5px solid #f5c536;
        text-align: center;
        padding-top: 20px;
    }
}

@media (min-width:768px) {
    .itrayn-message {
        grid-area: message;
        padding-left: 20px;
        font-family: Lato;
        font-weight: 300;
        font-size: 45px;
        border-left: 5px solid #f5c536;
    }
}

.itrayn-scrollbelowicon {
    grid-area: scrollbelow;
    color: #e0e0e0;
    transition: padding-top 30ms ease-in-out;
    padding-top: 25px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    align-content: center;
    text-align: center;
}

@media (max-width:767px) {
    .itrayn-sub-message {
        grid-area: sub-message;
        font-family: Lato;
        font-size: 20px;
        color: #25384A;
        font-weight: 100;
        padding-left: 25px;
        text-align: center;
    }
}

@media (min-width:768px) {
    .itrayn-sub-message {
        grid-area: sub-message;
        font-family: Lato;
        font-size: 25px;
        color: #25384A;
        font-weight: 100;
        padding-left: 25px;
    }
}

.itrayn-service-box-div {
    border-radius: 0;
    box-shadow: 1px 3px 5px 5px #f3f3f3;
    text-align: center;
    font-family: Lato;
    background-color: #ffffff;
    margin: 0;
    padding-top: 15px;
}

.itrayn-service-box-title {
    font-size: 34px;
    font-weight: 400;
    font-family: Lato;
    padding: 30px 10px 10px;
}

.itrayn-service-box-subtitle {
    font-family: Lato;
    font-size: 26px;
    font-weight: 300;
    padding: 30px 10px 10px;
}

.itrayn-service-box-content {
    padding: 15px;
    font-family: Lato;
    font-size: 20px;
    color: #868686;
    font-weight: 300;
}

.itrayn-service-box-button {
    margin: 20px;
}

itrayn-form-input-control {
    font-family: Lato;
    font-size: 18;
    font-weight: 300;
}

.help-block.with-errors {
    font-family: Lato;
    font-size: 12;
    font-weight: 100;
    color: #EE7E32;
    margin-top: 2px;
}

.fontawesomeplaceholder {
  font-family: "Font Awesome 5 Free";
  font-weight: 300;
}

#particles-js{
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}