@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-BoldCondIt.eot');
    src: local('Myriad Pro Bold Condensed Italic'), local('MyriadPro-BoldCondIt'),
    url('../fonts/MyriadPro-BoldCondIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-BoldCondIt.woff') format('woff'),
    url('../fonts/MyriadPro-BoldCondIt.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-BlackIt.eot');
    src: local('Myriad Pro Black Italic'), local('MyriadPro-BlackIt'),
    url('../fonts/MyriadPro-BlackIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-BlackIt.woff') format('woff'),
    url('../fonts/MyriadPro-BlackIt.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-LightIt.eot');
    src: local('Myriad Pro Light Italic'), local('MyriadPro-LightIt'),
    url('../fonts/MyriadPro-LightIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-LightIt.woff') format('woff'),
    url('../fonts/MyriadPro-LightIt.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-BlackCond.eot');
    src: local('Myriad Pro Black Condensed'), local('MyriadPro-BlackCond'),
    url('../fonts/MyriadPro-BlackCond.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-BlackCond.woff') format('woff'),
    url('../fonts/MyriadPro-BlackCond.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Cond.eot');
    src: local('Myriad Pro Condensed'), local('MyriadPro-Cond'),
    url('../fonts/MyriadPro-Cond.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-Cond.woff') format('woff'),
    url('../fonts/MyriadPro-Cond.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Bold.eot');
    src: local('Myriad Pro Bold'), local('MyriadPro-Bold'),
    url('../fonts/MyriadPro-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-Bold.woff') format('woff'),
    url('../fonts/MyriadPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-BoldIt.eot');
    src: local('Myriad Pro Bold Italic'), local('MyriadPro-BoldIt'),
    url('../fonts/MyriadPro-BoldIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-BoldIt.woff') format('woff'),
    url('../fonts/MyriadPro-BoldIt.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-BoldSemiCnIt.eot');
    src: local('Myriad Pro Bold SemiCondensed Italic'), local('MyriadPro-BoldSemiCnIt'),
    url('../fonts/MyriadPro-BoldSemiCnIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-BoldSemiCnIt.woff') format('woff'),
    url('../fonts/MyriadPro-BoldSemiCnIt.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-CondIt.eot');
    src: local('Myriad Pro Condensed Italic'), local('MyriadPro-CondIt'),
    url('../fonts/MyriadPro-CondIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-CondIt.woff') format('woff'),
    url('../fonts/MyriadPro-CondIt.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-LightCond.eot');
    src: local('Myriad Pro Light Condensed'), local('MyriadPro-LightCond'),
    url('../fonts/MyriadPro-LightCond.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-LightCond.woff') format('woff'),
    url('../fonts/MyriadPro-LightCond.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-SemiCn.eot');
    src: local('Myriad Pro SemiCondensed'), local('MyriadPro-SemiCn'),
    url('../fonts/MyriadPro-SemiCn.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-SemiCn.woff') format('woff'),
    url('../fonts/MyriadPro-SemiCn.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-SemiCnIt.eot');
    src: local('Myriad Pro SemiCondensed Italic'), local('MyriadPro-SemiCnIt'),
    url('../fonts/MyriadPro-SemiCnIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-SemiCnIt.woff') format('woff'),
    url('../fonts/MyriadPro-SemiCnIt.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-BoldCond.eot');
    src: local('Myriad Pro Bold Condensed'), local('MyriadPro-BoldCond'),
    url('../fonts/MyriadPro-BoldCond.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-BoldCond.woff') format('woff'),
    url('../fonts/MyriadPro-BoldCond.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-LightSemiExtIt.eot');
    src: local('Myriad Pro Light SemiExtended Italic'), local('MyriadPro-LightSemiExtIt'),
    url('../fonts/MyriadPro-LightSemiExtIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-LightSemiExtIt.woff') format('woff'),
    url('../fonts/MyriadPro-LightSemiExtIt.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Semibold.eot');
    src: local('Myriad Pro Semibold'), local('MyriadPro-Semibold'),
    url('../fonts/MyriadPro-Semibold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-Semibold.woff') format('woff'),
    url('../fonts/MyriadPro-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Black.eot');
    src: local('Myriad Pro Black'), local('MyriadPro-Black'),
    url('../fonts/MyriadPro-Black.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-Black.woff') format('woff'),
    url('../fonts/MyriadPro-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Regular.eot');
    src: local('Myriad Pro Regular'), local('MyriadPro-Regular'),
    url('../fonts/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-Regular.woff') format('woff'),
    url('../fonts/MyriadPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-LightSemiCn.eot');
    src: local('Myriad Pro Light SemiCondensed'), local('MyriadPro-LightSemiCn'),
    url('../fonts/MyriadPro-LightSemiCn.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-LightSemiCn.woff') format('woff'),
    url('../fonts/MyriadPro-LightSemiCn.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-BlackCondIt.eot');
    src: local('Myriad Pro Black Condensed Italic'), local('MyriadPro-BlackCondIt'),
    url('../fonts/MyriadPro-BlackCondIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-BlackCondIt.woff') format('woff'),
    url('../fonts/MyriadPro-BlackCondIt.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-LightCondIt.eot');
    src: local('Myriad Pro Light Condensed Italic'), local('MyriadPro-LightCondIt'),
    url('../fonts/MyriadPro-LightCondIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-LightCondIt.woff') format('woff'),
    url('../fonts/MyriadPro-LightCondIt.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-LightSemiExt.eot');
    src: local('Myriad Pro Light SemiExtended'), local('MyriadPro-LightSemiExt'),
    url('../fonts/MyriadPro-LightSemiExt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-LightSemiExt.woff') format('woff'),
    url('../fonts/MyriadPro-LightSemiExt.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-BlackSemiCnIt.eot');
    src: local('Myriad Pro Black SemiCondensed Italic'), local('MyriadPro-BlackSemiCnIt'),
    url('../fonts/MyriadPro-BlackSemiCnIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-BlackSemiCnIt.woff') format('woff'),
    url('../fonts/MyriadPro-BlackSemiCnIt.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-SemiboldCondIt.eot');
    src: local('Myriad Pro Semibold Condensed Italic'), local('MyriadPro-SemiboldCondIt'),
    url('../fonts/MyriadPro-SemiboldCondIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-SemiboldCondIt.woff') format('woff'),
    url('../fonts/MyriadPro-SemiboldCondIt.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-SemiboldCond.eot');
    src: local('Myriad Pro Semibold Condensed'), local('MyriadPro-SemiboldCond'),
    url('../fonts/MyriadPro-SemiboldCond.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-SemiboldCond.woff') format('woff'),
    url('../fonts/MyriadPro-SemiboldCond.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-BoldSemiExtIt.eot');
    src: local('Myriad Pro Bold SemiExtended Italic'), local('MyriadPro-BoldSemiExtIt'),
    url('../fonts/MyriadPro-BoldSemiExtIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-BoldSemiExtIt.woff') format('woff'),
    url('../fonts/MyriadPro-BoldSemiExtIt.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-SemiboldSemiCn.eot');
    src: local('Myriad Pro Semibold SemiCondensed'), local('MyriadPro-SemiboldSemiCn'),
    url('../fonts/MyriadPro-SemiboldSemiCn.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-SemiboldSemiCn.woff') format('woff'),
    url('../fonts/MyriadPro-SemiboldSemiCn.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-BlackSemiExtIt.eot');
    src: local('Myriad Pro Black SemiExtended Italic'), local('MyriadPro-BlackSemiExtIt'),
    url('../fonts/MyriadPro-BlackSemiExtIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-BlackSemiExtIt.woff') format('woff'),
    url('../fonts/MyriadPro-BlackSemiExtIt.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-SemiboldSemiExtIt.eot');
    src: local('Myriad Pro Semibold SemiExtended Italic'), local('MyriadPro-SemiboldSemiExtIt'),
    url('../fonts/MyriadPro-SemiboldSemiExtIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-SemiboldSemiExtIt.woff') format('woff'),
    url('../fonts/MyriadPro-SemiboldSemiExtIt.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-LightSemiCnIt.eot');
    src: local('Myriad Pro Light SemiCondensed Italic'), local('MyriadPro-LightSemiCnIt'),
    url('../fonts/MyriadPro-LightSemiCnIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-LightSemiCnIt.woff') format('woff'),
    url('../fonts/MyriadPro-LightSemiCnIt.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-BoldSemiCn.eot');
    src: local('Myriad Pro Bold SemiCondensed'), local('MyriadPro-BoldSemiCn'),
    url('../fonts/MyriadPro-BoldSemiCn.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-BoldSemiCn.woff') format('woff'),
    url('../fonts/MyriadPro-BoldSemiCn.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-SemiboldSemiCnIt.eot');
    src: local('Myriad Pro Semibold SemiCondensed Italic'), local('MyriadPro-SemiboldSemiCnIt'),
    url('../fonts/MyriadPro-SemiboldSemiCnIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-SemiboldSemiCnIt.woff') format('woff'),
    url('../fonts/MyriadPro-SemiboldSemiCnIt.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-SemiboldIt.eot');
    src: local('Myriad Pro Semibold Italic'), local('MyriadPro-SemiboldIt'),
    url('../fonts/MyriadPro-SemiboldIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-SemiboldIt.woff') format('woff'),
    url('../fonts/MyriadPro-SemiboldIt.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-It.eot');
    src: local('Myriad Pro Italic'), local('MyriadPro-It'),
    url('../fonts/MyriadPro-It.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-It.woff') format('woff'),
    url('../fonts/MyriadPro-It.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-BoldSemiExt.eot');
    src: local('Myriad Pro Bold SemiExtended'), local('MyriadPro-BoldSemiExt'),
    url('../fonts/MyriadPro-BoldSemiExt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-BoldSemiExt.woff') format('woff'),
    url('../fonts/MyriadPro-BoldSemiExt.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Light.eot');
    src: local('Myriad Pro Light'), local('MyriadPro-Light'),
    url('../fonts/MyriadPro-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-Light.woff') format('woff'),
    url('../fonts/MyriadPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-SemiboldSemiExt.eot');
    src: local('Myriad Pro Semibold SemiExtended'), local('MyriadPro-SemiboldSemiExt'),
    url('../fonts/MyriadPro-SemiboldSemiExt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-SemiboldSemiExt.woff') format('woff'),
    url('../fonts/MyriadPro-SemiboldSemiExt.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-SemiExtIt.eot');
    src: local('Myriad Pro SemiExtended Italic'), local('MyriadPro-SemiExtIt'),
    url('../fonts/MyriadPro-SemiExtIt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-SemiExtIt.woff') format('woff'),
    url('../fonts/MyriadPro-SemiExtIt.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-BlackSemiCn.eot');
    src: local('Myriad Pro Black SemiCondensed'), local('MyriadPro-BlackSemiCn'),
    url('../fonts/MyriadPro-BlackSemiCn.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-BlackSemiCn.woff') format('woff'),
    url('../fonts/MyriadPro-BlackSemiCn.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-BlackSemiExt.eot');
    src: local('Myriad Pro Black SemiExtended'), local('MyriadPro-BlackSemiExt'),
    url('../fonts/MyriadPro-BlackSemiExt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-BlackSemiExt.woff') format('woff'),
    url('../fonts/MyriadPro-BlackSemiExt.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-SemiExt.eot');
    src: local('Myriad Pro SemiExtended'), local('MyriadPro-SemiExt'),
    url('../fonts/MyriadPro-SemiExt.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-SemiExt.woff') format('woff'),
    url('../fonts/MyriadPro-SemiExt.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family: 'Circe';
    src: url('../fonts/Circe-Regular.eot');
    src: local('Circe'), local('Circe-Regular'),
    url('../fonts/Circe-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Circe-Regular.woff') format('woff'),
    url('../fonts/Circe-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Circe';
    src: url('../fonts/Circe-ExtraLight.eot');
    src: local('Circe ExtraLight'), local('Circe-ExtraLight'),
    url('../fonts/Circe-ExtraLight.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Circe-ExtraLight.woff') format('woff'),
    url('../fonts/Circe-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Circe';
    src: url('../fonts/Circe-Thin.eot');
    src: local('Circe Thin'), local('Circe-Thin'),
    url('../fonts/Circe-Thin.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Circe-Thin.woff') format('woff'),
    url('../fonts/Circe-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Circe';
    src: url('../fonts/Circe-Light.eot');
    src: local('Circe Light'), local('Circe-Light'),
    url('../fonts/Circe-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Circe-Light.woff') format('woff'),
    url('../fonts/Circe-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Circe';
    src: url('../fonts/Circe-Bold.eot');
    src: local('Circe Bold'), local('Circe-Bold'),
    url('../fonts/Circe-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Circe-Bold.woff') format('woff'),
    url('../fonts/Circe-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Circe';
    src: url('../fonts/Circe-ExtraBold.eot');
    src: local('Circe ExtraBold'), local('Circe-ExtraBold'),
    url('../fonts/Circe-ExtraBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Circe-ExtraBold.woff') format('woff'),
    url('../fonts/Circe-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}




*{
    font-family: "Myriad Pro", sans-serif;
}

img{
    max-width: 100%;
}

html, body{
    max-width: 100%;
    max-height: 100%;
    background: #cccaca;
    margin: 0;
    padding: 0;
    height: 100%;
    color: #242424;
    position: relative;
}


.fancybox-active{
    height: 100% !important;
}

.fancybox-content{
    padding: 0 10px;
}

.modal_bg{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 12;
    display: none;
}

.preloader_bg{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /*display: none;*/
    z-index: 9999999;
}

.preloader_bg:before{
    content: '';
    background: url("../img/preloader.svg") center center no-repeat;
    position: absolute;
    background-size: 200px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper{
    height: calc(100% - 101px);
    position: relative;
}

.control_panel{
    width: 114px;
    height: 174px;
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 3;
}

.control_joystick .control_up{
    opacity: 0;
    cursor: pointer;
}

.control_joystick .control_up:hover{
    opacity: 0.1;
}

.control_joystick .control_left{
    opacity: 0;
    cursor: pointer;
}

.control_joystick .control_left:hover{
    opacity: 0.1;
}

.control_joystick .control_right{
    opacity: 0;
    cursor: pointer;
}

.control_joystick .control_right:hover{
    opacity: 0.1;
}

.control_joystick .control_down{
    opacity: 0;
    cursor: pointer;
}

.control_joystick .control_down:hover{
    opacity: 0.1;
}

.control_panel_relative{
    position: relative;
    height: 100%;
    width: 100%;
}

.control_joystick{
    position: absolute;
    top: 0;
    background: url("../img/joystick.png") center center no-repeat;
    background-size: contain;
    width: 112px;
    height: 112px;
}

.control_scale_block{
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
    justify-content: space-around;
}

.control_scale_minus{
    background: url("../img/scale_minus.png");
    background-size: contain;
    width: 40px;
    height: 40px;
    display: block;
    cursor: pointer;
}

.control_scale_minus:hover {
    opacity: 0.8;
}

.control_scale_plus{
    background: url("../img/scale_plus.png");
    background-size: contain;
    width: 40px;
    height: 40px;
    display: block;
    cursor: pointer;
}

.control_scale_plus:hover{
    opacity: 0.8;
}

.header{
    height: 100px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 15px;
    justify-content: space-between;
    position: relative;
}

.header_left{
    display: flex;
    position: relative;
    z-index: 11;
}

.header_right{
    display: flex;
    position: relative;
    z-index: 11;
}

.header a, .labal_a{
    display: flex;
    color: #022047;
    text-decoration: none;
    padding: 0 15px;
    height: 100px;
    align-items: center;
    cursor: pointer;
}


.header .active_item{
    background: #e1e0e0;
}

.header a:hover{
    background: #e1e0e0;
}

.header_link_text{
    display: block;
    font-size: 14px;
}

.header_change_size{
    display: none;
    height: 100px;
    align-items: center;
}

.header_change_size_item{
    display: flex;
    color: #022047;
    font-size: 14px;
    font-weight: 400;
    padding: 0 15px;
    height: 100px;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.flex_block{
    display: flex;
    align-items: center;
}

.header_change_size_show{
    position: absolute;
    top: 80px;
    right: 0;
    width: 148px;
    height: 64px;
    background: #fff;
    border-radius: 0 0 10px 10px;
    display: none;
    cursor: default;
    box-shadow: 0px 5px 12px 3px rgba(0, 0, 0, 0.08);
    padding: 8px;
}

.header_change_size_item .active_size{
    transform: rotate(90deg);
}

.header_change_size_item .active_color{
    transform: rotate(90deg);
}

.header_change_color_show{
    position: absolute;
    top: 80px;
    right: 0;
    background: #fff;
    box-shadow: 0px 5px 12px 3px rgba(0, 0, 0, 0.08);
    width: 180px;
    padding: 10px 14px;
    display: none;
    border-radius: 0 0 10px 10px;
    cursor: default;
}


.close {
    background: url("../img/cross.svg") center center no-repeat;
    background-size: 18px;
    width: 22px !important;
    height: 22px !important;
    cursor: pointer;
    margin: 4px 6px;
    border: 1px solid #242424 !important;
}

.change_color_item{
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin: 4px 6px;
}


.flex_change_color_show{
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
}

.flex_change_color_show .active{
    width: 24px !important;
    height: 24px !important;
    border: 1px solid #292929;
    margin: 2px 5px !important;
}

.rangecontainer {
    width: 100%;
}

.range {
    -webkit-appearance: none;
    appearance: none;
    height: 2px;
    background: #9989e9;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

/* Mouse-over effects */
.range:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.range::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 8px;
    height: 18px;
    background: #fff;
    cursor: pointer;
    border: 1px solid #aeaeae;
    border-radius: 8px;
}

.range::-moz-range-thumb {
    width: 8px;
    height: 18px;
    background: #fff;
    cursor: pointer;
    border: 1px solid #aeaeae;
    border-radius: 8px;
}

.header_change_size_text{
    color: #022047;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    margin-top: 6px;
}

.header_change_item_text{
    padding-right: 12px;
}

.header_change_arrow{
    background: url("../img/arrow_right.png") center center no-repeat;
    background-size: contain;
    width: 6px;
    height: 10px;
    display: block;
    filter: grayscale(100%);
}

.logo_block{
    position: absolute;
    bottom: -26px;
    width: 100%;
    display: flex;
    justify-content: center;
    left: 0;
    z-index: 10;
}

.logo{
    background: url("../img/logo.png") center center no-repeat;
    background-size: contain;
    width: 136px;
    height: 136px !important;
    display: inline-block;
    margin-right: 0 !important;
}

.logo:hover{
    background: url(../img/logo.png) center center no-repeat !important;
    background-size: contain !important;
}

.svg_instruction:before{
    content: '';
    background: url("../img/instruction.svg") center center no-repeat;
    background-size: contain;
    display: inline-block;
}

.svg_load:before{
    content: '';
    background: url("../img/Icon_load.svg") center center no-repeat;
    background-size: contain;
    display: inline-block;
}

.svg_save_project:before{
    content: '';
    background: url("../img/Icon_save.svg") center center no-repeat;
    background-size: contain;
    display: inline-block;
}

.svg_screen:before{
    content: '';
    background: url("../img/Icon_screen.svg") center center no-repeat;
    background-size: contain;
    display: inline-block;
}

.svg_load_bg:before{
    content: '';
    background: url("../img/Icon_load_background.svg") center center no-repeat;
    background-size: contain;
    display: inline-block;
}

.svg_size:before{
    content: '';
    background: url("../img/Icon_size.svg") center center no-repeat;
    background-size: contain;
    display: inline-block;
}

.svg_grid:before{
    content: '';
    background: url("../img/Icon_grid.svg") center center no-repeat;
    background-size: contain;
    display: inline-block;
}

.svg_clean:before{
    content: '';
    background: url("../img/Icon_clean.svg") center center no-repeat;
    background-size: contain;
    display: inline-block;
}

.svg_hide:before{
    content: '';
    background: url("../img/Icon_hide.svg") center center no-repeat;
    background-size: contain;
    display: inline-block;
}

.svg_add:before{
    content: '';
    background: url("../img/Icon_add.svg") center center no-repeat;
    background-size: contain;
    display: inline-block;
}

.header_svg:before{
    width: 38px;
    height: 38px;
    margin-right: 10px;
}

/* СПИОСК КАТАЛОГОВ */


.catalog{
    width: 650px;
    background: #fff;
    height: 100%;
    margin-top: 1px;
    border-radius: 4px;
    padding-right: 26px;
    overflow-y: auto;
    -webkit-transition: all .1s;
    -o-transition: all .1s;
    transition: all .1s;
    z-index: 2;
    position: absolute;
}


.catalog_right_panel{
    position: absolute;
    left: 676px;
    background: #fff url("../img/cross.svg") center center no-repeat;
    background-size: 14px;
    top: 40%;
    height: 116px;
    width: 28px;
    border-radius: 0 30px 30px 0;
    -webkit-transition: left .1s;
    -o-transition: left .1s;
    transition: left .1s;
    font-size: 0;
    cursor: pointer;
    z-index: 2;
}

.catalog_title{
    color: #022047;
    font-size: 32px;
    font-weight: 700;
    padding-left: 34px;
    width: 40%;
}

.catalog_title_block{
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-top: 24px;
    border-bottom: 2px solid #e7e7e7;
    padding-bottom: 18px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
}

.catalog_form{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 60%;
    margin-bottom: 0;
}

.catalog_input{
    font-size: 12px;
    font-weight: 400;
    color: #8a94a6;
    border: 2px solid #dfe6ee;
    border-radius: 4px;
    padding: 0 12px;
    height: 30px;
    width: 100%;
}

.catalog_input:focus{
    outline: none;
}

.catalog_input::placeholder{
    color: #8a94a6;
}

.catalog_button{
    background: #8c7ae6 url(../img/search.png) 60% center no-repeat;
    border-radius: 0 4px 4px 0;
    height: 30px;
    width: 58px;
    border: 0;
    margin-left: -5px;
    cursor: pointer;
}

.catalog_button:focus{
    outline: none;
}

.catalog_item_title_block{
    padding: 22px 0;
    border-bottom: 2px solid #e7e7e7;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.catalog_item_title{
    color: #022047;
    font-size: 22px;
    font-weight: 400;
    padding-left: 34px;
}

.catalog_item_arrow{
    background: url("../img/arrow-right.png") center center no-repeat;
    width: 6px;
    height: 10px;
    background-size: contain;
    padding-right: 26px;
}

.catalog_item_title_block .arrow_active{
    transform: rotate(90deg);
}

.catalog_item_model_list{
    padding: 10px 20px 20px 34px;
}

.catalog_item_model_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    display: none;
}

.model_block{
    display: flex;
    flex-wrap: wrap;
    width: 47%;
    border-bottom: 2px solid #cccaca;
    padding-bottom: 8px;
    margin-bottom: 10px;
    padding-top: 10px;
    cursor: pointer;
}

.model_image{
    width: 40%;
}

.model_desc{
    width: 50%;
    padding-left: 20px;
    font-size: 16px;
    font-weight: 400;
    color: #242424;
    height: 94px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.model_vendor_code{
    width: 100%;
    color: #8a94a6;
    font-size: 10px;
    padding-top: 6px;
    padding-left: 20px;
}

.catalog_item_title_block .active{
    color: #8c7ae6;
}

.catalog_not_active{
    width: 5px;
    overflow: hidden;
    padding: 0;
    -webkit-transition: all .1s;
    -o-transition: all .1s;
    transition: all .1s;
}

.catalog_not_active_check .catalog_right_panel{
    position: absolute;
    left: 4px;
    background: #fff;
    background-size: 14px;
    height: 226px;
    writing-mode: tb;
    width: 28px;
    border-radius: 30px 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #022047;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    -webkit-transition: left .1s;
    -o-transition: left .1s;
    transition: left .1s;
    top: 50%;
    transform: translate(0, -50%) rotate(180deg);
    z-index: 2;
}

/* ORDER MODEL */


.order_right_panel{
    position: absolute;
    right: 325px;
    background: #fff url("../img/cross.svg") center center no-repeat;
    background-size: 14px;
    top: 40%;
    height: 116px;
    width: 28px;
    border-radius: 30px 0 0 30px;
    font-size: 0;
    cursor: pointer;
    -webkit-transition: right .1s;
    -o-transition: right .1s;
    transition: right .1s;
    z-index: 12;
}


.order_not_active_check .order{
    width: 5px !important;
    overflow: hidden;
    padding: 0 !important;
    background: #8c7ae6 !important;
    -webkit-transition: all .1s;
    -o-transition: all .1s;
    transition: all .1s;
}

.order_not_active_check .order *{
    display: none;
}

.order_not_active_check .order_right_panel{
    background: #8c7ae6;
    right: 4px;
    font-size: 16px;
    font-weight: 400;
    writing-mode: tb;
    height: 320px;
    border-radius: 0 60px 60px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    -webkit-transition: right .1s;
    -o-transition: right .1s;
    transition: right .1s;
    top: 50%;                         /* 3 */
    transform: translate(0, -50%) rotate(180deg);
    z-index: 2;
}

.order{
    width: 266px;
    background: url("../img/order_bg.png") center center no-repeat;
    background-size: cover;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 30px;
    display: flex;
    align-items: center;
    webkit-transition: all .1s;
    -o-transition: all .1s;
    transition: all .1s;
    z-index: 12;
}

.order_title{
    font-family: "Circe", sans-serif;
    color: #022047;
    font-size: 32px;
    font-weight: 800;
    text-align: center;
}

.order_title_small{
    color: #8a94a6;
    font-size: 16px;
    text-align: center;
    line-height: 1.25;
    margin-top: 30px;
    margin-bottom: 16px;
}

.order_title_small a{
    color: #8a94a6;
    text-decoration: underline;
}

.order_input{
    font-family: 'Circe', sans-serif;
    width: 88%;
    font-weight: 400;
    color: #8a94a6;
    font-size: 16px;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #dfe6ee;
    border-radius: 4px;
    margin-bottom: 24px;
}

.checkbox_order{
    display: flex;
}

.order_checkbox_label{
    color: #8a94a6;
    font-size: 14px;
    line-height: 1.29;
    margin-left: 10px;
}

.order_checkbox_label a{
    color: #8a94a6;
    font-size: 14px;
    text-decoration: underline;
}

.order [type="checkbox"]:not(:checked),
.order [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}
.order [type="checkbox"]:not(:checked) + label,
.order [type="checkbox"]:checked + label {
    position: relative;
    padding-left: 1.95em;
    cursor: pointer;
}

/* checkbox aspect */
.order [type="checkbox"]:not(:checked) + label:before,
.order [type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #dfe6ee;
    background: #ffffff;
    border-radius: 3px;
}
/* checked mark aspect */
.order [type="checkbox"]:not(:checked) + label:after,
.order [type="checkbox"]:checked + label:after {
    content: '\2713\0020';
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 1.3em;
    line-height: 0.8;
    color: #8a94a6;
    transition: all .2s;
}
/* checked mark aspect changes */
.order [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}
.order [type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}

.order_button{
    font-size: 16px;
    font-weight: 400;
    height: 40px;
    width: 100%;
    border: 0;
    text-align: center;
    background: #8c7ae6;
    border-radius: 5px;
    color: #fff;
    margin-top: 30px;
    cursor: pointer;
}



.catalog_not_active_check .workspace{
    height: 100%;
    position: absolute;
    width: calc(100% - 5px);
    top: 0;
    left: 5px;
    z-index: 1;
    /*background: url("../img/model_1.png") center center no-repeat;*/
    /*background-size: cover;*/
}

.catalog_not_active_check .workspace:focus{
    outline: none;
}

.catalog_item_children{
    width: 100%;
}

/* WORK SPACE */

.workspace{
    height: 100%;
    position: absolute;
    top: 0;
    width: calc(100% - 676px);
    left: 676px;
    z-index: 1;
    /*background: url("../img/model_1.png") center center no-repeat;*/
    /*background-size: cover;*/
}

.workspace:focus{
    outline: none;
}

/* MODALS */

.modal_order{
    width: 770px;
    display: none;
    position: relative;
    height: 540px;
}

.close_modal{
    position: absolute;
    top: 20px;
    right: 20px;
    background: url("../img/cross.svg") center center no-repeat;
    background-size: contain;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.modal_order_head{
    display: flex;
    border-bottom: 1px solid #e7e7e7;
}

.modal_order_head .active{
    background: #e1e0e0;
    color: #8c7ae6;
    font-weight: 700;
}

.modal_order_head_item{
    color: #022047;
    font-weight: 400;
    font-size: 22px;
    padding: 24px 10px 12px 12px;
    cursor: pointer;
}

.modal_order_list{
    margin-top: 14px;
}

#modal_order{
    height: 450px;
    overflow-y: auto;
}

.modal_order_img_item_vendor{
    width: 250px;
}

.modal_order_img_item_vendor img{
    width: 94px;
    height: 64px;
}

.modal_order_item_vendor{
    color: #8a94a6;
    font-weight: 400;
    font-size: 10px;
    margin-top: 6px;
}

.modal_order_item{
    display: flex;
    padding-bottom: 6px;
    border-bottom: 1px solid #e7e7e7;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.modal_order_item:last-child{
    border-bottom: none;
}

.modal_order_desc{
    display: flex;
}

.modal_order_item_del{
    background: url("../img/delete.svg") center center no-repeat;
    background-size: contain;
    width: 22px;
    height: 24px;
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}

.modal_order_item_text{
    padding-left: 16px;
    color: #242424;
    font-size: 16px;
    font-weight: 400;
}

#modal_screen{
    display: none;
}

.swiper-container {
    width: 100%;
    height: 434px;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.modal_order .swiper-pagination-bullet{
    width: 9px;
    height: 9px;
    border: 1px solid #947bea;
    background: #fff;
    opacity: 1;
}

.modal_order .swiper-pagination-bullet-active {
    opacity: 1;
    background: #947bea !important;
}

.modal_order .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url('../img/arrow_right.svg');
    right: 10px;
    left: auto;
}

.modal_order .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url('../img/arrow_right.svg');
    transform: rotate(180deg);
    left: 10px;
    right: auto;
}

.modal_head{
    padding-bottom: 12px;
    border-bottom: 1px solid #cccaca;
}

.modal_size{
    width: 346px;
    padding: 18px 8px;
    display: none;
}

.modal_clear{
    width: 360px;
    padding: 18px 8px;
    display: none;
}

.modal_title{
    color: #022047;
    font-size: 20px;
    font-weight: 700;
    padding-left: 16px;
}

.modal_size_form{
    margin-top: 18px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.modal_size_input{
    height: 48px;
    width: 60px;
    padding: 0 16px;
    border: 1px solid #dfe6ee;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    color: #022047;
}

.modal_size_input:focus{
    outline: none;
}

.modal_size_x{
    color: #022047;
    font-size: 16px;
    font-weight: 400;
    margin: 0 16px;
}

.modal_size_button{
    width: 84px;
    border: 0;
    height: 48px;
    background: #8c7ae6;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    margin-left: 32px;
    cursor: pointer;
    border-radius: 4px;
}

.modal_size_text{
    color: #022047;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    margin-top: 16px;
}

.modal_clear_text{
    color: #022047;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    padding: 16px 0;
}

.modal_clear_button_container{
    display: flex;
    justify-content: space-around;
}

.modal_clear_button_yes{
    height: 50px;
    display: inline-flex;
    width: 134px;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 400;
    background: #8c7ae6;
    text-decoration: none;
}

.modal_clear_button_no{
    height: 48px;
    display: inline-flex;
    width: 132px;
    border: 1px solid #8c7ae6;
    align-items: center;
    justify-content: center;
    color: #8c7ae6;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 400;
    background: #fff;
    text-decoration: none;
}

.width_80{
    width: 80%;
}

.flex_wrap{
    flex-wrap: wrap;
}

.margin_0{
    margin: 0;
}
.m_t_10{
    margin-top: 10px;
}

@media screen and (max-width: 1600px) {
    .header_svg:before {
        width: 30px;
        height: 30px;
    }
    .header_link_text {
        display: block;
        font-size: 12px;
    }
    .header a, .labal_a {
        padding: 0 10px;
        height: 80px;
    }
    .header_change_size_item{
        font-size: 12px;
    }
    .catalog {
        width: 570px;
    }
    .catalog_not_active {
        width: 5px;
    }
    .catalog_right_panel {
        left: 595px;
    }
    .workspace {
        height: 100%;
        position: absolute;
        top: 0;
        width: calc(100% - 630px);
        left: 630px;
    }
    .model_vendor_code {
        padding-left: 8px;
    }
    .header {
        height: 80px;
    }
    .wrapper {
        height: calc(100% - 81px);
    }
    .logo{
        height: 106px !important;
    }
    .header_change_size {
        height: 80px;
    }
}

@media screen and (max-width: 1400px) {
    .catalog {
        width: 370px;
    }
    .catalog_not_active {
        width: 5px;
    }
    .catalog_right_panel {
        left: 396px;
    }
    .workspace {
        height: 100%;
        position: absolute;
        top: 0;
        width: calc(100% - 400px);
        left: 400px;
    }
    .model_vendor_code {
        padding-left: 8px;
    }
    .model_block {
        width: 100%;
    }
    .catalog_form {
        width: 47%;
    }
}



@media screen and (max-width: 1300px) {
    .catalog {
        width: 326px;
    }
    .catalog_not_active {
        width: 5px;
    }
    .catalog_right_panel {
        left: 352px;
    }
    .workspace {
        height: 100%;
        position: absolute;
        top: 0;
        width: calc(100% - 360px);
        left: 360px;
    }
    .catalog_title_block{
        flex-wrap: wrap;
    }
    .catalog_title{
        width: 100%;
    }
    .catalog_form {
        width: 100%;
        margin-left: 34px;
        margin-top: 14px;
    }
    .header_link_text {
        font-size: 10px;
    }
    .header_svg:before {
        width: 20px;
        height: 20px;
        margin-right: 6px;
    }
    .header a , .labal_a{
        padding: 0 8px;
        height: 60px;
    }
    .header {
        height: 60px;
    }
    .wrapper {
        height: calc(100% - 61px);
    }
    .logo{
        height: 86px !important;
    }
    .header_change_size {
        height: 60px;
    }
}