::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: #ED1E26;
}
/*
::selection {
    color: #fff;
    background: #ED1E26;
}*/

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2'),
        url('../fonts/Montserrat-Regular.woff') format('woff'),
        url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

header, main, footer, .content { font-family: 'Montserrat'; }

img {
    border: none;
    outline: none;
    line-height: 0;
    vertical-align: middle; /* TODO: da se testwa */
    max-width: 100%; /* TODO: da se testwa */
}

a {
    color: #000;
    text-decoration: none;
    outline: 0; /* Removing The Dotted Outline */
    -webkit-tap-highlight-color: rgba(0,0,0,0);  /* Remove Gray Highlight When Tapping Links in Mobile Safari */
} /* ??? */

*:focus { outline: 0; }

.cf:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
} /* clearfix */

section {
    margin: 0 auto;
    max-width: 1280px;
}

h1,h2,h3,h4 { margin: 0; }


h4 { font-size: 18px; }

.c {
    text-align: center;
}

.r {
    text-align: right;
}


.content { padding: 10px; }

.content h1 { 
    text-align:center; 
    padding-top: 40px; 
    font-size: 35px;
    margin-bottom: 30px;
}

.content h2, h4, ul, ol {
    max-width: 750px;
    margin: 20px auto;
}
.content h3 {
    font-size: 40px;
    line-height: 50px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.content h2,h3,h4 { line-height: 25px; }

.blue p,.content p { max-width: 750px; margin: 10px auto; }
/*.content ol {list-style-type: upper-roman;}*/

.content span {
    font-size: 1rem;
    color: #ED1E26;
    margin-bottom: .5rem;
    line-height: 1.2;
}

.content ul {
    list-style: none;
}

.content ul li:before {
    color: #f00;
    content: '» \0000a0';
    font-size: 1.2em;
    font-weight: bold;
}

.content h2::after {
    content: ' ';
    display: block;
    width: 100px;
    height: 1px;
    background-color: #ED1E26;
    border: none;
    margin-top: 20px;
}

.content div.left,
.content div.right { width: 50%; }

.blue  strong { color: #fff; }



@media all and (max-width: 400px) {
    .content ol {padding-left: 20px;}
    .content ul {padding-left: 15px;}
    .content .rules h2 { padding-left: 5px; }

}

/* ******************** */

/* grid */

body.content .grid2 div,
body.content .grid3 div,
body.content .grid4 div,
body.content .grid5 div,
body.content .grid6 div {
    border: 1px Dotted #ccc;
    min-height: 18px;
}

.grid2, .grid3, .grid4, .grid5, .grid6 {
    display: grid;
    box-sizing: border-box;
}

.grid2 .p1, .grid3 .p1, .grid4 .p1, .grid5 .p1, .grid6 .p1 { padding: 10px; }

.grid2 { grid-template-columns:  50% 50%; }

.grid3 { grid-template-columns:  33.33333333% 33.333333% 33.333333%; }

.grid4 { grid-template-columns: 25% 25% 25% 25%; }

.grid5 { grid-template-columns:  20% 20% 20% 20% 20%; }

.grid6 {  grid-template-columns:  16.6666666% 16.6666666% 16.6666666% 16.6666666% 16.6666666% 16.6666666%; }

@media all and (max-width: 1170px) {
    .grid2 { padding: 10px;}
}

@media all and (max-width: 980px) {
    .grid2 { grid-template-columns:  100%; }
}

@media all and (max-width: 680px) {

    .grid3,
    .grid4,
    .grid5 { grid-template-columns:  50% 50%  ; }

    .grid6 {  grid-template-columns:  33.33333% 33.33333%  33.33333% ; }
}

@media all and (max-width: 420px) {

    .grid2,
    .grid3,
    .grid4,
    .grid5  { grid-template-columns:  100%; }

    .grid6 {  grid-template-columns: 50% 50%; }
}

@media all and (max-width: 340px) {
    .grid6 {  grid-template-columns: 100%; }
}