/*My addons are VH VW used a minimum of four times, animate.css, and hover.css*/

body {
    height: auto;
    width: 100vw;
    background:#F6A185;
}

.top {
    height: 65.429686vh; /*65.429686vh71.191405vh*/ 
    width: 100vw;
    background-color:#0F2A42;
    margin-top: 0px;
    background:url(img/colourworxx.jpg);
    background-position: top left;
   	background-size: cover;
}

/*.accordion {
  color: #444;
  cursor: pointer;
  height: 5.761719vh;
  width: 100vw;
  text-align: left;
    padding-left: 2vw;
  border: none;
  outline: none;
    transition: .4s ease;    
    color: lightgray;
    font-family: 'Helvetica', sans-serif;
    font-size: 32px;
}*/

.accordion {
  background-color: #eee;
    color: lightgray;
  cursor: pointer;
  padding: 18px;
  width: 100vw;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.5s;
     font-family: 'Helvetica', sans-serif;
    font-size: 24px;
    padding-left: 2vw;
    height: 6.9140628vh;
    
}

.active, .accordion:hover {
  /*background-color: #ccc;*/
    opacity: .125;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
    width:100vw;
  transition: max-height 0.5s ease-out;
}

/* Style the accordion panel. Note: hidden by default */
/*.panel {
  padding: 0 18px;
  display: none;
  overflow: hidden;
    width: 100vw;
}*/

.bottom {
    height:  height: 6.9140628vh;;
    width: 100vw;
    text-align: left;
    padding-left:2vw;
    background-color: #F6A185;
    border: none;
  outline: none;
}

/* Form style */

input {
    font-family: 'Helvetica', sans-serif;
    color:purple;
    font-size: 16px;
    min-width: 200px;
}

.mysubmit-btn {
    font-weight: bold !important;
    font-size:10px;
    text-transform: uppercase;
    background
}


.subscription {
    width:33.33333333vw;
    height: auto;
    margin: 15px;
    margin-top: 20px;
}

.cyc {
    width:33.33333333vw;
    height: auto;
    margin: 15px;
    margin-top: 20px;
}

.magazine {
    width: 2vw;
    top:0px;
    margin-left: 20vw;
    margin-bottom: 20px;
    margin-top: 20px;
}

.magazine img {
    width: 35vw;
}

.inprogress {
    width: 40vw;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    background-size: 
}

.inprogress img {
    width:50vw;
}

p {
    color: #2D3A76;
    font-family: 'Helvetica', sans-serif;
    font-size: 14pt;
    line-height: 1.33333em;
}

form {
    color: #ffffff;
    font-family: 'Helvetica', sans-serif;
    font-size: 12pt;
    line-height: 1.33333em;
}

.color1 {
    background-color: #F0582C;
}

.color2 {
    background-color: #F47A53;
}

.color3 {
    background-color: #F4845F;
}

.color4 {
    background-color: #F89272;
}

.color5 {
    background-color: #F6A185;
}

.color6 {
    background-color: #F8B49F;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.fb {
    height: 30px;
    width: 30px; /*90*/
    margin-top: 0px;
    margin-right: 4vw;
    margin-bottom: 20px;
    background-image: url(img/fb.png);
    background-size: cover;
    background-position: center center;
}

.fb:hover {
        opacity: 0.5;
    }

.insta {
    height: 30px;
    width: 30px; /*90*/
    margin-top: 0px;
    margin-right: 1vw;
    margin-bottom: 20px;
    background-image: url(img/insta.png);
    background-size: cover;
    background-position: center center;
}

.insta:hover {
        opacity: 0.5;
    }

.twit {
    height: 30px;
    width: 30px; /*90*/
    margin-top: 0px;
    margin-right: 1vw;
    margin-bottom: 20px;
    background-image: url(img/twit.png);
    background-size: cover;
    background-position: center center;
}

/*.twit:hover {
        opacity: 0.5;
    }

.bottom > .fb {
    margin-top:6px;
}

.bottom > .insta {
    margin-top:6px;
}

.bottom > .twit {
    margin-top:6px;
} */

iframe {
    max-width: 100%;
    margin-left: 0.5vw;
    margin-top: 24px;
    margin-bottom: 20px;
    width: 97.5vw
}

.button {
    background-color: #ffffff;
    /*border-radius: 10px;*/
    padding:10px 10px; /* */
    max-width:200px;
    text-align: center;
    margin-bottom: 30px;
    font-size: 12px;
    font-family: 'Helvetica', sans-serif;
    font-size: 12pt;
        color: #ffffff;
        border-radius: 5px;
}

    .button:hover {
        background-color: #ffffff;
        border-radius: 40px;
        transition-duration: .75s;
        opacity: 0.5;
    }

.button a {
    text-decoration: none;
    color: #000;
}

	.button2 {
    background-color: #ffffff;
    /*border-radius: 10px;*/
    padding:20px 100px; /* */
    max-width:200px;
    text-align: center;
    margin-bottom: 30px;
    font-size: 18px;
    font-family: 'Helvetica', sans-serif;
    font-size: 12pt;
        color: #ffffff;
        border-radius: 5px;
} 

    .button2:hover {
        background-color: #ffffff;
        border-radius: 40px;
        transition-duration: .75s;
        opacity: 0.5;
    }

.button2 a {
    text-decoration: none;
    color: #000;
}

.video {
    width: 61vw;
    height:auto;
    background-color: red;
    margin-top: 20px;
    margin-left: 30px;
    margin-bottom: 30px;
}

.fade-1 {
    animation: fadein 3s;
    }
            
@keyframes fadein {
    from {opacity: 0;}
    top { opacity:1;}
    }

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
    margin-right: 250px;
    margin-top: 20px;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #2D3A76;
  padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 95vw
}

.col-25 {
  float: left;
  width: 25vw;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 88vw;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}