/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Oct 25, 2016, 11:47:49 AM
    Author     : Techathalon
*/

html {background: #F3F4F0 url(../../../public/uploads/assets/bg.jpg) no-repeat top center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.btnRight{background: #14d0ad url(../../../public/uploads/assets/arrow_right_white.png) center right 3% no-repeat ;/*margin: 2px 30px 0 0;*/ background-size: 20px 20px;padding: 1px 10px;border: 2px solid white;border-radius: 25px;color: white;font-weight: bold;width: 90px;text-transform: uppercase;}
.btnRight:hover,.btnRight:focus{background: #14d0ad url(../../../public/uploads/assets/arrow_right_green.png) center right 3% no-repeat;/*margin: 2px 30px 0 0;*/ background-size: 20px 20px; background-color: white;padding: 1px 10px;border: 2px solid white;border-radius: 25px;color: #14d0ad; font-weight: bold; width: 90px; text-transform: uppercase;box-shadow: 1px 1px 7px #808080;}
.btnLeft{background: #14d0ad url(../../../public/uploads/assets/arrow_left_white.png) center left 3% no-repeat ;/*margin: 2px 0 0 30px;*/ background-size: 20px 20px;padding: 1px 10px;border: 2px solid white;border-radius: 25px;color: white;font-weight: bold; width: 90px;text-transform: uppercase;}
.btnLeft:hover,.btnLeft:focus{background: #14d0ad url(../../../public/uploads/assets/arrow_left_green.png) center left 3% no-repeat;/*margin: 2px 0 0 30px;*/background-size: 20px 20px;background-color: white; padding: 1px 10px;border: 2px solid white; border-radius: 25px;color: #14d0ad;font-weight: bold;width: 90px;text-transform: uppercase;box-shadow: 1px 1px 7px #808080;}
.one{cursor: pointer; float: left; width: 40px; height: 40px; text-align: center; background-color: red; background: url(../../../public/uploads/assets_x2/color_bar_1.png) center center no-repeat; background-size: 40px 40px;}
.one_two{float: left; width: 15%; height: 25px; text-align: center; background-color: green; background: url(../../../public/uploads/assets_x2/color_bar_gray.png) center center no-repeat; background-size: 120px 6px;}
.two{cursor: pointer; float: left; width: 25px; height: 25px; text-align: center; background-color: red; background: url(../../../public/uploads/assets_x2/color_bar_small_gray.png) center center no-repeat; background-size: 25px 25px;}
.two_three{float: left; width: 15%; height: 25px; text-align: center; background-color: green; background: url(../../../public/uploads/assets_x2/color_bar_gray.png) center center no-repeat; background-size: 120px 6px;}
.three{cursor: pointer; float: left; width: 25px; height: 25px; text-align: center; background-color: red; background: url(../../../public/uploads/assets_x2/color_bar_small_gray.png) center center no-repeat; background-size: 25px 25px;}
.three_four{float: left; width: 15%; height: 25px; text-align: center; background-color: green; background: url(../../../public/uploads/assets_x2/color_bar_gray.png) center center no-repeat; background-size: 120px 6px;}
.four{cursor: pointer; float: left; width: 25px; height: 25px; text-align: center; background-color: red; background: url(../../../public/uploads/assets_x2/color_bar_small_gray.png) center center no-repeat; background-size: 25px 25px;}
.four_five{float: left; width: 15%; height: 25px; text-align: center; background-color: green; background: url(../../../public/uploads/assets_x2/color_bar_gray.png) center center no-repeat; background-size: 120px 6px;}
.five{cursor: pointer; float: left; width: 25px; height: 25px; text-align: center; background-color: red; background: url(../../../public/uploads/assets_x2/color_bar_small_gray.png) center center no-repeat; background-size: 25px 25px;}
.two_btn{ margin:auto; height:90px; padding:0; color:#fff; font-size:22px; }
#edit_profile{ border: 1px solid white; border-radius: 27px 27px 27px 27px; padding:14px 15px 5px; background:#FFC708; color:#fff; text-transform: uppercase; font-weight: bold; }
#edit_profile:hover{ border-radius: 27px 27px 27px 27px; padding:14px 15px 5px; background:#fff; color:#FFC708; }
.number{color:lightgray; width: 40px;}
#gradiant_img{ width:100%;height: 10px;}
#name_div{width:78%;}

.btnSaveMyResult{display: none;background: #14d0ad;/*margin: 16px 0 0 30px;*/background-size: 20px 20px;padding: 5px 10px;border: 2px solid white;border-radius: 25px;color: white;font-weight: bold;width: 165px;text-transform: uppercase;}
.btnSaveMyResult:hover,.btnSaveMyResult:focus{background: #14d0ad;/*margin: 16px 0 0 30px;*/background-size: 20px 20px;background-color: white;padding: 5px 10px;border: 2px solid white;border-radius: 25px;color: #14d0ad;font-weight: bold;width: 165px;text-transform: uppercase;box-shadow: 1px 1px 7px #808080;}

@media only screen and (max-width: 450px){.btnLeft{width: 85px;}.btnLeft:hover,.btnLeft:focus{width: 85px;}.btnRight{width: 85px;}.btnRight:hover,.btnRight:focus{width: 85px;}}
@media only screen and (max-width: 990px){#pageTitle{height: 50px;}#title{height: 50px;}.callToAction{height: 55px;padding-top:10px !important;}}
@media only screen and (max-width: 480px){}
@media only screen and (max-width: 450px){.btnLeft{width: 85px;}.btnLeft:hover,.btnLeft:focus{width: 85px;}.btnRight{width: 90px;}.btnRight:hover,.btnRight:focus{width: 90px;}}