/*use this css to define the rules for different devices. Do not modify these rules for correct site display on all devices.*/

@media only screen and (min-width: 960px) and (max-width: 1199px) {

	.container{width:960px;}

	/*start menu*/
	.logo img{
		width:140px;
	}
	.leftnavigation li{
		margin:0 15px;
		border-top:0px;
	}
	.rightnavigation li{
		margin:0 15px;
		border-top:0px;
	}
	nav{
		margin:25px 20px 20px;
	}
	/*end menu*/

	/*services*/
	#services img{
		margin:20px 0px 0px 100px;
		float:none;
	}
	#services p{
		margin-bottom:20px;
	}
	#services h2, #services p{
		text-align:center;
	}
	/*services*/

	/*portolio*/
	.element{
		width:298px !important;
		height:370px !important;
	}
	/*portfolio*/

	/*price*/
	#sectionprices .container {
		width: 96%;
	}
	#sectionprices .grid_12{
		width:calc(100% - 20px);
	}
	#sectionprices section {
		position: relative;
	}
	.logoprice{
		width:calc(100% - 20px);
	}
	.ribbon{
		width:100.5%;
	}
	.price{
		width:calc(100% - 8px);
	}
	.triangle{
		height:39px;
		/*background-image:url(../img/section-prices/triangle220.png);*/
	}
	/*price*/

	/*team*/
	.avatar, .socialteam, .avatar img{
		width:220px;
	}
	.avatar {
		margin-left: -110px;
	}
	.team, .bordertopteam{
		width: 100%;
	}
	.team h2{
		margin:115px 20px 10px;
	}
	.socialteam img{
		margin-top:7px;
		width:40px;
	}
	.socialteam{
		background-image:url("../img/section-team/imgbottomteam.png");
		width: 100%;
	}
	/*team*/

	/*skill*/
	#operator{
		display:none;
	}
	#allprogresbar{
		width:340px;
	}
	.progresbar div{
		width:290px;
	}
	.skilldescription img{
		display:none;
	}
	/*skill*/

	/*social*/
	#oursocial .grid_2 img{
		width:100px;
	}
	/*social*/

}



@media only screen and (min-width: 768px) and (max-width: 959px) {

	.container {width:744px;}

	/*start menu*/
	.logo img{
		width:104px;
		margin-top:20px;
	}
	nav{
		margin:25px 20px 20px;
	}
	nav ul li{
		border-top:0px;
	}
	/*end menu*/

	/*services*/
	#services img{
		margin:20px 0px 0px 64px;
		float:none;
	}
	#services p{
		margin-bottom:20px;
	}
	#services h2, #services p{
		text-align:center;
	}
	/*services*/

	/*portfolio*/
	.element{
		width:350px !important;
		height:400px !important;
	}
	/*portfolio*/

	/*price*/
	#sectionprices .container {
		width: 96%;
	}
	#sectionprices .grid_12{
		width:calc(100% - 20px);
	}
	#sectionprices section {
		position: relative;
	}
	.logoprice{
		width:calc(100% - 20px);
	}
	.ribbon{
		width:100.5%;
	}
	.price{
		width:calc(100% - 8px);
	}
	.price ul li p{
		width:282px;
	}
	.price .content > div{
		width: 100%;
	}
	.price .content .img-box {
		width: calc(100% - 40px);
	}
	.triangle{
		height:62px;
		/*background-image:url(../img/section-prices/triangle352.png);*/
	}
	/*price*/

	/*team*/
	#sectionteam .grid_3, .socialteam{
		width: 100%;
	}
	.team, .bordertopteam, .avatar{
		left: 0;
		margin-left: 0;
		width: 100%;
	}
	.socialteam{
		background-image:url("../img/section-team/imgbottomteam.png");
	}
	/*team*/

	/*skill*/
	#operator{
		display:none;
	}
	#allprogresbar{
		width:312px;
	}
	.progresbar div{
		width:262px;
	}
	.skilldescription img{
		display:none;
	}
	.skilldescription{
		margin:10px 20px;
	}
	#sectionskills .grid_5{
		width:352px !important;
	}
	.clip{
		display:none;
	}
	/*skill*/

	/*social*/
	#oursocial .grid_2 img{
		width:64px;
	}
	/*social*/

}


@media only screen and (min-width: 480px) and (max-width: 767px) {

	body{
		-webkit-text-size-adjust:none;
	}

	.container {width:460px;}

	/*start menu*/
	.logo{
		height:auto;
		text-align:center;
	}
	.logo img{
		position:relative;
	}
	nav{
		margin:25px 20px 20px;
	}
	nav ul li, nav, nav ul, nav a{
		width:100%;
		margin:0px;
	}
	nav a{
		padding:20px 0px;
		text-align:center;
	}
	nav ul li{
		border-top:0px;
	}
	/*end menu*/

	/*testimonials*/
	.lefttestimonials h2, .lefttestimonials p, .righttestimonials h2, .righttestimonials p{
		text-align:center;
	}
	#darkfilter{
		background:none;
	}
	.lefttestimonials{
		border-bottom:1px solid #fff;
	}
	.lefttestimonials p{
		margin-bottom:40px !important;
	}
	.righttestimonials h2{
		margin-top:40px !important;
	}
	/*testimonials*/

	/*portfolio*/
	.element{
		width:438px !important;
		height:438px !important;
	}
	/*portfolio*/

	/*skill*/
	.skilldescription{
		text-align:center;
	}
	.skilldescription img{
		float:none;
		margin-bottom:10px;
	}
	#operator{
		display:none;
	}
	.clip{
		display:none;
	}
	#allprogresbar{
		width:400px;
	}
	.progresbar div{
		width:350px;
	}
	/*skill*/

	/*price*/
	#sectionprices .container {
		width: 96%;
	}
	#sectionprices .grid_12 {
		width:calc(100% - 20px);
	}
	#sectionprices section {
		position: relative;
	}
	.logoprice{
		width:calc(100% - 10px);
	}
	.ribbon{
		width: calc(100% - 10px);
	}
	.price{
		width:calc(100% - 10px);
	}
	.price ul li p{
		width:370px;
	}
	.price .content > div{
		width: 100%;
	}
	.price .content .img-box {
		width: calc(100% - 40px);
	}
	.triangle{
		height:78px;
		/*background-image:url(../img/section-prices/triangle440.png);*/
	}
	/*price*/

	/*team*/
	.socialteam{
		width:440px;
	}
	.team, .bordertopteam{
		width:438px;
	}
	.socialteam{
		background-image:url("../img/section-team/imgbottomteam440.png");
	}
	/*team*/

	/*social*/
	#oursocial{
		text-align:center;
	}
}


@media only screen and (min-width: 320px) and (max-width: 479px){

	body{
		-webkit-text-size-adjust:none;
	}

	.container{
		width:300px;
	}

	/*start menu*/
	.logo{
		height:auto;
		text-align:center;
	}
	.logo img{
		position:relative;
	}
	nav{
		margin:25px 20px 20px;
	}
	nav ul li, nav, nav ul, nav a{
		width:100%;
		margin:0px;
	}
	nav a{
		padding:20px 0px;
		text-align:center;
	}
	nav ul li{
		border-top:0px;
	}
	/*end menu*/

	/*services*/
	#services img{
		margin:20px 0px 0px 90px;
		float:none;
	}
	#services p{
		margin-bottom:20px;
	}
	#services h2, #services p{
		text-align:center;
	}
	/*services*/

	/*testimonials*/
	.lefttestimonials h2, .lefttestimonials p, .righttestimonials h2, .righttestimonials p{
		text-align:center;
	}
	#darkfilter{
		background:none;
	}
	.lefttestimonials{
		border-bottom:1px solid #fff;
	}
	.lefttestimonials p{
		margin-bottom:40px !important;
	}
	.righttestimonials h2{
		margin-top:40px !important;
	}
	/*testimonials*/

	/*portfolio*/
	.element{
		width: 280px !important;
		height: 350px !important;
	}
	/*portfolio*/

	/*skill*/
	#operator{
		display:none;
	}
	.clip{
		display:none;
	}
	#allprogresbar{
		width:240px;
	}
	.progresbar div{
		width:190px;
	}
	.skilldescription{
		text-align:center;
	}
	.skilldescription img{
		float:none;
		margin:0px 0px 10px 0px;
	}
	#sectionskills ul {
		width: 100%;
	}
	#sectionskills ul li {
		padding: 5px 0;
		width: 100%;
	}
	#sectionskills ul li img {
		height: auto;
		max-height: 320px;
		max-width: 320px;
		width: 90%;
	}
	/*skill*/

	/*prices*/
	#sectionprices .container {
		width: 96%;
	}
	#sectionprices .grid_12 {
		width:calc(100% - 20px);
	}
	#sectionprices section {
		position: relative;
	}
	.logoprice{
		width: 100%;
	}
	.ribbon{
		width:100.5%;
	}
	.price{
		width: 100%;
	}
	.price .content {
		margin-top: 180px;
	}
	.price .content > div{
		display: block;
		width: 100%;
	}
	.price .content .img-box {
		width: calc(100% - 40px);
	}
	.price .content .img-box img {
		margin-left: -50%;
		padding: 10% 5%;
		width: 100%;
	}
	.price ul,
	.price select,
	.price textarea,
	.price .dropzone-previews,
	.price input[type="text"],
	.price input[type="email"] {
		width: 100%;
	}
	.triangle{
		height:78px;
		/*background-image:url(../img/section-prices/triangle440.png);*/
	}
	#step7 .price {
		width: calc(100% - 10px);
	}
	#step7 .price .img-box p {
		padding-top: 30px;
		width: 90%;
	}
	/*price*/

	/*social*/
	#oursocial{
		text-align:center;
	}
	/*social*/

	/*contact*/
	#markers{
		/*max-width:320px;*/
		width: 100%;
		height:557px;
		position:absolute;
		z-index:1;
		left:50%;
		margin-left:-50%;
		margin-top:116px;
	}
	#bigmarker{
		max-width:220px;
		background-image:url(../img/section-contact/bigmarkermobile.png);
		padding:50px;
		background-repeat:no-repeat;
		background-size: contain;
		width: 60%;
	}
	/*contact*/

}