﻿
@media screen and (max-width: 1200px)
{
    .FullWidthIfSmallScreen
    {
        width: 100% !important;
    }

    .FullHeightIfSmallScreen
    {
        height: 100% !important;
    }

    .Height350IfSmallScreen
    {
        height: 350px !important;
    }

    .OverflowAutoIfSmallScreen
    {
        overflow: auto !important;
    }

    .CenterAlignIfSmallScreen
    {
        text-align: center !important;
    }

    .LeftAlignIfSmallScreen
    {
        text-align: left !important;
    }

    .CenterVerticallyIfSmallScreen
    {
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    .NoCenterChildVerticallyIfSmallScreen
    {
        display: normal !important;
        align-items: unset !important;
    }

    .Font30IfSmallScreen
    {
        font-size: 30px !important;
    }

    .Font10IfSmallScreen
    {
        font-size: 10px !important;
    }

    .Font15IfSmallScreen
    {
        font-size: 15px !important;
    }

    .Font13IfSmallScreen
    {
        font-size: 13px !important;
    }

    .Font12IfSmallScreen
    {
        font-size: 12px !important;
    }

    .Font20IfSmallScreen
    {
        font-size: 20px !important;
    }

    .Font25IfSmallScreen
    {
        font-size: 25px !important;
    }


    .Font50IfSmallScreen
    {
        font-size: 50px !important;
    }


    .FontBoldIfSmallScreen
    {
        font-weight: bold !important;
    }

    .NoFontBoldIfSmallScreen
    {
        font-weight:normal !important; 
    }

    .PaddingBottom20IfSmallScreen
    {
        padding-bottom: 20px !important;
    }


    .PaddingTop20IfSmallScreen
    {
        padding-top: 20px !important;
    }

    .PaddingTop40IfSmallScreen
    {
        padding-top: 40px !important;
    }

    .PaddingTop10IfSmallScreen
    {
        padding-top: 10px !important;
    }


    .PaddingTop15IfSmallScreen
    {
        padding-top: 15px !important;
    }

    .NoPaddingIfSmallScreen
    {
        padding: 0px !important;
    }

    .NoPaddingLeftIfSmallScreen
    {
        padding-left: 0px !important;
    }

    .NoMarginLeftIfSmallScreen
    {
        margin-left: 0px !important;
    }

    .MarginLeft10IfSmallScreen
    {
        margin-left: 10px !important;
    }

    .NoBorderIfSmallScreen
    {
        border-collapse: collapse !important;
        border: none !important;
    }

    .Width90PercentIfSmallScreen
    {
        width: 90% !important;
    }


    .Width100IfSmallScreen
    {
        width: 100px !important;
    }

    .Width50PercentIfSmallScreen
    {
        width: 50% !important;
    }

    .Width30PercentIfSmallScreen
    {
        width: 30% !important;
    }

    .MinWidth350MaxWidth500IfSmallScreen
    {
        min-width: 350px !important;
        max-width: 500px !important;
    }

    .Width360IfSmallScreen
    {
        width:360px !important;
    }

    .WidthUnsetIfSmallScreen
    {
        width:unset;
    }

    .Width240SmallScreen
    {
        width: 240px !important;
    }

    .PaddingFromScreen
    {
        padding: 0px !important;
    }

    .DivMenuStripLine
    {
        background-color: rgba(37, 131, 218, 0.90);
        padding: 10px;
        transition: all 0.5s ease;
        position: fixed;
        width: 100%;
        height: 35px !important;
    }

    .DivMenuStripLine #ImgOrderCookLogo
    {
        width: 100px !important;
        transition: all 0.5s ease;
    }

    .Right0IfSmallScreen
    {
        right: 0px !important;
    }

    .HideInSmallScreen
    {
        display: none !important;
    }

    .ShowInSmallScreen
    {
        display: block !important;
    }

    .ShowAtBottomIfSmallScreen
    {
        position: absolute;
        bottom: 0px;
    }


    .Padding10IfSmallScreen
    {
        padding: 10px !important;
    }

    .Padding20IfSmallScreen
    {
        padding: 20px !important;
    }


    .NoFloatIfSmallScreen
    {
        float: none !important;
    }

    .NoFullWithIfSmallScreen
    {
        width: unset !important;
    }

    .NoDisplayFlexIfSmallScreen
    {
        display:block !important;
    }

    .FloatLeftIfSmallScreen
    {
        float: left !important;
    }

    .FloatRightIfSmallScreen
    {
        float: right !important;
    }

    .Height70IfSmallScreen
    {
        height: 70px !important;
    }


    .Height150IfSmallScreen
    {
        height: 150px !important;
    }

    .NoRoundBorderIfSmallScreen
    {
        border-radius: 0px !important;
    }

    .UnsetPositionIfSmallScreen
    {
        position:unset !important;
    }

    .UnsetTopIfSmallScreen
    {
        top: unset !important;
    }

    .UnsetRightIfSmallScreen
    {
        right: unset !important;
    }

    .RightBorderRound6IfSmallScreen
    {
        border-top-right-radius: 6px !important;
        border-bottom-right-radius: 6px !important;
    }
}

@media screen and (max-width: 1000px)
{

    .HideInIntermidiateScreen
    {
        display: none !important;
    }

    .NoFloatInIntermidiateScreen
    {
        float: none !important;
    }


    .HideInIntermidiateScreen
    {
        display: none;
    }

    .ShowInIntermidiateScreen
    {
        display: block !important;
    }
}

@media screen and (min-width: 700px)
{


    .DivMenuStripLineOnScroll
    {
        background-color: rgba(37, 131, 218, 0.99);
        padding: 5px;
        height: 60px;
        margin: auto;
        position: fixed;
        width: 100%;
    }

    .DivMenuStripLineOnScroll #ImgOrderCookLogo
    {
        margin: auto;
        overflow: auto;
        width: 150px !important;
        padding-bottom: 10px;
        transition: all 0.5s ease;
    }

    .DivMenuStripLineOnScroll #UlMenu
    {
        margin: auto;
        overflow: auto;
        padding-top: 5px;
    }

    .HideIfBigScreen
    {
        display: none !important;
    }
}


.NoBorder
{
    border-collapse: collapse !important;
    border: none !important;
}

.Opacity5
{
    opacity: 0.5;
}

.Opacity8
{
    opacity: 0.8;
}


.DivMenuStripLine
{
    transition: all 0.5s ease;
}

.DivMenuStripLine #ImgOrderCookLogo
{
    transition: all 0.5s ease;
}



.CenterVertically
{
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}





.Hyperlink-01
{
    text-decoration: none;
    padding: 15px;
    color: #b6b6b6;
}

.Hyperlink-01:current
{
    border-bottom: 1px solid white;
}

.Hyperlink-01:hover
{
    border-bottom: 1px solid white;
    color: white;
}

.Hyperlink-01:active
{
    border-bottom: 1px solid white;
    color: white;
}


.Hyperlink-Active-01
{
    text-decoration: none;
    border-bottom: 1px solid white;
    padding: 15px;
    color: white;
}

.Hyperlink-02
{
    text-decoration: none;
}


.Hyperlink-02:hover
{
    border-bottom: 1px solid;
    padding: 5px;
}


.Link
{
    text-decoration: none;
    cursor: pointer;
}

.Link:hover
{
    border-bottom: 1px solid #5479f7;
}


.Link:current
{
    border-bottom: 1px solid #5479f7;
    color: white;
}


.Link:visited
{
    border-bottom: 1px solid #5479f7;
    color: white;
}


.NoDecoration
{
    text-decoration: none;
    cursor: pointer;
    padding-bottom: 5px;
}

.Shadow
{
    box-shadow: 20px 10px 50px #454545;
}






.UnderLineFromLeft
{
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 0px transparent;
    position: relative;
    overflow: hidden;
}

.UnderLineFromLeft:before
{
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #2098D1;
    height: 1px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.UnderLineFromLeft:hover:before,
.UnderLineFromLeft:focus:before,
.UnderLineFromLeft:active:before
{
    right: 0;
}


.Hovering :hover
{
    background-color: #f3f3f3;
    color: #0e9aef;
}
.Hovering :hover .Content
{
    color: #0e9aef;
}

.HoveringToggleEffect
{
    cursor:pointer;
}

    .HoveringToggleEffect:hover
    {
        background-color: #d5e8f3;
    }