.arrow-top {
    width: 0; 
    height: 0px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 45px solid white;
}

.arrow-bottom {
    margin: 0 auto;
    display:block;
    width: 0; 
    height: 0px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 45px solid white;
}

.total-container{
    position:relative;
    max-width:880px;
    margin:0 auto;
    display:block;
}

.title-container{
    background-color:#fff; 
    max-width:800px; 
    margin:0 auto; 
    display:block; 
    padding:60px; 
    color:#333;
}

.top-banner{
    background-image: url(/images/Schools/SSSHL/itt/img_main_itt.jpg);
    background-position:center; 
    background-repeat:no-repeat; 
    background-size:cover;
    padding-top: 7%;
    padding-bottom: 10%;
}

.top-banner h1{
    font-size:4vh !important;
}

.top-banner h1 span{
    font-size:10px !important;
}

.blueBack{
    background:#0578c5 !important;
}

.btn-main{
    background:#0578c5 !important; border:  #0578c5 !important;
}

.btn-main:hover{
    background:#bd5b0c !important; border:  #bd5b0c !important; color: #fff!important;
}

.blueText{
    color:#0578c5 !important;
}

.whiteText{
    color:#fff !important;
}

.usps{
    border: 1px solid #ccc; 
    display:flex; 
    align-items:center;
    flex-direction:row;
}

.usps i{
    color:#0578c5;
}

html{
    overflow-x:hidden;
}

body{
    overflow-x:hidden;
}

.profilePic{
    width:40% !important; 
    margin:0 auto; 
    position:absolute;
    top:13%; 
    left:30%; 
    border:5px solid #fff;
}

.whiteText h2{
    color:#fff;
}

.whiteText h2:before{
    border-top: 3px solid #fff;
}

.shapeHolderIm{
    max-width:200px;
}

@media only screen and (max-width: 1024px) {
    .shapeHolderIm{
        max-width:120px;
    }
    .profilePic{
        width:50% !important;
        top:10%; 
        left:25%; 
    }
}

@media only screen and (max-width: 900px) {
    .top-banner{
        background-image: url(/images/Schools/SSSHL/itt/img_main_itt_med.jpg); 
        background-position:center; 
        background-repeat:no-repeat; 
        background-size:cover;
    }
    .total-container{
        position:relative;
        max-width:480px;
        margin:0 auto;
        display:block;
    }
    .title-container{
        background-color:#fff; 
        max-width:400px; 
        margin:0 auto; 
        display:block; 
        padding:50px; 
        color:#333;
    }
    .arrow-bottom {
        margin-top:-2px;
    }
}

@media only screen and (max-width: 720px) {
    .usps{
        display:block;
    }
    .usps p{
        text-align:center !important;
    }
}

@media only screen and (max-width: 600px) {
    .shapeHolderIm{
        max-width:100px;
    }
    .top-banner{
        background-image: url(/images/Schools/SSSHL/ITT/img_main_itt_small.jpg); 
        background-position:center; 
        background-repeat:no-repeat; 
        background-size:cover;
    }
}
@media only screen and (max-width: 430px) {
    .top-banner{
        background-image: url(/images/Schools/SSSHL/ITT/img_main_itt_xsmall.jpg); 
        background-position:center; 
        background-repeat:no-repeat; 
        background-size:cover;
    }
    .total-container{
        position:relative;
        max-width:300px;
        margin:0 auto;
        display:block;
    }
    .title-container{
        background-color:#fff; 
        max-width:300px; 
        margin:0 auto; 
        display:block; 
        padding:30px; 
        color:#333;
    }
    .top-banner h1{
        font-size:3vh !important;
    }
    .top-banner span{
        font-size:14px !important;
        font-weight:500 !important;
        line-height:0.2 !important;
    }
}