/* Styles for SVG-block with girl-assistant */
/* Styles from Bootstrap */
.svg-block-services * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.svg-block-services *:before,
.svg-block-services *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	z-index: -5;
}
.svg-block-services {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
.svg-block-services-wrapper {
    background-image: url(https://pp.userapi.com/c824503/v824503293/93f4/9vR9EHoEbfY.jpg);
    padding-top: 100px;
}
@media (min-width: 768px) {
	.svg-block-services {
		width: 750px;
	}
}
@media (min-width: 992px) {
	.svg-block-services {
		width: 970px;
	}
}
@media (min-width: 1200px) {
	.svg-block-services {
		width: 1170px;
	}
}
.svg-block-services .row {
	margin-right: -15px;
	margin-left: -15px;
}
.svg-block-services .col-md-2, .svg-block-services .col-md-8, .svg-block-services .col-xs-12 {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}
.col-xs-12 {
	float: left;
	width: 100%;
}
@media (min-width: 992px) {
	.svg-block-services .col-md-2, .svg-block-services .col-md-8 {
		float: left;
	}
	.svg-block-services .col-md-8 {
		width: 66.66666667%;
	}
	.svg-block-services .col-md-2 {
		width: 16.66666667%;
	}
}
.svg-block-services:before,
.svg-block-services:after,
.svg-block-services .row:before,
.svg-block-services .row:after {
	display: table;
	content: " ";
}
.svg-block-services:after,
.svg-block-services .row:after {
	clear: both;
}
/* End Styles from Bootstrap */
.svg-block-services {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
}
.svg-block-services .block {
	display: none;
	position: absolute;
	width: 350px;
	z-index: 10;
}
.svg-block-services .block-header {
	background-color: #F2645A;
	border-radius: 15px;
	padding: 15px;
	color: #fff;
	text-align: center;
	font-size: 18px;
	width: 86%;
	position: relative;
	left: 7%;
	top: 25px;			}
.svg-block-services .block-body {
	border: 1px solid #a0a0a0;
	border-radius: 15px;
	background-color: #fff;
	padding: 20px;
	padding-top: 50px;
}
.svg-block-services .block:after {
	color: #F2645A;
	font-size: 22px;
	position: relative;
}

/* Don't show for all small devices */
@media (max-width: 1099px) {
/*
	.svg-block-services .container {
		display: none;
	}
*/
	.svg-block-services-wrapper, .svg-block-services {
		display: none;
	}
}

/* Medium devices (desktops, 992px and up) */
/* To Fix: Блок #blockDocuments немного не умещается справа  */ 
@media (min-width: 1100px) and (max-width: 1199px) {
	.svg-block-services .block {
		width: 280px;
	}
	.svg-block-services .block-header {
		padding: 10px;
	}
	.svg-block-services .block-body {
		padding: 15px;
		padding-top: 40px;
	}
	#blockClose {
		/*display: none;*/
	}
	#blockCalendar, #blockPersonal, #blockComputer {
		right: -60px;
	}
	#blockCalendar {
		top: 35px;
	}
	#blockPersonal {
		top: 230px;
	}
	#blockComputer {
		top: 385px;
	}
	#blockClock, #blockHeadphones, #blockDocuments {
		left: -60px;
	}
	#blockClock {
		top:15px;
	}
	#blockHeadphones {
		top: 185px;
	}
	#blockDocuments {
		top: 340px;
		left: -45px;
	}
	#blockCalendar:after {
		content: '.....................................................';
		left: 110px;
		top: -215px;
	}
	#blockPersonal:after {
		content: '...............................................';
		left: 20px;
		top: -235px;
	}
	#blockComputer:after {
		content: '...................................................................';
		left: 75px;
		top: -235px;
	}
	#blockClock:after {
		content: '..................................';
		right: 97px;
		top: -235px;
	}
	#blockHeadphones:after {
		content: '...................................................................';
		right: 155px;
		top: -255px;
	}
	#blockDocuments:after {
		content: '.........';
		right: 1px;
		top: -235px;
	}
}

/* Between medium and large devices */
/* To Fix: На экранах от 1200px до 1230px не хватает ширины для блоков */
@media (min-width: 1200px) and (max-width: 1399px) {
	.svg-block-services .block {
		width: 280px;
	}
	.svg-block-services .block-header {
		padding: 10px;
	}
	.svg-block-services .block-body {
		padding: 15px;
		padding-top: 40px;
	}
	#blockClose {
		/*display: none;*/
	}
	#blockCalendar, #blockPersonal, #blockComputer {
		right: -60px;
	}
	#blockCalendar {
		top: 50px;
	}
	#blockPersonal {
		top: 290px;
	}
	#blockComputer {
		top: 480px;
	}
	#blockClock, #blockHeadphones, #blockDocuments {
		left: -60px;
	}
	#blockClock {
		top: 25px;
	}
	#blockHeadphones {
		top: 230px;
	}
	#blockDocuments {
		top: 420px;
		left: -50px;
	}
	#blockCalendar:after {
	content: '...................................................';
	left: 155px;
	top: -215px;
}
	#blockPersonal:after {
		content: '................................................';
		left: 30px;
		top: -235px;
	}
	#blockComputer:after {
		content: '...................................................................';
		left: 120px;
		top: -235px;
	}
	#blockClock:after {
		content: '................................................................';
		right: 120px;
		top: -235px;
	}
	#blockHeadphones:after {
		content: '...................................................................';
		right: 200px;
		top: -255px;
	}
	#blockDocuments:after {
		content: '............................';
		right: 0;
		top: -235px;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1400px) and (max-width: 1839px) {
	.svg-block-services .block {
		width: 310px;
	}
	#blockClose {
		/*display: none;*/
	}
	#blockCalendar, #blockPersonal, #blockComputer {
		right: 0;
	}
	#blockCalendar {
		top: 40px; 
	}
	#blockPersonal {
		top: 280px;
	}
	#blockComputer {
		top: 480px;
	}
	#blockClock, #blockHeadphones, #blockDocuments {
		left: 0;
	}
	#blockClock {
		top: 20px;
	}
	#blockHeadphones {
		top: 220px;
	}
	#blockDocuments {
		top: 410px;
	}
	#blockCalendar:after {
		content: '...................................................';
		left: 250px;
		top: -230px;
	}
	#blockPersonal:after {
		content: '...........................';
		left: 250px;
		top: -230px;
	}
	#blockComputer:after {
		content: '...................................................................';
		left: 215px;
		top: -240px;
	}
	#blockClock:after {
		content: '...........................................';
		right: 190px;
		top: -230px;
	}
	#blockHeadphones:after {
		content: '...................................................................';
		right: 265px;
		top: -250px;
	}
	#blockDocuments:after {
		content: '................................';
		right: 50px;
		top: -230px;
	}
}

/* ExtraLarge devices (large desktops, 1840px and up) */
@media (min-width: 1840px) {
	#blockCalendar, #blockPersonal, #blockComputer {
		right: 50px;
	}
	#blockCalendar {
		top: 40px;
	}
	#blockPersonal {
		top: 275px;
	}
	#blockComputer {
		top: 495px;
	}
	#blockClock, #blockHeadphones, #blockDocuments {
		left: 50px;
	}
	#blockClock {
		top: 20px;
	}
	#blockHeadphones {
		top: 220px;
	}
	#blockDocuments {
		top: 415px;
	}
	#blockCalendar:after {
		content: '.....................................................';
		left: 325px;
		top: -210px;
	}
	#blockPersonal:after {
		content: '...................................................';
		left: 200px;
		top: -230px;
	}
	#blockComputer:after {
		content: '...................................................................';
		left: 300px;
		top: -230px;
	}
	#blockClock:after {
		content: '...................................................................';
		right: 230px;
		top: -230px;
	}
	#blockHeadphones:after {
		content: '...................................................................';
		right: 310px;
		top: -230px;
	}
	#blockDocuments:after {
		content: '...................................................................';
		right: 100px;
		top: -235px;
	}
}	
.svg-block-services .circle {
	animation-duration: 1s;
	animation-iteration-count: infinite;
	transform-origin: center center;
}
.svg-block-services .circle1 {
	animation-name: circle1, opacity;				
}
.svg-block-services .circle2 {
	animation-name: circle2, opacity;
}
.svg-block-services .circle3 {
	animation-name: circle3, opacity;
}	
@keyframes circle1 {
	from {transform: scale(1);}
	to {transform: scale(1.4);}
}

@keyframes circle2 {
	from {transform: scale(1);}
	to {transform: scale(1.8);}
}

@keyframes circle3 {
	from {transform: scale(1);}
	to {transform: scale(2.2);}
}

@keyframes opacity {
	from {opacity: 1;}
	50% {opacity: 0.7;}
	to {opacity: 0;}
}
/* End Styles for SVG-block with girl-assistant */