@import url(https://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster);
        @import url(https://fonts.googleapis.com/css?family=Lobster);


        /* -------------- THE button -------------- */
        .button {

            /* text */
            text-decoration: 		none;
            font: 					24px/1em 'Droid Sans', sans-serif;
 
            text-shadow: 			rgba(255,255,255,.5) 0 1px 0;
            -webkit-user-select: 	none;
            -moz-user-select: 		none;
            user-select: 			none;


            /* layout */
            padding: 				.5em .6em .4em .6em;
            margin: 				.5em;
            display: 				inline-block;
            position: 				relative;

            -webkit-border-radius: 	8px;
            -moz-border-radius: 	8px;
            border-radius: 	8px;

            /* effects */
            border-top: 		1px solid rgba(255,255,255,0.8);
            border-bottom: 		1px solid rgba(0,0,0,0.1);

            background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://lh4.googleusercontent.com/-Qs9-Ohgo6sk/UY11O1WoMQI/AAAAAAAACME/nUID7awcMow/s50-no/noise.png);
            background-image: 	-moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(https://lh4.googleusercontent.com/-Qs9-Ohgo6sk/UY11O1WoMQI/AAAAAAAACME/nUID7awcMow/s50-no/noise.png);
            background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://lh4.googleusercontent.com/-Qs9-Ohgo6sk/UY11O1WoMQI/AAAAAAAACME/nUID7awcMow/s50-no/noise.png);

            -webkit-transition: background .2s ease-in-out;
            -moz-transition: 	background .2s ease-in-out;
            transition: 		background .2s ease-in-out;

            /* color */
            color: 				hsl(0, 0%, 40%) !important;
            background-color: 	hsl(0, 0%, 75%);

            -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
            -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
            box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
        }

        /* -------------- button (tag) -------------- */

        button.button {
            border-left: none;
            border-right: none;
        }
        button.button:hover {
            cursor: pointer;
        }


        /* -------------- icon -------------- */
        .button:before {
            font: 			1.2em/0 'Pictos', sans-serif;
            content: 		attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */
            margin-right: 	0.4em;


        }
        /* icon only */
        .icon {
            font-weight: normal;
            font-style: normal;
            text-indent: 	-999em;
        }
        .icon:before {
            margin-right: 	0;
            display: 		block;
            height: 		0;
            text-indent: 	0px;
        }



        /* -------------- colours -------------- */

        .button.orange {
            color: 				hsl(39, 100%, 30%) !important;
            background-color: 	hsl(39, 100%, 50%);

            -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
            -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
            box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
        }
        .button.orange:hover { 	background-color: hsl(39, 100%, 65%); }


        @import url(https://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster);
        @import url(https://fonts.googleapis.com/css?family=Lobster);
        @import url(pictos/pictos.css);

        html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}

        /* -------------- THE button -------------- */
        .button {

            /* text */
            text-decoration: 		none;
             font: 13px/1em 'Droid Sans', sans-serif;
             font-weight: bold;
            text-shadow: 			rgba(255,255,255,.5) 0 1px 0;
            -webkit-user-select: 	none;
            -moz-user-select: 		none;
            user-select: 			none;


            /* layout */
            padding: 				.5em .6em .4em .6em;
            margin: 				.5em;
            display: 				inline-block;
            position: 				relative;

            -webkit-border-radius: 	8px;
            -moz-border-radius: 	8px;
            border-radius: 	8px;

            /* effects */
            border-top: 		1px solid rgba(255,255,255,0.8);
            border-bottom: 		1px solid rgba(0,0,0,0.1);

            background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://lh4.googleusercontent.com/-Qs9-Ohgo6sk/UY11O1WoMQI/AAAAAAAACME/nUID7awcMow/s50-no/noise.png);
            background-image: 	-moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(https://lh4.googleusercontent.com/-Qs9-Ohgo6sk/UY11O1WoMQI/AAAAAAAACME/nUID7awcMow/s50-no/noise.png);
            background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://lh4.googleusercontent.com/-Qs9-Ohgo6sk/UY11O1WoMQI/AAAAAAAACME/nUID7awcMow/s50-no/noise.png);

            -webkit-transition: background .2s ease-in-out;
            -moz-transition: 	background .2s ease-in-out;
            transition: 		background .2s ease-in-out;

            /* color */
            color: 				hsl(0, 0%, 40%) !important;
            background-color: 	hsl(0, 0%, 75%);

            -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
            -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
            box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
        }

        /* -------------- button (tag) -------------- */

        button.button {
            border-left: none;
            border-right: none;
        }
        button.button:hover {
            cursor: pointer;
        }


        /* -------------- icon -------------- */
        .button:before {
            font: 			1.2em/0 'Pictos', sans-serif;
            content: 		attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */
            margin-right: 	0.4em;


        }
        /* icon only */
        .icon {
            font-weight: normal;
            font-style: normal;
            text-indent: 	-999em;
        }
        .icon:before {
            margin-right: 	0;
            display: 		block;
            height: 		0;
            text-indent: 	0px;
        }



        /* -------------- colours -------------- */

        .button.orange {
            color: 				hsl(39, 100%, 30%) !important;
            background-color: 	hsl(39, 100%, 50%);

            -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
            -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
            box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
        }
        .button.orange:hover { 	background-color: hsl(39, 100%, 65%); }


        .button.blue {
            color: 				hsl(208, 50%, 40%) !important;
            background-color: 	hsl(208, 100%, 75%);

            -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
            -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
            box-shadow: 		inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
        }
        .button.blue:hover { 	background-color: hsl(208, 100%, 83%); }

        .button.green {
            color: 				hsl(88, 70%, 30%) !important;
            background-color: 	hsl(88, 70%, 60%);
            -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
            -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
            box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
        }
        .button.green:hover { 	background-color: hsl(88, 70%, 75%); }

        .button.pink {
            color: 				hsl(340, 100%, 30%) !important;
            background-color: 	hsl(340, 100%, 75%);
            -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
            -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
            box-shadow: 		inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
        }
        .button.pink:hover { 	background-color: hsl(340, 100%, 83%); }



        .button.transparent {
            color: 	rgba(0,0,0,0.5) !important;
        }
        .button.transparent, .button.transparent:hover, .button.transparent:active {
            background-color: transparent;
            background-image: none;
        }
        .button.transparent:hover {
            opacity: .9;
        }



        /* -------------- States -------------- */

        .button:hover {
            background-color: 	hsl(0, 0%, 83%);
        }



        .button:active {
            background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
            background-image: 	-moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
            background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);

            -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
            rgba(0,0,0,0.4) 0 .1em 1px, /* border */
            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
            -moz-box-shadow: 	inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
            rgba(0,0,0,0.4) 0 .1em 1px, /* border */
            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
            box-shadow: 		inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
            rgba(0,0,0,0.4) 0 .1em 1px, /* border */
            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

            -webkit-transform: 	translateY(.2em);
            -moz-transform: 	translateY(.2em);
            transform: 			translateY(.2em);
        }

        .button:focus {
            outline: none;
            color: rgba(254,255,255,0.9) !important;
            text-shadow: rgba(0,0,0,0.2) 0 1px 2px;
        }

        .button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {
            opacity: 			.5;
            cursor: 			default;
            color: 				rgba(0,0,0,0.2) !important;
            text-shadow: 		none !important;
            background-color: 	rgba(0,0,0,0.05);
            background-image: 	none;
            border-top: 		none;

            -webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
            rgba(0,0,0,0.3) 0 .1em 1px, /* border */
            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
            -moz-box-shadow: 	inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
            rgba(0,0,0,0.3) 0 .1em 1px, /* border */
            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
            box-shadow: 		inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
            rgba(0,0,0,0.3) 0 .1em 1px, /* border */
            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

            -webkit-transform: 	translateY(5px);
            -moz-transform: 	translateY(5px);
            transform: 			translateY(5px);
        }

        /* -------------- Fonts -------------- */

        .serif {
            font-family: 'Lobster', serif;
            font-weight: 			normal;
        }


        /* -------------- Sizes -------------- */

        .xs { font-size: 16px; }
        .xl { font-size: 32px; }


        /* -------------- Materials -------------- */

        .button.glossy:after, .button.glass:after {
            content: 	"";
            position: 	absolute;
            width: 		90%;
            height: 	60%;
            top: 		0;
            left: 		5%;

            -webkit-border-radius: 	.5em .5em 1em 1em / .5em .5em 2em 2em;
            -moz-border-radius: 	.5em .5em 1em 1em / .5em .5em 2em 2em;
            border-radius: 			.5em .5em 1em 1em / .5em .5em 2em 2em;

            background-image: 		-webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
            color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
            background-image: 		-moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) );
            background-image: 		gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
            color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
        }
        .button.glossy:active:after,
        .button.glass:active:after,
        .button.disabled:after,
        .button[disabled]:after
        { opacity: .6; }

        .button.icon.glossy:after,
        .button.icon.glass:after { height: 75% ; }

        /* -------------- Glass + Transparent -------------- */
        .button.glass {
            text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em;
        }
        .button.glass:active {
            text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em;
        }


        /* -------------- Shapes -------------- */

        /* round */
        .round, .round.glossy:after, .round.glass:after {
            border-top: none;
            -webkit-border-radius: 	1em;
            -moz-border-radius: 	1em;
            border-radius: 			1em;
        }

        /* oval */
        .oval {
            border-top: 			none;
            padding-left: 			.8em;
            padding-right: 			.8em;
            -webkit-border-radius: 	5em / 2em;
            -moz-border-radius: 	5em / 2em;
            border-radius: 			5em / 2em;
        }
        .oval.glossy:after, .oval.glass:after {
            top: 					5%;
            -webkit-border-radius: 	5em / 2em 2em 1em 1em;
            -moz-border-radius: 	5em / 2em 2em 1em 1em;
            border-radius: 			5em / 2em 2em 1em 1em;
        }
        .oval.icon {
            padding-left: 			.8em;
            padding-right: 			.8em;
            -webkit-border-radius: 	1.5em / 1em;
            -moz-border-radius: 	1.5em / 1em;
            border-radius: 			1.5em / 1em;
        }
        .oval.icon.glossy:after, .oval.icon.glass:after {
            -webkit-border-radius: 	1.5em / 1em;
            -moz-border-radius: 	1.5em / 1em;
            border-radius: 			1.5em / 1em;
        }

        /* brackets */
        .brackets, .brackets.glossy:after, .brackets.glass:after {
            border-top: 			none;
            -webkit-border-radius: 	.5em / 1em;
            -moz-border-radius: 	.5em / 1em;
            border-radius: 			.5em / 1em;
        }

        /* skew */
        .skew {
            border-top: 			none;
            padding-right: 			1.2em;
            padding-left: 			0.8em;
            -webkit-border-radius: 	5em 1em / 5em 1em;
            -moz-border-radius: 	5em 1em / 5em 1em;
            border-radius: 			5em 1em / 5em 1em;
        }
        .skew.glossy:after, .skew.glass:after {
            left: 10%;
            -webkit-border-radius: 	7em 1em / 5em 1em;
            -moz-border-radius: 	7em 1em / 5em 1em;
            border-radius: 			7em 1em / 5em 1em;
        }
        .skew.icon {
            padding-right: 			.9em;
            padding-left: 			.8em;
        }

        /* back */
        .back, .back.glossy:after, .back.glass:after {
            border-top-color: 		rgba(255,255,255,0.5);
            -webkit-border-radius: 	1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
            -moz-border-radius: 	1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
            border-radius: 			1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
        }
        .back.glossy:after, .back.glass:after {
            left: 	6%;
            width:	88%;
        }

        /* knife */
        .knife {
            padding-left: 1.5em;
            -webkit-border-radius: 	.2em .5em .5em 8em / .2em .5em .5em 5em;
            -moz-border-radius: 	.2em .5em .5em 8em / .2em .5em .5em 5em;
            border-radius: 			.2em .5em .5em 8em / .2em .5em .5em 5em;
        }
        .knife.glossy:after, .knife.glass:after {
            left: 					3%;
            width: 					97%;
            -webkit-border-radius: 	.1em .5em .5em 8em / .1em .5em .5em 2em;
            -moz-border-radius: 	.1em .5em .5em 8em / .1em .5em .5em 2em;
            border-radius: 			.1em .5em .5em 8em / .1em .5em .5em 2em;
        }
        .knife.glossy.icon:after, .knife.glass.icon:after {
            left: 					5%;
            width: 					95%;
            -webkit-border-radius: 	.5em .5em 1em 6em / .5em .5em 1em 4em;
            -moz-border-radius: 	.5em .5em 1em 6em / .5em .5em 1em 4em;
            border-radius: 			.5em .5em 1em 6em / .5em .5em 1em 4em;
        }

        /* shield */
        .shield, .shield.glossy:after, .shield.glass:after {
            -webkit-border-radius: 	.4em .4em 2em 2em / .4em .4em 3em 3em;
            -moz-border-radius: 	.4em .4em 2em 2em / .4em .4em 3em 3em;
            border-radius: 			.4em .4em 2em 2em / .4em .4em 3em 3em;
        }
        .shield {
            padding-left: 	.8em;
            padding-right: 	.8em;
        }
        .shield.icon {
            padding-left: 	.6em;
            padding-right: 	.6em;
        }

        /* drop */
        .drop {
            border-top: none;
            -webkit-border-radius: 	2em 5em  2em .6em / 2em 4em 2em .6em;
            -moz-border-radius: 	2em 5em  2em .6em / 2em 4em 2em .6em;
            border-radius: 			2em 5em  2em .6em / 2em 4em 2em .6em;
        }
        .drop.glossy:after, .drop.glass:after {
            left: 4%;
            -webkit-border-radius: 	2em 6em  2em 1em / 2em 4em 2em 2em;
            -moz-border-radius: 	2em 6em  2em 1em / 2em 4em 2em 2em;
            border-radius: 			2em 6em  2em 1em / 2em 4em 2em 2em;
        }
        .drop.icon {
            padding-right: .6em;
        }

        .morph {
            border-top: none;
            -webkit-border-radius: 	5em / 2em;
            -moz-border-radius: 	5em / 2em;
            border-radius: 			5em / 2em;
            -webkit-transition: 	-webkit-border-radius .3s ease-in-out;
            -moz-transition: 		-moz-border-radius .3s ease-in-out;
            transition: 			-moz-border-radius .3s ease-in-out;
        }
        .morph:hover {
            -webkit-border-radius: 	.4em .4em 2em 2em / .4em .4em 3em 3em;
            -moz-border-radius: 	.4em .4em 2em 2em / .4em .4em 3em 3em;
            border-radius: 			.4em .4em 2em 2em / .4em .4em 3em 3em;
        }
        .morph:active {
            -webkit-border-radius: 	.3em;
            -moz-border-radius: 	.3em;
            border-radius: 			.3em;
        }
        .morph:after {
            display: none;
        }
        @-moz-document url-prefix() {
            .button { text-align: center; }
            .icon { padding: .5em 1em; }
            .icon:before { margin-left: -.42em; float: left; }

            .drop.icon { padding-right: 1.1em; }
            .shield.icon { padding-left: 1.1em; padding-right: 1.1em; }
            .skew.icon { padding-right: 1.4em; padding-left: 1.3em; }
            .oval.icon { padding-left: 1.3em; padding-right: 1.3em;	}
            .knife { padding-left: 2em; }
        }




        /* -------------- States -------------- */

        .button:hover {
            background-color: 	hsl(0, 0%, 83%);
        }



        .button:active {
            background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
            background-image: 	-moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
            background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);

            -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
            rgba(0,0,0,0.4) 0 .1em 1px, /* border */
            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
            -moz-box-shadow: 	inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
            rgba(0,0,0,0.4) 0 .1em 1px, /* border */
            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
            box-shadow: 		inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
            rgba(0,0,0,0.4) 0 .1em 1px, /* border */
            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

            -webkit-transform: 	translateY(.2em);
            -moz-transform: 	translateY(.2em);
            transform: 			translateY(.2em);
        }

        .button:focus {
            outline: none;
            color: rgba(254,255,255,0.9) !important;
            text-shadow: rgba(0,0,0,0.2) 0 1px 2px;
        }

        .button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {
            opacity: 			.5;
            cursor: 			default;
            color: 				rgba(0,0,0,0.2) !important;
            text-shadow: 		none !important;
            background-color: 	rgba(0,0,0,0.05);
            background-image: 	none;
            border-top: 		none;

            -webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
            rgba(0,0,0,0.3) 0 .1em 1px, /* border */
            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
            -moz-box-shadow: 	inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
            rgba(0,0,0,0.3) 0 .1em 1px, /* border */
            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
            box-shadow: 		inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
            rgba(0,0,0,0.3) 0 .1em 1px, /* border */
            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

            -webkit-transform: 	translateY(5px);
            -moz-transform: 	translateY(5px);
            transform: 			translateY(5px);
        }

        /* -------------- Fonts -------------- */

        .serif {
            font-family: 'Lobster', serif;
            font-weight: 			normal;
        }


        /* -------------- Sizes -------------- */

        .xs { font-size: 16px; }
        .xl { font-size: 32px; }


        /* -------------- Materials -------------- */

        .button.glossy:after, .button.glass:after {
            content: 	"";
            position: 	absolute;
            width: 		90%;
            height: 	60%;
            top: 		0;
            left: 		5%;

            -webkit-border-radius: 	.5em .5em 1em 1em / .5em .5em 2em 2em;
            -moz-border-radius: 	.5em .5em 1em 1em / .5em .5em 2em 2em;
            border-radius: 			.5em .5em 1em 1em / .5em .5em 2em 2em;

            background-image: 		-webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
            color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
            background-image: 		-moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) );
            background-image: 		gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
            color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
        }
        .button.glossy:active:after,
        .button.glass:active:after,
        .button.disabled:after,
        .button[disabled]:after
        { opacity: .6; }

        .button.icon.glossy:after,
        .button.icon.glass:after { height: 75% ; }

        /* -------------- Glass + Transparent -------------- */
        .button.glass {
            text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em;
        }
        .button.glass:active {
            text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em;
        }


        /* -------------- Shapes -------------- */

        /* round */
        .round, .round.glossy:after, .round.glass:after {
            border-top: none;
            -webkit-border-radius: 	1em;
            -moz-border-radius: 	1em;
            border-radius: 			1em;
        }

        /* oval */
        .oval {
            border-top: 			none;
            padding-left: 			.8em;
            padding-right: 			.8em;
            -webkit-border-radius: 	5em / 2em;
            -moz-border-radius: 	5em / 2em;
            border-radius: 			5em / 2em;
        }
        .oval.glossy:after, .oval.glass:after {
            top: 					5%;
            -webkit-border-radius: 	5em / 2em 2em 1em 1em;
            -moz-border-radius: 	5em / 2em 2em 1em 1em;
            border-radius: 			5em / 2em 2em 1em 1em;
        }
        .oval.icon {
            padding-left: 			.8em;
            padding-right: 			.8em;
            -webkit-border-radius: 	1.5em / 1em;
            -moz-border-radius: 	1.5em / 1em;
            border-radius: 			1.5em / 1em;
        }
        .oval.icon.glossy:after, .oval.icon.glass:after {
            -webkit-border-radius: 	1.5em / 1em;
            -moz-border-radius: 	1.5em / 1em;
            border-radius: 			1.5em / 1em;
        }

        /* brackets */
        .brackets, .brackets.glossy:after, .brackets.glass:after {
            border-top: 			none;
            -webkit-border-radius: 	.5em / 1em;
            -moz-border-radius: 	.5em / 1em;
            border-radius: 			.5em / 1em;
        }

        /* skew */
        .skew {
            border-top: 			none;
            padding-right: 			1.2em;
            padding-left: 			0.8em;
            -webkit-border-radius: 	5em 1em / 5em 1em;
            -moz-border-radius: 	5em 1em / 5em 1em;
            border-radius: 			5em 1em / 5em 1em;
        }
        .skew.glossy:after, .skew.glass:after {
            left: 10%;
            -webkit-border-radius: 	7em 1em / 5em 1em;
            -moz-border-radius: 	7em 1em / 5em 1em;
            border-radius: 			7em 1em / 5em 1em;
        }
        .skew.icon {
            padding-right: 			.9em;
            padding-left: 			.8em;
        }

        /* back */
        .back, .back.glossy:after, .back.glass:after {
            border-top-color: 		rgba(255,255,255,0.5);
            -webkit-border-radius: 	1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
            -moz-border-radius: 	1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
            border-radius: 			1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
        }
        .back.glossy:after, .back.glass:after {
            left: 	6%;
            width:	88%;
        }

        /* knife */
        .knife {
            padding-left: 1.5em;
            -webkit-border-radius: 	.2em .5em .5em 8em / .2em .5em .5em 5em;
            -moz-border-radius: 	.2em .5em .5em 8em / .2em .5em .5em 5em;
            border-radius: 			.2em .5em .5em 8em / .2em .5em .5em 5em;
        }
        .knife.glossy:after, .knife.glass:after {
            left: 					3%;
            width: 					97%;
            -webkit-border-radius: 	.1em .5em .5em 8em / .1em .5em .5em 2em;
            -moz-border-radius: 	.1em .5em .5em 8em / .1em .5em .5em 2em;
            border-radius: 			.1em .5em .5em 8em / .1em .5em .5em 2em;
        }
        .knife.glossy.icon:after, .knife.glass.icon:after {
            left: 					5%;
            width: 					95%;
            -webkit-border-radius: 	.5em .5em 1em 6em / .5em .5em 1em 4em;
            -moz-border-radius: 	.5em .5em 1em 6em / .5em .5em 1em 4em;
            border-radius: 			.5em .5em 1em 6em / .5em .5em 1em 4em;
        }

        /* shield */
        .shield, .shield.glossy:after, .shield.glass:after {
            -webkit-border-radius: 	.4em .4em 2em 2em / .4em .4em 3em 3em;
            -moz-border-radius: 	.4em .4em 2em 2em / .4em .4em 3em 3em;
            border-radius: 			.4em .4em 2em 2em / .4em .4em 3em 3em;
        }
        .shield {
            padding-left: 	.8em;
            padding-right: 	.8em;
        }
        .shield.icon {
            padding-left: 	.6em;
            padding-right: 	.6em;
        }

        /* drop */
        .drop {
            border-top: none;
            -webkit-border-radius: 	2em 5em  2em .6em / 2em 4em 2em .6em;
            -moz-border-radius: 	2em 5em  2em .6em / 2em 4em 2em .6em;
            border-radius: 			2em 5em  2em .6em / 2em 4em 2em .6em;
        }
        .drop.glossy:after, .drop.glass:after {
            left: 4%;
            -webkit-border-radius: 	2em 6em  2em 1em / 2em 4em 2em 2em;
            -moz-border-radius: 	2em 6em  2em 1em / 2em 4em 2em 2em;
            border-radius: 			2em 6em  2em 1em / 2em 4em 2em 2em;
        }
        .drop.icon {
            padding-right: .6em;
        }

        .morph {
            border-top: none;
            -webkit-border-radius: 	5em / 2em;
            -moz-border-radius: 	5em / 2em;
            border-radius: 			5em / 2em;
            -webkit-transition: 	-webkit-border-radius .3s ease-in-out;
            -moz-transition: 		-moz-border-radius .3s ease-in-out;
            transition: 			-moz-border-radius .3s ease-in-out;
        }
        .morph:hover {
            -webkit-border-radius: 	.4em .4em 2em 2em / .4em .4em 3em 3em;
            -moz-border-radius: 	.4em .4em 2em 2em / .4em .4em 3em 3em;
            border-radius: 			.4em .4em 2em 2em / .4em .4em 3em 3em;
        }
        .morph:active {
            -webkit-border-radius: 	.3em;
            -moz-border-radius: 	.3em;
            border-radius: 			.3em;
        }
        .morph:after {
            display: none;
        }




.stitched {
            position: relative;
            margin: 20px auto;
            margin-bottom: 0;
            width: 240px;
            background: #5d81ab;
            color: #fff;
            font-size: 16px;
            line-height: 1.3em;
            border: 2px dashed #fff;
            border-radius: 10px;
            box-shadow: 0 0 0 4px #5d81ab, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
            
        }
.detali-main{
  width: 100%;
  display: flex;
  justify-content: center;
}   


/* BUTTON UNIVERSAL SYLES */

        .button-wrapper {
            margin: 0 auto;
            padding: 20px 0;
            width: 320px;
            clear: both;
        }

        .button-wrapper a {
            color: #FFFFFF;
            text-decoration: none;
            font-family: 'Oswald',Arial,sans-serif;
        }

        /* ################# BUTTON STYLE 3 ################# */

        .a-btn-3{
            background:#80a9da;
            background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
            background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
            background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
            background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
            background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
            filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
            padding-left:20px;
            padding-right:55px;
            height:38px;
            display:inline-block;
            position:relative;
            border:1px solid #5d81ab;
            -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
            -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
            box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
            -webkit-border-radius:20px;
            -moz-border-radius:20px;
            border-radius:20px;
            float:left;
            clear:both;
            margin:10px 0px;
            overflow:hidden;
            -webkit-transition:all 0.3s linear;
            -moz-transition:all 0.3s linear;
            -o-transition:all 0.3s linear;
            transition:all 0.3s linear;
        }
        .a-btn-3-text{
            padding-top:5%;
            padding-left: 10%;
            text-transform:uppercase;
            display:block;
            font-size:18px;
            white-space:nowrap;
            text-shadow:0px 1px 1px rgba(255,255,255,0.3);
            color:#ffff;
            -webkit-transition:all 0.2s linear;
            -moz-transition:all 0.2s linear;
            -o-transition:all 0.2s linear;
            transition:all 0.2s linear;
        }
        .a-btn-3-slide-text{
            position:absolute;
            height:100%;
            top:0px;
            right:32px;
            width:0px;
            background:#63707e;
            text-shadow:0px -1px 1px #363f49;
            color:#fff;
            font-size:18px;
            white-space:nowrap;
            text-transform:uppercase;
            text-align:left;
            text-indent:10px;
            overflow:hidden;
            line-height:38px;
            -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
            -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
            box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
            -webkit-transition:width 0.3s linear;
            -moz-transition:width 0.3s linear;
            -o-transition:width 0.3s linear;
            transition:width 0.3s linear;
        }
        .a-btn-3-icon-right{
            position:absolute;
            right:0px;
            top:0px;
            height:100%;
            width:32px;
            border-left:1px solid #5d81ab;
            -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
            -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
            box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
        }
        .a-btn-3-icon-right span{
            width:38px;
            height:38px;
            opacity:0.7;
            position:absolute;
            left:50%;
            top:50%;
            margin:-20px 0px 0px -20px;
            -webkit-transition:all 0.3s linear;
            -moz-transition:all 0.3s linear;
            -o-transition:all 0.3s linear;
            transition:all 0.3s linear;
        }
        .a-btn-3:hover{
            padding-right:150px;
            -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
            -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
            box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
        }
        .a-btn-3:hover .a-btn-3-text{
            text-shadow:0px 1px 1px #5d81ab;
            color:#fff;
        }
        .a-btn-3:hover .a-btn-3-slide-text{
            width:85px;
        }
        .a-btn-3:hover .a-btn-3-icon-right span{
            opacity:1;
        }
        .a-btn-3:active{
            position:relative;
            top:1px;
            background:#5d81ab;
            -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
            -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
            box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
            border-color:#80a9da;
        }     
.ballMenuContainer {
            position: relative;
            top:0;
           display: flex;
           justify-content: space-evenly;
        }


        @-webkit-keyframes pulse {
            0% {
                -webkit-transform: scale(1) rotate(0deg);
            }
            50% {
                -webkit-transform: scale(1.1) rotate(-5deg);
            }
            100% {
                -webkit-transform: scale(1) rotate(0deg);
            }
        }
        @-o-keyframes pulse {
            0% {
                -o-transform: scale(1) rotate(0deg);
            }
            50% {
                -o-transform: scale(1.1) rotate(-5deg);
            }
            100% {
                -o-transform: scale(1) rotate(0deg);
            }
        }
        @-moz-keyframes pulse {
            0% {
                -moz-transform: scale(1) rotate(0deg);
            }
            50% {
                -moz-transform: scale(1.1) rotate(-5deg);
            }
            100% {
                -moz-transform: scale(1) rotate(0deg);
            }
        }
        @keyframes pulse {
            0% {
                transform: scale(1) rotate(0deg);
            }
            50% {
                transform: scale(1.1) rotate(-5deg);
            }
            100% {
                transform: scale(1) rotate(0deg);
            }
        }

        @-webkit-keyframes bump {
            0% {
                top: 0;
            }
            5% {
                top: 3px;
            }
            10% {
                top:0;
            }
            100% {
                top:0;
            }
        }
        @-o-keyframes bump {
            0% {
                top: 0;
            }
            5% {
                top: 3px;
            }
            10% {
                top:0;
            }
            100% {
                top:0;
            }
        }
        @-moz-keyframes bump {
            0% {
                top: 0;
            }
            5% {
                top: 3px;
            }
            10% {
                top:0;
            }
            100% {
                top:0;
            }
        }
        @keyframes bump {
            0% {
                top: 0;
            }
            5% {
                top: 3px;
            }
            10% {
                top:0;
            }
            100% {
                top:0;
            }
        }

        .menuBall {
            position: relative;
            width: 50px;
            height: 50px;
            margin: 5px;
            display: inline-block;
        }

        .ball {
            position:absolute;
            width:100%;
            height:100%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;

            text-decoration: none;
        }

        .ball:hover {
            -webkit-animation: pulse 1s ease 0s infinite normal;
            -o-animation: pulse 1s ease 0s infinite normal;
            -moz-animation: pulse 1s ease 0s infinite normal;
            animation: pulse 1s ease 0s infinite normal;
        }


.cool {
            -moz-box-shadow: 0 0 0 3px #47c26f, 2px 1px 4px 4px rgba(10,10,0,.5);
            -webkit-box-shadow: 0 0 0 3px #47c26f, 2px 1px 4px 4px rgba(10,10,0,.5);
            -o-box-shadow: 0 0 0 3px #47c26f, 2px 1px 4px 4px rgba(10,10,0,.5);
            box-shadow: 0 0 0 3px #47c26f, 2px 1px 6px 4px rgba(10,10,0,.5);


            background-size:10px 10px;
            background-color: rgba(71,194,111,1);
        }

        .chat {
            background-color: #7968a8;
            -moz-box-shadow: 0 0 0 3px #7968a8, 2px 1px 4px 4px rgba(10,10,0,.5);
            -webkit-box-shadow: 0 0 0 3px #7968a8, 2px 1px 4px 4px rgba(10,10,0,.5);
            box-shadow: 0 0 0 3px #7968a8, 2px 1px 6px 4px rgba(10,10,0,.5);


            background-size: 8px 8px;
        }


        .menuText {
            font-size: larger;
            color: #ffffff;
            position: relative;
            vertical-align: middle;
            text-align: center;
            top: 25%;
        }

        .menuBallCool {
            -webkit-animation: bump 6s linear 0s infinite normal;
        }

        .menuBallChat {
            -webkit-animation: bump 6s linear 1.5s infinite normal;
        }

        .menuBallCool {
            -moz-animation: bump 6s linear 0s infinite normal;
        }

        .menuBallChat {
            -moz-animation: bump 6s linear 1.5s infinite normal;
        }

        .menuBallCool {
            -o-animation: bump 6s linear 0s infinite normal;
        }

        .menuBallChat {
            -o-animation: bump 6s linear 1.5s infinite normal;
        }

        .menuBallCool {
            animation: bump 6s linear 0s infinite normal;
        }

        .menuBallChat {
            animation: bump 6s linear 1.5s infinite normal;
        }
/* -------------- -------------- */
/* ------------------START----------------- */
/* ------------------Vuzy------------------ */
/* ---------------------------------------- */
.vuz2014-2020-gif{
	background: url("/images/jpg-gif/vuz-2014-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
    justify-content: flex-start;
}
.vuz2014-2020-gif:hover {
	background: url("/images/gif/diplom-obrazca-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz2011-2013-gif{
	background: url("/images/jpg-gif/vuz-2011-2013.jpg");
	width: 300px;
	height: 197px;
}
.vuz2011-2013-gif:hover {
	background: url("/images/gif/diplom-obrazca-2011-2013.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz2009-2010-gif{
	background: url("/images/jpg-gif/vuz-2009-2010.jpg");
	width: 300px;
	height: 197px;
}
.vuz2009-2010-gif:hover {
	background: url("/images/gif/diplom-obrazca-2009-2010.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz2003-2008-gif{
	background: url("/images/jpg-gif/vuz-2003-2008.jpg");
	width: 300px;
	height: 197px;
}
.vuz2003-2008-gif:hover {
	background: url("/images/gif/diplom-obrazca-2003-2008.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz1997-2002-gif{
	background: url("/images/jpg-gif/vuz-1997-2002.jpg");
	width: 300px;
	height: 197px;
}
.vuz1997-2002-gif:hover {
	background: url("/images/gif/diplom-obrazca-1997-2002.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz1975-1996-gif{
	background: url("/images/jpg-gif/vuz-1975-1996.jpg");
	width: 300px;
	height: 197px;
}
.vuz1975-1996-gif:hover {
	background: url("/images/gif/diplom-sovetskogo-obrazca.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-ino-1997-2020-gif{
	background: url("/images/jpg-gif/vuz-inostr-1997-2020.jpg");
	width: 300px;
	height: 197px;
}
.vuz-ino-1997-2020-gif:hover {
	background: url("/images/gif/diplom-dlya-inostrannyh-grazhdan-1997-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-krasn-1975-1991-gif{
	background: url("/images/jpg-gif/vuz-krasniy-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.vuz-krasn-1975-1991-gif:hover {
	background: url("/images/gif/krasnyj-diplom-rsfsr.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-krasn-2003-2008-gif{
	background: url("/images/jpg-gif/vuz-krasniy-2003-2008.jpg");
	width: 300px;
	height: 197px;
}
.vuz-krasn-2003-2008-gif:hover {
	background: url("/images/gif/krasnyj-diplom-o-vysshem-obrazovanii-goznak-2003-2008.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-krasn-2009-2010-gif{
	background: url("/images/jpg-gif/vuz-krasniy-2009-2010.jpg");
	width: 300px;
	height: 197px;
}
.vuz-krasn-2009-2010-gif:hover {
	background: url("/images/gif/krasnyj-diplom-o-vysshem-obrazovanii-goznak-2009-2010.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-krasn-2011-2013-gif{
	background: url("/images/jpg-gif/vuz-krasniy-2011-2013.jpg");
	width: 300px;
	height: 197px;
	
}
.vuz-krasn-2011-2013-gif:hover {
	background: url("/images/gif/krasnyj-diplom-o-vysshem-obrazovanii-2011-2013.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
	display: flex;
    justify-content: flex-start;
}

.vuz-krasn-2013-2020-gif{
	background: url("/images/jpg-gif/vuz-krasniy-2013-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
    justify-content: flex-start;
}
.vuz-krasn-2013-2020-gif:hover {
	background: url("/images/gif/krasnyj-diplom-o-vysshem-obrazovanii-goznak-2013-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

/* ---------------Inostranci--------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

.vuz-ukr-1994-1999-gif{
	background: url("/images/jpg-gif/vuz-ukr-1994-1999.jpg");
	width: 300px;
	height: 197px;
}
.vuz-ukr-1994-1999-gif:hover {
	background: url("/images/gif/diplom-o-vysshem-obrazovanii-1994-1999-ukraina.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-ukr-2000-2020-gif{
	background: url("/images/jpg-gif/vuz-ukr-2000-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
    justify-content: flex-start;
}
.vuz-ukr-2000-2020-gif:hover {
	background: url("/images/gif/diplom-o-vysshem-obrazovanii-2000-2018-ukraina.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-ukr-2000-2020-gif{
	background: url("/images/jpg-gif/tehnikum-ukr-2000-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
    justify-content: flex-start;
}
.teh-ukr-2000-2020-gif:hover {
	background: url("/images/gif/tehnikum-ukr-2000-2020-obratnaya-storona.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.bak-ukr-1994-1999-gif{
	background: url("/images/jpg-gif/bakalavr-ukr-1994-1999.jpg");
	width: 300px;
	height: 197px;
}
.bak-ukr-1994-1999-gif:hover {
	background: url("/images/gif/diplom-bakalavra-1994-1999-ukraina.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.bak-ukr-2000-2013-gif{
	background: url("/images/jpg-gif/bakalavr-ukr-2000-2013.jpg");
	width: 300px;
	height: 197px;
}
.bak-ukr-2000-2013-gif:hover {
	background: url("/images/gif/bakalavr-ukr-2000-2013-obratnaya-storona.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.bak-ukr-2014-2020-gif{
	background: url("/images/jpg-gif/bakalavr-ukr-2014-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.bak-ukr-2014-2020-gif:hover {
	background: url("/images/gif/bakalavr-ukr-2014-2020-obratnaya-storona.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.mag-ukr-2000-2013-gif{
	background: url("/images/jpg-gif/magistr-ukr-2000-2013.jpg");
	width: 300px;
	height: 197px;
}
.mag-ukr-2000-2013-gif:hover {
	background: url("/images/gif/magistr-ukr-2000-2013-obratnaya-storona.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.mag-ukr-2014-2020-gif{
	background: url("/images/jpg-gif/magistr-ukr-2014-2020.jpg");
	width: 300px;
	height: 197px;
}
.mag-ukr-2014-2020-gif:hover {
	background: url("/images/gif/magistr-ukr-2014-2020-obratnaya-storona.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.ptu-ukr-1978-1991-gif{
	background: url("/images/jpg-gif/ptu-ukr-1978-1991.jpg");
	width: 300px;
	height: 197px;
}
.ptu-ukr-1978-1991-gif:hover {
	background: url("/images/gif/diplom-ptu-ukrssr-1978-1993.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.perepod-ukr-2000-2020-gif{
	background: url("/images/jpg-gif/perepodgotovka-ukr-2000-2020.jpg");
	width: 300px;
	height: 197px;
}
.perepod-ukr-2000-2020-gif:hover {
	background: url("/images/gif/diplom-o-perepodgotovke-2000-2018-ukraina.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-bel-2000-2010-gif{
	background: url("/images/jpg-gif/vuz-belarus-2000-2010.jpg");
	width: 300px;
	height: 197px;
}
.vuz-bel-2000-2010-gif:hover {
	background: url("/images/gif/diplom-o-vysshem-obrazovanii-2000-2010-belarus.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-bel-2011-2020-gif{
	background: url("/images/jpg-gif/vuz-belarus-2011-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
    justify-content: flex-start;
}
.vuz-bel-2011-2020-gif:hover {
	background: url("/images/gif/diplom-o-vysshem-obrazovanii-2011-2018-belarus.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-bel-2000-2011-gif{
	background: url("/images/jpg-gif/tehnikum-belarus-2000-2011.jpg");
	width: 300px;
	height: 197px;
}
.teh-bel-2000-2011-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-2000-2011-belarus.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-kaz-1998-2020-gif{
	background: url("/images/jpg-gif/vuz-kazahstan-1998-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.vuz-kaz-1998-2020-gif:hover {
	background: url("/images/gif/korka-kazahstan.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-kaz-1998-2020-gif{
	background: url("/images/jpg-gif/tehnikum-kazahstan-1998-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.teh-kaz-1998-2020-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-2014-2018-kazahstan.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.bak-kaz-2011-2020-gif{
	background: url("/images/jpg-gif/bakalavr-kazahstan-2011-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.bak-kaz-2011-2020-gif:hover {
	background: url("/images/gif/korka-kazahstan.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

/* -----------------Magistr---------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

.mag-2003-2008-gif{
	background: url("/images/jpg-gif/magistr-2003-2008.jpg");
	width: 300px;
	height: 197px;
}
.mag-2003-2008-gif:hover {
	background: url("/images/gif/diplom-magistra-2003-2008.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.mag-2009-2010-gif{
	background: url("/images/jpg-gif/magistr-2009-2010.jpg");
	width: 300px;
	height: 197px;
}
.mag-2009-2010-gif:hover {
	background: url("/images/gif/diplom-magistra-2009-2010.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.mag-2011-2013-gif{
	background: url("/images/jpg-gif/magistr-2011-2013.jpg");
	width: 300px;
	height: 197px;
}
.mag-2011-2013-gif:hover {
	background: url("/images/gif/diplom-magistra-2011-2013.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.mag-2014-2020-gif{
	background: url("/images/jpg-gif/magistr-2014-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.mag-2014-2020-gif:hover {
	background: url("/images/gif/diplom-magistra-goznak-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.krasn-mag-2014-2020-gif{
	background: url("/images/jpg-gif/magistr-krasniy-2014-2020.jpg");
	width: 300px;
	height: 197px;
}
.krasn-mag-2014-2020-gif:hover {
	background: url("/images/gif/krasnyj-diplom-magistra-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

/* -----------------Bakalavr--------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

.bak-2003-2008-gif{
	background: url("/images/jpg-gif/bakalavr-2003-2008.jpg");
	width: 300px;
	height: 197px;
}
.bak-2003-2008-gif:hover {
	background: url("/images/gif/diplom-bakalavra-goznak-2003-2008.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.bak-2009-2010-gif{
	background: url("/images/jpg-gif/bakalavr-2009-2010.jpg");
	width: 300px;
	height: 197px;
}
.bak-2009-2010-gif:hover {
	background: url("/images/gif/diplom-bakalavra-goznak-2009-2010.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.bak-2011-2013-gif{
	background: url("/images/jpg-gif/bakalavr-2011-2013.jpg");
	width: 300px;
	height: 197px;
}
.bak-2011-2013-gif:hover {
	background: url("/images/gif/diplom-bakalavra-goznak-2011-2013.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.bak-2014-2020-gif{
	background: url("/images/jpg-gif/bakalavr-2014-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.bak-2014-2020-gif:hover {
	background: url("/images/gif/diplom-bakalavra-goznak-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.krasn-bak-2013-2020-gif{
	background: url("/images/jpg-gif/bakalavr-krasniy-2013-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.krasn-bak-2013-2020-gif:hover {
	background: url("/images/gif/krasnyj-diplom-bakalavra-goznak-2013-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

/* -----------------Tehnikum--------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

.teh-1975-1996-gif{
	background: url("/images/jpg-gif/tehnikum-1975-1996.jpg");
	width: 300px;
	height: 197px;
}
.teh-1975-1996-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-rsfsr.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-1997-2002-gif{
	background: url("/images/jpg-gif/tehnikum-1997-2002.jpg");
	width: 300px;
	height: 197px;
}
.teh-1997-2002-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-kolledzha-1997-2002.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-2003-2007-gif{
	background: url("/images/jpg-gif/tehnikum-2003-2007.jpg");
	width: 300px;
	height: 197px;
}
.teh-2003-2007-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-kolledzha-2003-2007.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-2008-2010-gif{
	background: url("/images/jpg-gif/tehnikum-2008-2010.jpg");
	width: 300px;
	height: 197px;
}
.teh-2008-2010-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-kolledzha-2008-2010.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-2011-2013-gif{
	background: url("/images/jpg-gif/tehnikum-2011-2013.jpg");
	width: 300px;
	height: 197px;
}
.teh-2011-2013-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-kolledzha-2011-2013.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-2014-2020-gif{
	background: url("/images/jpg-gif/tehnikum-2014-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.teh-2014-2020-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-kolledzha-goznak-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.krasn-teh-1997-2002-gif{
	background: url("/images/jpg-gif/tehnikum-krasniy-1997-2002.jpg");
	width: 300px;
	height: 197px;
}
.krasn-teh-1997-2002-gif:hover {
	background: url("/images/gif/krasnyj-diplom-tekhnikuma-goznak-1997-2002.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.krasn-teh-2003-2007-gif{
	background: url("/images/jpg-gif/tehnikum-krasniy-2003-2007.jpg");
	width: 300px;
	height: 197px;
}
.krasn-teh-2003-2007-gif:hover {
	background: url("/images/gif/krasnyj-diplom-tekhnikuma-goznak-2003-2007.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.krasn-teh-2008-2010-gif{
	background: url("/images/jpg-gif/tehnikum-krasniy-2008-2010.jpg");
	width: 300px;
	height: 197px;
}
.krasn-teh-2008-2010-gif:hover {
	background: url("/images/gif/krasnyj-diplom-tekhnikuma-goznak-2008-2010.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.krasn-teh-2011-2013-gif{
	background: url("/images/jpg-gif/tehnikum-krasniy-2011-2013.jpg");
	width: 300px;
	height: 197px;
}
.krasn-teh-2011-2013-gif:hover {
	background: url("/images/gif/krasnyj-diplom-tekhnikuma-goznak-2011-2013.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.krasn-teh-2014-2020-gif{
	background: url("/images/jpg-gif/tehnikum-krasniy-2014-2020-kirgach.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.krasn-teh-2014-2020-gif:hover {
	background: url("/images/gif/krasnyj-diplom-tekhnikuma-kirzhach-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

/* -------------------PTU------------------ */
/* ---------------------------------------- */
/* ---------------------------------------- */

.ptu-1978-1993-gif{
	background: url("/images/jpg-gif/ptu-1978-1993.jpg");
	width: 300px;
	height: 197px;
}
.ptu-1978-1993-gif:hover {
	background: url("/images/gif/diplom-ptu-rsfsr-1978-1993.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.ptu-1994-2006-gif{
	background: url("/images/jpg-gif/ptu-1994-2006.jpg");
	width: 300px;
	height: 197px;
}
.ptu-1994-2006-gif:hover {
	background: url("/images/gif/diplom-ptu-1994-2006.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.ptu-2007-2010-gif{
	background: url("/images/jpg-gif/ptu-2007-2010.jpg");
	width: 300px;
	height: 197px;
}
.ptu-2007-2010-gif:hover {
	background: url("/images/gif/diplom-ptu-2007-2010.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.ptu-2011-2020-gif{
	background: url("/images/jpg-gif/ptu-2011-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.ptu-2011-2020-gif:hover {
	background: url("/images/gif/diplom-ptu-2011-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

/* --------------Attestat-11kl------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

.attik-10kl-1975-1989-gif{
	background: url("/images/jpg-gif/attestat-10kl-1975-1989.jpg");
	width: 300px;
	height: 197px;
}
.attik-10kl-1975-1989-gif:hover {
	background: url("/images/gif/attestat-za-11-klass-1975-1989.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.attik-10kl-1990-1993-gif{
	background: url("/images/jpg-gif/attestat-10kl-1990-1993.jpg");
	width: 300px;
	height: 197px;
}
.attik-10kl-1990-1993-gif:hover {
	background: url("/images/gif/attestat-za-11-klass-1990-1993.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.attik-11kl-1994-2007-gif{
	background: url("/images/jpg-gif/attestat-11kl-1994-2007.jpg");
	width: 300px;
	height: 197px;
}
.attik-11kl-1994-2007-gif:hover {
	background: url("/images/gif/attestat-za-11-klass-1994-2007.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.attik-11kl-2008-2009-gif{
	background: url("/images/jpg-gif/attestat-11kl-2008-2009.jpg");
	width: 300px;
	height: 197px;
}
.attik-11kl-2008-2009-gif:hover {
	background: url("/images/gif/attestat-za-11-klass-2008-2009.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.attik-11kl-2010-2013-gif{
	background: url("/images/jpg-gif/attestat-11kl-2010-2013.jpg");
	width: 300px;
	height: 197px;
}
.attik-11kl-2010-2013-gif:hover {
	background: url("/images/gif/attestat-za-11-klass-2010-2013.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.attik-11kl-2014-2020-gif{
	background: url("/images/jpg-gif/attestat-11kl-2014-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.attik-11kl-2014-2020-gif:hover {
	background: url("/images/gif/attestat-za-11-klass-goznak-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

/* --------------Attestat-9kl-------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

.attik-9kl-1994-2009-gif{
	background: url("/images/jpg-gif/attestat-9kl-1994-2009.jpg");
	width: 300px;
	height: 197px;
}
.attik-9kl-1994-2009-gif:hover {
	background: url("/images/gif/attestat-za-9-klass-1994-2009.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.attik-9kl-2010-2013-gif{
	background: url("/images/jpg-gif/attestat-9kl-2010-2013.jpg");
	width: 300px;
	height: 197px;
}
.attik-9kl-2010-2013-gif:hover {
	background: url("/images/gif/attestat-za-9-klass-2010-2013.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.attik-9kl-2014-2020-gif{
	background: url("/images/jpg-gif/attestat-9kl-2014-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.attik-9kl-2014-2020-gif:hover {
	background: url("/images/gif/attestat-za-9-klass-goznak-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

/* -------------Perepodgotovka------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

.perepod-2010-2013-gif{
	background: url("/images/jpg-gif/perepodgotovka-2010-2013.jpg");
	width: 300px;
	height: 197px;
}
.perepod-2010-2013-gif:hover {
	background: url("/images/gif/diplom-professionalnoj-perepodgotovki-2010-2013.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.perepod-2014-2020-gif{
	background: url("/images/jpg-gif/perepodgotovka-2014-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.perepod-2014-2020-gif:hover {
	background: url("/images/gif/diplom-professionalnoj-perepodgotovki-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.perepod-rudn-2014-2020-gif{
	background: url("/images/jpg-gif/perepodgotovka-rudn-2014-2020.jpg");
	width: 300px;
	height: 197px;
}
.perepod-rudn-2014-2020-gif:hover {
	background: url("/images/gif/diplom-professionalnoj-perepodgotovki-2014-2018-rudn.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

/* ------------------Medic----------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

.udost-intern-1991-2006-gif{
	background: url("/images/jpg-gif/internatura-1991-2006.jpg");
	width: 300px;
	height: 197px;
}
.udost-intern-1991-2006-gif:hover {
	background: url("/images/gif/udostoverenie-internatury-1991-2006.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.udost-intern-2007-2013-gif{
	background: url("/images/jpg-gif/internatura-2007-2013.jpg");
	width: 300px;
	height: 197px;
}
.udost-intern-2007-2013-gif:hover {
	background: url("/images/gif/udostoverenie-internatury-2007-2013.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.diplom-intern-2014-2020-gif{
	background: url("/images/jpg-gif/internatura-2014-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.diplom-intern-2014-2020-gif:hover {
	background: url("/images/gif/diplom-internatury-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.udost-ordin-1991-2006-gif{
	background: url("/images/jpg-gif/ordinatura-1991-2006.jpg");
	width: 300px;
	height: 197px;
}
.udost-ordin-1991-2006-gif:hover {
	background: url("/images/gif/udostoverenie-ordinatury-1991-2006.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.udost-ordin-2007-2013-gif{
	background: url("/images/jpg-gif/ordinatura-2007-2013.jpg");
	width: 300px;
	height: 197px;
}
.udost-ordin-2007-2013-gif:hover {
	background: url("/images/gif/udostoverenie-ordinatury-2007-2013.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.diplom-ordin-2014-2020-gif{
	background: url("/images/jpg-gif/ordinatura-2014-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.diplom-ordin-2014-2020-gif:hover {
	background: url("/images/gif/diplom-ordinatury-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.med-sert-2014-2018-gif{
	background: url("/images/jpg-gif/med-sert-2014-2018.jpg");
	width: 300px;
	height: 197px;
}
.med-sert-2014-2018-gif:hover {
	background: url("/images/gif/medicinskij-sertifikat-specialista-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svidet-ob-akkr-2018-2020-gif{
	background: url("/images/jpg-gif/svidetelstvo-ob-akkreditacii-2018-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.svidet-ob-akkr-2018-2020-gif:hover {
	background: url("/images/gif/svidetelstvo-ob-akkreditacii-specialista-s-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

/* -------------Kandidat\Doctor------------ */
/* ---------------------------------------- */
/* ---------------------------------------- */

.kandidat-2001-2012-gif{
	background: url("/images/jpg-gif/diplom-kandidata-2001-2012.jpg");
	width: 300px;
	height: 197px;
}
.kandidat-2001-2012-gif:hover {
	background: url("/images/gif/diplom-kandidata-nauk-2001-2012.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.kandidat-2013-2016-gif{
	background: url("/images/jpg-gif/diplom-kandidata-2013-2016.jpg");
	width: 300px;
	height: 197px;
}
.kandidat-2013-2016-gif:hover {
	background: url("/images/gif/diplom-kandidata-nauk-2013-2016.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.kandidat-2017-2020-gif{
	background: url("/images/jpg-gif/diplom-kandidata-2017-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.kandidat-2017-2020-gif:hover {
	background: url("/images/gif/diplom-kandidata-nauk-2017-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.doctor-2013-2020-gif{
	background: url("/images/jpg-gif/diplom-doktora-2013-2020.jpg");
	width: 300px;
	height: 197px;
}
.doctor-2013-2020-gif:hover {
	background: url("/images/gif/diplom-doktora-nauk-2013-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

/* -----------------Spravki---------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

.spravka-vuz-1996-2009-gif{
	background: url("/images/jpg-gif/spravka-vuz-1996-2009.jpg");
	width: 300px;
	height: 197px;
}
.spravka-vuz-1996-2009-gif:hover {
	background: url("/images/gif/akademicheskaya-spravka-vuza-1996-2009.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.spravka-vuz-2010-2013-gif{
	background: url("/images/jpg-gif/spravka-vuz-2010-2013.jpg");
	width: 300px;
	height: 197px;
}
.spravka-vuz-2010-2013-gif:hover {
	background: url("/images/gif/akademicheskaya-spravka-vuza-2010-2013.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.spravka-vuz-2014-2020-gif{
	background: url("/images/jpg-gif/spravka-vuz-2014-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.spravka-vuz-2014-2020-gif:hover {
	background: url("/images/gif/akademicheskaya-spravka-vuza-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.spravka-teh-1997-2007-gif{
	background: url("/images/jpg-gif/spravka-teh-1997-2007.jpg");
	width: 300px;
	height: 197px;
}
.spravka-teh-1997-2007-gif:hover {
	background: url("/images/gif/akademicheskaya-spravka-tekhnikuma-1997-2007.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.spravka-teh-2008-2020-gif{
	background: url("/images/jpg-gif/spravka-teh-2008-2020.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.spravka-teh-2008-2020-gif:hover {
	background: url("/images/gif/akademicheskaya-spravka-tekhnikuma-2008-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

/* ------------------RSFSR----------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

.vuz-azer-1975-1991-gif{
	background: url("/images/jpg-gif/vuz-sssr-azer-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.vuz-azer-1975-1991-gif:hover {
	background: url("/images/gif/diplom-ssr-azerbajdzhan.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-azer-1975-1991-gif{
	background: url("/images/jpg-gif/teh-sssr-azer-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.teh-azer-1975-1991-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-ssr-azerbajdzhan.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-moldavia-1975-1991-gif{
	background: url("/images/jpg-gif/vuz-sssr-moldavia-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.vuz-moldavia-1975-1991-gif:hover {
	background: url("/images/gif/diplom-ssr-moldaviya.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-moldavia-1975-1991-gif{
	background: url("/images/jpg-gif/teh-sssr-moldavia-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.teh-moldavia-1975-1991-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-ssr-moldaviya.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-belar-1975-1991-gif{
	background: url("/images/jpg-gif/vuz-sssr-belarus-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.vuz-belar-1975-1991-gif:hover {
	background: url("/images/gif/diplom-sssr-belarus.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-belar-1975-1991-gif{
	background: url("/images/jpg-gif/teh-sssr-belarus-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.teh-belar-1975-1991-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-ssr-belarus.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-gruzia-1975-1991-gif{
	background: url("/images/jpg-gif/vuz-sssr-gruzia-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.vuz-gruzia-1975-1991-gif:hover {
	background: url("/images/gif/diplom-sssr-gruziya.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-gruzia-1975-1991-gif{
	background: url("/images/jpg-gif/teh-sssr-gruzia-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.teh-gruzia-1975-1991-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-ssr-gruziya.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-kazah-1975-1991-gif{
	background: url("/images/jpg-gif/vuz-sssr-kazahstan-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.vuz-kazah-1975-1991-gif:hover {
	background: url("/images/gif/diplom-sssr-kazahstan.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-kazah-1975-1991-gif{
	background: url("/images/jpg-gif/teh-sssr-kazah-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.teh-kazah-1975-1991-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-ssr-kazahstan.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-tadgik-1975-1991-gif{
	background: url("/images/jpg-gif/vuz-sssr-tadgik-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.vuz-tadgik-1975-1991-gif:hover {
	background: url("/images/gif/diplom-sssr-tadzhikistan.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-tadgik-1975-1991-gif{
	background: url("/images/jpg-gif/teh-sssr-tadgik-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.teh-tadgik-1975-1991-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-assr-tadzhikistan.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-turk-1975-1991-gif{
	background: url("/images/jpg-gif/vuz-sssr-turkmen-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.vuz-turk-1975-1991-gif:hover {
	background: url("/images/gif/diplom-sssr-turkmeniya.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-turk-1975-1991-gif{
	background: url("/images/jpg-gif/teh-sssr-turk-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.teh-turk-1975-1991-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-ssr-turkmeniya.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-uzbek-1975-1991-gif{
	background: url("/images/jpg-gif/vuz-sssr-uzbek-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.vuz-uzbek-1975-1991-gif:hover {
	background: url("/images/gif/diplom-sssr-uzbekistan.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-uzbek-1975-1991-gif{
	background: url("/images/jpg-gif/teh-sssr-uzbek-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.teh-uzbek-1975-1991-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-ssr-uzbekistan.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-ukr-1975-1991-gif{
	background: url("/images/jpg-gif/vuz-sssr-ukr-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.vuz-ukr-1975-1991-gif:hover {
	background: url("/images/gif/diplom-ssr-ukraina.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.teh-ukr-1975-1991-gif{
	background: url("/images/jpg-gif/teh-sssr-ukr-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.teh-ukr-1975-1991-gif:hover {
	background: url("/images/gif/diplom-tekhnikuma-ssr-ukraina.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-armen-1975-1991-gif{
	background: url("/images/jpg-gif/vuz-sssr-armenia-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.vuz-armen-1975-1991-gif:hover {
	background: url("/images/gif/diplom-sssr-armeniya.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-latvia-1975-1991-gif{
	background: url("/images/jpg-gif/vuz-sssr-latvia-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.vuz-latvia-1975-1991-gif:hover {
	background: url("/images/gif/diplom-sssr-latviya.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-litva-1975-1991-gif{
	background: url("/images/jpg-gif/vuz-sssr-litva-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.vuz-litva-1975-1991-gif:hover {
	background: url("/images/gif/diplom-sssr-litva.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.vuz-eston-1975-1991-gif{
	background: url("/images/jpg-gif/vuz-sssr-estonia-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.vuz-eston-1975-1991-gif:hover {
	background: url("/images/gif/diplom-sssr-ehstoniya.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

/* -----------------Drugie----------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

.nepoln-1997-2020-gif{
	background: url("/images/jpg-gif/nepolnoe-vishee-1997-2020.jpg");
	width: 300px;
	height: 197px;
}
.nepoln-1997-2020-gif:hover {
	background: url("/images/gif/diplom-o-nepolnom-vysshem-obrazovanii-1997-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.mgimo-2014-2020-gif{
	background: url("/images/jpg-gif/mgimo-2014-2020.jpg");
	width: 300px;
	height: 197px;
}
.mgimo-2014-2020-gif:hover {
	background: url("/images/gif/diplom-mgimo-specblank-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.mba-2011-2020-gif{
	background: url("/images/jpg-gif/diplom-mba-2011-2020.jpg");
	width: 300px;
	height: 197px;
}
.mba-2011-2020-gif:hover {
	background: url("/images/gif/diplom-mva-2011-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.docent-2015-2020-gif{
	background: url("/images/jpg-gif/attestat-docenta-2015-2020.jpg");
	width: 300px;
	height: 197px;
}
.docent-2015-2020-gif:hover {
	background: url("/images/gif/attestat-docenta-2015-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.professor-2015-2020-gif{
	background: url("/images/jpg-gif/attestat-professora-2015-2020.jpg");
	width: 300px;
	height: 197px;
}
.professor-2015-2020-gif:hover {
	background: url("/images/gif/attestat-professora-2015-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.udost-povish-1998-2020-gif{
	background: url("/images/jpg-gif/udostoverenie-o-povishenii-kvalif-1998-2020.jpg");
	width: 300px;
	height: 197px;
}
.udost-povish-1998-2020-gif:hover {
	background: url("/images/gif/udostoverenie-o-povyshenii-kvalifikacii.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-ob-urovne-1994-2006-gif{
	background: url("/images/jpg-gif/svidetelstvo-ob-urovne-kvalif-1994-2006.jpg");
	width: 300px;
	height: 197px;
}
.svid-ob-urovne-1994-2006-gif:hover {
	background: url("/images/gif/svidetelstvo-ob-urovne-kvalifikacii-1994-2006.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-ob-urovne-2011-2020-gif{
	background: url("/images/jpg-gif/svidetelstvo-ob-urovne-kvalif-2011-2020.jpg");
	width: 300px;
	height: 197px;
}
.svid-ob-urovne-2011-2020-gif:hover {
	background: url("/images/gif/svidetelstvo-ob-urovne-kvalifikacii-2011-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-o-dolg-slug-1999-2020-gif{
	background: url("/images/jpg-gif/svidetelstvo-slugashego-1999-2020.jpg");
	width: 300px;
	height: 197px;
}
.svid-o-dolg-slug-1999-2020-gif:hover {
	background: url("/images/gif/svidetelstvo-o-dolgnosti-sluzhashchego.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-o-prof-rab-1999-2020-gif{
	background: url("/images/jpg-gif/svidetelstvo-rabochego-1975-1991.jpg");
	width: 300px;
	height: 197px;
}
.svid-o-prof-rab-1999-2020-gif:hover {
	background: url("/images/gif/svidetelstvo-o-professii-rabochego.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.adjyktura-2014-2020-gif{
	background: url("/images/jpg-gif/diplom-adjynkturi-2014-2020.jpg");
	width: 300px;
	height: 197px;
}
.adjyktura-2014-2020-gif:hover {
	background: url("/images/gif/diplom-adyunktury-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.aspirant-2014-2020-gif{
	background: url("/images/jpg-gif/diplom-aspiranturi-2014-2020.jpg");
	width: 300px;
	height: 197px;
}
.aspirant-2014-2020-gif:hover {
	background: url("/images/gif/diplom-aspirantury-2014-2018.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


/* -------------------NEW------------------ */
/* ---------------------------------------- */
/* ---------------------------------------- */

.attestat_9kl_ukr_2000-2013-gif{
	background: url("/images/2018/gif_new/attestat_9kl_ukr_2000-2013_gallograma.jpg");
	width: 300px;
	height: 197px;
}
.attestat_9kl_ukr_2000-2013-gif:hover {
	background: url("/images/2018/gif_new/attestat_9kl_ukr_2000-2013_oborotka.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.ukr-att-9kl-2014-2021-gif{
	background: url("/images/2018/gif_new/attestat_9kl_ukr_2014-2021_lico.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.ukr-att-9kl-2014-2021-gif:hover {
	background: url("/images/2018/gif_new/attestat_9kl_ukr_2014-2021_oborotka.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.ukr-att-11kl-2014-2021-gif{
	background: url("/images/2018/gif_new/attestat_11kl_ukr_2014-2021_lico.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.ukr-att-11kl-2014-2021-gif:hover {
	background: url("/images/2018/gif_new/attestat_11kl_ukr_2014-2021_oborotka.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.ukr-att-11kl-2000-2013-gif{
	background: url("/images/2018/gif_new/attestat_11kl_ukr_2000-2013_lico.jpg");
	width: 300px;
	height: 197px;
}
.ukr-att-11kl-2000-2013-gif:hover {
	background: url("/images/2018/gif_new/attestat_11kl_ukr_2000-2013_oborotka.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.ukr-ptu-2000-2013-gif{
	background: url("/images/2018/gif_new/diplom_ptu_ukr_2000-2013_galka.jpg");
	width: 300px;
	height: 197px;
}
.ukr-ptu-2000-2013-gif:hover {
	background: url("/images/2018/gif_new/diplom_ptu_ukr_2000-2013_oborot.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.kazah-attestat-9kl-gif{
	background: url("/images/2018/gif_new/kazah-att-9kl.jpg");
	width: 300px;
	height: 197px;
}
.kazah-attestat-9kl-gif:hover {
	background: url("/images/2018/gif_new/kazah-att-9kl-oborot.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.kazah-attestat-9kl-s-otlichiem-gif{
	background: url("/images/2018/gif_new/kazah-att-9kl-red.jpg");
	width: 300px;
	height: 197px;
}
.kazah-attestat-9kl-s-otlichiem-gif:hover {
	background: url("/images/2018/gif_new/kazah-att-9kl-red-oborot.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.kazah-attestat-11kl-gif{
	background: url("/images/2018/gif_new/kazah-att-11kl.jpg");
	width: 300px;
	height: 197px;
}
.kazah-attestat-11kl-gif:hover {
	background: url("/images/2018/gif_new/kazah-att-11kl-oborot.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.kazah-attestat-11kl-s-otlichiem-gif{
	background: url("/images/2018/gif_new/kazah-att-11kl-red.jpg");
	width: 300px;
	height: 197px;
}
.kazah-attestat-11kl-s-otlichiem-gif:hover {
	background: url("/images/2018/gif_new/kazah-att-11kl-red-oborot.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.kazah-bakalavr-s-otlichiem-gif{
	background: url("/images/2018/gif_new/diplom-bakalavra-kaz-red.jpg");
	width: 300px;
	height: 197px;
}
.kazah-bakalavr-s-otlichiem-gif:hover {
	background: url("/images/2018/gif_new/diplom-bakalavra-kaz-red-korka.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.kazah-vuz-s-otlichiem-gif{
	background: url("/images/2018/gif_new/diplomVuz-kaz-red.jpg");
	width: 300px;
	height: 197px;
}
.kazah-vuz-s-otlichiem-gif:hover {
	background: url("/images/2018/gif_new/diplomVuz-kaz-korka_oborot-red.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.kazah-magistr-gif{
	background: url("/images/2018/gif_new/kaz_diplom_magistra.jpg");
	width: 300px;
	height: 197px;
}
.kazah-magistr-gif:hover {
	background: url("/images/2018/gif_new/kaz_diplom_magistra-oborot.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.kazah-magistr-s-otlichiem-gif{
	background: url("/images/2018/gif_new/kaz_diplom_magistra-red.jpg");
	width: 300px;
	height: 197px;
}
.kazah-magistr-s-otlichiem-gif:hover {
	background: url("/images/2018/gif_new/kaz_diplom_magistra-oborot-red.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.kazah-tehnikum-s-otlichiem-gif{
	background: url("/images/2018/gif_new/diplomTehnikum-kaz-red.jpg");
	width: 300px;
	height: 197px;
}
.kazah-tehnikum-s-otlichiem-gif:hover {
	background: url("/images/2018/gif_new/diplomTehnikum-kaz-oborot-red.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.ukr-magistr-1994-1999-gif{
	background: url("/images/2018/gif_new/Ukr-Magistr-1994-1999.jpg");
	width: 300px;
	height: 197px;
}
.ukr-magistr-1994-1999-gif:hover {
	background: url("/images/2018/gif_new/Ukr-Magistr-1994-1999.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.belorus-attestat-11kl-2000-2009-gif{
	background: url("/images/2018/gif_new/belorus-attestat-11kl-2000-2009-lico.jpg");
	width: 300px;
	height: 197px;
}
.belorus-attestat-11kl-2000-2009-gif:hover {
	background: url("/images/2018/gif_new/belorus-attestat-11kl-2000-2009-korka.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}
.belorus-attestat-11kl-2010-2021-gif{
	background: url("/images/2018/gif_new/belorus-attestat-11kl-2010-2021-lico.jpg");
	width: 300px;
	height: 197px;
	display: flex;
justify-content: flex-start;
}
.belorus-attestat-11kl-2010-2021-gif:hover {
	background: url("/images/2018/gif_new/belorus-attestat-11kl-2010-2021-korka.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}



/* --------------SVIDETELSTVA-------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

.svid-rogd-azer-1970-1991-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-azer-lico-1970-1991.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-azer-1970-1991-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-azerbaidgan-1970-1991.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-rogd-belar-1970-1991-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-belar-lico-1970-1991.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-belar-1970-1991-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-belarus-1970-1991.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-rogd-belar-1960-1969-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-belar-lico-1960-1969.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-belar-1960-1969-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-belarus-1960-1969.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-rogd-belar-1950-1959-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-belar-lico-1950-1959.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-belar-1950-1959-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-belarus-1950-1959.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-rogd-belar-1930-1949-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-belar-lico2-1930-1949.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-belar-1930-1949-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-belarus-1930-1949.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-rogd-gruz-1970-1991-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-gruz-lico-1970-1991.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-gruz-1970-1991-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-gruzia-1970-1991.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-rogd-kazah-1970-1991-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-kazah-lico-1970-1991.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-kazah-1970-1991-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-kazahstan-1970-1991.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-rogd-kirgiz-1970-1991-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-kirgiz-lico-1970-1991.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-kirgiz-1970-1991-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-kirgizia-1970-1991.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-rogd-litva-1970-1991-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-litva-lico-1970-1991.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-litva-1970-1991-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-litva-1970-1991.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-rogd-uzbek-1970-1991-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-uzbek-lico-1970-1991.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-uzbek-1970-1991-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-uzbekistan-1970-1991.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-rogd-rus-1998-2021-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-lico-1998-2021.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-rus-1998-2021-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-rossia-1998-2021.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-rogd-rus-1970-1991-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-lico-1970-1991.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-rus-1970-1991-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-rsfsr-1970-1991.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-rogd-rus-1950-1969-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-lico-1950-1969.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-rus-1950-1969-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-rsfsr-1950-1969.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-rogd-rus-1943-1949-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-lico-1943-1949.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-rus-1943-1949-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-rsfsr-1943-1949.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-rogd-rus-1930-1942-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-lico2-1930-1942.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-rus-1930-1942-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-rsfsr-1930-1942.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-rogd-ukr-2009-2021-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-ukr-lico-2009-2021.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-ukr-2009-2021-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-ukraina-2009-2021.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-rogd-ukr-1993-2004-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-ukr-lico-1993-2004.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-ukr-1993-2004-gif:hover {
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-ukr-obr-1993-2004.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-rogd-ukr-1970-1991-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-ukr-lico-1970-1991.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-ukr-1970-1991-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-ukraina-1970-1991.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-rogd-ukr-1960-1969-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-ukr-lico-1960-1969.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-ukr-1960-1969-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-ukraina-1960-1969.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-rogd-ukr-1950-1959-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-ukr-lico-1950-1959.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-ukr-1950-1959-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-ukraina-1950-1959.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-rogd-ukr-1943-1949-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-ukr-lico-1943-1949.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-ukr-1943-1949-gif:hover {
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-ukr-lico-1943-1949.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-rogd-ukr-1930-1942-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-rogdenii-ukr-lico2-1930-1942.jpg");
	width: 300px;
	height: 197px;
}
.svid-rogd-ukr-1930-1942-gif:hover {
	background: url("/images/gif/svidetelstvo-o-rogdenii-ukraina-1930-1942.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}



.svid-brak-1998-2020-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-brake-lico-1998-2021.jpg");
	width: 300px;
	height: 197px;
}
.svid-brak-1998-2020-gif:hover {
	background: url("/images/gif/svidetelstvo-o-brake-rossia-1998-2021.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-brak-1970-1991-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-brake-lico-1970-1991.jpg");
	width: 300px;
	height: 197px;
}
.svid-brak-1970-1991-gif:hover {
	background: url("/images/gif/svidetelstvo-o-brake-rsfsr-1970-1991.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-brak-ukr-2007-2021-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-brake-ukr-lico-2007-2021.jpg");
	width: 300px;
	height: 197px;
}
.svid-brak-ukr-2007-2021-gif:hover {
	background: url("/images/gif/svidetelstvo-o-brake-ukraina-2007-2021.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-brak-ukr-1970-1991-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-brake-ukr-lico-1970-1991.jpg");
	width: 300px;
	height: 197px;
}
.svid-brak-ukr-1970-1991-gif:hover {
	background: url("/images/gif/svidetelstvo-o-brake-ukraina-1970-1991.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-brak-ukr-1959-1969-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-brake-ukr-lico-1959-1969.jpg");
	width: 300px;
	height: 197px;
}
.svid-brak-ukr-1959-1969-gif:hover {
	background: url("/images/jpg-gif/sviditelstvo-o-brake-ukr-korka-1959-1969.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-brak-ukr-1930-1949-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-brake-ukr-lico-1930-1949.jpg");
	width: 300px;
	height: 197px;
}
.svid-brak-ukr-1930-1949-gif:hover {
	background: url("/images/gif/svidetelstvo-o-brake-ukraina-1930-1949.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-brak-moldavia-1970-1991-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-brake-moldavia-lico-1970-1991.jpg");
	width: 300px;
	height: 197px;
}
.svid-brak-moldavia-1970-1991-gif:hover {
	background: url("/images/gif/svidetelstvo-o-brake-moldavia-1970-1991.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-povish-kvalif-1997-2021-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-povishenii-kvalifikacii.jpg");
	width: 300px;
	height: 197px;
}
.svid-povish-kvalif-1997-2021-gif:hover {
	background: url("/images/jpg-gif/sviditelstvo-o-povishenii-kvalifikacii.jpg") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-usinovl-1998-2021-gif{
	background: url("/images/jpg-gif/sviditelstvo-ob-usinovlenii-lico.jpg");
	width: 300px;
	height: 197px;
}
.svid-usinovl-1998-2021-gif:hover {
	background: url("/images/gif/svidetelstvo-ob-usinovlenii-1998-2021.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-otcovstva-1998-2021-gif{
	background: url("/images/jpg-gif/sviditelstvo-ob-ustanovlenii-otcovstva-lico.jpg");
	width: 300px;
	height: 197px;
}
.svid-otcovstva-1998-2021-gif:hover {
	background: url("/images/gif/svidetelstvo-ob-ustanovlenii-otcovstva-1998-2021.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-smert-1998-2021-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-smerti-lico-1998-2021.jpg");
	width: 300px;
	height: 197px;
}
.svid-smert-1998-2021-gif:hover {
	background: url("/images/gif/svidetelstvo-o-smerti-1998-2021.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}


.svid-smert-ukr-2007-2021-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-smerti-lico-ukr-2007-2021.jpg");
	width: 300px;
	height: 197px;
}
.svid-smert-ukr-2007-2021-gif:hover {
	background: url("/images/gif/svidetelstvo-o-smerti-ukraina-2007-2021.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-imya-1998-2021-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-peremene-imeni-lico.jpg");
	width: 300px;
	height: 197px;
}
.svid-imya-1998-2021-gif:hover {
	background: url("/images/gif/svidetelstvo-o-peremene-imeni-1998-2021.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-razvod-1998-2021-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-razvode-lico-1998-2007.jpg");
	width: 300px;
	height: 197px;
}
.svid-razvod-1998-2021-gif:hover {
	background: url("/images/gif/svidetelstvo-o-razvode-1998-2021.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.svid-razvod-ukr-2007-2021-gif{
	background: url("/images/jpg-gif/sviditelstvo-o-razvode-lico-ukr-2007-2021.jpg");
	width: 300px;
	height: 197px;
}
.svid-razvod-ukr-2007-2021-gif:hover {
	background: url("/images/gif/svidetelstvo-o-razvode-ukraina-2007-2021.gif") no-repeat;
	width: 300px;
	height: 197px;
	transition: 1s;
	animation-name: flip;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
}

.button35 {
    padding: 0.35em 3.4em;
    border-radius: 30px;
    font-size: 22px;
     text-align: center;
    text-decoration: none;
    color: #47C26F;
    outline: 1px solid #47C26F;
    display: inline-block;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
    margin: 10px 0 5px 0;
}

.button35:before {
    content: "";
    background-color: rgba(255, 255, 255, 0.5);
    height: 100%;
    width: 3em;
    display: block;
    position: absolute;
    top: 0;
    left: -4.5em;
    transform: skewX(-45deg) translateX(0);
    transition: none;
}

.button35:hover {
    text-decoration: none;
    background-color: #47C26F;
    color: #fff;

}
.button35:hover:before {
    transform: skewX(-45deg) translateX(13.5em);
    transition: all 0.5s ease-in-out;
}


.button34 {
    padding: 0.35em 2.2em;
    border-radius: 30px;
    font-size: 18px;
     text-align: center;
    text-decoration: none;
    color: #47C26F;
    outline: 1px solid #47C26F;
    display: inline-block;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
    margin: 10px 0 5px 0;
}

.button34:before {
    content: "";
    background-color: rgba(255, 255, 255, 0.5);
    height: 100%;
    width: 3em;
    display: block;
    position: absolute;
    top: 0;
    left: -4.5em;
    transform: skewX(-45deg) translateX(0);
    transition: none;
}

.button34:hover {
    text-decoration: none;
    background-color: #47C26F;
    color: #fff;

}
.button34:hover:before {
    transform: skewX(-45deg) translateX(13.5em);
    transition: all 0.5s ease-in-out;
}