/*@import url("https://fonts.googleapis.com/css?family=Prompt");*/
/*font-family: 'Prompt', sans-serif;*/
/*@import url('https://fonts.googleapis.com/css?family=Maitree');*/
/*font-family: 'Maitree', serif;*/

@font-face {
    font-family: "Prompt";
    src: url("asset/Prompt-Regular.ttf");
}

/*
@font-face {
    font-family: "Maitree";
    src: url("asset/Taviraj-Regular.ttf");
}
*/

#topPage {
    font-family: 'Prompt', sans-serif;
    font-size: 80%;
    background-color: #ff6600;
    height: 20px;
    color: white;
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
}

#topPage .col {
    align-items: center;
}

#topPage .col .leftCol {
    text-align: left;
}

#topPage .col .rightCol {
    text-align: right;
}

.topMenu {
    background-color: #2d343c;
    height: 90px;
    font-family: 'Prompt', sans-serif;
    float:left;
    width: 100%;
    z-index: 9999;
}

.topMenu .itecLogo {
    float: left;
    height: 100%;
}

.topMenu .itecLogo img {
    height: 80px;
    float: none;
    margin: 5px 10px;
    padding: 0;
}

#miniMenu {
    float: left;
    font-size: 24px;
    margin: 32px 20px;
    color: white;
    width: 25px;
    height: 25px;
    text-align: center;
    cursor: pointer;
}

#mainMenu {
    padding: 0;
    font-weight: bold;
    z-index: 10000;
}

.mainMenuItem {
    list-style: none;
    padding: -0px 5px;
    position: relative;
    background-color: #2d343c;
}

.mainMenuItem a {
    color: white;
    text-decoration: none;
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 1px;
    padding: 3px 3px;
    display: block;
}

.mainMenuItem > a:hover {
    background-color: #ff6600;
    transition: background-color 0.2s linear 0s;
}

.mainMenuItem:hover .subMenu {
    display: block;
}

.subMenu {
    clear: both;
    position: absolute;
    width: 230px;
    display: none;
    z-index: 10000;
    /*white-space: nowrap;*/
    /*top: 0;*/
    /*left: 100%;*/
}

.subMenuItem {
    float: left;
    color: white;
    background-color: #2d343c;
    width: 100%;
    font-size: 90%;
    font-weight: normal;
    list-style: none;
}

.subMenuItem:hover {
    background-color: #ff6600;
    transition: background-color 0.2s linear 0s;
}

#footerPage {
    background-color: #212b36;
    width: 100%;
    position: relative;
    float: left;
    padding: 30px 0 0 0;
}

#width_46 {
    width: 46%;               
}

.facebook::before {
    font-family: "Font Awesome 5 Brands"; content: "\f39e";
}

.youtube::before {
    font-family: "Font Awesome 5 Brands"; content: "\f167";
}

.emailIcon::before {
    font-family: "Font Awesome 5 Brands"; content: "\f26e";
}

#socialSectionBorder {
    position: relative;
    float: left;
    width: 100%;
}

#socialSection {
    position: relative;
    float: none;
    width: 100%;
}

.socialSectionButton {
    font-family: 'Prompt', sans-serif;
    background-color: #364149;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    float: left;
    margin: 0 2%;
    width: 29.30%;
}

.socialSectionButton a {
    color: white;
    text-decoration: none;
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 1px;
    padding: 3px 3px;
    display: block;
}

.socialSectionButton a:hover,
.socialSectionButton a:focus {
    border-radius: 8px;
    background: #ff6600;
    transition: background-color 0.2s linear 0s;
}

#socialSection a::before {
    display: none;
}

#socialSection .svg-inline--fa {
    margin-right: 0.5em;
}

#itecfooterdetail {
    font-family: 'Prompt', sans-serif;
    float: left;
    color: white;
    width: 94%;
    text-align: left;
    margin: 20px 3% 0 3%;
}

.itecfooterdetailList {
    color: #a0a0a0;
}

#footerMenuSectionBorder {
    position: relative;
    float: left;
    width: 100%;
    background-color: black;
}

#footerMenuSection {
    font-family: 'Prompt', sans-serif;
    background-color: black;
    position: relative;
    float: left;
    width: 96%;
    margin: 20px 2% 0 2%;
}

#footerITECCopyRight {
    color: white;
    font-size: 80%;
    position: relative;
    float: left;
}

#footerMenuBorder {
    position: relative;
    float: right;
    width: 73%;
}

#footerMenu {
    font-weight: bold;
    z-index: 10000;
    margin: 0;
    padding: 0;
    position: relative;
    float: right;
}

.footerMenuItem {
    list-style: none;
    padding: -0px 5px;
    float: left;
    top: 0;
}

.footerMenuItem a {
    text-decoration: none;
    color: white;
    padding: 3px 3px;
    display: block;
    background-color: black;
    float: left;
}

.footerMenuItem > a:hover {
    color: #ff6600;
    text-decoration: underline;
    transition: color 0.1s linear 0s;
}

@media (max-width: 414px) {
    #topPage {
        height: 40px;
    }
    
    #topPage .col {
        float: none;
        width: 98%;
        margin: 0 1%;
        padding: 0 1%;
    }
    
    #topPage .col .leftCol {
        margin: 0px 0px 0px 1024px;
        animation-duration: 20s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-name: slideRightAnimation;
    }

    #topPage .col .rightCol {
        margin: 0px 1024px 0px 0px;
        animation-duration: 20s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-name: slideLeftAnimation;
    }
    
    @keyframes slideLeftAnimation {
        from {
            margin-left: 100%;
        }
        to {
            margin-left: -100%;
        }
    }

    @keyframes slideRightAnimation {
        from {
            margin-left: -100%;
        }
        to {
            margin-left: 100%;
        }
    }

    #miniMenu {
        display: block;
    }

    #mainMenu {
        position: fixed;
        width: 130px;
        height: 230px;
        left: 20px;
        top: 114px;
        display: none;
    }

    .mainMenuItem {
        top: -80px;
    }

    .subMenu {
        margin: 0;
        padding: 0px 1px;
        top: 0;
        left: 100%;
    }
    
    .socialSectionButton {
        width: 96%;
        margin: 5px 2%;
    }
    
    #footerITECCopyRight {
        width: 96;
        padding: 6px 2% 20px 2%;
    }

    #footerMenuBorder {
        float: left;
        width: 96%;
        padding: 0 2% 20px 2%;
    }

    #footerMenu {
        float: left;
    }
}

@media (min-width: 415px) and (max-width: 1023px) {
    #topPage {
        height: 40px;
    }
    
    #topPage .col {
        float: none;
        width: 98%;
        margin: 0 1%;
        padding: 0 1%;
    }
    
    #topPage .col .leftCol {
        margin: 0px 0px 0px 1024px;
        animation-duration: 20s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-name: slideRightAnimation;
    }

    #topPage .col .rightCol {
        margin: 0px 1024px 0px 0px;
        animation-duration: 20s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-name: slideLeftAnimation;
    }
    
    @keyframes slideLeftAnimation {
        from {
            margin-left: 100%;
        }
        to {
            margin-left: -100%;
        }
    }

    @keyframes slideRightAnimation {
        from {
            margin-left: -100%;
        }
        to {
            margin-left: 100%;
        }
    }

    #miniMenu {
        display: block;
    }

    #mainMenu {
        position: fixed;
        width: 130px;
        height: 230px;
        left: 20px;
        top: 114px;
        display: none;
    }

    .mainMenuItem {
        top: -80px;
    }
    
    .subMenu {
        margin: 0;
        padding: 0px 1px;
        top: 0;
        left: 100%;
    }

    .socialSectionButton {
        width: 96%;
        margin: 5px 2%;
    }
    
    #footerITECCopyRight {
        width: 96;
        padding: 6px 2% 20px 2%;
    }

    #footerMenuBorder {
        float: left;
        width: 96%;
        padding: 0 2% 20px 2%;
    }

    #footerMenu {
        float: left;
    }
}

@media (min-width: 1024px) {
    #topPage {
        height: 20px;
    }

    #topPage .col {
        float: left;
        width: 46%;
        margin: 0 1%;
        padding: 0 1%;
    }
    
    #topPage .col .leftCol {
    }

    #topPage .col .rightCol {
        margin: 0 1%;
        padding: 0 1%;
    }
    
    #miniMenu {
        display: none;
    }
    
    #mainMenu {
        margin: 28px 30px 28px 0px;
        padding: 0;
        float: right;
        display: block;
    }

    .mainMenuItem {
        float: left;
        top: 0;
    }

    .mainMenuItem a {
        float: left;
    }
    
    .subMenu {
        margin: 34px 0px 0px 0px;
        padding: 29px 0px 0px 0px;
    }
    
    .socialSectionButton {
        margin: 0 2%;
        width: 29.30%;
    }
    
    #footerITECCopyRight {
        width: 25%;
        padding: 6px 2% 20px 0;
    }

    #footerMenuBorder {
        float: right;
        width: 73%;
        padding: 0;
    }

    #footerMenu {
        float: right;
    }
}