/* ----------------------------------------------------------------- General ------------------------------------------------------------------*/
    
        .container4box {
        width: 100%;
        position:relative;
        overflow:hidden;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        transition: all 0.5s ease;
        }

        .tit{ font-size: 19px;line-height: 22px;padding: 13px 0px 20px;}

        .box, .box_hide{ width: 100%; height: 300px; display: block; float: left; position: relative; background-size: cover !important;}

        .contain-data { padding: 20px; font-size: 15px;}
        .contain-data2 { padding: 60px 20px; font-size: 15px;}
    
    
        /* ---------------------------- entire container, keeps perspective ---------------------------------------- */
        
        .flip-container {
            background-size: cover !important;
            perspective: 1000px;
            overflow: hidden;
        }
            /* flip the pane when hovered */
        .flip-container:hover .flipper, .flip-container.hover .flipper {
            
            transform: translate(-100%);
            -webkit-transition: translate(-100%);
            -moz-transition: translate(-100%);
            -o-transition: translate(-100%);
            
        }

        .flip-container, .front, .back {
            width: 100%;
            height: 300px;
        }

        /* flip speed goes here */
        .flipper {
            transition: 0s;
            position: relative;
        }

        /* hide back of pane during swap */
        .front, .back {
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }

        /* front pane, placed above back */
        .front {
            background-size: cover !important;
            z-index: 2;
            /* for firefox 31 */
        }

        /* back, initially hidden pane */
        .back {
                background-size: cover !important;
                transform: translate(100%);
                -webkit-transition: translate(100%);
                -moz-transition: translate(100%);
                -o-transition: translate(100%);
        }
    
        
        .panel1b, .panel2b, .panel3b, .panel4b{ display: none}
        
        /* ---------------------------- entire container, keeps perspective ---------------------------------------- */
    
    
        
/* ----------------------------------------------------------------- Box's ------------------------------------------------------------------*/
    
        #cnt_sq1 ul, #cnt_sq2 ul, #cnt_sq3 ul, #cnt_sq4 ul {margin: 0 10px 9px 20px;}
        
        #cnt_sq1 li, #cnt_sq2 li, #cnt_sq3 li, #cnt_sq4 li {line-height: 15px;}
        
        #square1, #square2, #square3, #square4 { padding: 0px; position: relative; height: 272px;}

        #square1 {border-right: #ffffff 1px solid;border-bottom: #ffffff 1px solid;}
        #square2 {border-left: #ffffff 1px solid;border-bottom: #ffffff 1px solid;}
        #square3 {border-right: #ffffff 1px solid;border-top: #ffffff 1px solid;}
        #square4 {border-left: #ffffff 1px solid;border-top: #ffffff 1px solid; }
    
/* ----------------------------------------------------------------- Titles ------------------------------------------------------------------*/
        
        .tit{padding: 13px 0px 10px;}
    
        .panel1, .panel2, .panel3, .panel4{ 
            background-position: center center;
            background-size: cover;
            filter: alpha(opacity=80);
            /* IE */
            -moz-opacity: 0.8;
            /* Mozilla */
            opacity: 0.8;
            /* CSS3 */
            height: 61px;
            width: 141px;
            position: absolute;
            z-index: 1;
            overflow: hidden;
            display: table;
        } 

        .panel1{background-image: url(/file_source/web/Design/img/navigationgrid/arrow1.png); right: 0px; bottom: 28px;}
        .panel2{background-image: url(/file_source/web/Design/img/navigationgrid/arrow2.png); left: 0px; bottom: 28px;}
        .panel3{background-image: url(/file_source/web/Design/img/navigationgrid/arrow3.png); right: 0px; top: 0px;}
        .panel4{background-image: url(/file_source/web/Design/img/navigationgrid/arrow4.png); left: 0px; top: 0px;}

        .paneltit{display: table-cell;
            font-size: 16px;
            text-align: center;
            vertical-align: middle;
            font-weight: 600;
        }

/* ----------------------------------------------------------------- Colors ------------------------------------------------------------------*/
    
        .white{color:#fff !important}
        .green{color:#00cc00 !important}
        .blue{color: #0066ff !important}
        .orange{color: #ff9900 !important}
        .gray{color: #3d4d5c !important}

        .bgreen{background-color:#00cc00 !important}
        .bblue{background-color: #0066ff !important}
        .borange{background-color: #ff9900 !important}
        .bgray{background-color: #3d4d5c !important}    

/* ----------------------------------------------------------------- Fix's ------------------------------------------------------------------*/
    
        .on {display: none !important;}
        .off {display: block!important; top: 0px;
        left: 0px;
        position: absolute;}

/* ----------------------------------------------------------------- RESPONSIVE S ------------------------------------------------------------------*/

	@media only screen and (max-width : 767px) {
        
        .flip-container:hover .flipper, .flip-container.hover .flipper {
            transform: translate(-100%);
            -webkit-transition: translate(-100%);
            -moz-transition: translate(-100%);
            -o-transition: translate(-100%);
        }
        
        .flipper {
            transition: 0.6s;
        }
        
        #square1, #square2, #square3, #square4 {
            margin-bottom: 15px;
            overflow: hidden;
        }
        
        .panel1, .panel2, .panel3, .panel4{background: url(/file_source/web/Design/img/navigationgrid/arrow_mobile_b.png) center right;  background-size: cover; left: 0px; top: 0px; width: 100%;}
        .panel1b, .panel2b, .panel3b, .panel4b{
            background: url(/file_source/web/Design/img/navigationgrid/arrow_mobile.png) center right;
            background-size: cover; 
            left: 0px; top: 0px; width: 100%;
            filter: alpha(opacity=80);
            /* IE */
            -moz-opacity: 0.8;
            /* Mozilla */
            opacity: 0.8;
            /* CSS3 */
            height: 61px;
            position: absolute;
            z-index: 1;
            display: table;
        } 

        .paneltit{text-align: left;padding-left: 20px;}
        
        .contain-data {padding: 60px 20px 20px;}
 
    }

/* ----------------------------------------------------------------- RESPONSIVE M ------------------------------------------------------------------ */
        
    @media only screen and (min-width : 768px) and (max-width : 850px) {
        
        .flip-container:hover .flipper, .flip-container.hover .flipper {
            transform: translate(-100%);
            -webkit-transition: translate(-100%);
            -moz-transition: translate(-100%);
            -o-transition: translate(-100%);
        }
        
        .flipper {
            transition: 0.6s;
        }
        
        #square1, #square2, #square3, #square4 {
            margin-bottom: 15px;
            overflow: hidden;
            
        }
        
        .panel1, .panel2, .panel3, .panel4{background: url(/file_source/web/Design/img/navigationgrid/arrow_mobile_b.png) center right;  background-size: cover; left: 0px; top: 0px; width: 100%;}
        .panel1b, .panel2b, .panel3b, .panel4b{
            background: url(/file_source/web/Design/img/navigationgrid/arrow_mobile.png) center right;
            background-size: cover; 
            left: 0px; top: 0px; width: 100%;
            filter: alpha(opacity=80);
            /* IE */
            -moz-opacity: 0.8;
            /* Mozilla */
            opacity: 0.8;
            /* CSS3 */
            height: 61px;
            position: absolute;
            z-index: 1;
            display: table;
        } 

        .paneltit{text-align: left;padding-left: 20px;}
        
        .contain-data {padding: 60px 20px 20px;}
        
        #cnt_sq1 li, #cnt_sq2 li, #cnt_sq3 li, #cnt_sq4 li {
            line-height: 15px;
            font-size: 13px;
        }

	}
	
	/* ----------------------------------------------------------------- Arrows Inside Boxes ------------------------------------------------------------------ */
	
	.container4box ul.arrows {
      margin-left: 25px; }
      .container4box ul.arrows li {
      	font-size: 22px;
        display: flex !important; }
      .container4box ul.arrows li:before {
        content: "\27A4";
        padding-right: .35em;
        margin-left: -26px; }
      .container4box ul.arrows li.coal:before {
        color: #444; }
      .container4box ul.arrows li.green:before {
        color: #20C22F; }
      .container4box ul.arrows li.blue:before {
        color: #297DFD; }
      .container4box ul.arrows li.orange:before {
        color: #FF940C; }
      .container4box ul.arrows li.navy:before {
        color: #1C2980; }
      .container4box ul.arrows li.coal a {
        color: #444; }
      .container4box ul.arrows li.green a {
        color: #20C22F; }
      .container4box ul.arrows li.blue a {
        color: #297DFD; }
      .container4box ul.arrows li.orange a {
        color: #FF940C; }
      .container4box ul.arrows li.navy a {
        color: #1C2980; }
      .container4box ul.arrows li a:first-child + p,
      .container4box ul.arrows li h3:first-child + p {
        padding-left: .4em; }
      .container4box ul.arrows li .extra-arrow {
        padding-left: .4em; }
      .container4box ul.arrows li a {
        font-family: "proxima-nova-n4", "proxima-nova", "Open Sans", Corbel, Helvetica, Arial;
        font-size: 1rem; }
      .container4box ul.arrows li > a {
        font-size: 1.09375rem; }
      .container4box ul.arrows .extra-arrow:after {
        content: "\00a0\00bb";
        display: inline-block;
        font-size: 12px;
        font-weight: bold; }
		.container4box ul.arrows li {
		font-size: 9px !important;
		display: -webkit-box !important;}
		.container4box ul.arrows li > a {
		font-size: 1rem !important;
		line-height: 16px !important;
		text-decoration: none !important; }