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

.modal-body p, .modal-body ul{
    text-align: left!important;
    font-size: 13px;
    line-height: 19px;
    color:#222;
}
.modal-body h2{
    font-size: 16px;
    color: #D40436;
    margin-top: 10px;
    text-align: left!important;
}

.imgresp{
    height: auto;
    width: 100%;
}
.row .col-md-4{
    xborder:solid red;
}
html {
    scroll-behavior: smooth !important;
}
.clearFix{
    clear:both;
}
.modal-dialog {
    width: 750px;
    margin: 30px auto;
}
.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: none !important;
    border-radius: 0px !important;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.modal-body {
    position: relative;
    padding: 25px;
}
@media (max-width: 380px) {
#ars-captcha {
    max-width: 280px !important;
    xborder: solid red 1px;
    overflow: hidden;
}
}

/*******MARGIN CLASSES*********/
.mt-10{
    margin-top:10px;
}
.mt-20{
    margin-top:20px;
}
.mt-30{
    margin-top:30px;
}
.mt-50{
    margin-top:50px;
}
.mt-100{
    margin-top:100px;
}
.mb-20{
    margin-bottom:20px;
}
.mb-100{
    margin-bottom:100px;
}
body {
    font-family: "OpenSans", sans-serif !important;
    font-size: 14px;
    line-height: 22px;
    color: #1c1c1c;
    background-color: #fff;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}
p {
    line-height: 22px;
    font-size:14px;
}
.white{
    color: #fff;
}
.button{
    width: 230px;
    height: 55px;
}
.button a{
    width: 230px;
    height: 55px;
    background-image: url(../img/btn-bgd.png);
    background-position: center;
    background-repeat: no-repeat;
    color: #fff !important;
    font-size: 16px !important;
    text-align: center;
    xfloat: left;
    xpadding-top: 18px;
    margin-top: 20px;
    display: block;
    line-height: 55px;
    
}
.button a:hover{
    text-decoration: none;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}
.button2 a{
    width: 230px;
    height: 55px;
    background-image: url(../img/btn-bgd2.png);
    background-position: center;
    background-repeat: no-repeat;
    color: #fff !important;
    font-size: 16px !important;
    text-align: center;
    xfloat: left;
    display:block;
    padding-top: 18px;
    margin-top: 20px;
    
}
.button2 a:hover{
    text-decoration: none;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

/*** HEADER ***/

.pattern {
    background-image: url(../img/pattern.png);
    width: auto;
    height: 100%;
    xopacity: 0.5;
    xfilter: alpha(opacity=50); /* For IE8 and earlier */
    overflow:hidden;
}
#mainbanner{
    background-image: url(../img/main-banner.jpg);
    height:750px;
    margin-top:-50px;
    xbackground-size: 50%;
    
    x-webkit-background-size: cover;
    x-moz-background-size: cover;
    x-o-background-size: cover;
    xbackground-size: cover;
}
#mainbanner h1 {
    font-size: 58px;
    margin-top: 250px;
}
#mainbanner h2 {
    font-size: 58px;
    font-weight: 100 !important;
    xline-height: 10px;
    margin-top:-15px;
}
#mainbanner h3 {
    font-size: 18px;
    font-weight: 100 !important;
    margin: 35px 0;
}
#mainbanner .button {
    margin-left: auto;
    margin-right: auto;   
}
.op-1 .button{
    xborder:1px red solid;
    margin-top:10px;
}

@media (max-width: 991px) {
#mainbanner h1, #mainbanner h2{
    font-size: 40px;
    line-height: 42px;
}
#mainbanner{
    height: 650px;
}
}

/**** SERVICES SCROLL *****/
#services-two{
    max-width: 1200px;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow: hidden;
    padding: 0 20px;
}
#service-scroll{
    xbackground-color:#f9371b;
    background-image: url(../img/tile.jpg);
    padding: 75px 0;
}
#service-scroll h2{
    font-size: 20px;
}
#service-scroll p{
    line-height: 22px;
}
#service-scroll .item{
    xwidth: 33%;
}
#service-scroll a{
    font-size: 16px;
    color: #fff;
    text-decoration: underline;
    text-transform: uppercase;
}
#services-two img{
    height: auto;
    width: 100%;
}
#services-two h1{
    font-size: 32px;
    line-height: 34px;
}

.g-recaptcha{
    margin: 0 auto 15px !important;
    width:304px;
}
#owl-demo .item{
    xbackground: #3fbf79;
    xpadding: 30px 0px;
    xmargin: 10px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
#owl-demo .item img{
    xwidth: 90%;
}
#service-scroll .item{
    margin: 0 5px;
}
#service-scroll .item img{
    width: 90%;
}


/********SPECIALISTS*********/
#specialists{
    background-color: #fff;
    padding-top: 85px;
    height: 650px;
    text-align: left;
    background-image: url(../img/15916080.jpg);
    background-repeat: no-repeat;
    xbackground-position: center 20px;
    background-position: 45% bottom; 
}
#specialists .lrg{
    font-size: 22px;
    line-height: 28px;
}
@media (max-width: 991px) {
#specialists {
    background-image: url(../);
    height: auto;
    padding-bottom:85px;
  }
}
@media (max-width: 768px) {
#specialists{
    text-align: center;
}
.button{
    margin-left: auto;
    margin-right: auto;
}
}
/*********CTA ONE*************/
#cta-one{
    background-image: url(../img/21259889.jpg);
}
#cta-one img{
    width: 90px !important;
    height: 90px;
    margin: 0 auto;
    xtext-align: left;
    xfloat: left;
    xdisplay: inline-block;
}
#cta-one h1 {
    xfont-size: 55px;
    xline-height: 57px;
    padding: 100px 0 50px;
}
#cta-one h2{
    font-size: 22px;
    line-height: 22px;
    text-align: center;
    margin-bottom:0px;
}
#cta-one p{
    font-size: 18px;
    text-align: center;
    margin-top:5px;
}
#cta-one .txt{
    margin-top: -10px;
}
@media (max-width: 991px) {
#cta-one img{
    float: none;
  }
#cta-one p, #cta-one h2{
        text-align: center;
}
#cta-one h2{
    line-height: 22px;
}
#cta-one h1{
   font-size: 30px;
}
}
@media (max-width: 768px) {

#cta-one img{
    margin-top:20px;
}
}
@media (max-width: 678px) {

#cta-one img{
    width: 150px !important;
    height: 150px;
}
}
/**********SERVICES TWO *******/
#services-two{
    background-color: #fff;
    margin: 50px 35px;
}
#services-two .box{
    width: 100px !important;
    height: 100px;
    margin: 0 auto;
    color: #fff;
    background-image: url(../img/btn-bgd.png);
    background-position: -212px center;
    background-repeat: no-repeat;
    font-size: 32px;
    text-align: center;
    xfloat: left ;
    xdisplay: inline-block;
    padding-top: 28px;
    xdisplay: block;
}

#services-two .row{
    margin-top: 15px;
}
#services-two h1{
     padding: 0 0 10px 0;
    text-align: center;
}
#services-two h2{
    font-size: 16px;
    line-height: 16px;
    text-align: left;
    text-align: center;
}
#services-two p{
    font-size: 14px;
    text-align: left;
    text-align: center;
}
#services-two .txt{
    margin-top: -10px;
    position: left;
}
 @media screen and (min-width: 978px) {

}
/*********CTA two*************/
#cta-two{
    background-image: url(../img/main-banner.jpg);
}
#cta-two img{
    width: 54px !important;
    height: 54px;
    margin-right: 10px;
    xtext-align: left;
    float: left;
    display: inline-block;
}
#cta-two h1{
     padding: 100px 0 10px 0 ;
}
#cta-two p{
    font-size: 18px;
}
#cta-two .button {
    margin-left: auto;
    margin-right: auto;   
}

/********GET A QOUTE*********/
#qoute{
    background-color: #fff;
    padding: 120px 0;
    text-align: left;
    background-repeat: no-repeat;
    background-position: 75% 40px; 
}
#qoute .lrg{
    font-size: 22px;
    line-height: 28px;
}
#qoute p{
    font-size: 16px;
}
@media (max-width: 991px) {
#qoute{
     background-image: none;
}
}
@media (max-width: 767px) {
p, h2{
    text-align: center;
}
.quote-none{
        display:none;
}
#qoute{
    padding: 80px 0;
}

}

/*********TESTIMONIALS********/
#testimonials{
    background-image: url(../img/633504.jpg);
}
#testimonials p{
    font-size: 16px;
}
#testimonials .owl-carousel p{
    font-size: 22px;
    font-style: italic;
    font-weight:lighter;
    line-height: 30px;
}
#testimonials .owl-carousel img{
    display: inline-block;
    margin: 0 10px;
}
#testimonials h2{
    color: #fff;
}
#testimonials .owl-carousel .details{
    font-style:normal;
    font-weight: 200;
    font-size: 18px;
    color: gainsboro;
}
@media (max-width: 767px) {
#testimonials .owl-carousel img{
    display: inline-block;
    margin: 10px 50% 10px;
}
}
/********CONTACT**************/
#contact{
    background-color: #e9e9e9;
    padding: 60px 0; 
}
#contact p, #contact h2{
    font-size: 16px;
    line-height: 18px;
}
#contact p{
    margin-top: -7px;
    font-weight: 200;
}
#contact h2{
margin-bottom: 20px;
}
#contact a{
    text-decoration: none;
    color: #7a7a7a !important;
}
/*********CONTACT FORM********/
#contact-form{
    background-color: #fff;
    padding: 60px 0; 
}
#contact-form p{
    font-size: 16px;
}
#contact-form .button, #contact-form .button2{
    float:left;
    margin: 0 15px;
}
#contact-form .btn{
    width: 546px;
    margin-left: auto;
    margin-right: auto;
}
.trademark{
    float: right;
    margin-top: 10px;
}
@media (max-width: 768px) {
.trademark{
    margin: 20px auto -20px;
    float: none;
}
}
/********FOOTER***********/
#footer{
    background-color: #3a3a3a;
    padding: 25px 0;
    xbackground-image: url(../img/ars-roofing-logo-footer.jpg);
    xbackground-repeat: no-repeat;
    text-align: left;
}
#footer p{
    color: #7c7c7c !important;
}
#footer h3{
   font-size: 16px;
    color: #fff;
}
#footer2{
    background-color: #262626;
    text-align: left;
    padding: 15px 0;
}
#footer2 p{
    color: #7c7c7c;
    font-weight: 300;
}


/**********PARALAX************/

/* background setup */
.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%\9 !important;
}

/* fullscreen setup */
html, body {
    /* give this to all tags from html to .fullscreen */
    height:100%;
}
.fullscreen,
.content-a {
    width:100%;
    height:500px;
    overflow:hidden;
}
.fullscreen.overflow,
.fullscreen.overflow .content-a {
    height:auto;
    min-height:100%;
}

/* content centering styles */
.content-a {
    display:table;
}
.content-b {
	display:table-cell;
    position:relative;
	vertical-align:middle;
	text-align:center;
}

/* visual styles */
body{
    margin:0;
    font-family:sans-serif;
    font-size:28px;
    xline-height:100px;
	color:#ffffff;
    text-align:center;
}
section {
	background:#333;
}
.not-fullscreen {
    height:50%;
}


/*******FORMS*********/

input[type="text"],
input[type="tel"],
input[type="email"],
textarea{
    padding: 10px;
    border: solid 1px #777;
    display: block;
    width:100%;
    font-size: 14px;
    line-height: 22px;
    color: #777;
    font-family: "OpenSans", sans-serif !important;
    margin: 0 0 20px 0;
}
textarea{
    resize: none;
}
label{
    font-family: "OpenSans", sans-serif !important;
    font-size: 14px;
    line-height: 22px;
    color: #1c1c1c;
    background-color: #fff;
}
input[type="submit"] {
    background: none;
    border:none;
    width: 230px;
    height: 55px;
    background-image: url(../img/btn-bgd.png);
    background-position: center;
    background-repeat: no-repeat;
    color: #fff !important;
    font-size: 16px !important;
    text-align: center;
    xpadding-top: 18px;
    margin-top: 10px!important;
    display: block;
    margin: 0 auto;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 300 !important;
    text-transform: uppercase;
    line-height: 50px;
}
input[type="submit"]:hover {
    text-decoration: none;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}