/* Базовые стили слоя затемнения и модального окна  */
.overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
    background-color: rgba(0, 0, 0, 0.76);
    position: fixed;
    cursor: default; 
}.overlay:target {
    display: block;
}
/* стили модального окна */
.popup {
    top: -100%;
    right: 0;
    left: 50%;
    font-size: 14px;
    z-index: 20;
    margin: 0;
    width: 270px;
    text-align: center;
/* фиксированное позиционирование, окно стабильно при прокрутке */
    position: fixed;
    padding: 15px;
    border: 1px solid #383838;
    background: #fefefe;
    border: 3px solid #00ffff;
/* скругление углов */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
/* внешняя тень */
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-transform: translate(-50%, -500%);
    -ms-transform: translate(-50%, -500%);
    -o-transform: translate(-50%, -500%);
    transform: translate(-50%, -500%);
    -webkit-transition: -webkit-transform 0.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;
    -o-transition: -o-transform 0.6s ease-out;
    transition: transform 0.6s ease-out;
}
/* активируем модальный блок */
.overlay:target+.popup {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 20%;
}
/* формируем кнопку закрытия */
.close {
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    position: absolute;
    padding: 0;
    border: 2px solid #00ffff;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    background-color: rgba(61, 61, 61, 0.8);
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
    text-align: center;
    text-decoration: none;
    font: 12px/20px 'Tahoma', Arial, sans-serif;
    font-weight: bold;
    -webkit-transition: all ease .8s;
    -moz-transition: all ease .8s;
    -ms-transition: all ease .8s;
    -o-transition: all ease .8s;
    transition: all ease .8s;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    font-size: 12px;
}
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);    
}

/* Using Font Awesome - http://fortawesome.github.com/Font-Awesome */
@font-face {
    font-family: "FontAwesome";
    src: url('font/fontawesome-webfont.eot');
    src: url('font/fontawesome-webfont.eot?#iefix') format('eot'), url('font/fontawesome-webfont.woff') format('woff'), url('font/fontawesome-webfont.ttf') format('truetype'), url('font/fontawesome-webfont.svg#FontAwesome') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Postfix and Prefix styling start here */
.ppfix {
    margin: 0;
    vertical-align: top;
    display: inline-block;
    font-family: Calibri;
    font-size: 14px;
    color: #343434;
    min-width: 180px;
    height: 20px;
    background: #fbfbfb;
    border: 1px solid #cccdcf;
    padding: 8px 10px;
    box-shadow: inset 0 2px 3px #e8e8e8;
}.ppfix:focus {
    outline: none;
    border: 1px solid red;
}.prefix {
    vertical-align: top;
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 8px 10px;
    background: #f2f2f2;
    border: 1px solid #cccdcf;
    border-right: 0;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-bottomleft: 2px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
}.prefix,
.postfix {
    font-family: FontAwesome;
    font-size: 25px;
    line-height: 25px;
    color: #737373;
}

.prefix.orange,
.postfix.orange {
    background: #ffb700;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjcwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjhjMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ffb700 0%, #ff8c00 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb700), color-stop(100%,#ff8c00));
    background: -webkit-linear-gradient(top,  #ffb700 0%,#ff8c00 100%);
    background: -o-linear-gradient(top,  #ffb700 0%,#ff8c00 100%);
    background: -ms-linear-gradient(top,  #ffb700 0%,#ff8c00 100%);
    background: linear-gradient(to bottom,  #ffb700 0%,#ff8c00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );
    border: 1px solid #e59500;
    color: #fff;
}

.prefix.magenta,
.postfix.magenta {
    background: #ff82ac;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmODJhYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNzI1ODEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ff82ac 0%, #f72581 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff82ac), color-stop(100%,#f72581));
    background: -webkit-linear-gradient(top,  #ff82ac 0%,#f72581 100%);
    background: -o-linear-gradient(top,  #ff82ac 0%,#f72581 100%);
    background: -ms-linear-gradient(top,  #ff82ac 0%,#f72581 100%);
    background: linear-gradient(to bottom,  #ff82ac 0%,#f72581 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff82ac', endColorstr='#f72581',GradientType=0 );
    border: 1px solid #c60a56;
    color: #fff;
}

.prefix.dark-grey,
.postfix.dark-grey {
    background: #989fa6;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk4OWZhNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YTkyOWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #989fa6 0%, #8a929a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#989fa6), color-stop(100%,#8a929a));
    background: -webkit-linear-gradient(top,  #989fa6 0%,#8a929a 100%);
    background: -o-linear-gradient(top,  #989fa6 0%,#8a929a 100%);
    background: -ms-linear-gradient(top,  #989fa6 0%,#8a929a 100%);
    background: linear-gradient(to bottom,  #989fa6 0%,#8a929a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#989fa6', endColorstr='#8a929a',GradientType=0 );
    border: 1px solid #757880;
    color: #fff;
}

.prefix.green,
.postfix.green {
    background: #b8e172;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I4ZTE3MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NGFkMzciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #b8e172 0%, #74ad37 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e172), color-stop(100%,#74ad37));
    background: -webkit-linear-gradient(top,  #b8e172 0%,#74ad37 100%);
    background: -o-linear-gradient(top,  #b8e172 0%,#74ad37 100%);
    background: -ms-linear-gradient(top,  #b8e172 0%,#74ad37 100%);
    background: linear-gradient(to bottom,  #b8e172 0%,#74ad37 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e172', endColorstr='#74ad37',GradientType=0 );
    border: 1px solid #689b32;
    color: #fff;
}

.prefix.blue,
.postfix.blue {
    background: #79a8d9;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc5YThkOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1MThlY2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #79a8d9 0%, #518ece 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#79a8d9), color-stop(100%,#518ece));
    background: -webkit-linear-gradient(top,  #79a8d9 0%,#518ece 100%);
    background: -o-linear-gradient(top,  #79a8d9 0%,#518ece 100%);
    background: -ms-linear-gradient(top,  #79a8d9 0%,#518ece 100%);
    background: linear-gradient(to bottom,  #79a8d9 0%,#518ece 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79a8d9', endColorstr='#518ece',GradientType=0 );
    border: 1px solid #3d81c8;
    color: #fff;
}

.prefix.red,
.postfix.red {
    background: #ff0000;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiNTAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ff0000 0%, #b50000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#b50000));
    background: -webkit-linear-gradient(top,  #ff0000 0%,#b50000 100%);
    background: -o-linear-gradient(top,  #ff0000 0%,#b50000 100%);
    background: -ms-linear-gradient(top,  #ff0000 0%,#b50000 100%);
    background: linear-gradient(to bottom,  #ff0000 0%,#b50000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#b50000',GradientType=0 );
    border: 1px solid #990000;
    color: #fff;
}

span.prefix.email:before, span.postfix.email:before { content: "\f003"; }
span.prefix.mobile:before, span.postfix.mobile:before { content: "\f095"; }
span.prefix.link:before, span.postfix.link:before { content: "\f0c1"; }
span.prefix.external-link:before, span.postfix.external-link:before { content: "\f08e"; }
span.prefix.attach:before, span.postfix.attach:before { content: "\f0c6"; }
span.prefix.tag:before, span.postfix.tag:before { content: "\f02c"; }
span.prefix.home:before, span.postfix.home:before { content: "\f015"; }

span.prefix.key:before, span.postfix.key:before { content: "\f084"; }
span.prefix.credit-card:before, span.postfix.credit-card:before { content: "\f09d"; }
span.prefix.cart:before, span.postfix.cart:before { content: "\f07a"; }
span.prefix.user:before, span.postfix.user:before { content: "\f007"; }
span.prefix.trash:before, span.postfix.trash:before { content: "\f014"; }
span.prefix.folder:before, span.postfix.folder:before { content: "\f07c"; }

span.prefix.save:before, span.postfix.save:before { content: "\f0c7"; }
span.prefix.marker:before, span.postfix.marker:before { content: "\f041"; }
span.prefix.setting:before, span.postfix.setting:before { content: "\f085"; }
span.prefix.edit:before, span.postfix.edit:before { content: "\f044"; }
span.prefix.bookmark:before, span.postfix.bookmark:before { content: "\f097"; }
span.prefix.calendar:before, span.postfix.calendar:before { content: "\f073"; }

span.prefix.gplus:before, span.postfix.gplus:before { content: "\f0d5"; }
span.prefix.twitter:before, span.postfix.twitter:before { content: "\f099"; }
span.prefix.github:before, span.postfix.github:before { content: "\f09b"; }
span.prefix.pinterest:before, span.postfix.pinterest:before { content: "\f0d2"; }
span.prefix.linkedin:before, span.postfix.linkedin:before { content: "\f0e1"; }
span.prefix.facebook:before, span.postfix.facebook:before { content: "\f09a"; }