/* Dead Simple Grid (c) 2015 Vladimir Agafonkin */

.row .row { margin:  0 -1.5em; }
.col      { padding: 0  1.5em; }

.row:after {
    content: "";
    clear: both;
    display: table;
}

@media only screen { .col {
    float: left;
    width: 100%;
    box-sizing: border-box;
}}


/* Basic look n feel */
html {background-color: #C8462E;}

body {
    font-size: 16px;
    line-height: 1.5;
    font-family: Verdana,Geneva,sans-serif;
    box-sizing: border-box;
    background-color: #fff;
    max-width: 960px;
    padding: 10px;
    margin: 0 auto;
}

nav a img {height:25px;}

.sidebar {
    border-left: 1px solid #aaa;
    font-size: 12px;
    margin-top: 12px;
}
.sidebar h2 {font-size: 15px;  margin-top: 0;}
.sidebar blockquote {margin: 0.5em 1.5em 3em 1.5em; font-style: italic;}

.content {font-size: 14px; text-align: justify;}
.content h2 {font-size: 1em;  margin-top: 2em;}
.content h1+img {float: left; margin-right: 1em;}

h1 {font-size: 28px; color: #C8462E;}
h1, h2 {margin-bottom: 14px; font-weight: bold;}
#free {font-size:25.2px;font-style:italic;color: #C8462E;}
input[type=email], textarea {width: 20em; margin-bottom: 0.8em; color: #666;}
input[type=email]:focus, textarea:focus {color: #000;}
p.contactForm {margin: 0;}

.service-on, .service-off {
    border: 2px solid #999999;
    border-radius: 10px;
    padding:0.4em 0.6em;
    font-weight: bold;
}

.service-on {
    background-color: #34C274;
    color: #fff;
}

.service-off {
    background-color: #eeeeee;
    color: #999999;
}


/* Header with menu */
#toggle-menu {display: none;}
.logo > a {line-height: 0;}
header {
  position:relative;
  background-color: #01245C;
  height: 180px;}

/* Mobile first */
label[for=toggle-menu] {
  margin: 10px;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  padding: 0.5em;
  background-color: #C8462E; 
}
.logo { /*pose toggle menu*/
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav {display: none;}
#toggle-menu:checked ~ nav {
  display: flex;
  flex-direction: column;
}

/* Look n feel for mobile */
nav {background-color: black;}
nav a {
  color: #fff;
  text-decoration: none;
  padding: 12px 0 12px 10px;
  border-bottom : 1px solid #aaa;
}

nav a:nth-last-child(3) {
  padding-right: 10px;
}

nav>a:hover {text-decoration: underline;}
/* end look n feel */

@media only screen and (min-width: 758px) {
    nav {
      display: block;
      position: absolute;
      background-color: initial;
    }

    #nav1 {
      top:40%;
      left:180px;
    }

    #nav2 {
      top:0;
      right:0;
    }

    label[for=toggle-menu] {display:none;}
    nav>a {display:inline-block;}

    nav a {border-bottom:0;}

    input[type=email], textarea {width: 25em;}

    /* grid */
    .content { width: 66.66%; }
    .sidebar { width: 33.33%; }  
}