@media only screen and (max-width: 1279px) {
/* reference width: 960px */

#header-inn {	
width: 960px;
}
#container {
width: 960px;
}
.icons-container {
padding: 0 4%;
}
.icon-box img {
width: 54px;
}
.icon-box h1 {
font-size: 15px;
}
.icon-box h2 {
font-size: 13px;
}
.front-inn {	
width: 960px;
}
#foot-inn {	
width: 960px;
}
}
@media only screen and (max-width: 1023px) {
/* reference width: 720px */

.header {
width: 100%;
}
#header-inn {	
width: 720px;
}
.front-inn {
display: block;
width: 720px;
}
.front-intro{
padding: 20px 10px;	
}
.front-form {
width: 700px;
min-height: 550px;
margin: 40px 10px 0;
float: revert;
}

#container {
width: 720px;
}
.icons-container {
width: 720px;
height: 110px;
}
.icon-box {
position: relative;
display: inline;
margin: 0;
}
.icon-box img {
width: 54px;
}
.icon-box .txt {
	margin-left: 0;
	}
.icon-box h1 {
font-size: 14px;
text-align: center;
margin: 0 auto;
}
.icon-box h2 {
font-size: 13px;
text-align: center;
margin: 0 auto;
box-sizing: border-box;
}

#prod {
padding: 40px 0;
}

.title {
width: 720px;
margin: 50px auto 0px;
}
#contact {
width: 620px;
}
#foot-inn {	
width: 720px;
}
}

@media only screen and (max-width: 767px) {
/* reference width: 680px */

#header-inn {	
width: 680px;
}
#container {
width: 680px;
}
.front-inn {
width: 680px;
}
.front-form {
width: 660px;
}
.icons-container {
width: 680px;
height: 110px;
}
.icon-box {
position: relative;
display: inline;
margin: 0 3px;
}
.icon-box img {
width: 60px;
}
.icon-box h1 {
font-size: 14px;
text-align: center;
margin: 0 auto;
}
.icon-box h2 {
font-size: 13px;
text-align: center;
margin: 0 auto;
box-sizing: border-box;
}
#prod {
padding: 40px 0;
}

.title {
width: 580px;
margin: 40px auto 0px;
}
#contact {
width: 580px;
margin: 0 auto 40px;
}
#foot-inn {
width: 680px;
}
}

@media only screen and (max-width: 719px) {
/* reference width: 560px */

#header-inn {	
width: 560px;
}
.front-inn{
width: 560px;
}
.front-intro {
width: 100%;
padding: 0;
}
.front-form {
width: 540px;
margin-top: 40px;
min-height: revert;
}
#container {
width: 560px;
}
.icons-container {
width: 560px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 3% 24%;
}
.icon-box {
position: relative;
display: inline-block;
width: 100%;
margin: 10px 3px;
clear: both;
}

	
.icon-box .txt {
position: relative;
margin-left: 12px;
float: left;	
}
.icon-box img {
width: 60px;
float: left;
}

	
.icon-box h1 {
font-size: 14px;
margin: 10px auto 0;
text-align: left;
}
.icon-box h2 {
font-size: 15px;
margin: 0px auto;
box-sizing: border-box;
text-align: left;
}

#prod {
padding: 40px 0;
}

.title {
width: 560px;
margin: 40px auto 0px;
}
#contact {
width: 460px;
height: 460px;
margin: 0 auto 40px;
}
#foot {
width: 100%;
text-align: center;
}
#foot-inn {	
width: 560px;
text-align: center;
}
#info {
display: inline-block;
}
#info .txt {
margin-top: 15px;
}
}

@media only screen and (max-width: 599px) {
/* reference width: 440px */
	
#header-inn {	
width: 440px;
}
#header-inn #social > a:nth-child(1) > img, #header-inn #social > a:nth-child(2) > img {
display: none;
}
.front-inn {
width: 440px;
}
#front-container img {
margin-top: 30px;
max-width: 85%;
}
#front-container h1 {
font-size: 1.8em;
text-align: center;	
}	
#container {
width: 440px;
}
#front-container {
padding: 10px 20px 50px;
background-image: none;
background-color: #31363C;
}
.front-intro {
padding: 0 20px 30px;
width: 100%;
}
.front-form {
width: 360px;
padding: 20px 0;
margin: 30px 0 0; 
}
.icons-container {
width: 440px;
}

#prod {
padding: 40px 0;
}

.title {
width: 440px;
margin: 40px auto 0px;
}
#contact {
width: 300px;
height: 440px;
margin: 0 auto 40px;
}
#foot {
width: 100%;
height: auto;
text-align: center;
}
#foot-inn {	
width: 440px;
text-align: center;
}
#social {
float: none;
text-align: center;
}
#info {
display: inline-block;
text-align: center;
float: none;
margin: 40px auto 40px;
}
#info .txt {
margin-top: 15px;
font-size: 14px;
}
}

@media only screen and (max-width: 479px) {
/* reference width: 300px */

.gotop {
right: 25px;
bottom: 20px;
}

#header-inn {	
width: 100%;
padding: 0 20px;
}

				#social #phone {
				display: inline-block;
				vertical-align: super;
				margin-left: 5px;
				color: white;
				font-size: 1.5em;
				font-family: "Roboto Condensed";
				letter-spacing: -1px;
				}


#container {
width: 100%;
}

.front-desc h1 {
font-size: 19px;

}
.front-desc h2 {
font-size: 28px;
margin-top: 20px;
}
.front-desc h3 {
font-size: 19px;
margin-top: -3px;
}
.front-desc h4 {
width: 90px;
height: 42px;
margin-top: -4px;
padding: 3px 12px;
line-height: 44px;
font-size: 28px;
}	

.icons-container {
width: 300px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 3% 6%;
}
.icon-box {
position: relative;
display: inline-block;
width: 100%;
margin: 10px 3px;
clear: both;
}
.icon-box .txt {
position: relative;
margin-left: 12px;
float: left;		
}
.icon-box img {
float: left;
width: 48px;
}
.icon-box h1 {
font-size: 15px;
text-align: left;
margin: 2px auto;
}
.icon-box h2 {
font-size: 14px;
text-align: left;
margin: -6px auto;
box-sizing: border-box;
}

#prod {
padding: 40px 0;
}
.flickity-prev-next-button {
display: none;
}

.title {
width: 300px;
margin: 40px auto 0px;
}
#contact {
width: 300px;
height: 420px;
margin: 0 auto 40px;
}
#form-01{
clear: both;
width: 300px;
}
#form-02{
clear: both;
width: 300px;
}	

#foot {
width: 100%;
height: auto;
text-align: center;
}
#foot-inn {	
width: 300px;
text-align: center;
}
#info {
display: inline-block;
text-align: center;
float: none;
margin: 40px auto 40px;
}
}
@media only screen and (max-width: 419px) {
/* reference width: 300px */
.front-form {
padding: 0;
border: none;
width: 360px
}
	
}
@media only screen and (max-width: 369px) {
/* reference width: 320px */
#front-container h1 {
font-size: 1.65em;
}
#contact {
width: 260px;
}
.front-form {
padding: 0;
border: none;
width: 280px
}
#form-01 {
width: 260px;
}
#form-02 {
width: 260px;
}
#social #phone {
display: none;
}
}