body {
    font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
    font-family: 'Open Sans', sans-serif;
}

header {
    background-color: lightblue;
    padding: 20px 0px;
    text-align: center;
}

xdiv {
    border: 3px solid blue;
}

xheader, xfooter {
    border: 1px solid lime;
}

xarticle {
    border: 1px solid fuchsia;
}


h1 {    
    font-weight: 700;
}

p {
    line-height: 2.0;
}

.first, .second, .third {
    text-align: center;
    background-color: lightcoral;
}


.icon-bar {
  color: black;
  border-color: black;
  background-color: black;
}

.navbar-brand {
    color: red;
}

.mainlogo {
    color: steelblue;  /*  was steelblue then cornflowerbllue */
    font-size: 260%;
    font-weight: 700;
    position: relative;
    top: -2px;
 }

.mainscreenimage {
    position: relative;
    z-index: 1;
}

.mainscreenimagex {
    z-index: 2;
}


.mainscreenimage h1 {
    color: red;
    position: absolute;
    xleft: 20%;
    xtop: 10%;
}

.mainscreenimage p {
    color: red;
    position: absolute;
    xleft: 20%;
    xtop: 30%;
}


#mainimage {
    margin: auto;
    width: 100%;
    height: 20%;
    border: 10px solid black;
    margin-bottom: 40px;
    opacity: 0.5;
}



#mainheader {
    background-color: white;
    margin: 0px 0px 0px 0px;
}

#mainheader .navbar {
    margin: 0px;
}

#mainheader button {
    margin-top: 6px;
}

#threepointsection {
    margin-bottom: 0px;
}

#threepointsection article {
    background-color: white;
    /* margin: 10px 10px;  doesn't work as splits the 3 columns over two rows */
    text-align: center;
    xborder: 1px solid red;
}

/* Need this or the div with the row class gets included too */
#threepointsection article div {
    margin-bottom: 50px;
    xmargin: 100px;
}

#threepointsection article h3 {
    font-size: 200%;
}

x#threepointsection article img {
    height: 60%;
    width: 60%;

  -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}


#threepointsection article img {
    height: 100px;
    width: 100px;
}

/* margin-top changed from 50px t*/
footer.myfooter {
    xborder: 1px solid yellow;
    background-color: #333;
    color: white;
    padding-top: 30px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 60px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px; 
    margin-right: 0px;
    text-align: center;
    font-size: 115%;
}

footer.myfooter article {
    xborder: 1px solid red;
    padding-left: 10px;
    padding-right: 10px;
}

footer.myfooter h3 {
    font-size: 140%;
}

footer .footerlink {
    color: white;
    font-size: 100%;
    text-align: center;
}

x.container-fluid x.container {
    padding-left:0;
    padding-right:0;
}

 .mainscreenimagebackground, .arse, #mainbanner {
    xbackground-image: url(background_mountains_1264_500_q90.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height:100%;
 }

 #mainbanner {
     height: 100%;
     width: 100%;
     color: white;
     xbackground-image: url('../background_mountains_1264_500_q90.jpg');
     xbackground-image: url('../background_mountains_full_size.png');
     xbackground-image: url('../bigstockphoto_Blue_Binary_369166.jpg');
     xbackground-image: url('../bigstockphoto_Travel_Design_284878.jpg');
     background-image: url('../pngtree_network-financial-background_179774_800_367.png');
     background-image: url('../pngtree_blue-dream-information-technology-background_583677_800_333.png');



     xbackground: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0)), url('../background_mountains_1264_500_q90.jpg');
     background-size: cover;
     margin-bottom: 50px;
 }

 /* Originally margins where 110 auto 130 auto */
 .primemessage {
     margin: 80px auto 90px auto;
     padding-left: 50px;
     padding-right: 50px;
     text-align: center;
 }

 @media (max-width: 767px) {
     .primemessage {
         margin: 40px auto 70px auto;
         text-align: center;
     }
 }

 .primemessage h2 {
     margin-bottom: 30px;

 }

 .primemessage .primemessagetext {
     margin-bottom: 80px;
 }

  .primemessage .primemessagetext p {
     font-size: 18px;
     line-height: 1.7;
     margin-left: 12%;
     margin-right: 12%;

 }

 .twopointtextonly {
     xborder: 4px dotted silver;
     text-align: center;
 }

 .twopointtextonly article {
     xborder: 4px dotted red;
     margin-bottom: 100px;
 }

 .twopointtextonly article h3 {
     margin: 0px 20px 20px 20px;
 }

 .twopointtextonly article p {
     margin: 0px 20px 18px 20px;
 }

 .bottommarginwide {
     margin-bottom: 50px;
 }

.sidemarginswide {
     padding: 0px 100px;
 }

.sidemarginsverywide {
     padding: 0px 180px;
     padding: 0px 20%; 
 }

.verticalmarginswide {
    padding-top: 40px;
    padding-bottom: 60px;
}

.centeredtext {
    text-align: center;
}

.lightbackground {
    background-color: #ededff;
}

div.ourpage {
    xborder: 3px solid red;
    margin-bottom: 80px;
}

/* I'd prefer to set bottom-margin on the last p but I don't know how to do that  */
div.ourpage2 {
    xborder: 3px solid orange;
    margin-top: 24px;
}

.ourpagex {
     xpadding: 0px 180px;
     xpadding: 0px 20%; 
 }



.ourpage h2 {
    margin-bottom: 26px;
}
 .ourpage p {
        max-width: 800px;
    }

 .ourpage img {
    height: 100px;
    width: 100px;
    float: left;
    margin-top: 50px;
    margin-right: 60px;
    margin-left: 30px;
    margin-bottom: 30px;
}

 div#preload { display: none; }

 .nav>li>a.firstlink {
     padding-left: 25px;
 }

 #btnSubmit {
     margin-top: 20px;
 }

.contactus {
    margin-left: 30px;
    background-color: #0069ff;
    font-size: 120%;
    padding-left: 24px;
    padding-right: 24px;
}

 .contactusreversed {
     border: 0px solid blue; 
     color: cornflowerblue;
     background-color: white;
     font-size: 17px;
     font-weight: bold;
     padding: 10px 50px;
 }

 #navFooter {
     background-color: #555;
     font-size: 15px;
     padding-top: 16px;
     padding-bottom: 16px;
     margin-top: 50px;
     margin-bottom: 0px;
     margin-left: 0px; 
     margin-right: 0px;
     text-align: center;
 }

    #navFooter a {
     color: #eee;    
    }

    p.companydata {
        font-size: 90%;
        margin: 0;
    }

@media (min-width: 768px) and (max-width: 991px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }

    body {
    xbackground-color: yellow;
    }
}

@xmedia (min-width: 992px) and (max-width: 1199px) {
    x.navbar-collapse.collapse {
        display: none !important;
    }
    x.navbar-collapse.collapse.in {
        display: block !important;
    }
    x.navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    x.navbar-header {
        float:none;
    }

    body {
    background-color: red;
    }
}