@charset "UTF-8";
/* Body */
body {
font-family:arial,helvetica,sans-serif;
font-weight: 400;
font-style: normal;
	background-color: #FFF;
	margin: 0;
    
}

html {
  scroll-behavior: smooth;
}


h1
{
margin-top: 0px;
padding-top:25px;
padding-left: 15%;
padding-right: 25px;
font-family:bebas-neue,sans-serif;
font-style: normal;
font-weight: 400;
 font-size:  60px;
line-height: 90%;   
color: #000;
text-shadow: 3px 3px 1px #FFF;

}

h2
{
color:#000;
font-family:bebas-neue,sans-serif;
font-size: 36px;
font-weight: normal;     
}

h3
{
margin-top: 0px;
color:#CCC;
font-size: 16px;
font-weight: normal; 
width:100%;
padding-top: 3px;
padding-bottom: 3px;
text-indent: 4px;
border-bottom: 1px Solid #666;
border-top: 1px Solid #666;
}

h4
{
color:#CCC;
margin-top:0px;
font-size: 26px;
font-family:bebas-neue,sans-serif;
padding-top: 20px;
width:90%;
border-bottom: 3px solid #000;
padding-bottom: 20px;
background-color: #999;

}


/* unvisited link */
a:link {
color: #000;
text-decoration: none;
}

/* visited link */
a:visited {
color: #666;
}

/* mouse over link */
a:hover {
color: #519efc;
}

/* selected link */
a:active {
  color:#0060FF;

}


/* Container */
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top:0px;
margin-bottom:0px;   
overflow:auto;

    
}

.titler {
margin-left:auto;
margin-right:auto;
margin-top:30px;
color: #000;
font-family:bebas-neue,sans-serif;
font-size: 36px;
width: 93%;
padding-bottom: 1px;
text-align:justify;
line-height: 25px;
font-weight: normal;
text-shadow: 1px 1px 2px #CCC;
    
}





/* Header */
header {
width: 100%;
height:auto;
overflow: hidden;
text-align: left;
padding-top: 10px;
padding-bottom: 0;
background-color: #FFF;
margin-top: 30px;
margin-bottom: 30px;

}


.logo

{
float:left;
margin-left: 1px;
margin-right: 1px;
margin-top:0px;
margin-bottom:0px;  
}

.responsive {
width: 490px;
height: auto;
margin-left:35px;
}



.callnow {
font-family:bebas-neue,sans-serif;
 font-size:  34px;
line-height: 30px;
float:right;
margin-left: 0px;
margin-right: 30px;
margin-top:15px;
margin-bottom:0px;   
text-align: right;

    
}



.slcontainer {
padding: 1%;
width:93%;
height: auto;
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
border-left:1px solid #333;
border-right:1px solid #333;
border-top:1px solid #333;
border-bottom:1px solid #333;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #141414;

}


.vidbox {
margin-left:auto;
margin-right:auto;
margin-top:30px;
margin-bottom:30px;
width :98%;
height:auto;
overflow: hidden;
text-align: center;
}

#background-video {
width: 100%;
height:100%;
object-fit: cover;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
overflow: hidden;
}


video {
  width: 100%;
  height: auto;

}


.play {
font-size: 13px;
background-color: #FFF; 
color: #000; 
padding: 3px; 
border: 1px solid #000; 
border-radius: 5px;
width: 80px;
height: auto;
margin-bottom: 5px;
box-shadow:  1px 1px 1px rgba(0, 0, 0, 0.3);

}


.play:active { 
background-color: black; 
color: #FFF; 
  } 

.pause {
font-size: 13px;

background-color: #FFF; 
color: #000; 
padding: 3px; 
border: 1px solid #000; 
border-radius: 5px;
width: 80px;
height: auto;
box-shadow:  1px 1px 1px rgba(0, 0, 0, 0.3);

}

.pause:active { 
    color:#FFF;
background-color: black; 
background-repeat: no-repeat;
background-position: left;
} 




.nav {
width :100%;
height : 40px;


padding-top : 0;
text-align : center;
z-index: 10;
margin-left: auto;
margin-right: auto;  	
margin-top: 40px;
    
  

}

.styledvideo {
margin-top:20px;
box-shadow: 3px 3px 5px #666;
background-color: #282828;
z-index: 1;
border: 1px solid #000;
width: 100%;
padding:10px;

}

.hero_header {
color: #000;
text-align: center;
margin: 0;
letter-spacing: 4px;
}


.text_column {
width: 85%;
padding-top:20px;
font-size: 24px;
font-weight: normal;
line-height: 20px;
float: left;
padding-left: 5%;
padding-right: 5%;
color: #FFF;
text-shadow: 1px 1px 2px #000;


}

.intro {
height: 40vh;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 0px;
border-top: 0px solid #000;
background-image: url("image.png");
background-size: contain;    
background-repeat:no-repeat;
background-position: center;
border-bottom: 0px solid #000;

}


.info {
z-index: 1;
height: 40vh;
overflow: hidden;
width: 30%;
margin-left: 20px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 0px;

}
    
.column {
width: 50%;
text-align: justify;
margin-left:30px;
margin-bottom:30px;
z-index: 20;
background-image: url(socialtop.jpg);
background-size: contain;

}


.column2 {
width: 50%;
text-align: center;
padding-top: 30px;

}

.intro .column h2 {
width: 80%;
font-size:30px;
text-shadow: 1px 1px 2px #000;
padding-left: 30px;
text-align: left;
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
color:#FFF;
font-family: open-sans, sans-serif;
font-weight: 700;

}

.intro .column p {
padding: 30px;
text-align: justify;
line-height: 25px;
font-weight: normal;
margin-left: 20px;
margin-right: 20px;
width: 80%;
margin-top: -20px;
text-shadow: 1px 1px 2px #000;
color: #000;
    
}


.intro .column h3 {
color: #000;
text-align: center;
}


.apps {
float:left;
clear:both;
width: 100%;
border-bottom : 1px solid #000;
border-top : 1px solid #FFF;
margin-top:0px;
margin-bottom: 0px;
padding-top:10px;
padding-bottom:10px;
background-position: center;
background-color: #FFF;
    
}

.appstext {
color: #000000;
font-size: 16px;
width: 90%;
margin-left:5%;
margin-right:5%;
text-align:center;
line-height: 22px;
font-weight:bold;

}

.band {
clear:both;
float: left;
width: 100%;
height:auto;
margin-top: 0px;
margin-bottom: 0px;
border-bottom : 0px solid #000;
background-color: #FFF;

}

.gallery {
margin-left:3% ;
margin-right:3% ;
width: 93%;
padding-bottom: 0px;
padding-top: 0px;
margin-top:  10px;
margin-bottom: 0px;
background-color: #FFF;
border: 0px solid #000;
display: flex;

}


.spacer {
height:5px;
background-color: #000;
margin-top:0px;

}
    
.thumbnail {

display:inline;
position:relative;
width: 33%;
overflow:auto;
float: left;
margin-top: 20px;
margin-bottom: 0px;
background-color: #F0F0F0;	
padding-bottom: 0px;
margin-left: 1%;
margin-right: 1%;
padding-top: 0;
border-bottom: 4px solid #000;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
        border-top: 1px solid #000;
        border-left: 1px solid #000;

        border-right: 1px solid #000;



    
}


.thumbnailtitle
{
float: left;
    
margin-top:-1px;
    margin-bottom:10px;

font-size: 26px;
font-family:bebas-neue,sans-serif;
padding-top: 20px;
padding-left:5%;
width:95%;
    border-top: 3px solid #000;

border-bottom: 3px solid #000;
padding-bottom: 20px;
color: #000;
background-color: #D8D8D8;
box-shadow: 0px 2px 3px 0px #999 inset;



}
.smbutton {
position: absolute; 
     bottom: 0px; 
	width: 100%;
    height:20px;
    clear:both;
    float: left;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left:0px;
	text-align: center;
    font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.3s linear;
    background-color:#CCC;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.9) inset;

           
}
.smbutton:hover {
	background-color: #CCC;
	color: #FFFFFF;
}





.gallery .thumbnail p {
	margin: 0 0 30px 0;
    width:90%;
	color: #000;
	text-align: left;
	padding-left: 5%;
    padding-right: 5%;
    font-size:15px;
       text-shadow: 1px 1px 1px #ccc;
}

.cards {
	width: 100%;
	height: auto;
	max-width: 400px;
	max-height: 200px;
	opacity: 1;
    
}


.button {
	width: 200px;
	margin-top: 40px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	text-align: center;
	vertical-align: middle;
	border-radius: 0px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
	border: 3px solid #000;
	transition: all 0.3s linear;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    	background-color: #CCC;
}


.button:hover {
	background-color: #CCC;
	color: #FFFFFF;
}



.about {
float:left;
width: 100%;
padding-top: 30px;
padding-bottom: 20px;  
overflow: auto;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
background-color: #F0F0F0;

}




.about h1 {
font-size:40px;
text-shadow: 1px 1px 4px #333;
text-align: left;
font-family: open-sans, sans-serif;
color: #000;


}


.abouttext {
float:left;
color: #000;
font-size: 16px;
width: 45%;
margin-left:5%;
height:100%;
padding-bottom: 25px;
text-align:justify;
line-height: 25px;
font-weight: normal;
text-shadow: 1px 1px 2px #CCC;

}


.abouttext1 {
float:right;
color: #000;
font-size: 16px;
width: 40%;
margin-left:5%;
margin-right:5%;
padding-bottom: 25px;
text-align:justify;
line-height: 20px;
font-weight: normal;
            text-shadow: 1px 1px 2px #CCC;

}


.prodlist {
    
margin-left:4% ;
margin-right:3% ;
width: 91%;
margin-top: 30px;
    margin-bottom: 5px;

background-color: #F0F0F0;	
padding-top: 1px;
padding-bottom: 1px;
    border: 1px solid #000;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);


}

.prodlist H2 {
    
margin-left:auto;
margin-right:auto;
color: #000;
font-size: 36px;
width: 95%;
padding-bottom: 1px;
text-align:justify;
line-height: 25px;
font-weight: normal;
text-shadow: 1px 1px 2px #CCC;

}

.prodlist p {
    
margin-left:auto;
margin-right:auto;
color: #000;
font-size: 16px;
width: 95%;
padding-bottom: 1px;
text-align:left;
line-height: 25px;
font-weight: normal;

}



.logos  {
    width:100%;
    margin-left: auto;
       margin-right: auto;
    background-color: #000;
 overflow:auto;  
    border-bottom: 1px solid #fff;
}

.footer {
	background-color: #D8D8D8;
background-repeat: repeat-x;
	padding-top: 0px;
	padding-bottom: 40px;
    clear: both;
	width: 100%;
    margin-top: 0px;
border-top: 0px solid #FFF;
    margin-bottom: 0px;
    overflow: auto;


}


.footcol {
	display: inline-block;
	width: 50%;
	text-align: center;
	padding-top: 30px;
    padding-bottom: 0px;
	float: left;


}


.copyright {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #111;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
    font-size: 10px;

}


/* Small Desktops */
@media (min-width: 768px) and (max-width: 1000px) {
    
h1
{
 font-size: 40px;

}
    
    .logo

{
float:left;
margin-left: 1px;
margin-right: 1px;
margin-top:0px;
margin-bottom:0px;  
    width:50%;
}
    
        .responsive {
  width: 100%;
  height: auto;
}
    
    .callnow {
font-family:bebas-neue,sans-serif;
 font-size:  24px;
line-height: 20px;
float:leftt;
margin-left: 20px;
margin-right: 20px;
margin-top:15px;
margin-bottom:0px;   
text-align: right;

    
}

.gallery {
display: flex;
}
    
.thumbnail {
position:relative;
width: 48%;
    }

    
.text_column {
	width: 99%;
    text-align: justify;
}
.thumbnail {
	width: 48%;
    margin-top:20px;
}
.text_column {
	width: 90%;
	margin: 0;
	padding: 5%;
}
.intro .column p {
	width: 90%;

}
    
.column {
width: 60%;

}
    
.column2 {
width: 50%;

}
    


    

    
        .abouttext {
        float:left;
    color: #000;
    font-size: 16px;
		width: 90%;
	margin-left:5%;
    margin-right:5%;


}


.abouttext1 {
    float:right;
    color: #000;
    font-size: 16px;
	width: 90%;
	margin-left:5%;
    margin-right:5%;

}
    
    .appstext {
    font-size: 13px;

}
    

    
   } 





/* Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
    
    
    
    
    
    h1
{

 font-size:  25px;



}


    header {
 height:auto;
        overflow: hidden;

}
    
    .logo

{
float:left;
margin-left: 30px;
margin-right: 1px;
margin-top:0px;
margin-bottom:0px; 
    width:90%;
}
    
.responsive {
  width: 90%;
                margin-left: auto;
                     margin-right: auto;

}
    
    .callnow {
 font-size:  30px;
line-height: 30px;
float:left;
margin-left: 50px;
margin-top:10px;
margin-bottom:0px;   
text-align: left;

    
}
    
    
    .info {
z-index: 1;
    height: 20vh;
        
    }
    
.gallery {
     

display: inline-block;
                

}
    

    

.text_column {

   padding-left: 20px;
	padding-right: 20px;
	width: 80%;

}
    
    .text_column h2{
    padding-left: 20px;
	padding-right: 20px;
	width: 80%;
}
    
   .abouttext {
	width: 80%;
          padding-left: 20px;
	padding-right: 20px;
    }
        
        .abouttext1 {
	width: 80%;
              padding-left: 20px;
	padding-right: 20px;
    
    }


    
.thumbnail {
	width: 98%;
min-height:auto;
    overflow:auto;
    margin-bottom:20px;
      margin-top:20px;
}

.column {

	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}
    
 

.profile {
	width: 100%;
}
    
    
    
.intro {
	
    height: 250px

}
    

    .intro .column h2 {
	width: 90%;
        font-size: 30px;
	text-align: left;
	padding-left: 0px;
}
    

    
    .footcol {
	width: 100%;
	text-align: center;
	padding-top: 30px;
    	padding-bottom: 0px;
	float: left;

}
    .appstext {
    font-size: 13px;

}

}








    /* Mobile */
@media (max-width: 375px) {
    
    header {
 height:auto;
        overflow: hidden;
        width:100%;
   

}
    
        h1
{

 font-size:  20px;

}
    
.logo

{
float:left;
margin-left: 1px;
margin-right: 1px;
margin-top:0px;
margin-bottom:0px;  
height: 60px;
    
    }
    
    
    .responsive {
width: 300px;
margin-left:15px;
}
    
    
.callnow {
 font-size:  20px;
line-height: 20px;
float:left;
margin-left: 20px;
margin-top:0px;
margin-bottom:0px;   
text-align: left;

    
}
    
    .vidbox {
display: none;
}
    
    
    
    .gallery {
     
        display: inline-block;

 
}
    
    video {
  width: 90%;
  height: auto;

}
    
    
    .abouttext {
        float:left;
    color: #000;
    font-size: 16px;
		width: 80%;
	margin-left:5%;
    margin-right:5%;


}


.abouttext1 {
    float:right;
    color: #000;
    font-size: 16px;
	width: 80%;
	margin-left:5%;
    margin-right:5%;

}


.text_column {
	width: 100%;
	text-align: justify;
	padding: 0;
}
.intro .column p {
	width: 80%;
	margin-left: 0px;
}
.text_column {
	padding-left: 20px;
}
.thumbnail {
	width: 100%;
}
.column {
	width: 50%;
	margin-top: 0px;
    	margin-bottom: 20px;
    
}
.hero_header {
	padding-left: 20px;
	padding-right: 10px;
	line-height: 22px;
	text-align: center;
}
    
.appstext {
    font-size: 13px;

}

}