@charset "utf-8";
/* CSS Document */


/* container of main section */
.service-presentation-wrapper {
	background-color: black;
	color: white; /* white fonts */
}
/* container of the image */
.services-img-wrapper { 
	position: relative;
	width: 100%;
    margin: auto;
	overflow: hidden;
}

/* container black top image*/
.black-band {
    position:relative;
    display: block;
    width: 100%;
    height: 35px;
    background-color: black;
}

/* image main top */
.services-img-wrapper img {
	padding-top:0px; /* no padding*/
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 300px; /* fixed size */
    animation: scale-pic 40s; /* name of animation and duration */
    -webkit- animation-name: scale-pic; 
    -webkit- animation-duration:  40s;
    
}
/* image for medium screens */
@media screen and (min-width: 750px) {
    .services-img-wrapper img {
        padding-top:0px;
        width: 700px; /* fix image size to achieve moving effect */
    }
    /* resize black top */
    .black-band {
        position: relative;
        display: block;
        width: 100%; /* full width */
        height: 50px;
        background-color: black;
    } 
}
 /* main image for larger display */
@media screen and (min-width: 1008px) {
    .services-img-wrapper img {
        padding-top:00px;
        width: 1000px;
    }
    /* black top */
    .black-band {
        position: relative;
        display: block;
        width: 100%;
        height: 50px;
        background-color: black;
    } 
}
/* key frram for animation begin - end */
@keyframes scale-pic {
    0% {transform: scale(none);} /* start original size */
    100% {transform: scale(1.5);} /* end 1.5 times bigger */
}

@-webkit-keyframes scale-pic {
    0% { transform:scale(none);}
    100% {transform: scale(1.5);}
}

/* button container centered*/
.enroll {
    position: absolute; /* overlap the image */
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* button and animation */
.enroll-btn {
	border: 5px solid aliceblue;
  	outline: 0;
  	display: inline-block;
  	padding: 20px 60px;
  	color: white;
  	background-color: orangered;
  	text-align: center;
  	cursor: pointer;
	font-family: Lato, Arial, "sans-serif";
    font font-weight: bolder;
	font-size: 23px;
    letter-spacing: 5px;
	border-radius: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5); /* shadow position and tranparency*/
	animation: opacity-btn .6s; /* animation on opacity and duration */
    -webkit-animation: opacity-btn .6s; /* safari chrome */
}

/* button different sizing for medium to large screen*/
@media screen and (min-width: 750px){
    .enroll-btn {
        font font-weight: bolder;
        font-size: 32px;
    }
}

/* set keyframe for opasicty animation */
@keyframes opacity-btn {
    0% {opacity: 0;
        transform: translate(0, 100%);}
    100% {opacity: 1;
        transform: translate(0%, 0%);}
}

@-webkit-keyframes opacity-btn {
    0% {opacity: 0;
        transform: translate(0, 100%);}
    100% {opacity: 1;
        transform: translate(0%, 0%);}
}

/* space titles */
.services-title {
    margin: 0px;
    padding: 0px;
}

/* columns grid*/
.services-column {
	width: 70%; /* 1 column allowed for smaller screens */
    margin: auto; /* centers content */
}

/* columns for medium screens */
@media screen and (min-width: 750px) {
    .services-column {
	   float: left; /* align to the left */
	   width: 29%; /* 3 columns allowed on medium screens */
        margin: 0px 10px;
    }
}

/*same settings for large screens*/
@media screen and (min-width: 1008px) {
    .services-column {
	   float: left;
	   width: 29%;
        margin: 0px 20px;
    }
}

/*styling the section of plans called box*/
.box-title h4{
    margin-top: 0;
    padding-top: 0;
    text-align: center;
}
.box-description p {
    text-align:justify;
    font-size: 16px;
}
.box-title h2 {
    font-size: 50px;
    text-align: center;
    color: orangered;
}

/* container for 2 example of plans*/
.pastBoxes-flex-container {
    display: flex; /* flex container*/
    flex-flow: column; /* column dispaly for small screens */
    text-align: center;
}
 /*1 column full width for small screens */
.past-boxes-column {
    flex-basis: 100%;
    align-content: center;
    margin: 10px 0;
}
/* container for 2 exmaple of plans medium to large screens */
@media screen and (min-width: 750px) {
    .pastBoxes-flex-container {
        display: flex; /* flex container */
        flex-flow: row nowrap; /* horizontal display */
        justify-content: space-around; /* spaced evenly */
    }
/*    column size for this screen size*/
    .past-boxes-column {
        flex-basis: 30%; /* allow 2 columns*/
    }
}
/* image past boxes */
.past-boxes-column img {
    width: 100%; /* full width */
}


.s-price {
    display: block;
  	color: black;
	padding: 3px 10px;
	font-family: Lato, Arial, "sans-serif";
	text-align: center;
	margin: 10px 0;
}

/*container of promotiional video*/
.sales-video-wrapper{
    margin-top: 20px;
	position: relative;
	overflow: hidden;
	width: 100%;
	text-align: center;
    padding: 20px;
}

/*video promotional */
.sales-video {
	position: relative;
	overflow: hidden;
	width: 100%;
}
/*title of joining form*/
.join-title {
    text-align: center;
    margin: 50px;
}
/*join form*/
.join-form {
	width: 65%;
	margin: auto;
	margin-bottom: 20px;
}
/*form text*/
form.fm-joinMailList input[type=text] {
  padding: 0px;
  border: 1px solid grey;
  width: 80%;
  background: #f1f1f1;
    margin:auto;
}
/*form button*/
form.fm-joinMailList button {
  float: left;
  width: 80%;
  padding: 5px;
  background-color: red;
  color: white;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
	height: 100%;
}
/*joining for for medium to large screen*/
@media screen and (min-width: 750px) {
    form.fm-joinMailList input[type=text] {
        padding: 5px;
        border: 1px solid grey;
        float: left;
        width: 80%;
        background: #f1f1f1;
    }

    form.fm-joinMailList button {
        float: left;
        width: 20%;
        padding: 5px;
        background-color: red;
        color: white;
        border: 1px solid grey;
        border-left: none;
        cursor: pointer;
	   height: 100%;
    }
}
/*effect hover on form button*/
form.fm-joinMailList button:hover {
  background-color: chocolate;
}