/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) and (max-width: 1400px){
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199px){ 
	#header{
		background: url(../images/bg-2.jpg) no-repeat center center;
		background-size: 100%;
		height: 640px;

	}
	.head-content img {
		width: 360px;
	}
	.head-content h1 {
		font-size: 46px;
	}
	.box img{
		width: 120px;
	}
	.box{
		max-width: 210px;
		height: 200px;
	}
	.demoscontent p {
		font-size: 24px;
	}
	.btn-demo{
		max-width: 130px;
		font-size: 14px;
	}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991px){
	#header{
		background: url(../images/bg-2.jpg) no-repeat center center;
		background-size: 100%;
		height:490px;

	}
	.head-content img {
		width: 260px;
	}
	.head-content h1 {
		font-size: 40px;
	}
	.box img{
		width: 80px;
	}
	.box{
		max-width: 160px;
		height: 160px;
	}
	.demoscontent p {
		font-size: 22px;
		line-height: 30px;
		padding-top: 15px;
	}
	.btn-demo{
		max-width: 120px;
		font-size: 13px;
	}	
	#demos{
		padding: 90px 0px;
	}
	#demos h2 {
    font-size: 26px;
    text-align: center;
    line-height: 36px;
        margin: 0 auto 45px;
}
#demos h2{
	max-width: 550px;
}
#demos h2::before{
	    width: 60px;
    height: 60px;
}
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767px){ 
#header{
		background: url(../images/mobilebg.png) no-repeat center center;
		background-size: 100%;
		height: 560px;	
}	
	.head-content img {
		width: 210px;
	}
	.head-content h1 {
		font-size: 36px;
	}
	.box img{
		width: 80px;
	}
	.box{
		max-width: 160px;
		height: 160px;
	}
	.demoscontent p {
		font-size: 22px;
		line-height: 30px;
		padding-top: 15px;
	}
	.btn-demo{
		max-width: 120px;
		font-size: 13px;
	}	
	#demos{
		padding: 90px 0px;
	}
	#demos h2 {
    font-size: 26px;
    text-align: center;
    line-height: 36px;
        margin: 0 auto 45px;
}
#demos h2{
	max-width: 550px;
}
#demos h2::before{
	    width: 60px;
    height: 60px;
}
	.demoscontent {
		width: 50%;
		max-width: 50%;
		margin-bottom: 50px;
	}
}
/*Extra small devices (portrait phones, less than 576px)*/
/*No media query since this is the default in Bootstrap*/
@media (min-width:320px) and (max-width: 575px){
#header{
		background: url(../images/mobilebg.png) no-repeat top center;
		background-size: 100%;
		height: 410px;	
}
	.head-content img {
		width: 190px;
	}
	.head-content h1 {
		font-size: 28px;
		line-height: 40px;
	}
	.box img{
		width: 120px;
	}
	.box{
		max-width: 210px;
		height: 210px;
	}
	.demoscontent {
		width: 100%;
		max-width: 100%;
		margin-bottom: 50px;
	}
	.demoscontent p {
		font-size: 22px;
		line-height: 30px;
		padding-top: 15px;
	}
	.btn-demo{
		max-width: 120px;
		font-size: 13px;
		margin: 10px auto 0px;
	}	
	#demos{
		padding: 90px 0px;
	}
	#demos h2 {
    font-size: 26px;
    text-align: center;
    line-height: 36px;
        margin: 0 auto 45px;
}
#demos h2{
	max-width: 550px;
	font-size: 22px;
}
#demos h2::before{
	    width: 60px;
    height: 60px;
}
.contactblock{
	flex-direction: column;
}	
.contactblock address{
	text-align: center;
}
.contactblock span{
	width: 210px;
	height: 2px;
	margin: 15px 0px;
}
footer{
	padding: 50px 15px 80px;
}
.contactblock div{
	width: 100%;
}
.contactblock div p{
	text-align: center;
}
}