/* template.css overwrites -- use only when absolutely necessary
================================*/
.banner-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 450px;
	background: url(../imgs/hero.jpg) no-repeat 0 0;
	background-size: 189.72%; }

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button-bevel;
}
/* custom CSS on a per project basis
================================*/
.page-btn { width: 100%; }

.introtxt { text-align: center; padding-top: 50px; } 
.introtxt h1 { color: #2b6e85; text-transform: uppercase; font-weight: bolder; padding-bottom: 20px; font-size: 40px;  }
.introtxt p { width: 60%; font-weight: 300; font-size: 18px; margin-left: auto; margin-right: auto; }

#brands {  padding-bottom: 50px; padding-top: 50px; text-align: center; }
#brands img { padding: 15px; }
#brands ul li{ display: inline-flex; }
.logos-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent; }

.logos-in:hover, .logos-in:focus, .logos-in:active {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }


.pannels h3 { color: #2b6e85;font-weight: bolder;padding-bottom: 20px;font-size: 30px; text-align: center; }
.pannels p { color: #575757;font-size: 16px;font-weight: lighter; text-align: center; }



.modules { position: relative;border: 14px solid white;  margin: 0;background: #ebebeb; }
.modules:after { content: '';position: absolute;top: -15px;left: -15px;right: -15px;bottom: -15px;background: #6bbdff;z-index: -1; }

.modules-txt-r { position: relative; border-left: 14px solid white; border-right: 14px solid white; border-top: 14px solid white; border-bottom: 14px solid white;  background: #ebebeb;  padding: 20px;  margin-top: 5%;  margin-left: -17%;  z-index: 2;  height: 80% }
.modules-txt-r:after { content: '';position: absolute;border: 1px solid #6bbdff;top: -15px;left: -15px;right: -15px;bottom: -15px;z-index: -1; }

.modules-txt-l { position: relative;  border: 14px solid white;  background: #ebebeb;  padding: 20px;  margin-top: 5%;  margin-left: 0;  z-index: 2;  height: 80% }
.modules-txt-l:after { content: '';position: absolute;border: 1px solid #6bbdff;top: -15px;left: -15px;right: -15px;bottom: -15px;z-index: -1; }

.pannel-1 { background-image: url(../imgs/p-security.jpg);  height: 450px;  background-repeat: no-repeat;  background-position: 20%; }
.pannel-2 { background-image: url(../imgs/p-amazon.jpg);  height: 450px;  background-repeat: no-repeat;  background-position: right;  position: relative;  margin: 0px -195px; }
.pannel-3 { background-image: url(../imgs/p-lights.jpg);  height: 450px;  background-repeat: no-repeat;  background-position: left; }
.pannel-4 { background-image: url(../imgs/p-sensor.jpg);  height: 450px;  background-repeat: no-repeat;  background-position: right;  position: relative;  margin: 0px -195px; }
.pannel-5 { background-image: url(../imgs/p-thermostat.jpg);  height: 450px;  background-repeat: no-repeat;  background-position: 5%; }
.pannel-6 { background-image: url(../imgs/p-wifi.jpg);  height: 450px;  background-repeat: no-repeat;  background-position: 60%;  position: relative;  margin: 0px -195px; }
.pannel-7 { background-image: url(../imgs/p-ring.jpg);  height: 450px;  background-repeat: no-repeat;  background-position: left; }



/* responsive CSS on a per project basis
================================*/

	/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) { 
        
        .introtxt p {  width: 90%; font-size: 14px; }
        .modules-txt-r { margin-left: 0;border-top: none; border-left: 14px solid white; border-right: 14px solid white; padding: 10px; margin-top: -25%; }
        .pannel-2 { margin: 0; background-position: 75% 0; }
        .pannel-4 { margin: 0; }
        .pannel-6 { margin: 0; }
     
    }


    @media only screen and (min-width : 425px) { 

        .modules-txt-r { margin-left: 0; }

    }


    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
    }


    @media only screen and (min-width: 641px) {
    	.banner-img { background-position: 0 100%; background-size: 100%; }	

	}


    /* Small Devices, Tablets */
    @media only screen and (min-width : 766px) {



    }

    @media only screen and (min-width : 767px) {

        .pannels h3 { font-size: 20px; }
        .modules-txt-r { border: 14px solid white;  padding: 20px;  margin-top: 5%; margin-left: -17%; }

	}


    @media only screen and (min-width : 768px) {

    
        .pannels h3 { font-size: 20px; text-align: left; }
        .pannels p { text-align: left; }
        .modules-txt-r { margin-left: -17%; }
        .pannel-2 { margin: 0px -126px; }
        .pannel-4 { margin: 0px -125px; }
        .pannel-6 { margin: 0px -125px; }
		
	}


    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
       
        .introtxt p { width: 60%; font-size: 18px; }
        .pannels h3 { font-size: 20px; text-align: left; }
        .pannels p { text-align: left; }
        .modules-txt-r { margin-left: -17%; }
        .pannel-2 { margin: 0px -195px; }
        .pannel-4 { margin: 0px -125px; }
        .pannel-6 { margin: 0px -125px; }

    }


    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

        .pannels h3 { font-size: 30px; text-align: left; }
        .pannels p { text-align: left; }
        .modules-txt-r { margin-left: -17%; }
        .pannel-2 { margin: 0px -195px; }
        .pannel-4 { margin: 0px -195px; }
        .pannel-6 { margin: 0px -195px; }


    }