@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic&subset=latin,cyrillic-ext,latin-ext,cyrillic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,600,400italic,600italic,700,700italic,800,800italic&subset=latin,greek,greek-ext,latin-ext,cyrillic,vietnamese,cyrillic-ext);
@import url('https://fonts.googleapis.com/css?family=Roboto');
  font-family: 'Roboto Slab', serif;
  font-family: 'Open Sans', sans-serif;
*/

*{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -o-box-sizing:border-box;
  -ms-box-sizing:border-box;  
}
body {
    color: rgb(102, 102, 102);
  font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: normal;
    background-color: #fff;
  line-height: 24px;
  margin:0px;
}
/* Heading Typo */
h1, h2, h3, h4, h5, h6 {
    color: #333333;
  font-family: 'Roboto', serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    /*margin: 0px 0px 0px 0px;*/
}

    body    {background-color: rgb(244, 244, 244); width: 100%; margin: 0; padding: 0;}

    header {padding: 1em;}

    header img {width: 12em; height: auto;}

    h1 {margin-left: 0.5em; margin-bottom: 0px;}


    #wrapper

    {

      width: 33em;

      border: 1px solid silver;

      border-radius: 2.5px;      

      background-color: white;

      margin: 2.5em auto 0; 

    }



    section

    {

      padding: 2em; padding-top: 0;

    }

    .warning

    {

      width: 90%;

      margin: 1em 0; 

      padding: 1em 0; 

      text-align: center; 

      font-size: 1em !important;

    }
	
	.payment-errors
	
	{

    color:red; 
	  
	  font-size: 1em !important;

    }

    #green

    {

      background-color: #e6ffe6;

      color:#003300; 

    }

    #red

    {

      background-color: #ffe6e6;

      color:#4d0000; 

    }

  
    form {margin-top: 1em;}



    label span

    {

      margin-top: 0.6em;

    }

    label span:not(.small)

    {

      float: left; clear: left;

      width: 14em;

      color: rgb(102, 102, 102);

    }

    input, button

    {

      padding: 0.2em 0.4em;

      border-radius: 3px;

    }

    input 

    {

      margin: 0.3em;

      border: 1px solid gray;

      background-color: rgb(243, 243, 243);    

      background: -webkit-linear-gradient(rgb(243, 243, 243), #D0D3D6); 

      background: -o-linear-gradient(rgb(243, 243, 243), #D0D3D6); 

      background: -moz-linear-gradient(rgb(243, 243, 243), #D0D3D6); 

      background: linear-gradient(rgb(243, 243, 243), #D0D3D6);

      color: darkSlateGray;

    }

    input:focus {background: none; color: black;}

    input:not(.date) 

    {

      width: 13em;

    }

    .form-row:nth-of-type(3) input

    {

      width: 10em;

    }
	
	.form-row:nth-of-type(6) input

    {

      width: 5em;

    }

    button 

    {

      width: 8em;

      float: right;

      margin-right: 9.7em;

      margin-top: 0.5em;

      background-color: #0F8BC7;

      border: 2px solid #8db0f2;

      color: white;

    }


    .form-row:nth-of-type(4), .form-row:nth-of-type(7) 

    {

      margin-bottom:0.7em;

    }


     .small

    {

      margin-top:0.6em;

    }

    section p:nth-of-type(3) {clear: right; padding-top: 1em;}

    section p:nth-of-type(4) {font-weight: 700 !important; margin-bottom: 0 !important;}

    section p:last-of-type {margin: 0 !important;}

    footer 

    {

      background-color: #0f8bc7;   

      margin: 0 auto;  padding: 1em 1em 0.2em;

      border-top-left-radius: 0; border-top-right-radius: 0;

      border-top: none;

    }

    footer p {width: 100%; color: white;  font-size: 0.9em !important; margin-top: 0;}


    @media (max-width: 450px) {

        h1 {margin-bottom: 0.8em;}

        .small {margin-top: 0.3em;}

        input {margin-top: 0px;}

        input, .small, .date, button  {float: left;}

        input:not(.date), .date[data-stripe="exp-month"], p { clear: both !important;}

        #wrapper {margin: 1em auto;}

        #wrapper, #wrapper p  { width: 90% !important;} 

        label span {margin-top: 0.2em;}

        .form-row:nth-of-type(3) {margin-top: 0.2em;}

        input[name="invoice"] {margin-bottom: 1em;}

    }

    .form-row {
      height: 1.5em;
      clear: both;
    }

    #language-picker {
      margin: 0;
      list-style: none;
      list-style-type: none;
      padding: 0;
      float: right;
    }
    #language-picker li {
      display: inline-block;
    }
    #language-picker a {
      display: block;
      padding: .5em;
      text-decoration: none;
      color: #0f8bc7;
    }

    #language-picker a:hover,
    #language-picker a.active {
      background-color: #0f8bc7;
      color: #fff;
    }