div,span.body,input,li,ul,textarea,a,form,strong, span, i {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}

html { height: 100%; min-height:100%;   font-family: sans-serif;background: #e9edf0;
}
body {min-height:100%;
    font-family: 'Titillium Web', sans-serif;
    margin: 0;
    background-size: cover;
    background-attachment: fixed;
    padding-left: 30px;
}

input, select, button {font-family: 'Titillium Web', sans-serif;}

.sideline{position: absolute; left: 0; top: 0; background: white; z-index: 99;   box-shadow: 0px 8px 20px #0000001a; color:black;}
.sideline .item{cursor: pointer; transition: all 300ms ease-in-out;   display: block;width: 100px;height: 100px;padding: 20px 0 0 0;text-align: center;  text-decoration: none;color:black; position: relative;}
.sideline .item:hover{  opacity: .9; box-shadow: 0px 8px 20px #0000001a; transform: translate(0,-2px);}
.sideline .item.active{background:  #7464cb; color:white;}
.sideline .item .fal{    display: block;
    font-size: 18pt;
    padding: 8px;}
.sideline .item span{display:block;font-size: 10pt;}
.sideline .item strong{     position: absolute;top: 14px;font-size: 10pt;left: 55px;background: #da6d6d;color: white;height: 30px;border-radius: 15px;padding: 5px 12px; }

#maincontent{

    position: relative;
    z-index: 99;
}
@keyframes loader {
    0% {stroke-dashoffset: 141; opacity: 0;}
    5%{opacity: 1;}
    50% {stroke-dashoffset: 0;}
    95%{opacity: 1;}
    100% {stroke-dashoffset: -141; opacity: 0;}

}

#loader{
    text-align: center;
    height: 400px;
    padding: 180px;
    margin: 0 0 -400px 0;
    opacity: 0;
}
#loader .loader{text-align: center;}
#loader .loader polyline {     stroke-dasharray: 141.789, 141.789; stroke:#d5dde2; fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;
  }
#loader.loading {

    opacity: 1;
}
#loader.loading .loader polyline{
    animation-name: loader;  stroke-dashoffset: -141; opacity: 0;
    animation-duration: 3s; animation-iteration-count: infinite;
}



.userbox .usericon{    border-radius: 50%;background: #e9edf0;float: left;text-align: center;width: 40px;height: 40px;padding: 8px 0 0 0;}
.userbox .userbox-in{ padding: 0 0 0 50px;  }
.letterbox{background: #7464cb;    color: white;    width: 100px;    height: 100px;    padding: 20px 0 0 0;    text-align: center;margin: 0 0 15px 0;    font-size: 28pt;}

.userhead{background: white;   position: relative; z-index: 99; box-shadow: 0px 8px 20px #0000001a; padding: 14px 15px; width: 280px;}
.userhead .usericon{    border-radius: 50%;background: #e9edf0;float: left;text-align: center;width: 40px;height: 40px;padding: 8px 0 0 0;}
.userhead .userhead-in{ padding: 0 0 0 50px;  }
.userhead strong{font-size: 12pt; display: block; }
.userhead span{font-size: 10pt; opacity: .7; display: block;}
.userhead .rollout{display:none;     position: absolute;background: white; box-shadow: 0px 8px 20px #0000001a;padding: 10px 15px;width: 280px;margin: 14px -15px; }
.userhead .rollout a{display: block;font-size: 10pt;padding: 5px;text-decoration: none;color: black;transition: all 300ms ease-in-out; }
.userhead .rollout a:hover{opacity: .9;  transform: translate(0,-1px); }
.userhead.out .rollout{display:block; }


input{padding: 10px 15px; background: white; border: solid 1px #dadada;    display: inline-block; font-size: 10pt; font-weight: bold;text-align: left; color:black;transition: all 300ms ease-in-out; }
input:focus{outline: none; background:#f1f1f1; }
input[readonly]{opacity: .5;background:#f1f1f1;}

textarea{padding: 10px 15px; background: white; border: solid 1px #dadada;    display: inline-block; font-size: 10pt; font-weight: bold;text-align: left; color:black;transition: all 300ms ease-in-out; }
textarea:focus{outline: none; background:#f1f1f1; }


select{border-radius:0; -webkit-appearance:none; padding: 10px 15px; position: relative; background: white; border: solid 1px #dadada;    display: inline-block; font-size: 10pt; font-weight: bold;text-align: left; color:black;transition: all 300ms ease-in-out; }
select:focus{outline: none; background:#f1f1f1; }
.selecticon{    float: right;margin: -38px 15px 0 0;z-index: 999;position: relative;opacity: .6;}


form{}
form label{display: block; padding: 10px 0 5px; font-size: 10pt;}
form input{width: 100%;}
form select{width: 100%;}
form textarea{width: 100%;}


.editbar{clear:both;}
.editbar span{font-size: 10pt;opacity: .7;}
.editbar .fllft{float:left;}
.editbar .flrgh{float:right;}
td.editbar .inlinebtn{font-size: 12pt;opacity: .7;}
td.editbar span{font-size: 12pt;opacity: .7;}
.editbar .inlinebtn{font-size: 10pt; opacity: .7; color:black; text-decoration: none; float: right; margin: 0 0 0 10px; transition: all 300ms ease-in-out; cursor: pointer;}
.editbar .inlinebtn:hover{opacity: .9;  transform: translate(0,-1px); }


.hledaniform{position: relative;}
.menu.content .hledaniform{float:right; margin: 0 20px 0 0;}
.content .hledaniform{  margin: 0 0  20px 0;}
.hledaniform input{background: none;    padding: 25px;    min-width: 400px;}
.hledaniform input:focus{background: #d3d7da;}
.hledaniform .btn{background: none; position: absolute; right: 0; top: 0 ;color: #7464cb; height: 72px;}



form .switch{overflow: hidden; cursor: pointer; position: relative; height: 42px;     width: 140px; background: white;border: solid 1px #dadada;display: inline-block;font-size: 10pt;font-weight: bold;text-align: left;color: gray;}
form .switch .mover{width: 70px;  position: absolute; left: 0; height: 52px; transition: all 300ms ease-in-out; }
form .switch.val0 .mover{background: #da6d6d; left: 70px;}
form .switch.val1 .mover{background: #8cda6d;}
form .switch .yes{color:white; left: 0; position: absolute; width: 70px; text-align: center; height: 52px; padding: 10px 0;transition: all 300ms ease-in-out; }
form .switch .no{color:white; right: 0; position: absolute; width: 70px; text-align: center; height: 52px;padding: 10px 0;transition: all 300ms ease-in-out; }
form .switch.val0 .yes{color:#2d2d2d;}
form .switch.val1 .no{color:#2d2d2d; }



form .fileUpload{overflow: hidden; cursor: pointer; position: relative; height: 42px;    width: 100%;background: white;border: solid 1px #dadada;display: inline-block;font-size: 10pt;font-weight: bold;text-align: left;color: gray; }
form .fileUpload strong{    float: left;color: black;padding: 10px 15px !important;}
form .fileUpload span{float: right;font-size: 10pt; opacity: .7;padding: 10px !important;}
form .fileUpload .bar{background: #8cda6d;  height: 40px;color:white;  padding: 10px 0;  }



.grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
.grid .item{background: white;    margin: 0;transition: all 300ms ease-in-out;cursor: pointer;  padding: 15px; text-align: center; position: relative;}
.grid .item:hover{opacity: .9;  transform: translate(0,-2px); box-shadow: 0px 8px 20px #0000001a;}
.grid .item .photo{text-align: center; padding: 10px 0;}
.grid .item .photo img{max-width: 210px; height: 110px;}
.grid .item .photo i{font-size: 24pt; opacity: .6; margin: 10px 0;}


.grid .item .inrow2 {clear:both;}
.grid .item .inrow2:after {content: " "; position: relative; display: block; clear:both;}
.grid .item .inrow2 div{float:left; width: 50%;}

.grid .item .inrow3 {clear:both;}
.grid .item .inrow3:after {content: " "; position: relative; display: block; clear:both;}
.grid .item .inrow3 div{float:left; width: 33.33%;}

.grid .item .small{font-size: 10pt; text-align: left; opacity: 0.6;}
.grid .item .small-r{text-align: right;}
.grid .item .small-c{text-align: center;}
.grid .item .tit2{min-height: 48px;}

.grid .item .status{    width: 10px;
    height: 10px;
    margin: 2px 2px 0px 0;
    background: #dadada;
    border-radius: 50%;
    display: inline-block;
}
.grid .item .status.red{background: #da6d6d;}
.grid .item .status.orange{background: #efbd48;}
.grid .item .status.green{background: #8cda6d;}

.filemanager{ }
.filemanager .foldertopbar{ }
.filemanager .path{font-size: 10pt; opacity: .7; margin: 0 -10px 10px -10px;}
.filemanager .path span{font-size: 10pt; opacity: .7; color:black; text-decoration: none; display:inline-block; margin: 0 10px 0 10px; transition: all 300ms ease-in-out; cursor: pointer;}
.filemanager .path span:hover{opacity: .9;  transform: translate(0,-2px);}


.filemanager .folders{ margin: 0 -10px;}
.filemanager .folders .item{    margin: 0 10px 20px 10px;transition: all 300ms ease-in-out;cursor: pointer;float: left;width: 295px;background: white;box-shadow: 0px 8px 20px #0000001a;padding: 15px;}
.filemanager .folders .item:hover{opacity: .9;  transform: translate(0,-2px);}
.filemanager .folders .circle{    float: left;padding: 8px 0 0 0 ;background: #7464cb;color: white;border-radius: 50%;width: 40px;height: 40px;text-align: center; font-weight: bold;}
.filemanager .folders .circle.red{background: #da6d6d;}
.filemanager .folders .circle .fa-folder-open{padding: 0 0 0 2px;}
.filemanager .folders .data{padding: 0 0 0 50px;}
.filemanager .folders .data strong{display:block;}
.filemanager .folders .data span{display:block;font-size: 10pt; opacity: .7;}
.filemanager .folders a{color:black;}

.line-circle{ float: left;color: white; width: 40px;height: 40px;text-align: center; font-weight: bold;}
.line-wth-user{padding: 0 0 0 50px;}

.line-circle .nahled{max-width: 100%;  display: inline-block; }
.line-circle .nahledicon{    padding: 8px 0 0 0;background: #7464cb;color: white;border-radius: 50%;width: 40px;height: 40px;text-align: center; font-size:12pt; text-align: center;}
.line-circle .nahledicon.yellow{background: #efbd48;}
.line-circle .nahledicon.blue{background: #85caf5;}
.line-circle .nahledicon.red{background: #da6d6d;}
.line-circle .nahledicon.green{background: #8cda6d;}
.line-circle .nahledicon.orange{background: #ea9b55;}
.line-circle .nahledicon.grey{background: #dadada;}
.line-circle .nahledicon.greyU{    background: #e9edf0; color:black;}

.message{padding: 15px;       min-width: 300px;    position: fixed;    right: 40px;    bottom: 40px;    color: white; z-index: 9999;   box-shadow: 0px 8px 20px #0000001a;}
.message.green{background: #8cda6d;}
.message.red{background: #da6d6d;}
.message .fal{float:left; font-size: 22px;}
.message .message-in{padding: 0 0 0 50px;}

.filemanager .files{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-columns:  16.666% 16.666% 16.666% 16.666% 16.666% 16.666% ;
    grid-auto-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
.filemanager .files .item{    margin: 0;transition: all 300ms ease-in-out;cursor: pointer;  padding: 15px; text-align: center; position: relative;}
.filemanager .files .item:hover{opacity: .9;  transform: translate(0,-2px); box-shadow: 0px 8px 20px #0000001a;}
.filemanager .files .nahled{max-width: 100%; max-height: 120px; display: inline-block; }
.filemanager .files .nahledcont{position: relative; display:block; }
.filemanager .files .nahledcont:before{
    content: " ";
    display: none;
    position: absolute;
    width: 120px;
    height: 29px;
    background-image: url(/img/filecorner.png);
    background-size:cover;
    background-position: top right;
    top: 0;
    right: 0;
    z-index: 9999;
}
.filemanager .files .nahledicon{   margin: 22px auto; padding: 16px 0 0 0;background: #7464cb;color: white;border-radius: 50%;width: 80px;height: 80px;text-align: center; font-size:22pt; text-align: center;}
.filemanager .files .nahledicon.yellow{background: #efbd48;}
.filemanager .files .nahledicon.blue{background: #85caf5;}
.filemanager .files .nahledicon.red{background: #da6d6d;}
.filemanager .files .nahledicon.green{background: #8cda6d;}
.filemanager .files .nahledicon.orange{background: #ea9b55;}
.filemanager .files .nahledicon.grey{background: #dadada;}
.filemanager .files .data{text-align: center;}
.filemanager .files .data strong{display:block;}
.filemanager .files .data span{display:inline-block;font-size: 10pt; opacity: .7;}



.btn{padding: 15px 30px; text-decoration: none; background: #7464cb; border-style:none;  cursor: pointer; display: inline-block; font-size: 10pt; font-weight: bold;text-align: center; color:white;transition: all 300ms ease-in-out; }
.btn:hover{ opacity: .9; box-shadow: 0px 8px 20px #0000001a; transform: translate(0,-2px);  }
.btn.btn2{background: #efbd48;}
.btn.btnR{background: #da6d6d;}
.btn.btnG{background: #8cda6d;}
.btn.btnIn{color: #7464cb;background: #e9edf0;padding: 15px 15px;}
.btn.btnBlock{display: block;
    max-width: 200px;
    float: none !important;
    margin: 10px auto !important;}
.btn.flR{float:right; margin: 0 0 0 10px;}
.btn.circle{height: 46px; width: 46px; padding: 15px 0; border-radius: 50%;}
.btn .fal{transform: scale(1.5) translate(-5px,0);  }

.line{
    position: relative; padding: 20px 20px 20px 20px; background: white;    box-shadow: 0px 8px 20px #0000001a;
    margin: 0 0 20px 0;
}
.line h3{margin: 0;}
.line h3 a{color:black; text-decoration: none;}
.line .btnspace{position: absolute; right: 20px; top: 20px; }
.line .btnspace .btn{margin: 0 0 0 15px;}
.line .url{ opacity: .7; font-size: 10pt; }
.line .infoblock.trafflight{min-width: 20px; animation-name: blink; animation-duration: 1.5s;  animation-iteration-count: infinite;}
.line .infoblock.trafflight .trflght{width: 15px; height: 15px; border-radius: 50%; }
.line .infoblock.trafflight .trflght.red{background: #da6d6d;}
.line .infoblock.trafflight .trflght.yellow{background: #ea9b55;}
.line .infoblock.trafflight .trflght.green{background: #8cda6d;}

.line.chat-line{}
.line.chat-line p{padding: 0; margin: 0;}
.line.chat-line.chat-otherside{width: 60%;}
.line.chat-line.chat-me{width: 60%; float:right;}
.line.chat-line.chat-me.op{ opacity: .6;}

.line.infoG{background: #8cda6d; color:White; font-weight: bold; font-size: 10pt;}
.line.infoR{background: #da6d6d; color:White; font-weight: bold; font-size: 10pt;}
.line.info2{background: #ea9b55; color:White; font-weight: bold; font-size: 10pt;}
.line.lineshort{  max-width: 500px; margin: 0 auto;}

.content.authform form{position: relative; padding: 20px 20px 20px 20px; background: white;   box-shadow: 0px 8px 20px #0000001a;    max-width: 500px; margin: 0 auto;}
.content.authform form strong{display:block; padding: 5px 0 5px 0;}
.content.authform form label{width: 100%; opacity: .8; padding: 10px 0 0px 0; display: block; font-size: 10pt; font-weight: bold;}
.content.authform form input{-webkit-appearance:none;width: 100%;   ;display: block; margin: 0 auto;  font-size: 12pt;}
.content.authform form .btn{float:none; margin: 20px auto 0 auto; display:block;}


.line .infoblock.tit{width: 600px;}
.line .infoblock.tit a{color:black; text-decoration: none;}
.line .infoblock.titDet{width: 380px;}
.line .infoblock{float:left; padding: 5px 10px 5px 0; min-width: 150px;}
.line .infoblock strong{display: block;}
.line .infoblock span{display: block; opacity: .7; font-size: 10pt;}
.line.linecirc{padding: 20px 0px 20px 20px;}
.line .infoblock.infocirc{width: 202px}
.line .infoblock.infocirc span{padding: 6px;}
.line .infoblock .fa-spin{color:#b9b9b9;}
.line .infoblock.infocirc .fa-spin{color:#b9b9b9;}
.line .infoblock.infocirc strong .fa-spin{color: white;}
.line .infoblock.infocirc strong{display: inline-block;padding: 10px 20px;border-radius: 50px;color: white;font-size: 14pt;}
.line .infoblock.infocirc.if-all strong{background: #b6c0c7;}
.line .infoblock.infocirc.if-green strong{background: #8cda6d;}
.line .infoblock.infocirc.if-red strong{background: #da6d6d;}
.line .infoblock.infocirc.if-orange strong{background: #ea9b55;}
.line .infoblock.infocirc.if-yellow strong{background: #efbd48;}
.line .infoblock.infocirc.if-blue strong{background: #85caf5;}

.line .actinfo {}
.line .actinfo .infoblock{width: 300px;}
.line .actinfo .infoblock.infocirc2 strong{display: inline-block;padding: 10px 6px;border-radius: 50px;color: black;font-size: 14pt;}
.line .actinfo .infoblock.infocirc2 span{padding: 6px;}

.line .actinfo .screenblock{    float: right;
    max-height: 366px;
    overflow: hidden;
    position: relative;;
    width: 540px;
    padding: 20px 20px 0 20px;
    margin: -20px;
}
.line .actinfo .screenblock .shadow{    width: 500px;
    height: 20px;
    position: absolute;
    top: 366px;
    background: white;
    box-shadow: 0px 8px 20px #0000006e;}
.line .actinfo .screenblock img {border-radius: 5px;
    box-shadow: 0px 8px 20px #0000001a; margin-bottom: 20px;}

.load{opacity: .4;}


.tabs{position: relative;}
.tabs .tab{cursor:pointer; float:left; padding: 13px 20px 25px; margin: 0 10px 0 0; background: white;opacity: .7; border-radius: 5px 5px 0 0;transition: all 300ms ease-in-out;}
.tabs .tab.active{position: relative; z-index: 9999; transform: translate(0,-4px); padding-top: 17px; opacity: 1;}
.tabs .tab:hover{ transform: translate(0,-4px);padding-top: 17px; opacity: 1;  }
.tabs .tabR{float:right;}
.tabs .dwnl{    cursor: pointer;
    color:black;
    position: relative;
    transition: all .3s ease-in-out;
    border-radius: 5px;
    padding: 9px 0px 9px 3px;
    text-align: center;
    width: 36px;}
.tabs .dwnl:hover{background: rgba(90, 106, 117, 0.23);}
.tabs .dwnl:hover span{opacity: 1;}
.tabs .dwnl span{
    position: absolute;
    background: #ffffff;
    display: block;
    border-radius: 5px;
    opacity: 0;
    transition: all .3s ease-in-out;
    z-index: 9999;
    box-shadow: 0px 8px 20px #0000001a;
    width: 140px;
    padding: 6px;
    left: -50%;
    margin: 13px 0 0 -38px;
}
.tabs .dwnl span:before{
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #ffffff;
    border-width: 6px;
    margin-left: -6px;
}


.table{width: 100%; border-collapse: collapse; }
.table td{vertical-align: top; padding: 5px 0;}
.table tr.top{opacity: .7;}
.table tr{position: relative;transition: all 300ms ease-in-out; border-radius: 5px; }
.table tr .cirout{padding: 8px 10px 10px 8px; }
.table tr .cir{  width: 10px; height: 10px;   border-radius: 5px; }
.table tr.green .cir{background: #8cda6d;}
.table tr.red .cir{background: #da6d6d;}
.table tr.orange .cir{background: #ea9b55;}
.table tr.yellow .cir{background: #efbd48;}
.table tr.blue .cir{background: #85caf5;}
.table td {text-overflow: ellipsis;}
.table td .crop{  cursor: pointer;  white-space: nowrap; display: block;  max-width: 1000px; overflow: hidden;text-overflow: ellipsis;}
.table td .infobox{    font-size: 10pt;
    padding: 10px;
    margin: 5px 10px 5px 0;
    border-radius: 5px;
    background: #e9edf0;}
.table td .infobox a{color:black;}
.table .btn{    padding: 3px 10px;margin: -6px 0;float: right;}


.cl{clear:left;}

.logo a{text-decoration: none; color:black;}
.logo h1{margin: 3px 0;}


#page{
   width: 100%; }


.content.menu{margin-top: 20px; margin-bottom: 0;}
.menu .logo{float:left;  padding: 0; opacity: 0.8; }
.menu .logo.logcent{margin: 0 auto; text-align: center; float:none; margin-top: 50px;}
.menu .logo img{max-width: 330px;     height: 55px; padding: 10px 0;}
.menu .menuright{float:right; padding: 0;position: relative;z-index: 120;}

.content{    margin: 0 auto 20px auto;max-width: 1280px;padding: 20px;color:#2d2d2d;}

.footer{text-align: center; font-size: 8pt; opacity: .4;}
.footer a{color:black;}


.content.formcontent{ max-width: 100%;    padding: 0px;    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    max-width: 100%;    background: #000000ad;    z-index: 999;}
.content.formcontent .formcontentout{    height: 100%;    margin: 0 auto;    max-width: 560px;    padding: 80px 30px;overflow:hidden; overflow-y: scroll;}
.content.formcontent.formmax .formcontentout{    max-width: 1060px; }
.content.formcontent .formcontentout.del{  padding: 180px 30px;}
.content.formcontent form{position: relative;    padding: 20px 20px 20px 20px;    background: white;      box-shadow: 0px 8px 20px #0000001a;    max-width: 500px;    margin: 0 auto;    }
.content.formcontent.formmax form{     max-width: 1000px;      }
.content.formcontent form strong{display:block; padding: 5px 0 30px 0;}
.content.formcontent form strong.title{padding: 5px 0 5px 0;}
.content.formcontent form strong.large{padding: 5px 0 5px 0; font-size: 22pt;}
.content.formcontent form p {  padding: 0 0 10px 0; margin: 0;}
.content.formcontent form p.small{font-size: 10pt; opacity: .8; padding: 0; margin: 0;}
.content.formcontent form label{width: 100%; opacity: .8; padding: 10px 0 5px 0; display: block; font-size: 10pt; font-weight: bold;}
.content.formcontent form select{width: 100%;}
.content.formcontent form input{width: 100%;}
.content.formcontent form input[readonly]{opacity: .7;}
.content.formcontent form .btn{float:right; margin: 20px 0 0 0;}
.content.formcontent form .fa-times{float: right;padding: 10px;cursor: pointer;margin: -8px -5px 0 0;transition: all 300ms ease-in-out;}
.content.formcontent form .fa-times:hover{opacity: .7; }


.content.formcontent form p.small .path{ color:black; text-decoration: none; display:inline-block; margin: 0 10px 0 10px; transition: all 300ms ease-in-out; cursor: pointer;}
.content.formcontent form p.small .path:hover{opacity: .9;  transform: translate(0,-2px);}




p a {color:white; }


.modal .row .colin.mvR{ margin: 0;  }
.modal .row .colin.mvL{ margin: 0 ;  }

@media screen and (max-width: 940px) {

    .menu .menuright{display:none; }

    h1{  font-size: 20pt; padding: 0 20px;}
    h2{  font-size: 16pt; padding: 0 20px;}
    p{ margin: 30px  20px;}
    p.main{font-size: 12pt;}

    .row{display:block;}
    .row .colin.mvR{ margin: -20px 0 0 0;  }
    .row .colin.mvL{ margin: 0 0 -20px 0 ;  }


    .row .colin.wthArrRight:before{ position: absolute;    bottom: -30px;    left: 0px;      top: auto;}
    .row .colin.wthArrLeft:before{ position: absolute;    top: -30px;    left: 0px;
        border-top: none;
        border-left:none;
        border-bottom: 30px solid red;
        border-right: 30px solid transparent;
    }
    .row .colin.green:before{border-bottom-color:#d8222e;}

    .modal .row .colin.mvR{ margin: -20px 0 0 0;  }
    .modal .row .colin.mvL{ margin: 0 0 -20px 0 ;  }

    .rozc .row{display: flex;flex-wrap: wrap}
    .rozc .row .col{flex: 0 0 50%;}


    .articles .row{display: flex;flex-wrap: wrap}
    .articles .row .col{flex: 0 0 100%;}

}



@keyframes loader {
    0% {stroke-dashoffset: 141; opacity: 0;}
    5%{opacity: 1;}
    50% {stroke-dashoffset: 0;}
    95%{opacity: 1;}
    100% {stroke-dashoffset: -141; opacity: 0;}

}


@keyframes blink {
    50% {opacity: .5}

}

.clear{clear:both;}


.foot{text-align: center; width: 100%; opacity: .3; font-size: 9pt; padding: 200px 0 100px 0;}
.foot a{color:black;}

.row .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11 {padding: 0 10px;}
.row{margin: -10px; }

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11 {min-height:1px; float: left;  position: relative;}
.col-1:after,.col-2:after,.col-3:after,.col-4:after,.col-5:after,.col-6:after,.col-7:after,.col-8:after,.col-9:after,.col-10:after,.col-11:after{ content: " "; clear: both; display: block; }

.col-1 { width: 8.333333333333332%; }
.col-2 { width: 16.666666666666664%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333333333333%; }
.col-5 { width: 41.66666666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333333333336%; }
.col-8 { width: 66.66666666666666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333333334%; }
.col-11 { width: 91.66666666666666%; }
.col-12 { width: 100%; }


@media screen and (max-width: 710px) {
    .col-4 {  width: 100%;  }
    .col-6, .col-5, .col-7 {  width: 100%;  float: none;  margin: 1.2em 0;  }
}

@media screen and (max-width: 710px) {
    .col-2, .col-3 {  width: 50%;    }
    .col-9 { width: 100%; }
}

@media screen and (max-width: 470px) {
    .col-4 {  width: 100%;  margin: 10px auto;  float: none;  }
    .col-1 {  width: 100%;   float: none;  }
    .col-10 {  width: 100%;   float: none;  }
}