/*========================================================*/
/*======================== layout ========================*/
/*========================================================*/
/* dont forget synchronize min-width values and values for footer-height */
body, html { height: 100%; }

#main { min-height: 100% !important; min-width: 1000px;}

.footer { height: auto; min-height: 300px; margin-top: -300px; min-width: 1000px;}
*html .footer { height: 300px; }
#pusher { clear: both; height: 300px; visibility: hidden;}

.limiter { min-width: 900px; max-width: 1100px; margin: 0 auto; padding: 1px 50px }

.tricolumn1 { width: 31%; float: left; overflow: hidden; }
.tricolumn2 { width: 31%; float: left; margin-left: 3%; overflow: hidden; }
.tricolumn3 { width: 31%; float: left; margin-left: 3%; overflow: hidden; }

.fourcolumn1 { width: 22%; float: left; overflow: hidden; }
.fourcolumn2 { width: 22%; float: left; overflow: hidden; margin-left: 4%}
.fourcolumn3 { width: 22%; float: left; overflow: hidden; margin-left: 4%}
.fourcolumn4 { width: 22%; float: left; overflow: hidden; margin-left: 4%}

.column1 { width: 60%; float: left; clear: both; overflow: hidden; }
.column2 { width: 37%; float: right; overflow: hidden; margin-left: 3%; }

.footer-left { width: 25%; float: left; overflow: hidden; }
.footer-right { width: 75%; float: right; overflow: hidden; }



/*======================================================*/
/*======================== base ========================*/
/*======================================================*/
* { margin: 0; padding: 0; }

body, html {
    /*font-family: Georgia, "Times New Roman", Times, serif;*/
    /*font-family: Arial, Helvetica, sans-serif;*/
    font-family: 'Clear Sans', Verdana, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: black;
}

.footer { background: #e4e9eb}

hr { margin-top: 1em; margin-bottom: 1em;}
div.line1 { border-top: 1px solid #bbbbbb; margin: 1em 0; width: 100%; }
div.line2 { border-top: 1px solid #e6e6e6; margin: 0.5em 0; width: 100%; }

p { margin: 10pt 0; line-height: 1.2em; }
.margin0 { margin: 0 auto; }
.margin3 { margin: 3pt auto; }
.margin5 { margin: 5pt auto; }
.margin10 { margin: 10pt auto; }
.margin15 { margin: 15pt auto; }
.margin20 { margin: 20pt auto; }
.clear { clear: both; }
/*.text-block { margin: 2em 0;}*/

/* urls */
a { color: #dd3c19}
a:hover, a:focus { color: #ff461a}
a.noline { text-decoration: none;}
a.noline:hover { text-decoration: underline; }
a.nolineno, a.nolineno:hover { text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { text-decoration: underline; }
a.dash { text-decoration: none; border-bottom: 1px dashed; }
a.white,a.white:visited { color: #fff; }
a.dot {text-decoration: none; border: 0 dashed; border-bottom-width: 1px; cursor: pointer; }

/* images and photos */
img { border: none; }
img.left { float: left; margin: 5pt 12pt 5pt 0; }
img.right { float: right; margin: 5pt 0 5pt 12pt; }
img.border5,div.border5 { background: #f2f2f2; padding: 5px; }
img.border10,div.border10 { background: #f2f2f2; padding: 10px; }
img.border15,div.border15 { background: #f2f2f2; padding: 15px; }
img.noborder { background: none; padding: 0; }

/* forms and inputs */
form,input { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; }
label {	cursor: pointer; }
textarea { resize: vertical}
input, textarea, select {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 12pt;
}
input, textarea, select {
    padding: 3pt;
    border: solid 1px #bfbfbf;
}
input.small, textarea.small, select.small { font-size: 10pt; }
input.large, textarea.large, select.large { font-size: 14pt; }
input.xlarge, textarea.xlarge, select.xlarge { font-size: 16pt; }
input.x100, textarea.x100, select.x100 { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box }
input.x50, textarea.x50, select.x50 { width: 50%; }
input.x75, textarea.x75, select.x75 { width: 75%; }
input.x25, textarea.x25, select.x25 { width: 25%; }
/*table input.x100, table textarea.x100, table select.x100 { width: 95%; }*/

a.button {
    padding: 3pt;
    border: solid 1px #bfbfbf;
    text-align: center;
    cursor: default;
    background-color: buttonface;
    box-sizing: border-box;
    white-space: pre;
    display: inline-block;
    text-decoration: none;
    color: #000000;
}

a.button:active {
    box-shadow: 0 0 3px 0 #678bff;
}

/* font size offlet */
.title24 { font-size: 24pt; }
.title20 { font-size: 20pt; }
.title18 { font-size: 18pt; }
.title16 { font-size: 16pt; }
.title14 { font-size: 14pt; }
.title13 { font-size: 13pt; }
.title12 { font-size: 12pt; }
.small { font-size: 10pt;}
.lite,.lite:visited { color: #999999;}
.white, .white a, .white a:visited { color: #ffffff;}
.strong { font-weight: bold;}
.italic { font-style: italic; }
.red, .red a, .red a:visited { color: #c00201;}


/* tables */
table { border-collapse: collapse; }
table.data { width: 100%; border: none; border-collapse: separate; border-spacing: 0; }
table.data tr { }
table.data th { background: #ededed; text-align: left; font-weight: bold; padding: 5pt; border-bottom: 1px solid #bfbfbf; }
table.data tr.active th { border-bottom: 1px solid #bfbfbf; cursor: default; }
table.data tr.active:hover { cursor: pointer; background: #bfbfbf; }
table.data tr.selected { background: #bfbfbf; }
/*table.data tr.selected:hover { background: #bfbfbf; }*/
table.data td { padding: 5pt; border-bottom: 1px solid #bfbfbf; }
table.data tr.noline td { border: none; }
table.noline td { padding: 5pt 0; border: none; }


.radius5 { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.radius10 { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.radius15 { border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
.radius8 { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }

/* headings */
h1, h2, h3, h4, h5, h6, .header {
    /*font-family: Georgia, "Times New Roman", Times, serif;*/
    /*color: #c00201;*/
    font-weight: 200;
    font-style: normal;
}
h1, h2, h3 { padding: 0; margin: 15pt 0 10pt 0; }
h4, h5, h6 { padding: 0; margin: 15pt 0 10pt 0; }
h1 { font-size: 22pt; text-align: center}
h2 { font-size: 22pt; text-align: center}
h3 { font-size: 20pt; }
h4 { font-size: 20pt; }
h5 { font-size: 18pt; }
h6 { font-size: 18pt; }
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 10pt; }

h1 { font-size: 36px !important; margin: 30pt 0 15pt !important}
h2 { font-size: 32px !important; margin: 30pt 0 15pt !important}

/* lists */
ol,ul { margin: 0 0 10pt 0; }
li { margin: 5pt 0 5pt 25pt; }
div.file { padding: 15pt 0; padding-left: 80px; background: no-repeat left; }
div.file32 { padding: 2pt 0 2pt 40px; background: no-repeat left; }
div.file span, div.file32 span { white-space: nowrap; }

p img { background: #ededed; padding: 10px; display: -moz-inline-block; display: inline-block; }
p[align='left'] img, p[style*='left'] img { float: left; margin: 3pt 10pt 5pt 0; }
p[align='right'] img, p[style*='right'] img { float: right; margin: 3pt 0 5pt 10pt; }


/* background blocks */
div.block { padding: 10pt 15pt; background-color: #f2f2f2; }
div.green { background-color: #ced3a7; }
div.yellow { background-color: #fff5d9; }
/*div.grey { background-color: #e6e6e6; }*/


/*========================================================*/
/*======================== blocks ========================*/
/*========================================================*/

.main-menu { display: table; width: 100%; table-layout: fixed}
.main-menu ul { display: table-row;}
.main-menu li { display: table-cell; list-style: none;}
.main-menu li a {
    padding: 20px 0;
    text-align: center;
    white-space: nowrap;
    display: block;
    color: white;
    text-decoration: none;
    font-weight: 200;
    font-size: 20px;
}
.main-menu li a:hover, .main-menu li a.active { color: #dd3c19}

div.tabled { display: table; width: 100%;}
.tabled > div { display: table-cell; vertical-align: top}

div.tabled-vmiddle { display: table; width: 100%;}
.tabled-vmiddle > div { display: table-cell; vertical-align: middle}

.tabled-text-centered > div { text-align: center}

a.mode-link { text-decoration: none}
a.mode-link > div { width: 220px; margin: 0 auto}
a.mode-link .mode-title { font-size: 17pt; color: #000000; margin-top: 17pt; margin-bottom: 5pt }
a.mode-link .mode-text { font-size: 11pt; color: #404040; margin-top: 5pt}
a.mode-link:hover .mode-title { color: #dd3c19}
a.mode-link:hover .mode-text { color: #dd3c19}
.mode-circle { border-radius: 50%; width: 220px; height: 220px; margin: 0 auto}

a.link-a .mode-circle {background: url('./images/servces-image-sites.png') center no-repeat #ffffff}
/*a.link-a:hover .mode-circle {background: url('./images/drawings-2.jpg') center no-repeat #ffffff}*/
a.link-b .mode-circle {background: url('./images/servces-image-support.png') center no-repeat #ffffff}
/*a.link-b:hover .mode-circle {background: url('./images/drawings-2.jpg') center no-repeat #ffffff}*/
a.link-c .mode-circle {background: url('./images/servces-image-seo.png') center no-repeat #ffffff}
/*a.link-c:hover .mode-circle {background: url('./images/rocket-2.jpg') center no-repeat #ffffff}*/
a.link-d .mode-circle {background: url('./images/servces-image-logos.png') center no-repeat #ffffff}
a.link-e .mode-circle {background: url('./images/servces-image-design.png') center no-repeat #ffffff}


.feedback-block .name {font-weight: 200; font-size: 20px; margin-top: 0; margin-bottom: 10px}
.feedback-block .position { font-size: 14px; margin: 10px 0}
.feedback-block .link { font-size: 18px; margin: 10px 0}
.feedback-block .feedback-circle { border-radius: 50%; width: 100px; height: 100px; float: left; margin-bottom: 10px}
.feedback-block .text { padding: 20px; background: #ffffff}

.triangle-top {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 20px;
    border-color: transparent transparent #ffffff transparent;
}

div.project-block { display: inline-block; margin: 0 30px 30px; vertical-align: top;}
a.project-link { text-decoration: none;}
a.project-link > div { width: 200px}
a.project-link .square { width: 200px; height: 200px; border: solid 1px #bfbfbf; margin: 0 auto}
a.project-link .title { font-size: 15pt; color: #000000; margin-top: 15pt; margin-bottom: 5pt; font-family: 'Clear Sans',sans-serif; font-weight: lighter; }
a.project-link .text { font-size: 11pt; color: #404040; margin-top: 5pt}
a.project-link:hover .square { border: solid 1px #dd3c19}
a.project-link:hover .title { color: #dd3c19}
a.project-link:hover .text { color: #dd3c19}

.clear-sans-thin { font-family: 'Clear Sans', Verdana, Arial, sans-serif; font-weight: lighter}

input[type="submit"].grey-button, button.grey-button {
    border: none;
    padding: 0.3em 1em 0.3em 1em;
    text-align: center;
    background: #f2f2f2;
    display: inline-block;
    color: #dd3c19;
    outline: none;
}
input[type="submit"].grey-button:hover, button.grey-button:hover { box-shadow: 0 0 3px 0 #000000 }
input[type="submit"].grey-button:active, button.grey-button:active { background: #dddddd; box-shadow: none }

.years { text-align: center; font-weight: lighter;}
.years > a, .years > span { display: inline-block; margin: 0 10px}

.price-block { padding: 40px 0}
.price-block .prices { margin-left: 85px; margin-top: 30px}
.price-block .prices > table { width: 100% }
.price-block .prices > table td {padding: 5px 0}