/* This is for styles that need adjusting because of language differences, nothing more*/

/*These changes are for the us market overhaul and should be moved to the main CSS files when it becomes the style for all markets*/

/*<link rel="stylesheet" media="screen and (min-width:400px)"  href="/custom/DefaultTheme/css/small.css">*/
/*<link rel="stylesheet" media="screen and (min-width:800px)"  href="/custom/DefaultTheme/css/medium.css">*/
/*<link rel="stylesheet" media="screen and (min-width:1026px)" href="/custom/DefaultTheme/css/large.css">*/



.projectCont h5 {text-align: center;}
sup {font-size: 0.5em;}

/*Small*/
@media screen and (min-width:400px){
    /*------ blog pages ------*/

    .projectCont {width: 88%;float: left;margin: 0 6%;}
    .projectCont img {width: 100%;border: solid 1px #D2D2D2; border-radius: 4px;}
    .projectCont h5 {text-align: center;}
    .projectCont p {line-height: 1.9;margin: 0px 0px 20px 0px}
    .panel{border:none;background: none; padding:8px;}
    li {list-style-type: none;}
    label{font-size: 1.075rem;margin: 0px 0px 4px 4px;}

    /*.button[disabled] {color:#818181; background: #C8C8C8;}*/
    /*.button[disabled]:hover {color:#818181;background: #C8C8C8;}*/
    /*.form .ng-invalid:focus,*/
    /*.form .has-error { box-shadow:0px 0px 0px 3px rgba(255,0,0,.3) inset; }*/
    /*.form .no-error { box-shadow:0px 0px 0px 3px rgba(0,255,0,.3) inset; }*/



    /*join and Save page*/
    #joinAndSave .title{font-size: 2rem;}

}

@media screen and (min-width:550px){
        .projectCont {width: 18%;float: left; margin:0 1%;}
        /*.projectCont img {width: 100%;border: solid 1px #D2D2D2; border-radius: 4px;}*/
        /*.projectCont h5 {font-size: 0.8rem;line-height: 1.4;}*/
        /*.projectCont p {line-height: 1.9;margin: 0px 0px 20px 0px}*/
        .panel {min-height: 150px;border-radius: 8px;border-color: #CBCBCB;}
        /*li {list-style-type: none;}*/
        label{font-size: 1.075rem;margin: 0px 0px 4px 4px;}

        /*.button[disabled] {color:#818181; background: #C8C8C8;}*/
        /*.button[disabled]:hover {color:#818181;background: #C8C8C8;}*/
        /*.form .ng-invalid:focus,*/
        /*.form .has-error { box-shadow:0px 0px 0px 3px rgba(255,0,0,.3) inset; }*/
        /*.form .no-error { box-shadow:0px 0px 0px 3px rgba(0,255,0,.3) inset; }*/

        /*join and Save page*/
        #joinAndSave .title{font-size: 4rem;}
}

@media screen and (min-width:800px){}

/*large*/
@media screen and (min-width:1026px){
    #essentialOils101 .projectCont {transition: all .2s;-webkit-transition:all .5s;}
    #essentialOils101 .projectCont {border-bottom: solid 8px #EBEBEB;border-radius: 0;}
    #essentialOils101 .projectCont:hover {border-bottom: solid 8px #9DA514;}
}


/*----- Essential Oils 101 Page ----*/

#essentialOils101 img.icon {float: left;margin: 3px 20px 30px 20px;}
#essentialOils101 .projectCont img {width: 100%;border:none;}


/*------------------------ For the Join and Save Page ------------------------*/

#joinAndSave .moreBut{transition: all .2s;}
#joinAndSave .moreBut {border-radius: 8px;background-color: #7bb322;box-shadow: 0px 0px 0px 0px rgba(51, 51, 51, 0.7);}
#joinAndSave .moreBut:hover {background-color: #8DCB29;box-shadow: 1px 1px 3px 1px rgba(51, 51, 51, 0.7);}

#joinAndSave .check, #joinAndSave .uncheck {font-family: FontAwesome;}
#joinAndSave .check:before, #joinAndSave .uncheck:before {font-size: 40px}
#joinAndSave .centered.check:before, #joinAndSave .centered.uncheck:before {width: 100%;display: inline-block;text-align: center;    margin: 20px 0px 0px 0px;}
#joinAndSave .check:before {content: "\f00c";color: #57A53C;}
#joinAndSave .wa.check:before {margin: 0 5px;float: left;margin: 25px 30px 30px 30px;}
#joinAndSave .uncheck:before {content: "\f00d";color: #6f6f6f;}
#joinAndSave .learn-more {transition: all .2s;}
#joinAndSave .learn-more {font-size: initial;padding: 10px 6px 10px 15px;background: #A479AF;color: white;text-decoration: none;border-radius: 20px 3px 3px 20px;position: absolute;right: -5px;bottom: 7px;box-shadow: -1px 2px 1px 0px rgba(0, 0, 0, 0.84);border-right: solid 1px #946D9E;}
#joinAndSave .learn-more:hover {background: #8B4D92;}
#joinAndSave .discount + .text:first-line {font-size: 40px;}
#joinAndSave .discount + .text {text-align: center;line-height: 2em;}

#joinAndSave table {width: 100%;border-collapse: collapse;background: #EBEBEB;border: none;}
#joinAndSave tbody tr {border: 1px solid #BEBEBE;}
#joinAndSave tbody tr:nth-child(odd) {background: #DFDFDF;}
#joinAndSave tbody td {border: 1px solid #cbcbcb;position: relative;height: 80px;text-align: center;min-width: 106px;font-size: 1rem;line-height: 2rem;padding: 0px 20px 0px 20px;}
#joinAndSave tr td:first-child {border-left: 0;}
#joinAndSave thead th {border-radius: 10px 10px 0 0;color: white;padding: 17px 15px;text-align: center;font-size: 1.175rem;font-weight: 400;font-size: 1.675rem;font-weight: 400;line-height: .9em;}
#joinAndSave thead th:first-child {background: #EBEBEB;}
#joinAndSave th:nth-of-type(2) {background: #ADADAD;}
#joinAndSave th:nth-of-type(3) {background: #A479AF;}
/*#joinAndSave th:nth-of-type(4) {background: #A479AF;}*/
#joinAndSave td, th {padding: 5px;}

#joinAndSave .text {display: block;font-size: 1rem;    line-height: 1.7rem;padding: 12px 40px 0px 0px;}
#joinAndSave .singleLine {padding: 30px 0px 0px 0px;}
#joinAndSave .join-btn {text-align: center;display: inherit;}

@media only screen and (max-width: 815px) {
    #joinAndSave table, #joinAndSave thead, #joinAndSave tbody, #joinAndSave th, #joinAndSave td, #joinAndSave tr {display: block;}
    #joinAndSave table {float:left;}
    #joinAndSave thead tr {position: absolute;top: -9999px;left: -9999px;}
    #joinAndSave tbody td {padding-left: 40%;padding-top: 10px;min-height: 50px;height:inherit;}
    #joinAndSave td:first-child {padding-left: 0;background: #D4D4D4;text-align: center;font-size: 20px;height:initial;}
    #joinAndSave td:before {position: absolute;top: 50%;transform:translateY(-50%);left: 5px;width: 25%;padding-left: 5px;font-size:16px;}
    #joinAndSave td:nth-of-type(2):before { content: attr(data-title); }
    #joinAndSave td:nth-of-type(3):before { content: attr(data-title); }
    #joinAndSave td:nth-of-type(4):before { content: attr(data-title); }

    #joinAndSave .learn-more {left: 5px;right: initial;border-radius: 20px;padding: 5px 10px;}
    #joinAndSave .wa.check:before {margin: 0;width: 100%;display: inline-block;text-align: center;float: none;}
    #joinAndSave .singleLine {padding:0;}
    #joinAndSave .text {padding:0;}
}


