@import url("reset.css");

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html { position: relative; min-height: 100%; }
body { font-size: 20px; background: #ffffff; font-family: 'Roboto Condensed', sans-serif; position: relative; color: black; margin: 0 0 80px; }
div #container { width: 100%; height: 100%; position: relative; overflow: hidden; z-index: 1;}
div #content { width: 940px; height: 100%; position: relative; margin-left: auto; margin-right: auto; z-index: 50; margin-bottom: 80px; overflow: hidden; background: white; padding-left: 20px; padding-right: 20px; }

div #main { width: 600px; height: 100%; float: left; margin-bottom: 10px; }
div #side { width: 300px; height: 100%; float: left; }
div #entry { padding: 10px; margin-top: 0px; }
div #contacts { padding: 10px; margin-top: 0px; margin-bottom: 10px; }
div #footer { width: 100%; height: 80px; position: fixed; left: 0px; bottom: 0px; background: red; z-index: 100; }
div #fl { width: 55%; height: 80px; position: absolute; top: 0; left: 0; }
div #f { position: absolute; width: 460px; height: 44px; top: 18px; right: 50px; font-size: 40px; font-family: 'Squada One'; color: white; }
div #fr { width: 45%; position: absolute; top: 0; right: 0; }
div #fa { width: 80px; position: absolute; top:0; right: 0; padding: 16px; }

.txt_c { text-align: center; }
.button1 { display: inline-block; width: 275px; border-radius: 5px; background-color: #6CCFF6; color: #343464; cursor: pointer; padding: 10px 10px; margin: 0 auto; font-size: 18px; border: 2px outset #DDDDDD;}
.c { display: inline-block; margin: 10px 10px 0px 10px; }

h1 { font-size: 40px; font-family: 'Squada One', cursive; color: red; text-align: center; margin: 10px; }
h3 { font-size: 24px; font-family: 'Roboto Condensed', sans-serif; text-align: left; margin: 10px 10px 5px 0px; color: black; }
li { font-size: 18px; padding-right: 15px; }
p { padding-right: 15px; }

.box { width: 300px; height: 155px; border-radius: 5px; border: 2px solid black; margin-bottom: 10px; }
.box li { font-size: 18px; padding-right: 15px; }

.t3 { font-size: 20px; }
.t4 { font-size: 16px; }
.indent { padding-left: 15px; }

.act { width: 100%; position: relative; margin-bottom: 10px; }
.act1 { float: left; margin-right: 10px; }
.bar2 { display: none; visibility: hidden; }
.border1 { margin-top: 11px; margin-left: 50px; margin-bottom: 11px; }
.border2 { display: none; visibility: hidden; margin-left: auto; margin-right: auto;}

#i2 { display: none; visibility: hidden; }


@media screen and (max-width: 1020px) {  
  body { margin: 0 0 100px; }
  div #content { width: 700px; padding-left: 0; padding-right: 0; margin-bottom: 100px; }
  div #main { width: 600px; margin-left: auto; margin-right: auto; float: none; }
  div #side { width: 300px; height: 100%; margin-left: auto; margin-right: auto; float: none; margin-top: 30px; }  
  div #footer { height: 100px; }
  div #fl { width: calc(100% - 200px); height: 50px; left: 100px; }
  div #f { position: absolute; width: 100%; height: 40px; top: 5px; right: auto; margin-left: auto; margin-right: auto; font-size: 36px; text-align: center;}
  div #fr { width: calc(100% - 200px); height: 50px; top: 50px; left: 100px; }
  div #fa { width: 100px; padding: 26px; }  
  .border1 { display: none; visibility: hidden; }
  .border2 { display: block; visibility: visible; height: 50px; }  
}

@media screen and (max-width: 700px) {  
  body { margin: 0 0 80px; }
  div #content { width: 100%; margin-bottom: 80px; }
  div #main { width: 90%; }
  h1 { font-size: 30px; }
  h3 { font-size: 22px; }
  body { font-size: 16px; }
  li { font-size: 16px; padding-right: 10px; }
  #i1 { display: none; visibility: hidden; }
  #i2 { display: block; visibility: visible; max-width: 100%; }
  .bar1 { display: none; visibility: hidden; }
  .bar2 { display: block; visibility: visible; max-width: 100%; }  
  div #footer { height: 80px; }
  div #fl { width: calc(100% - 160px); height: 40px; left: 80px; }
  div #f {  height: 36px; font-size: 24px; }
  div #fr { width: calc(100% - 160px); height: 40px; top: 40px; left: 80px; }
  div #fa { width: 80px; padding: 16px; }
  .border2 { height: 40px; }  
}

@media screen and (max-width: 550px) {
  .act1 { float: none; margin-bottom: 10px; margin-left: auto; margin-right: auto; } 
}

@media screen and (max-width: 450px) {    
  body { margin: 0 0 60px; }
  h1 { font-size: 20px; }
  h3 { font-size: 18px; }
  body { font-size: 14px; }
  li { font-size: 14px; padding-right: 5px; }
  div #content { margin-bottom: 60px; }  
  div #footer { height: 60px; }
  div #fl { width: calc(100% - 60px); height: 30px; left: 0px; }
  div #f {  height: 36px; font-size: 20px; }
  div #fr { width: calc(100% - 60px); height: 30px; top: 30px; left: 0px; }
  div #fa { width: 60px; padding: 6px; }
  .border2 { height: 30px; }  
}