/*Add Font Face */

@font-face {
    font-family: 'Pluto';
    src: url('../fonts/hinted-PlutoBold.html');
    src: local('Pluto Bold'), local('PlutoBold'), url('../fonts/hinted-PlutoBoldd41d.html?#iefix') format('embedded-opentype'), url('../fonts/hinted-PlutoBold-2.html') format('woff2'), url('../fonts/hinted-PlutoBold-3.html') format('woff'), url('../fonts/hinted-PlutoBold-4.html') format('truetype'), url('../fonts/hinted-PlutoBold.svg#PlutoBold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Pluto';
    src: url('../fonts/hinted-PlutoExtraLight.html');
    src: local('Pluto ExtraLight'), local('PlutoExtraLight'), url('../fonts/hinted-PlutoExtraLightd41d.html?#iefix') format('embedded-opentype'), url('../fonts/hinted-PlutoExtraLight-2.html') format('woff2'), url('../fonts/hinted-PlutoExtraLight-3.html') format('woff'), url('../fonts/hinted-PlutoExtraLight-4.html') format('truetype'), url('../fonts/hinted-PlutoExtraLight.svg#PlutoExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Pluto';
    src: url('../fonts/hinted-PlutoRegular.html');
    src: local('Pluto Regular'), local('PlutoRegular'), url('../fonts/hinted-PlutoRegulard41d.html?#iefix') format('embedded-opentype'), url('../fonts/hinted-PlutoRegular-2.html') format('woff2'), url('../fonts/hinted-PlutoRegular-3.html') format('woff'), url('../fonts/hinted-PlutoRegular-4.html') format('truetype'), url('../fonts/hinted-PlutoRegular.svg#PlutoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Pluto';
    src: url('../fonts/hinted-PlutoLight.html');
    src: local('Pluto Light'), local('PlutoLight'), url('../fonts/hinted-PlutoLightd41d.html?#iefix') format('embedded-opentype'), url('../fonts/hinted-PlutoLight-2.html') format('woff2'), url('../fonts/hinted-PlutoLight-3.html') format('woff'), url('../fonts/hinted-PlutoLight-4.html') format('truetype'), url('../fonts/hinted-PlutoLight.svg#PlutoLight') format('svg');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Pluto';
    src: url('../fonts/hinted-PlutoMedium.html');
    src: local('Pluto Medium'), local('PlutoMedium'), url('../fonts/hinted-PlutoMediumd41d.html?#iefix') format('embedded-opentype'), url('../fonts/hinted-PlutoMedium-2.html') format('woff2'), url('../fonts/hinted-PlutoMedium-3.html') format('woff'), url('../fonts/hinted-PlutoMedium-4.html') format('truetype'), url('../fonts/hinted-PlutoMedium.svg#PlutoMedium') format('svg');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pluto';
    src: url('../fonts/hinted-PlutoBlack.html');
    src: local('Pluto Black'), local('PlutoBlack'), url('../fonts/hinted-PlutoBlackd41d.html?#iefix') format('embedded-opentype'), url('../fonts/hinted-PlutoBlack-2.html') format('woff2'), url('../fonts/hinted-PlutoBlack-3.html') format('woff'), url('../fonts/hinted-PlutoBlack-4.html') format('truetype'), url('../fonts/hinted-PlutoBlack.svg#PlutoBlack') format('svg');
    font-weight: 900;
    font-style: normal;
}
.ms-fullscreen-template .slide-pattern {
    background: url(pattern.png) scroll;
    width: 100%;
    height: 100%;
    z-index: 8;
    -webkit-transform: translateZ(0.4px);
    -moz-transform: translateZ(0.4px);
    -ms-transform: translateZ(0.4px);
    -o-transform: translateZ(0.4px);
    transform: translateZ(0.4px);
    position: absolute;
    top: 0;
}
.ms-fullscreen-template h3,
.ms-fullscreen-template h4 {
    letter-spacing: 1px
}
.ms-fullscreen-template .ms-slide-loading {
    z-index: 7;
    -webkit-transform: translateZ(0.42px);
    -moz-transform: translateZ(0.42px);
    -ms-transform: translateZ(0.42px);
    -o-transform: translateZ(0.42px);
    transform: translateZ(0.42px);
}
.ms-layer {
    font-family: 'Pluto';
}
.ms-layer.bold-text-white {
    color: #FFF;
    font-weight: 900;
    font-size: 85px;
    text-shadow: -1px 1px black;
    margin: 0;
}
.ms-layer.thin-text-white {
    color: #FFF;
    background: rgba(0, 0, 0, 0.58);
    font-size: 60px;
    font-weight: 500;
    padding: 20px 80px;
    margin: 0;
    text-shadow: -1px 1px #000;
}
.ms-layer.thin-text-white-2 {
    color: #FFF;
    background: rgba(0, 0, 0, 0.58);
    font-size: 50px;
    font-weight: 500;
    padding: 20px 80px;
    margin: 0;
    text-shadow: -1px 1px #000;
}
.ms-layer.thin-text-black {
    color: black;
    font-size: 60px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.78);
    padding: 20px 25px;
    margin: 0;
    text-shadow: -1px 1px rgba(255, 255, 255, 0.51);
}
.p-text {
    text-align: center;
    font-size: 36px;
    font-weight: 100;
    color: #fff;
}
@media (max-width:768px) {
    .p-text {
        font-size: 22px !important;
    }
}
.roofing-slider-button {
    padding: 22px 25px;
    background: #000;
    display: inline-block;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s !important;
    -moz-transition: all 0.3s ease 0s !important;
}
.roofing-slider-button i.fa {
    font-size: 12px;
    position: relative;
    top: -1px;
    margin-left: 10px;
}
.roofing-slider-button:hover {
    color: #ffffff;
    background: rgb(0, 136, 204);
}
.b-bold-text {
    font-size: 42px;
    color: #fff;
    font-weight: 700;
}
.slide-1 .captiontext {
    color: #FFF;
    margin-top: 100px;
    font-weight: 100;
    padding: 20px;
    text-align: center;
    font-size: 25px;
    border: solid 2px #FFF;
    text-shadow: -1px 1px #000;
}
.slide-1 .bigtext {
    top: 41% !important;
    width: 100%;
    text-align: center;
    letter-spacing: 1px;
}
.slide-3 h3,
.slide-4 h4,
.slide-4 p {
    color: white !important;
}
.slide-3 {
    color: white;
    text-shadow: -1px 1px black;
}
.slide-3 .box {
    left: 60px;
    top: 36% !important;
    width: 600px;
    height: 218px;
    padding: 0px;
    background: rgba(0, 0, 0, 0.72);
}
.slide-3 .small-text {
    top: 39% !important;
    font-weight: 300;
    left: 90px;
}
.slide-3 .medium-text {
    font-weight: 300;
    top: 43% !important;
    font-size: 40px;
    left: 88px;
}
.slide-3 .big-text {
    font-weight: 700;
    left: 86px;
    top: 48% !important;
    padding: 0;
    font-size: 60px;
}
.slide-3 .button-layer {
    left: 60px;
    top: 65% !important;
    text-shadow: none;
}
.slide-5 video {
    max-width: none !important;
}
.slide-5 .video-caption {
    color: #FFF;
    border: solid 4px #FFF;
    padding: 12px 10px;
    width: 71%;
    left: 160px;
    font-weight: 700;
    text-align: center;
    font-size: 62px;
    top: 45% !important;
}
.ms-skin-black-2 .ms-nav-next:hover,
.ms-skin-black-2 .ms-nav-prev:hover {
    opacity: 1 !important;
}

/*
custom text styling
*/

.welcome-text {
    color: #FFF;
    top: 20% !important;
    margin-top: 100px;
    left: 272px;
    font-weight: 100;
    padding: 20px;
    text-align: center;
    font-size: 42px;
    text-shadow: -1px 1px #000;
}
.thin-text-white-2 {
    font-size: 60px;
    padding: 15px 24px !important;
    margin-top: -10% !important;
    text-align: center;
}
.bold-text-white-2 {
    font-size: 48px !important;
    text-transform: uppercase;
}
.white-button {
    color: black;
    top: 48% !important;
    margin-top: 100px;
    left: 387px;
    font-weight: normal;
    padding: 20px;
    text-align: center;
    width: 204px;
    font-size: 25px;
    background: #FFF;
    border: none;
}
.small-text-2 {
    font-size: 22px;
    margin: 0;
    top: 42% !important;
    font-weight: 300;
    left: 82px;
    padding: 0;
    margin-top: 16px;
}
.medium-text-2 {
    font-weight: 300;
    top: 46% !important;
    font-size: 40px;
    left: 89px;
    margin: 0;
    padding: 0;
    margin-top: 25px;
}
.big-text-2 {
    font-weight: 900;
    left: 87px;
    top: 44% !important;
    padding: 0;
    font-size: 60px;
    margin: 0;
    margin-top: 90px;
}
.ms-slide .ms-slide-bgvideocont::before {
    content: "";
    position: absolute;
    background: rgba(0, 0, 0, 0.55);
    width: 100%;
    height: 100%;
    z-index: 106;
}
@media (max-width: 980px) {
    .slide-2 .button-layer {
        left: 418px !important;
    }
    .slide-1 .button-layer {
        left: 420px !important;
    }
    .slide-3 .button-layer {
        top: 71% !important;
    }
}
@media (max-width: 800px) {
    .slide-1 .button-layer {
        left: 320px !important;
    }
    .slide-2 .button-layer {
        left: 318px !important;
    }
    .slide-3 .box {
        width: 400px;
        height: 150px;
        top: 39% !important;
    }
    .slide-3 .small-text {
        top: 42% !important;
    }
    .slide-3 .medium-text {
        top: 46.5% !important;
    }
    .slide-3 .big-text {
        top: 52% !important;
    }
    .slide-3 .button-layer {
        top: 70% !important;
    }
}
@media (max-width: 768px) {
    .slide-2 .button-layer {
        left: 300px !important;
    }
    .slide-1 .button-layer {
        left: 302px !important;
    }
    .slide-1 .b-bold-text {
        font-size: 25px !important;
    }
}
@media (max-width: 640px) {
    .slide-1 .button-layer {
        top: 282px !important;
        left: 222px !important;
    }
    .slide-2 .button-layer {
        top: 282px !important;
        left: 235px !important;
    }
    .slide-1 .blacktext {
        font-size: 45px;
        left: 190px !important;
        top: 168px !important;
    }
    .slide-1 .b-bold-text {
        font-size: 24px !important;
        top: 239px !important;
    }
    .slide-2 .p-text {
        top: 168px !important;
    }
    .slide-2 .blacktext,
    .slide-2 .whitetext {
        top: 202px !important;
    }
    .slide-3 .box {
        height: 124px;
    }
}
@media (max-width: 480px) {
    .ms-skin-black-2 .ms-nav-next,
    .ms-skin-black-2 .ms-nav-prev {
        display: none;
    }
    #masterslider .ms-view,
    #masterslider .ms-slide {
        height: 420px !important;
    }
    .roofing-slider-button {
        padding: 10px 15px;
        font-size: 14px;
    }
    .slide-2 .button-layer {
        left: 145px !important;
        top: 262px !important;
    }
    .slide-1 .button-layer {
        left: 140px !important;
        top: 262px !important;
    }
    .slide-1 .b-bold-text {
        font-size: 14px !important;
    }
    .p-text {
        font-size: 12px !important;
    }
    .slide-1 .blacktext {
        left: 90px !important;
        top: 200px !important;
    }
    .slide-1 .b-bold-text {
        top: 230px !important;
    }
}
@media (max-width: 375px) {
    .slide-2 .p-text {
        /* top: 150px !important; */
    }
    .slide-2 .blacktext,
    .slide-2 .whitetext {
        /* top: 170px !important; */
    }
    .slide-2 .button-layer {
        left: 115px !important;
        /* top: 215px !important; */
    }
    .slide-1 .b-bold-text {
        /* top: 243px !important; */
        font-size: 13px !important;
        line-height: 16px !important;
    }
    .slide-1 .blacktext {
        left: 76px !important;
        /* top: 219px !important; */
    }
    .slide-1 .button-layer {
        left: 100px !important;
        /* top: 284px !important; */
    }
    .slide-3 .box {
        /* height: 89px; */
        /* top: 50% !important; */
        width: 241px;
    }
    .slide-3 .small-text {
        /* top: 52% !important; */
        font-size: 28px;
    }
    .slide-3 .medium-text {
        /* top: 55.5% !important; */
    }
    .slide-3 .big-text {
        /* top: 59% !important; */
    }
    .slide-5 .video-caption {
        top: 63% !important;
    }
}
@media (max-width: 320px) {
    .slide-2 .p-text {
        /* top: 220px !important; */
        left: 70px !important;
    }
    .slide-2 .blacktext {
        left: 61px !important;
    }
    .slide-2 .whitetext {
        left: 152px !important;
    }
    .slide-2 .blacktext,
    .slide-2 .whitetext {
        /* top: 248px !important; */
    }
    .slide-2 .button-layer {
        left: 81px !important;
        /* top: 305px !important; */
        /* font-size: 15px !important; */
    }
    .slide-1 .b-bold-text {
        top: 245px !important;
        font-size: 15px !important;
        /* line-height: 16px !important; */
    }
    .slide-1 .blacktext {
        left: 62px !important;
        /* top: 219px !important; */
        font-size: 68px;
    }
    .slide-1 .button-layer {
        left: 78px !important;
        top: 295px !important;
    }
    .slide-3 .box {
        /* height: 75px; */
        /* top: 50% !important; */
        /* width: 180px; */
    }
    .slide-3 .small-text {
        top: 52% !important;
        font-size: 28px;
    }
    .slide-3 .medium-text {
        top: 55.5% !important;
    }
    .slide-3 .big-text {
        top: 59% !important;
    }
    .slide-5 .video-caption {
        top: 63% !important;
    }
}