.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

        .premiumBox {
             font-size: 15px;
            font-family: century gothic,calibri,verdana,arial;
            box-sizing: content-box;
            width: 33%;
            float: left;
            -webkit-transition-duration: 500ms;
            transition-duration: 500ms;
        }

        .box1, .box2, .box3 {
            width: 90%;
            margin: 10px auto 10px auto;
        }

        .premiumInnerBox {
            width: 100%;
            border-radius: 5px;
            -webkit-box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.15);
            box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.15);
        }

        .circlePicture {
            width: 60%;
            border-radius: 50%;
            margin: 25px 20% 15px 20%;
        }

        .timeSpan {
            font-size: 22px;
            font-weight: bold;
        }


        .AuPairGradient .timeSpan {
            color: #f3423a;
        }

        .FamilyGradient .timeSpan {
            color: #5593cb;
        }

        .box1:hover .premiumBoxBody, .box3:hover .premiumBoxBody
		 {
            color: white;
			
        }

        .box1:hover .timeSpan, .box3:hover .timeSpan {
            color: white;
        }

        .box1:hover a, .box3:hover a {
            color: white;
        }

        .box2 {
            color: white;
        }


            .box2 .timeSpan {
                color: #fff;
            }


        .box1:hover .colorOnHover 
		 {
            background: url(../jpg/circle1.jpg);
            background-position: center;
            background-size: auto 100%;
            position: relative;
            z-index: 1;
			  
        }

        .box2 .ofColor {
            background: url(../jpg/circle2.jpg);
            background-position: center;
            background-size: auto 100%;
            position: relative;
            z-index: 1;
			 
        }

        .box3:hover .colorOnHover {
            background: url(../jpg/circle3.jpg);
            background-position: center;
            background-size: auto 100%;
            position: relative;
            z-index: 1;
			 
        }

        .gradient {
            padding: 10px;
        }
        
         .ofColor .AuPairGradient .gradient {
background-image: -webkit-linear-gradient(right top, rgba(209, 12, 138, 0.7), rgba(243, 66, 58, 0.7)); 
background-image:    -moz-linear-gradient(to right top, rgba(209, 12, 138, 0.7), rgba(243, 66, 58, 0.7));
background-image:      -o-linear-gradient(to right top, rgba(209, 12, 138, 0.7), rgba(243, 66, 58, 0.7)); 
background-image:         linear-gradient(to right top, rgba(209, 12, 138, 0.7), rgba(243, 66, 58, 0.7));
            position: relative;
            z-index: 2;
            border-radius: 5px;
        }


        .ofColor .FamilyGradient .gradient {

            background-image: -webkit-linear-gradient(right top, rgba(161, 227, 255, 0.7), rgba(21, 136, 240, 0.7)); 
background-image:    -moz-linear-gradient(to right top, rgba(161, 227, 255, 0.7), rgba(21, 136, 240, 0.7)); 
background-image:      -o-linear-gradient(to right top, rgba(161, 227, 255, 0.7), rgba(21, 136, 240, 0.7)); 
background-image:         linear-gradient(to right top, rgba(161, 227, 255, 0.7), rgba(21, 136, 240, 0.7)); 
            position: relative;
            z-index: 2;
            border-radius: 5px;
        }

        

        .colorOnHover {
            background-color: transparent;
        }


            .colorOnHover:hover .AuPairGradient .gradient {
                background-image: -webkit-linear-gradient(right top, rgba(209, 12, 138, 0.7), rgba(243, 66, 58, 0.7));
background-image:    -moz-linear-gradient(to right top, rgba(209, 12, 138, 0.7), rgba(243, 66, 58, 0.7)); 
background-image:      -o-linear-gradient(to right top, rgba(209, 12, 138, 0.7), rgba(243, 66, 58, 0.7)); 
background-image:         linear-gradient(to right top, rgba(209, 12, 138, 0.7), rgba(243, 66, 58, 0.7));
                position: relative;
                z-index: 2;
                border-radius: 5px;
            }

             .colorOnHover:hover .FamilyGradient .gradient {
                 background-image: -webkit-linear-gradient(right top, rgba(161, 227, 255, 0.7), rgba(21, 136, 240, 0.7)); 
background-image:    -moz-linear-gradient(to right top, rgba(161, 227, 255, 0.7), rgba(21, 136, 240, 0.7)); 
background-image:      -o-linear-gradient(to right top, rgba(161, 227, 255, 0.7), rgba(21, 136, 240, 0.7)); 
background-image:         linear-gradient(to right top, rgba(161, 227, 255, 0.7), rgba(21, 136, 240, 0.7)); 
                position: relative;
                z-index: 2;
                border-radius: 5px;
            }


            .colorOnHover .AuPairGradient .circlePicture {
                border-width: 3px;
                border-style: solid;
                border-color: #f3423a;
            }

             .colorOnHover .FamilyGradient .circlePicture {
                border-width: 3px;
                border-style: solid;
                border-color: #5593cb;
            }

        .ofColor .circlePicture {
           border-width: 3px;
                border-style: solid;
                border-color: #fff;
        }

        .box1:hover .circlePicture, .box3:hover .circlePicture {
           border-width: 3px;
                border-style: solid;
                border-color: #fff;
        }




        .premiumBoxBody {
            text-align: center;
            width: 100%;
            line-height: 35px;
        }

        .premiumBox a {
            text-decoration: none;
            color: #f3423a;
        }

        .FamilyGradient a {
        color: #5593cb;
        }

        .box2 a {
            color: #fff;
        }


        .premiumBox a.button {
            display: inline-block;
            line-height: 1;
            font-size: 15px;
            font-family: century gothic,calibri,verdana,arial;
            background-color: #fff;
            padding: 10px 10px;
            border: 0px;
            border-radius: 5px;
            margin: 20px auto 20px auto;
            
        }

        .premiumBox .AuPairGradient a.button {
            color: #f3423a;
        }

        .premiumBox .FamilyGradient a.button {
             color: #5593cb;
        }


        .box1 .AuPairGradient a.button, .box3 .AuPairGradient a.button {
            background-color: #f3423a;
            color: white;
        }

        .box1:hover .AuPairGradient a.button, .box3:hover .AuPairGradient a.button {
            background-color: white;
            color: #f3423a;
        }




         .box1 .FamilyGradient a.button, .box3 .FamilyGradient a.button {
            background-color: #5593cb;
            color: white;
        }

        .box1:hover .FamilyGradient a.button, .box3:hover .FamilyGradient a.button {
            background-color: white;
            color: #5593cb;
        }


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

            .premiumBox {
                width: 70%;
                margin: 10px 15% 10px 15%;
            }

           

        }

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

            .premiumBox {
                width: 100%;
                margin: 10px 0 10px 0;
            }
        }