/*This is used to create a responsive website for the CSS Style.*/



/*Big tablet to 1200 px (width smaller than the 1140px row) */
@media only screen and (max-width: 1023px) {
    .hero-text-box {
        width: 100%; 
        padding: 0 2%;
    }   
    
    .row { padding: 0 2%; }/*Any time one denotation, bracket should be format this way. */
}



















/* Small tablet to big tablets 768px to 1023px.*/
@media only screen and (max-width: 1023px) {
		
    body { font-size: 18px; }
    section { padding: 60px 0; }
    

	
	.hero-text-box {
        width: 65%; 
        padding: 0 2%;
    }   
	
	img {
		width: 6.5%;
  		height: auto;
	}
	
	.portfolio-sample slide-container, .image-container-process, .slide-container-process {width:50%;}
	
	.button-container, .button-container-process{ width: 75.5%; }

	.skills-table {
		float: none; 
		margin-right: 10%;
		display: block;
		margin-left: 25%;
		-ms-flex-line-pack: center;
		align-content: center; 
	}

	.skills-table h4{
		margin-top: 20px;
		margin-left: 50%;
	}
	
    .icon-small { 
        width: 17px;
        margin-right: 5px; 
    }
    
    .contact-form { width: 100%; }

}
















/* Small phones to small tablet from 481 to 767 px.*/
@media only screen and (max-width: 767px) {
		
    body { font-size: 18px; }
    section { padding: 60px 0; }
    

	
	.hero-text-box {
        width: auto; 
        padding: 0 2%;
    }   
	
	img {
		width: 4%;
  		height: auto;
	}
	
	.portfolio-sample slide-container, .image-container-process, .slide-container-process {
		width:25%; 
	}
	
	.button-container, .button-container-process{ width: 48%; }

	.skills-table {
		float: none; 
		margin-right: 15%;
		margin-left: 15%;
		display: block;
		-ms-flex-line-pack: center;
		align-content: center; 
	}

	.skills-table h4{
		margin-top: 20px;
		margin-left: 80px;	}
	
    .icon-small { 
        width: 12px;
        margin-right: 2px; 
    }
	
	div.skill-icons{
		margin-left: 42%;
	}
	
	.col { width: 100%}
	
	
	
	.main-nav { display: none; }
	.mobile-nav-icon {display : inline-block;} 
	
	.main-nav {
		float: left;
		margin-top: 30px; 
		margin-left: 25px; 
	}    
	
	.main-nav li {
		display: block; /*No longer as Inline Block, this forces a line break so that there stack on each other.*/
	}
	
	.main-nav li a:link, 
	.main-nav li a:visited {
		display: block; 
		border: 0; /*No borders needed for mobile devices. */ 
		padding: 10px 0; 
		font-size: 100%;
	} 
	
	
	.sticky .main-nav { margin-top: 10px; }

	.sticky .main-nav li a:link,
	.sticky .main-nav li a:visited { padding: 10px 0; }
	.sticky .mobile-nav-icon { margin-top: 10px; }
	.sticky .mobile-nav-icon { color: #555; }
		
    h1 { font-size: 180%; }
    h2 { font-size: 150%; }
    
    .long-copy {
        width: 100%; 
        margin-left: 0%; 
    }
    
    .contact-form { width: 100%; }

}

























/* Small Phones from 0 to 480 pixels.*/
@media only screen and (max-width: 480px) {
    
    section{ padding: 25px 0; }
    .contact-form {width: 100%;} 
}