@font-face
 {
 font-family: myNikulaFont;
 src: url('nikula.ttf'),
      url('nikula.eot'); /* IE9+ */
 }

@media screen {

    h1,h2 { clear: left; font-family: Arial, Helvetica, sans-serif; font-weight: 100; margin: 0px; padding-left:35px; margin-right: 10px; margin-bottom: 10px; color:rgb(255, 255, 255);}
    h3,h4,h5,h6 { clear: left; font-family: "Times New Roman", Times, serif; font-weight: 100; margin: 0px; padding-left:35px; margin-right: 10px; color:white;}

    p {clear: left;font-family: "Arial",Arial, sans-serif; font-size: 18px; padding-top:10px;padding-left: 10px;line-height: 0.8;position: relative; top:-8px; color:rgb(171, 167, 187);}
    p.small {font-size: 12px;}
    br {padding-top:10px;}

    img {max-width:100%; height:auto;}

    a:link, a:visited {
        color: rgb(162, 223, 231);
        font-family: Verdana ,sans-serif;
        font-size: 12px;
      }
      
    a:hover, a:active {
        color: rgb(162, 231, 177);
        font-family: Verdana ,sans-serif;
        font-size: 12px;
    }

    html, body {
        height: 100%;
        margin: 0;
        padding: 0px;
      } 
      
    #myCanvas{
        height: 300px;
        width: 100%;
        margin: 0;
        position: absolute;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, 0px)
    }

   .center {
       background-image: linear-gradient(to right, black ,#554477,black);
       width: 100%;
       height: 400px;
       margin: 0px;
       padding: 0px;
   }
   
   .content {
        clear: left;
        margin: auto;
        width: 100%;
        padding-top: 20px;
        margin-left: 10px;
   }

   .head {
        background-image: linear-gradient(to right, black ,#334488,black);
        width: 100%;
        height: 370px;
        margin: 0px;
        padding: 0px;
        border: none;
        box-sizing: border-box;
   }

   .headcontent {
       padding:0px 20px;
   }


   div.headcontent p {
        font-family:myNikulaFont;
        font-size: 50px;
        margin:0px 40px;
        font-weight:bold;
        color:whitesmoke;
    }

   .foot {
        background-image: linear-gradient(to right, black ,#334488,black);
        height: 250px;
        font-family: "Arial",Arial, sans-serif;
        font-size: 10px;
        clear: left;
        margin: auto;
        width: 100%;
        border: none;
   }
   div.foot p {
        margin: 0px;
        font-size: 12px;
        text-align: center;
    }

   .col-container {
        background-image: linear-gradient(to right, black ,#334488,black);
        display: table;
        width: 100%;
        height:500px;
        border-spacing: 10px;
   }
    .col1 {
        display: table-cell;
        padding: 16px;
        padding-top: 50px;
        width: 33%;
        background-image: radial-gradient(rgb(86, 93, 109),rgb(41, 48, 56));      
        border-radius: 30px;
        box-shadow: 5px 5px #252544;
    }
    .col2 {
        display: table-cell;
        padding: 16px;
        padding-top: 50px;
        width: 33%;
        background-image: radial-gradient(rgb(86, 93, 109),rgb(41, 48, 56));
        border-radius: 30px;
        box-shadow: 5px 5px #252544;
    }
    .col3 {
        display: table-cell;
        padding: 16px;
        padding-top: 50px;
        width: 33%;
        background-image: radial-gradient(rgb(86, 93, 109),rgb(41, 48, 56));
        border-radius: 30px;
        box-shadow: 5px 5px #252544;
    }
    div.col1 p, div.col2 p, div.col3 p {
        margin: 0px;
        padding-left: 50px;
        line-height: 1;
    }

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

    .head {
        background-image: linear-gradient(to right, black ,#334488,black);
        width: 100%;
        height: 270px;
        margin: 0px;
        border: none;
        box-sizing: border-box;
   }

    #myCanvas{
        height: 200px;
        width: 100%;
        margin: 0;
        position: absolute;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, 0px)
    }

    .col {
        display: block;
        padding: 0px;
        margin: 0px;
    }
    .col1 {
        display: block;
        padding: 8px;
        padding-top: 30px;
        width: 95%;
        background-image: radial-gradient(rgb(86, 93, 109),rgb(41, 48, 56));
        margin: 10px;
        min-height: 300px;
    }
    .col2 {
        display: block;
        padding: 8px;
        padding-top: 30px;
        width: 95%;
        background-image: radial-gradient(rgb(86, 93, 109),rgb(41, 48, 56));
        margin: 10px;
        min-height: 300px;
    }
    .col3 {
        display: block;
        padding: 8px;
        padding-top: 30px;
        width: 95%;
        background-image: radial-gradient(rgb(86, 93, 109),rgb(41, 48, 56));
        margin: 10px;
        min-height: 300px;
    }
    div.col1 p, div.col2 p, div.col3 p {
        margin: 0px;
        padding-left: 50px;
        line-height: 1;
    }
   }
   
   
   @media print {
    h1,h2,h3,h4,h5,h6 { clear: left; font-family: "Times New Roman", Times, serif; font-weight: 100; margin: 0px; padding-left:35px; margin-right: 10px; background-color: #555555;!important; -webkit-print-color-adjust: exact; color:white;}
    p {clear: left;font-family: "Arial",Arial, sans-serif; font-size: 18px; padding-top:10px;padding-left: 10px;line-height: 0.8;position: relative; top:-8px;}
    p.small {font-size: 12px;}
    
   .center {
       margin: auto;
       width: 950px;
       border: 0px solid grey;
       padding: 10px;
   }
   
   .content {
       clear: left;
           margin: auto;
           width: 100%;
           border: 0px solid blue;
           padding-top: 20px;
           margin-left: 10px;
   }
   
   .foot {
       font-family: "Arial",Arial, sans-serif;
           font-size: 10px;
       clear: left;
           margin: auto;
           width: 100%;
           border: 0px solid red;
   }
     
}