/* Copyright Arbaoui Mehdi 2013 */

body {
  background-color: #21c7ab;
	background-image: url("data:image/svg+xml,%3Csvg width='80' height='88' viewBox='0 0 80 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 21.91V26h-2c-9.94 0-18 8.06-18 18 0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73 3.212-6.99 9.983-12.008 18-12.73V62h2c9.94 0 18-8.06 18-18 0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73-3.212 6.99-9.983 12.008-18 12.73zM54 58v4.696c-5.574 1.316-10.455 4.428-14 8.69-3.545-4.262-8.426-7.374-14-8.69V58h-5.993C12.27 58 6 51.734 6 44c0-7.732 6.275-14 14.007-14H26v-4.696c5.574-1.316 10.455-4.428 14-8.69 3.545 4.262 8.426 7.374 14 8.69V30h5.993C67.73 30 74 36.266 74 44c0 7.732-6.275 14-14.007 14H54zM42 88c0-9.94 8.06-18 18-18h2v-4.09c8.016-.722 14.787-5.738 18-12.73v7.434c-3.545 4.262-8.426 7.374-14 8.69V74h-5.993C52.275 74 46 80.268 46 88h-4zm-4 0c0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73v7.434c3.545 4.262 8.426 7.374 14 8.69V74h5.993C27.73 74 34 80.266 34 88h4zm4-88c0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73v-7.434c-3.545-4.262-8.426-7.374-14-8.69V14h-5.993C52.27 14 46 7.734 46 0h-4zM0 34.82c3.213-6.992 9.984-12.008 18-12.73V18h2c9.94 0 18-8.06 18-18h-4c0 7.732-6.275 14-14.007 14H14v4.696c-5.574 1.316-10.455 4.428-14 8.69v7.433z' fill='%23126cbc' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
	position: relative;
	width: 100%;
	height: auto;
	 
 
	background-attachment: fixed;}
  .hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    margin-bottom: 3rem;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.3)
    );
    
    
    }


.hero__container {
    padding: 3rem;
}

.hero__image {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#card {
  background: #fff;
  width: 80%;
  height: 100%;
  margin: 3% auto;
  padding: 20px 30px;
  align-items: center;
  border: 1px solid white;
  -webkit-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  -o-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  -khtml-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  text-align: center; }
  #card h1 {
    color: #1868aa;
    font-weight: normal;
    font-size: 34px;
    margin: 0 0 10px 0; font-weight: 700; }
    #card h1::first-letter {
      color: #1868aa; }
    #card h1 b {
      color: #f1840b;
      font-weight: normal; }
    #card h1 b + b {
      color: #194ff7; }
    #card h1 b + b + b {
      color: #00940e; }

      #card h3 {
        color: #1868aa;
        font-weight: normal;
        font-size: 28px;
        margin: 0 0 10px 0; font-weight: 700; }
.content {
  text-align: left;
  }
  .content ul {
    padding: 0;
    margin: 0;
    font: 16px Arial; }
    .content ul li {
      list-style: none; }
      .content ul li a {
        color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-weight: 600;}
      .content ul li span {
        display: block;
        width: 100%;
        margin-bottom: 2px; }
        .content ul li span:nth-child(2) {
          margin-bottom: 10px; }
          .content ul li span:nth-child(2) a {
            color: #091;
            text-decoration: none; }
        .content ul li span:nth-child(3), .content ul li span:nth-child(4) {
          font-size: 14px; }

          .content ul li a:hover {
            text-decoration: none;
          color: rgb(10, 148, 51);}
               
  .content .text {
    border: 1px solid #7ec6fd;
    float: left;
    width: 100%;
    margin-bottom: 10px; }
    .content .text h3 {
      position: relative;
      float: left;
      font-size: 100%;
      font-weight: normal;
      padding: 0;
      margin: 5px 10px; }
      .content .text h3 span {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        background: white;
        /* same as background */
        border-left: 0.1em solid black;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-animation: typing 1s steps(20, end), blink-caret 1s step-end infinite;
        -moz-animation: typing 1s steps(20, end), blink-caret 1s step-end infinite; }

 
        #article .content h1 {
          color: #1868aa;
           
          font-size: 21px;
          margin: 0  ;   font-family: Arial, Helvetica, sans-serif; margin-top: 40px;}

          #article .content a {
            color: #070707;
            font-weight: normal;
            font-size: 16px;
            margin: 0 0 10px 0; font-weight: 700;line-height: 18px; font-family: Arial, Helvetica, sans-serif;margin-top: 40px; } 
            
            #article .content a:hover {
              color: #207c17;
              text-decoration: none; } 
              
              #table h1 {
                text-transform: uppercase;
                letter-spacing: 1pt;
                font-size: 30px;
                margin-bottom: 5px; font-weight: 700; align-items: center; text-align: center;
              }
              
              
              
              #table {
                display: table;
                width: 100%;
                height: 100%;
                background-color: #146b8d;
                color: rgb(209, 204, 204);
                font-size: 18px;
              }
              
              #centeralign {
                display: table-cell;
                vertical-align: middle;
              }
              /* Typing effect intro by @sarangpidadi */
              
              #article{
                background: white;
                width: 94%;
                max-width: 1000px;
                border-radius: 10px;
                margin: 20px auto;
                box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
                padding: 0 0 10px 0;
              }
              
              #article .cover{
                width: 100%; 
                height: 210px;
                border-radius: 10px 10px 0 0;
                position: relative;
              }
              
              #article .cover .mask{
                width: 100%;
                height: 210px;
                background: rgba(33,35,51,0.55);
                position: absolute;
                border-radius: 5px 5px 0 0;
              }
              
              #article .content{
                width: 95%; 
                padding: 40px;
                 
                margin: 20px 20px 20px 20px ;
              }
              #article .content h1{
                font-family: 'Georgia', serif;
                font-weight: normal;
                text-transform: uppercase;
                font-size: 28px;
                margin: 0 0 0px 0;
                text-align: center;
              }
              #article .content .date{
                font-size: 14px;
                margin: 20px 0 40px 0;
                color: rgba(0,0,0,0.45);
                text-align: center;
              }
              #article .content p{
                width: 100%;
                font-family: 'Georgia', serif;
                font-weight: 100;
                color: rgba(0,0,0,0.75);
                font-size: 18px;
                line-height: 28px;
                text-align: justify;
              }
                  
        @media only screen and (max-width: 680px){
          #article .content{
            width: 98%; 
            padding: 20px;
             
            margin: 20px 10px 20px 10px ;
          }

          #article .cover{
            width: 100%; 
            height: 150px;
            border-radius: 10px 10px 0 0;
            position: relative;
          }
          
          #article .cover .mask{
            width: 100%;
            height: 150px;
            background: rgba(33,35,51,0.55);
            position: absolute;
            border-radius: 5px 5px 0 0;
          }

         #card {
            background: #fff;
            width: 90%;
            height: 100%; }
          
            #article .content h1 {
              color: #1868aa;
              font-weight: normal;
              font-size: 21px;
              margin: 0  ; font-weight: 700; font-family: 'Times New Roman', Times, serif; margin-bottom: 40px;}

              #article .content a {
                color: #070707;
                font-weight: normal;line-height: 18px;
                font-size: 15px;
                margin: 0 0 0px 0; font-weight: 700; text-align: left; font-family: Arial, Helvetica, sans-serif; } 
                
                #article .content a:hover {
                  color: #207c17;
                  text-decoration: none; } 
                  
                  #table h1 {
                    text-transform: uppercase;
                    letter-spacing: 1pt;
                    font-size: 21px;
                    margin-bottom: 5px; font-weight: 700; align-items: center; text-align: center;
                  }
                .hero {
                  position: relative;
                  display: flex;
                  align-items: flex-end;
                  margin-bottom: 1rem;
                  background: linear-gradient(
                      to bottom,
                      rgba(0, 0, 0, 0),
                      rgba(0, 0, 0, 0.3)
                  );
                  
                  
                  }
              
              
              .hero__container {
                  padding: 1.5rem;
              }
             
          }