#IndexContainer {
/*    web-small screen*/
    width: 1280px;
    height:1100px;
    margin: 0 auto;
    background: #F4FECC;
/*    background: rgba( 195, 172, 245, 0.291 );*/

    color:black;
    

    position: relative;
}

#Header {
    width: 1280px;
    height: 60px;
    margin: 0 auto;
/*    background-color: rgba(167,167,167,0.2);*/
/*    background-color: #46DD85;*/
/*    background: #7e57c6;*/
/*    background: #00a888;*/
/*    background: #c66784;*/
/*    background: #435cc8;*/
/*    background: #fff8c9;*/
/*    background: #000f9f;*/
/*    background: black;*/
}

#WhiteBoxTop {
    height:128px;
    width:1200px;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyMDAgMTI4Ij4NCiAgICA8cGF0aCBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjQ3MyA4NC42N0MxNDcuMzY3IDQ1LjggMjc0LjQyNiAzMC43IDM5MC42NTEgMzkuMzczYzExNy4xMSA4LjczOCAyNzYuODczIDMxLjcwNyA0MzAuNzE4IDY0IDEyNC4zMzkgMjYuMSAyNDUuMDI0IDIyLjQxNSAzNjIuMDU3LTExLjA1NCA2LjkwMy0xLjk3NCAxNC4wOTkgMi4wMjIgMTYuMDczIDguOTI1YTEzIDEzIDAgMCAxIC41MDEgMy41NzR2MjMuMDRjMCAuNDMxLS4zNS43ODEtLjc4Mi43ODFIMFY5Ny4xODJBMTMgMTMgMCAwIDEgOS40NzMgODQuNjd6Ii8+DQo8L3N2Zz4NCg==) bottom no-repeat;
    margin:0 auto;
}


#WhiteBox {
    width: 1200px;
    height:700px;
    background-color: white;
    margin: 0 auto;
    border-bottom-left-radius: 20px; 
    border-bottom-right-radius: 20px;
        
        
}

#Content {
    width: 1280px;
    height: 890px;
    margin: 0 auto;
    position: relative;
/*    background: #B998FF url("../Images/gdot.png") center center;   */
    background: #9A5F8F url("../Images/gdot2.png") center center;   
/*    border-radius: 10px;*/
}

#Footer {
    width: 1280px;
    height: 200px;
    margin: 100 auto;
    text-align: center;
/*
    position: absolute;
    top: 950px;
*/
}

#WhiteBoxTopH1 {
position: absolute;
    top: 60px;
    left: 90px;
    font-size: 40px;
    font-family: serif;
    
}

.ToolsBox {
    width: 240px;
    height: 160px;
    float: left;
    margin: 30px;
    background-color: dimgrey;
    border-radius: 5px;
    box-shadow: 2px 7px grey;
    cursor: pointer;
}

.ToolsBox:active {
    width: 240px;
    height: 160px;
    float: left;
    margin: 34px 30px 30px 30px;
    background-color: dimgrey;
    border-radius: 5px;
    box-shadow: 0 0 grey;
}

.Clear {
    clear: both;
}

#Menu {


}

#MenuList {
    width: 400px;
    height: 30px;
    list-style: none;
    margin: 10px 0 0 5px;
/*    padding:  0 0 0 60px;*/
    float:left;
}

.MenuListItems {
    float:left;
    margin:15px 20px 0 0;
    cursor: pointer;
}

#Logo {
    width: 50px;
    height: 50px;
    background: url("../Images/icons/logo.svg") center center no-repeat;
    float:left;
    background-size: 75px 75px;
    margin: 5px 5px 0 20px;
}

#StoreButton {
    background: white url("../Images/Store.png") center center no-repeat;
    width: 47px;
    height:37px;
    float: right;
    margin: 9px;
    cursor: pointer;
    
}

#Searchbox {
    width: 200px;
    height: 37px;
    float: right;
    margin: 7px;
    position: absolute;
    top:2px;
    right: 2px;
    z-index: 2;
    display: none;
}

#LoginButton {

    background: white url("") center center no-repeat;
    width: 47px;
    height:37px;
    float: right;
    margin: 9px;
    cursor: pointer;
 
}

#SearchButton {
    width: 47px;
    height: 37px;
    background: white url("../Images/Search.png") center center no-repeat;
    float: right;
    margin: 9px;
    cursor: pointer;
}

#TripList {
    background: #46DD85 url("../Images/icons/triplist.svg") no-repeat center center;
    background-size: 150px 150px;
    transition: background-size 0.3s ease;
}

#TripList:hover{
    background-size: 170px 170px;
}

#Convertors {
    background: #5699FF url("../Images/Icons/Convertors.svg") no-repeat center center;
    background-size: 150px 150px;
    transition: background-size 0.3s ease;
}

#Convertors:hover{
    background-size: 170px 170px;
}

#Calculator {
/*    background-color: #FFD751;*/
       background: #FFD751 url("../Images/icons/Calculator.svg") no-repeat center center;
    background-size: 150px 150px;
    transition: background-size 0.3s ease;
        
}
#Calculator:hover{
  background-size: 170px 170px;
}

#DateConvertor {
    background: #7ED700 url("../Images/icons/dateconvertor.svg") no-repeat center center;
    background-size: 150px 150px;
    transition: background-size 0.3s ease;
        
}
#DateConvertor:hover{
    background-size: 170px 170px;
}

#ColorEyeDropper {
    background: #CC3366 url("../Images/icons/eyedropper.svg") no-repeat center center;
    background-size: 150px 150px;
    transition: background-size 0.3s ease;
}
#ColorEyeDropper:hover
{
   background-size: 170px 170px;  
}

#ToDo {
    background-color: #2AEED6;
        background: #2AEED6 url("../Images/icons/todo.svg") no-repeat center center;
    background-size: 150px 150px;
    transition: background-size 0.3s ease;
}

#ToDo:hover{
    background-size: 170px 170px; 
}

#Notepad {
    background-color: #FFCCCC;
        background: #FFCCCC url("../Images/icons/Notepad.svg") no-repeat center center;
    background-size: 150px 150px;
    transition: background-size 0.3s ease;
}

#Notepad:hover {
    background-size: 170px 170px;
}

#IdNumber {

    background: #FFA15E url("../Images/icons/Idnumber.svg") no-repeat center center;
    background-size: 150px 150px;
    transition: background-size 0.3s ease;
}
#IdNumber:hover{
    background-size: 170px 170px; 
}

#CityPlates {
    background: #333399 url("../Images/icons/citytag.svg") no-repeat center center;
    background-size: 150px 150px;
    transition: background-size 0.3s ease;   
}
#CityPlates:hover{
background-size: 170px 170px;
}

#Recorder {
    background-color: #FF6060;
    background: #FF6060 url("../Images/icons/recorder.svg") no-repeat center center;
    background-size: 150px 150px;
    transition: background-size 0.3s ease;
}
#Recorder:hover{
    background-size: 170px 170px;
}

#StopWatch {
    background: #7E93FF url("../Images/icons/StopWatch.svg") no-repeat center center;
    background-size: 150px 150px;
    transition: background-size 0.3s ease;
}
#StopWatch:hover{
    background-size: 170px 170px;
}



#SOS {    
             background: #FF5D79 url("../Images/icons/Sos.svg") no-repeat center center;
    background-size: 150px 150px;
    transition: background-size 0.3s ease;
    
}
#SOS:hover{
    background-size: 170px 170px;
}

#CopyRight {
    margin:30px auto 0 auto;
}

.Row {
    width: 1280px;
    height: 224px;
/*    background: yellow;*/
/*    margin: 10px;*/
}


#SocialMedia {
    margin: 20px auto 0 auto;
}