body{
        font-family: "Arial", Arial, verdana, sans-serif; overflow: hidden scroll;
        white-space:normal;    display: block; background-color:#FFFFFF; text-align: center; 
}

body a{
        text-decoration: none;
}

table{
    margin: 0 auto;
}

/***************************************************     Start of header bar  css***************************************************************/

.appBar{
        background-color:black; color:#C0C0C0; margin:0 auto 0 auto;
}

.appBar a{color:#C0C0C0;
        
}

.appBar ul li{
        text-decoration:none;
        
}

/* Remove margins and padding from the list, and add a black background color */
ul.appLink {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

/* Float the list items side by side */
ul.appLink li {float: left;}

/* Style the links inside the list items */
ul.appLink li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.appLink li a:hover {background-color: #111;}


.app_logo{
        color:white; font-weight:bold; 
}




/***************************************************     Start of banner and below css*********************************************************/


.container{
   display:block; overflow:hidden scroll; margin:0 auto 0 auto; clear:both;
}

.banner{
        clear:both; border-bottom:3px solid #CEF6F5; 
        border-top:3px solid #CEF6F5; border-style:ridge;  margin:  0 auto 0 auto;
        border-right:none; border-left:none;  
         color:#0A0A2A;
}

.banner a{
        text-decoration: none;
}

.banner_logo{

}

.banner_image{
          margin: 0 0 0 0;
}

.social_media{
         overflow:hidden; height:50px; margin:0 auto 0 auto; width:250px;
}

.instagram{
        float:left; margin: 0 10px 0 0; width:48px; height:48px;
}
.facebook{
        background:url(../images/facebook.jpg); background-size:contain; float:left;
        height:48px; width:48px; margin: 0 10px 0 0;  border-radius:10px; 
}

.twitter{
        background:url(../images/twitpick.jpeg); background-size:contain; float:left;
        height:47px; width:61px; border-radius:10px; margin: 0 10px 0 0;
}

.youtube{
        background:url(../images/youtube.png); background-size:contain; float:left;
        height:48px; width:48px; margin: 0 10px 0 0;  border-radius:10px; 
}


.motto{
        color:#0A0A2A; margin:50px 0 0 0; text-align:center; font-size:30px;
}


.user_info{
        height:500px; width:300px; 
}

.gravatar{
        height:50px; width:50px; float:left; margin:0 15px 0 0;
}

.quick_info{
        height:50px; float:left; width:235px; font-size:12px;
}

.relationships{
        clear:both; margin:0 0 0 0; height:50px; width:300px;
}
.following{
         width:50px; height:50px; margin:15px 20px 0 0; float:left; font-size:12px;
}
.followers{
         width:50px; height:50px; margin: 15px 0 0 0; float:left; font-size:12px;
}

.workout_box{margin:0 0 0 0;
        
}




/***************************************************     Start of navigation bar and below css***************************************************/


.navBar{
        color:#FFFFFF; font-size:14px; margin:0 0 0 0;  
        width:100%; clear:both; border-radius:20px;
}

.navBar a{
        color:#FFFFFF;
}

.navLink {
        border-radius:10px; margin-right:1px;
        height: 30px; text-align:center; vertical-align:middle; 
        background: -webkit-linear-gradient(#CEF6F5, #0B0B3B, #CEF6F5); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#CEF6F5, #0B0B3B, #CEF6F5); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#CEF6F5, #0B0B3B, #CEF6F5); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#CEF6F5, #0B0B3B, #CEF6F5); /* Standard syntax (must be last) */
}




/***************************************************     Start of main sectiond and below css****************************************************/

.main a{
   color:#000000; margin-bottom: 20px;
}

.slidebar{
        border: 1px solid #000000; 
}

.snip{
    display: none;
}

.loginButton{
        border: 1px solid black; height:50px; border-radius:10px; line-height:50px; background:#cce6ff;
}

.createWorkoutButton{
    background: #99ccff; 
    border-radius:10px; height:50px; width:200px; line-height:50px;
}






/***************************************************     Start of css for dynamic boxes**********************************************************/

.left_nav{
        width:200px; color:black; font-size:12px;
}
        
.left_link{
        border:solid 1px; border-color:#000000; border-top-color:#FFFFFF; border-right-color:#FFFFFF;
        width:200px; border-left-color:#FFFFFF; height:30px; text-align:center; margin-top:10px;
}


#mbox{
        margin: 0 auto 0 auto; position:relative;
}

.logo_center{
        width:100%; height:260px;
        background-image:url(../images/opaque_ise.png); 
        background-size:contain; background-repeat:no-repeat; z-index:-10; background-color:#0A0A2A;
        background-position: center; clear:both;
}

.blank{
        width:100%;  margin: 0 auto 0 auto;  z-index:-10; background:transparent;
}

.profile_center{
        width:400px; height:100px; border:solid 6px #A9D0F5;
}

.program_pic{
        width:400px; height:260px;  margin: 0 auto 0 auto;  background-image:url(../images/isebod.jpg); 
        background-size:contain; background-repeat:no-repeat; opacity:1;
        background-position: center;
}

.buttonList{
        margin:0 auto 0 auto; height:80px;
}

.Btn{
    color: #fff;
    box-shadow: 0 0 40px 40px #0A1E57 inset, 0 0 0 0 #0A1E57;
    transition: all 150ms ease-in-out;
    box-sizing: border-box;
    appearance: none;
    background-color: #0A1E57;
    border: 2px solid #fff;
    cursor: pointer;
    align-self: center;
    font-weight: 400;
    line-height: 1;
    padding: .5em;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.Btn:focus {
    color: #fff;
    outline: 0;
  }

.Btn:hover{
    box-shadow: 0 0 10px 0 #0A1E57 inset, 0 0 10px 4px #0A1E57;
     color: #fff;
    outline: 0;
}

.locBtn{
    width:50%;
    font-size: 1rem;
}

.serviceBtn{
    width:25%;
    font-size: .6rem;
    
}

.progBtn1{
    width:30%;
    font-size: .6rem; 
}

.progBtn{
    width:23%;
    font-size: .6rem; 
}

.testBtn{
    width:20%;
    font-size: .75rem;
}


#meterPic{
     width:50%;
}
#variety{
     width:50%;
}


.juanResponse{ width:90%;
}

.iseTrainer{width:90%; height:160px;  margin:0 auto 0 auto;  background-image:url(../images/ise_trainer.jpg); 
        background-size:contain; background-repeat:no-repeat; opacity:1;
        background-position: center;
        
}

.snipView{
    padding:5px;
    width:90%;
    margin:0 auto 0 auto;
    background-color:#0A1E57  ; 
    color:white;
    text-align: left;
}

.snipImage{
    padding:5px;
    width:90%;
    height:190px;
    margin:0 auto 0 auto;
}

.chiraq{
    background-image:url('../images/chicago.jpg'); 
    background-size:contain;
    background-repeat: no-repeat;
}

.vive{
    background-image:url('../images/vive.jpg');
    background-size:contain;
    background-repeat: no-repeat;
}

.sports{
    background-image:url('../images/agility.jpg');
    background-size:cover;
}

.weightLoss{
    background-image:url('../images/weightLoss2.jpg');
    background-size:cover;
}

.bodyBuild{
    background-image:url('../images/bodyBuilding.jpg');
    background-size:cover;
}

.meal{
    background-image:url('../images/meal_plan.jpg');
    background-size:cover;
}

.Maria{
    background-image:url('../images/mariaJump.jpg');
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
}



.success{
    padding:5px;
    width:90%;
    height:190px;
    margin:0 auto 0 auto;
    color:white;
    text-align: left;
}

.Jean{
    background-image:url('../images/jean.jpg');
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
}
.Gennie{
    background-image:url('../images/g_kick.JPG');
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
}

.Bob{
    background-image:url('../images/Dr_Bob.JPG');
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
}

.Walaa{
    background-image:url('../images/walaa.jpg');
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
}



#juancarlo{
        clear:both;  position:relative;
        width:800px; height:500px;  margin:0 auto 0 auto;
}

.juan_link{
        float:left; color:#FFFFFF; background-size:contain; margin:0 auto 0 auto;
        z-index:2; background-repeat:no-repeat;  height:100%; background-position: center;
        overflow:hidden; white-space: nowrap; border-radius:30px;
}

.packageArea{
    clear:both;
}

.packageInfo{
    width:30%;
    float:left;
    color:#fff;
    border:#000 solid 1px;
    background-color: #0A1E57; 
    padding:5px 0;
}
.visitCenter{
    text-align: center;
    background-color: indianred;
    width:100%
}

.visitPrice{
    clear:both;
    margin:0 auto;
    display:inline-block;
    font-size:1.5em;
}
.visitInfo{
    clear:both;
}

.visitPrice span{
    float:left;
    
}

.dollarNumber{
 font-size: 3em;   
}

.dollarSign{
    font-size:.5em;
    margin-top: 10px;
}

.dollarInfo{
    font-size:.5em;
    margin-top: 20px;
}

packageInfo hr{
    width:80%;
}

#consultArea{
    padding: 10px;
    background-color:#0A1E57;
    color:#fff;
    border-radius:30px;
}

#consultArea input{
    border-radius:5px;
    background-color:#0A1E57;
    box-shadow: 0 0 40px 40px #0A1E57 inset, 0 0 0 0 #0A1E57;
    transition: all 150ms ease-in-out;
    box-sizing: border-box;
    border: 2px solid #fff;
     color: #fff;
}

.consultArea input:focus {
    color: #fff;
    outline: 0;
  }

.consultArea input:hover{
    box-shadow: 0 0 10px 0 #0A1E57 inset, 0 0 10px 4px #0A1E57;
     color: #fff;
    outline: 0;
}

#consultArea ::placeholder {
    color:aqua;
    opacity: 1; /* Firefox */
}

#consultArea :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: red;
}

#consultArea ::-ms-input-placeholder { /* Microsoft Edge */
   color: red;
}



.option{
        float:left; height:40px; width:250px; color:#0A0A2A; padding:20px 0 20px 0; font-size:40px;
        background-color:#99CCFF; border:#FFFFFF; border-radius:25px; border-style:outset; 
        margin-top:20px;  margin-bottom:20px;
        
}

.option_info{
                width:230px; height:450px; margin:0 0 0 30px; color:#FFFFFF; font-size:20px; float:left;
}
.price{
        background-color:green; font-size:35px; width:150px; border-radius:25px;
}



/***************************************************     Start of css for workout creation***************************************************************/


.exTable{
        margin:0 auto 0 auto;
}

.exercise{
    border-bottom:1; border-top:0; border-right:0; border-left:0;
}

.setNumber{
    border-right:0;
}

.repDurWei{
    border-right:0; border-left:0; border-bottom: 0;
}



.footer{
        margin:0px auto 0 auto; overflow:hidden scroll; clear:both; background:#000000; color:#FFFFFF;
        
}

.footer a{
        color:#FFF;
}

.footer_slider{ background-image:url(../images/opaque_ise.png); 
                background-size:contain; background-repeat:no-repeat; background-position: center; 
        
}


contactInfo{
        margin:0 20px 0 0; overflow:hidden scroll;
}

.contact{
        height:25px;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    color:white;
}









/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the appLink (li.icon) */
@media screen and (max-width:667px) {
    ul.appLink li.icon {
        float: right; 
    
  }
  ul.appLink li.hide {display: none;}
}

/* The "responsive" class is added to the appLink with JavaScript when the user clicks on the icon. This class makes the appLink look good on small screens */
@media screen and (max-width:667px) {
  ul.appLink.responsive {position: relative;}
  ul.appLink.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.appLink.responsive li {
    float: none;
    display: inline;
  }
  ul.appLink.responsive li a {
    display: block;
    text-align: left;
  }
}