@media all and (max-width: 799px) and (min-width: 520px){

*{ margin:0px;
   padding:0px;
}
html, body{
	margin:0px;
   padding:0px;
}
body{
font-family: "trebuchet MS", Arial, Tahoma;

width: 100%;

}
#content{
width:100%;
margin: 0% auto;
max-width: 799px;

}
#content h2{
color:#fff;
text-align:center;
font-size: 3em;
}

#navigation{
	visibility: hidden;
	display: none;

}
#navbar{
	max-width: 799px;
	height: auto;
	position: fixed;
	z-index: 1;
	margin-top: 0%;
	padding-top: 0.5%;
	padding-bottom: 1%;
	background:#c23a2c;
    opacity: 1;
    top: 0px;
    width: 100%;
    display: block;
    visibility: visible;
    -webkit-filter: drop-shadow(0px 20px 30px black);
    -ms-filter: drop-shadow(0px 20px 30px black);
    -o-filter: drop-shadow(0px 20px 30px black);
   
}


#navbar a{
	margin: 0% auto;
	margin-top: -2%;
	padding: 0%;
	margin-right: 0%;
	font-size: 1em;
	font-weight: 200;
	text-decoration: none;
	color: white;
	position: relative;
	text-align: center;
	-moz-transition: all 500ms ;
-ms-transition: all 500ms ;
-o-transition: all 500ms ;
transition: all 500ms ;
display: block;
letter-spacing:5px;
width: 100%;


}
#navbar a:hover{
	
	color: black;
}

#navbar img{
	float: none;
	width: 8%;
	max-height: 50px;
	padding-bottom: 1%;
	padding-left: 2%;
	position: relative;
	margin-left: 2%;
	margin-right: 2%;
	margin-top: 0.5%;
	
	
}
#navbar h4{
	float: left;
	width: 50%;
	padding-bottom: 1%;
	padding-left: 3%;
	position: relative;
	margin-left: 15%;
	margin-right: 0%;
	font-size: 0.8em;
	display: inline-block;
	color: white;
	margin-top: -4%;
	
}
.mobile {
	visibility: visible;
	display: inline-block;
    padding-top: 3%;
    float: right;
    max-width: 5.5%;
    margin-left: 10%;
	

}
.mobile:hover {
	cursor: pointer;

}
#slidemenu{
	margin-top: 0%;
	background: #c23a2c;
	height: auto;
	width: 100%;
	position: fixed;
}
#slidemenu a{
	margin-top: 5%;
	text-align: center;
	background:#d45729;
	color:#fff;
	padding: 0.5%;
}
#slidemenu a:hover{
	color: #000;
}


#home img{
	width: 20%;
	margin: 0% auto;
	position: relative;
	margin-top: 30%;
	margin-left: 40%;
}

#hgroup h1{
	font-size: 2.5em;
	color: red;
	font-weight: bold;
	background-color: black;
	opacity: 0.7;
}
 #hgroup h3{
	font-size: 1.5em;
	margin-top: 1%;
	color: white;
	font-weight: 100;
	position: relative;
	opacity: 0.5;
	background-color: black;

}
#hgroup{
	display: block;
	width: 100%;
	position: absolute;
	margin-top: 1%;
	text-align: center;
	-webkit-filter: drop-shadow(0px 0px 10px black);
	width: 100%;
	max-width: 1400px;
	
}
#project{
	height: 50px;
	
	margin-left: 35%;
	margin-bottom: 15%;
	font-size: 0.8em;
	text-align: center;
	background-color: rgba(243, 156, 18,1.0);
	color: white;
	border: none;
	position: relative;
	margin-top: 20%;
	width: 30%;
	filter:none;
	-webkit-filter:none;
	box-shadow:2px 2px 23px #000000;
	-moz-transition: all 500ms ;
-ms-transition: all 500ms ;
-o-transition: all 500ms ;
transition: all 500ms ;
}
#project:hover{
    background-color: rgba(211, 84, 0,1.0);
    cursor: pointer;
    color: #282828;

}

#layerB h2{
	padding-top: 5%;
	font-size: 2em;
}
#layerB img{
	padding-top: 5%;
	padding-left: 13%;
	margin: 0%;
	width: 30%;
}
#layerB p{
	padding-top: 8%;
	padding-left: 7%;
	margin: 0%;
	width: 90%;
	display: inline-block;
	margin-bottom: 10%;
	color: #fff;
	font-size: 1.5em;
	line-height: 50px;
}
#layerB a{
	color: #000;
	text-decoration: none;
}
#layerB a:hover{
	color: #fff;
}
/*----------------------------------------online----------------------------------*/
#online{
	background-color: #fff;
	color: #000;
}
#online h2{
	color: #000;
	padding-top: 5%;
	font-size: 2em;
}
#online img{
     margin-left: 10%;
     margin-top: 5%;
     width: 80%;
     float: none;
}
#getOnline{
	background-color: #000;
	color: #fff;
	display: block;
	float: none;
	
	font-size: 1.5em;
	letter-spacing: 3px;
	margin-top: 1em;
	margin-left: 10%;
	border: 0px;
	width: 80%;
	text-decoration: none;
}
#getOnline:hover{
	background-color: #ff7e09;
}
#online p{
	padding-top: 2%;
	padding-left: 7%;
	margin: 0%;
	width: 80%;
	display: inline-block;
	margin-bottom: 10%;
	font-size: 1.7em;
	line-height: 50px;
}
#online p span{
	color: #5b8509;
}
#online p span:hover{
	color: #000;
}

/*----------------------------------------end online----------------------------------*/
/*----------------------------------------solution----------------------------------*/
#solution{
	background-color: #fafafa;
	height: 100%;
}
#solution h2{
	color: #222;
	padding-top: 5%;
	font-size: 2.2em;
}
#solution p {
	text-align: center;
	font-size: 1em;
    color: #333;
    letter-spacing: 3px;
}
#boxy-box{
	width: 90%;
	height: 100%;
	display: inline-block;
	margin-left: 0%;
	margin-top: 3%;
}
.boxy{
	width: 90%;
	min-width: 200px;
	height: 100%;
	border: 10px solid #333;
	display: inline-block;
	margin: 0.2%;
	margin-top: 0.9%;
	margin-left: 9%;
   background-color: #fff;
-moz-transition: all 300ms ;
-ms-transition: all 300ms ;
-o-transition: all 300ms ;
transition: all 300ms ;
}
.boxy:hover{
	border: 10px solid #F27935;
	
}
#solution .boxy .box-title{
	text-align: center;
	font-size: 1.5em;
    color: #ff7e09;
    letter-spacing: 3px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-weight: 700;
    border:0px;
    background-color: #22313F;
    height: 100%;
}
#solution .boxy .box-title:hover{
	color: #ff7e09;
}
#solution .boxy .fa{
	text-align: center;
	width: 100%;
	padding-bottom: 20px;
    padding-top: 20px;
}
#solution .boxy .box-head{
	text-align: center;
	font-size: 1.3em;
    color: #333;
    letter-spacing: 3px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-weight: 700;
}
#solution .boxy .box-cont{
	font-size: 1em;
    color: #333;
    width: 95%;
    margin: 0px auto;
    padding-bottom: 10px;
    padding-top: 20px;
}
#solution-button{
	background-color: #000;
	color: #fff;
	padding: 20px 40px;
	font-size: 1.3em;
	letter-spacing: 3px;
	margin-top: 3%;
	border: 0px;
    width: 50%;
    margin-left: 30%;
    margin-bottom: 5%;
  
}
#solution-button:hover{
	background-color: #ff7e09
}
/*----------------------------------------end solution----------------------------------*/
#portfolio h2{
	padding-top: 5%;
	font-size: 4em;
	color: #222;
}

#pics{
	width: 90%;
    position: relative;
	margin: 0px auto;
	padding-right: 0%;
	padding-left: 0%;
	margin-top: 5%;
	margin-left: 8%;
	/*-webkit-filter: drop-shadow(0px 40px 30px black);*/
    display:inline-block;
		
}
#pics img{
	width: 40%;
    margin-left: 2%;
    margin-bottom: 2%;
	display: inline-block;
	position: relative;
	border: 10px solid #333;
	-webkit-filter: sepia(0.8);
	-ms-filter: sepia(0.8);
	-o-filter: sepia(0.8);
	-moz-filter: sepia(0.8);
	
-moz-transition: all 500ms ;
-ms-transition: all 500ms ;
-o-transition: all 500ms ;
transition: all 500ms ;
}

#pics img:hover{
	
	-webkit-filter: sepia(0);
	-ms-ilter: sepia(0);
	-o-filter: sepia(0);
	-moz-lter: sepia(0);
	border: 10px solid #f59d1f;
	

}

#layerD h2{
	padding-top: 7%;
	font-size: 2em;
}
#vid{
	margin-left: 0%;
	margin-top: 8%;

}

#vid img{
	width: 40%;
	margin-left: 3%;
    -webkit-filter: sepia(0.4);
    -webkit-transition:-webkit-transform 500ms;
    margin-top: 3%;
}
#vid img:hover{
	-webkit-transform:scale(1.1);
	
}
/*.over{
	visibility: hidden;
	position: absolute;
	margin-top: 1.5%;
	margin-left: 5%;
	font-size: 2em;
	color: white;
	display: inline;
	z-index: 1;
	-webkit-transition:-webkit-transform 1000ms;
}
.over p:hover{
    visibility: visible;
}*/

#hvid{
	margin-left: 0%;
	margin-top: 3%;

}

#hvid img{
	width: 40%;
	margin-left: 3%;
    -webkit-filter: sepia(0.4);
}
#layerD button{
	height: 65px;
	
	margin-left: 30%;
	margin-bottom: 5%;
	font-size: 1.5em;
	text-align: center;
	background-color: #e84c3d;
	color: white;
	border: 5px solid #333;
	position: relative;
	margin-top: 5%;
	width: 40%;
}
/*------------------------------------live feed-----------------------*/
#live-feed{
	display:block;
	background-color: #fafafa;
	padding-left: 0%;
	padding-top: 3%;
	padding-bottom: 3%;
	
}
#live-feed h2{
	background-color: #2c3e50;
	color: #ddd;
	border: 5px solid #222;
	font-size: 43px;
	margin-right: 0%;
	margin-bottom: 2%;

}
.feed{
	width: 80%;
	display:block;
	margin-left: 10%;
	margin-bottom: 2%;

}

#fb-root {
    display: none;
}

/* To fill the container and nothing else */

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

.fb-like-box{
	border: 5px solid #000;
	padding-bottom: 4.5px;
	height: 100%;
	width: 100%;

}

.tw{
	border: 5px solid #000;

    
}
.yahoo{

	border: 5px solid #000;
	padding:0px;

}
}
/*------------------------------------end live feed-----------------------*/

#about h2{
	padding-top: 5%;
	font-size: 4em;
	color: #222;
}
#about img{
	
	max-width: 40%;
	height: auto;
	margin-top: 5%;
	margin-left: 27%;
	margin-bottom: 0%;
	border: 10px solid #333;
}

#abt{
	display: inline-block;
	width: 100%;
	position: relative;
	margin-bottom: 2%;
}
#abt .para p{
	height: auto;
	font-size: 1em;
	width: 90%;
	margin-right: 5%;
	margin-top: 10%;
	clear: both;
 
}





#contact h2{
	padding-top: 5%;
	font-size: 3em;
}
.gomla{
	font-size: 1.2em;
	margin-top: 2%;
	width: 93%;
	margin-left: 0%;
	margin-bottom: 0%;
	background-color: #fafafa;
	padding: 2%;
	height: 10%;
	padding-left: 5%;
	color: #222;
    border-top: 10px solid #333;
    border-bottom: 10px solid #333;

}

#contact-box form{
	display: vertical;
	width: 70%;
	max-width: 500px;
	height: 100%;
	margin-top: 0%;
	margin-left: 10%;
	/*-webkit-filter: drop-shadow(0px 10px 10px black);*/
	margin-right: 0%;
	padding: 2%;
	/*background-color: #304e4e;*/
	font-size: 1em;
	color: white;

	

}

form, label, input, textarea{ 
	display: block;
	width: 100%;
	font-size: 1.5em;
	height: auto;
	
}
label, input, textarea{
	-webkit-box-shadow: 26px 54px 67px 10px rgba(0,0,0,0.75);
-moz-box-shadow: 26px 54px 67px 10px rgba(0,0,0,0.75);
box-shadow: 26px 54px 67px 10px rgba(0,0,0,0.75);
}
#send{
	background-color: #e84c3d;
	color: white;
	border: none;
	width: 50%;
	margin-top: 3%;
	margin-left: 0.7%;
	padding: 2%;
	float: right;

}

#info{
	display: none;
	visibility: hidden;
}
#infobar{
	width: 100%;
	background: #F2784B;
	display: inline-block;;
	color: #222;
    visibility: visible;
    padding-top: 1%;
	padding-bottom: 1%;
	margin-top: 5%;
	line-height: 40px;
	border-top: 10px solid #333;
    border-bottom: 10px solid #333;
    font-weight: 900;
    font-size: 1.1em;
}
#infobar h3{
	text-align: center;
	font-size: 1.1em;

}
#infobar h3 a{
	color: #fff;

}
#contact #info .email{
	font-size: 1.2em;
	margin-top: 0%;
	padding: 0%;
	padding-left: 0%;
	
}



#follow{
	width: 100%;
	background: #fff;
	display: block;
    visibility: visible;
    -moz-transition: all 500ms ;
-ms-transition: all 500ms ;
-o-transition: all 500ms ;
transition: all 500ms ;

}


#follow h2{
    text-align: center;
    color: #282828;
    font-size: 2em;
    margin-top: 2%;
    
}
#follow img{
     width: 10%;
     margin-right: 3%;

}
.folo{
	margin-left: 25%; 
	margin-top: 2%;
	margin-bottom: 2%;
}


#layerG{
background:#28323c;
height:40px;
background-size: cover;
width: 100%;
margin-bottom: 0px;
}
#layerG img{
	float: left;
	width: 6%;
	max-height: 76px;
	padding-bottom: 0%;
	padding-left: 2%;
	position: relative;
	margin-left: 2%;
	margin-top: 1%;
}
#layerG p{
	display: inline-block;
	color: #bdc2c8;
	margin-left: 9%;
	margin-top: 1%;
    font-size: 0.5em;
   width: 80%;


}
#layerG span{
	color: white;
	
}
header, section, article, header, nav, footer, aside, hgroup{display:block;}

#last{
	display: none;
}

#icons{
	display: none;
	visibility: hidden;
}



}