/* .bg-orange { background-color:#f59252; } .bg-yellow { background-color:#f5c64c; } .bg-blue-light { background-color:#c1def1; } .bg-blue-bright { background-color:#4c99d4; } .bg-blue-dark { background-color:#0b2063; } .bg-green-light { background-color:#d4ead7; } .bg-green-dark { background-color:#449246; } .bg-green-sea { background-color:#6bbcb0; }*/ .polygon { background:#f59252; border: 0px solid rgba(100, 100, 100, 1); transform: translate(0px, 0px) skew(0deg, -34deg); } .in-banner-wrapper { background-color:rgba(0, 46, 109, 1); margin-top:120px; /*height:540px;*/ overflow:hidden; } .in-banner-wrapper .inbw-img-blk { position:absolute; right:0; top:0; /*width:50%;*/ /*height:540px;*/ } .in-banner-wrapper .inbw-left-box { /*width:50%;*/ /*height:540px;*/ } .in-banner-wrapper .inbw-traingle { position:absolute; top:0; /*left:50%;*/ z-index:5; } .in-banner-wrapper .inbw-polygon { position:absolute; /*left:50%;*/ z-index:10; height:180px; width:380px; top:60px; margin-left:60px;} .in-banner-wrapper, .in-banner-wrapper .inbw-img-blk, .in-banner-wrapper .inbw-left-box, .in-banner-wrapper.banner-style6 .inbw-left-box, .inbw-height { height:500px; } .in-banner-wrapper .inbw-img-blk, .in-banner-wrapper .inbw-left-box { width:50%; } .in-banner-wrapper .inbw-traingle, .in-banner-wrapper .inbw-polygon { left:50%; } .in-banner-wrapper .inbw-txt-blk { position:absolute; width:90%; top:0; bottom:0; left:10%; font-size:50px; color:rgba(0, 46, 109, 1); text-transform:uppercase; line-height:1; z-index:15; margin:auto; } .in-banner-wrapper .inbw-txt-blk h1.inbw-title-bold { font-size:50px; color:rgba(0, 46, 109, 1); text-transform:uppercase; line-height:0.9em; margin-bottom: 0px; font-weight: 500;} .in-banner-wrapper .inbw-txt-blk .inbw-title-normal { font-size: 50%; padding-top: 5px; text-transform: unset; } .in-banner-wrapper .inbw-txt-blk .inbw-txt-pos { position:relative; /*width:42%;*/ top:50%; transform: translateY(-50%); } .in-banner-wrapper.banner-style1 .inbw-txt-pos, .in-banner-wrapper.banner-style2 .inbw-txt-pos, .in-banner-wrapper.banner-style3 .inbw-txt-pos, .in-banner-wrapper.banner-style4 .inbw-txt-pos, .in-banner-wrapper.banner-style5 .inbw-txt-pos { width:42%; } .banner-m { display:none; } /* • Style ------------------------------------------------------------------------- */ .in-banner-wrapper.banner-style1 .polygon { background:#f59252;} .in-banner-wrapper.banner-style2 .polygon { background:#4c99d4;} .in-banner-wrapper.banner-style3 .polygon { background:#0b2063;} .in-banner-wrapper.banner-style4 .polygon { background:#6bbcb0;} .in-banner-wrapper.banner-style5 .polygon { background:#449246;} .in-banner-wrapper.banner-style6 .polygon { background:#f5c64c;} .in-banner-wrapper.banner-style1 .inbw-left-box, .in-banner-wrapper.banner-style2 .inbw-left-box, .in-banner-wrapper.banner-style3 .inbw-left-box, .in-banner-wrapper.banner-style4 .inbw-left-box, .in-banner-wrapper.banner-style7 .inbw-left-box { background:#c1def1; } .in-banner-wrapper.banner-style5 .inbw-left-box { background:#d4ead7; } .in-banner-wrapper.banner-style1 .triangle, .in-banner-wrapper.banner-style2 .triangle, .in-banner-wrapper.banner-style3 .triangle, .in-banner-wrapper.banner-style4 .triangle { width:0px; height:0px; border-style: solid; border-width: 350px 550px 0 0; border-color: #c1def1 transparent transparent transparent; transform: rotate(0deg);} .in-banner-wrapper.banner-style5 .triangle { width:0px; height:0px; border-style: solid; border-width: 350px 550px 0 0; border-color: #d4ead7 transparent transparent transparent; transform: rotate(0deg);} /* • Style 6 (Inside Page) ------------------------------------------------------------------------- */ .in-banner-wrapper.banner-style6 .inbw-left-box { right:0; /*height:600px;*/ width:50%; position:absolute;} .in-banner-wrapper.banner-style6 .inbw-img-blk { left:0 } .in-banner-wrapper.banner-style6 .inbw-left-box { background:#c1def1; } .in-banner-wrapper.banner-style6 .triangle { width:0px; height:0px; border-style: solid; border-width: 0 0 350px 550px; border-color: transparent transparent #c1def1 transparent; transform: rotate(0deg);} .in-banner-wrapper.banner-style6 .inbw-traingle { margin:0 auto; margin-left:-550px; top:250px} .in-banner-wrapper.banner-style6 .inbw-polygon { margin:0 auto; margin-left:-420px; top:360px; } .in-banner-wrapper.banner-style6 .inbw-txt-blk { width:50%; right:0; left: inherit;} .in-banner-wrapper.banner-style6 .inbw-txt-pos { width:80%; padding-left:50px; text-align:right;} /* ========================================================================== Media ============================================================================= */ @media only screen and (max-width: 1600px) { .in-banner-wrapper .inbw-txt-blk { left:5%;} .in-banner-wrapper.banner-style6 .inbw-txt-pos { width:90%;} } @media only screen and (max-width: 1500px) { .in-banner-wrapper.banner-style1 .inbw-txt-pos, .in-banner-wrapper.banner-style2 .inbw-txt-pos, .in-banner-wrapper.banner-style3 .inbw-txt-pos, .in-banner-wrapper.banner-style4 .inbw-txt-pos, .in-banner-wrapper.banner-style5 .inbw-txt-pos { width:45% } } @media only screen and (max-width: 1400px) { .in-banner-wrapper .inbw-left-box { width:40%; } .in-banner-wrapper .inbw-img-blk { width:60%; } .in-banner-wrapper .inbw-traingle, .in-banner-wrapper .inbw-polygon { left:40%; } .in-banner-wrapper .inbw-txt-blk { font-size:42px;} .in-banner-wrapper .inbw-txt-blk h1.inbw-title-bold {font-size:42px;} .in-banner-wrapper .inbw-txt-blk .inbw-title-normal { font-size: 28px; } /* .in-banner-wrapper .inbw-txt-blk .inbw-txt-pos { width:38%}*/ .in-banner-wrapper.banner-style1 .inbw-txt-pos, .in-banner-wrapper.banner-style2 .inbw-txt-pos, .in-banner-wrapper.banner-style3 .inbw-txt-pos, .in-banner-wrapper.banner-style4 .inbw-txt-pos, .in-banner-wrapper.banner-style5 .inbw-txt-pos { width:38% } .in-banner-wrapper.banner-style6 .inbw-traingle { margin-left:-350px; top: 280px } .in-banner-wrapper.banner-style6 .inbw-polygon { margin-left:-230px; top:390px; width:340px; } .in-banner-wrapper.banner-style6 .polygon { border: 0px solid rgba(100, 100, 100, 1); transform: translate(0px, 0px) skew(0deg, -33deg);} .in-banner-wrapper.banner-style6 .inbw-left-box { width:40%; } .in-banner-wrapper.banner-style6 .inbw-img-blk { width:60%; } .in-banner-wrapper.banner-style6 .inbw-traingle, .in-banner-wrapper.banner-style6 .inbw-polygon { left:50%; } .in-banner-wrapper.banner-style6 .inbw-txt-pos { padding-left:155px;} } @media only screen and (max-width: 1100px) { .in-banner-wrapper { margin-top:70px; } .in-banner-wrapper .inbw-left-box { width:40%; } .in-banner-wrapper .inbw-img-blk { width:60%; } .in-banner-wrapper .inbw-traingle, .in-banner-wrapper .inbw-polygon { left:40%; } .in-banner-wrapper, .in-banner-wrapper .inbw-img-blk, .in-banner-wrapper .inbw-left-box { height:480px; } .in-banner-wrapper .inbw-txt-blk { left:2.5%;} .in-banner-wrapper .inbw-txt-blk { font-size:40px;} .in-banner-wrapper .inbw-txt-blk h1.inbw-title-bold {font-size:40px;} .in-banner-wrapper .inbw-txt-blk .inbw-title-normal { font-size: 26px; } .in-banner-wrapper.banner-style1 .inbw-txt-pos, .in-banner-wrapper.banner-style2 .inbw-txt-pos, .in-banner-wrapper.banner-style3 .inbw-txt-pos, .in-banner-wrapper.banner-style4 .inbw-txt-pos, .in-banner-wrapper.banner-style5 .inbw-txt-pos { width:45% } .in-banner-wrapper.banner-style6 .inbw-traingle { top: 260px; } .in-banner-wrapper.banner-style6 .inbw-polygon { top: 380px; margin-left: -280px; } .in-banner-wrapper.banner-style6 .inbw-txt-pos { width:95%; padding-left:140px;} } @media only screen and (max-width: 1024px) { .in-banner-wrapper .inbw-traingle { top:-120px;} .in-banner-wrapper .inbw-polygon { top:-20px; width:300px; height:180px; } .polygon { transform: translate(0px, 0px) skew(0deg, -33deg);} .in-banner-wrapper, .in-banner-wrapper .inbw-img-blk, .in-banner-wrapper .inbw-left-box { height:400px; } .in-banner-wrapper .inbw-txt-blk { font-size:30px;} .in-banner-wrapper .inbw-txt-blk h1.inbw-title-bold { font-size:30px} .in-banner-wrapper .inbw-txt-blk .inbw-title-normal { font-size: 24px; } .in-banner-wrapper.banner-style1 .inbw-txt-pos, .in-banner-wrapper.banner-style2 .inbw-txt-pos, .in-banner-wrapper.banner-style3 .inbw-txt-pos, .in-banner-wrapper.banner-style4 .inbw-txt-pos, .in-banner-wrapper.banner-style5 .inbw-txt-pos { width:40% } .in-banner-wrapper.banner-style6 .inbw-txt-pos { padding-left:100px; } .in-banner-wrapper.banner-style6 .inbw-traingle { top:50px; left:60% } .in-banner-wrapper.banner-style6 .inbw-polygon { top:260px; margin-left:-290px;} } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { .in-banner-wrapper, .in-banner-wrapper .inbw-img-blk, .in-banner-wrapper .inbw-left-box { height:350px; } .in-banner-wrapper .inbw-traingle { top:-180px;} .in-banner-wrapper .inbw-polygon { top:-40px; width:300px; height:140px; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { } @media only screen and (max-width: 767px) { .in-banner-wrapper { margin-top:60px; } .in-banner-wrapper .inbw-left-box { width:100%; display:none; } .in-banner-wrapper .inbw-traingle { left:0; top:-240px; } .in-banner-wrapper .inbw-polygon { height:80px; width:160px; top:10px; margin-left:5%; left:0;} .in-banner-wrapper .inbw-img-blk { width:100%; } .in-banner-wrapper, .in-banner-wrapper .inbw-img-blk, .in-banner-wrapper .inbw-left-box { height:auto; } .in-banner-wrapper .inbw-img-blk { display:none; } .banner-m { display:block; } img.banner-m { width:100%; height:auto; } .in-banner-wrapper .inbw-txt-blk { position:relative; left:0; font-size:20px; padding:10px 0} .in-banner-wrapper .inbw-txt-blk h1.inbw-title-bold { font-size:20px} .in-banner-wrapper .inbw-txt-blk .inbw-txt-pos { position:relative; /*width:100%;*/ top:inherit; bottom: 0; transform:inherit; } .in-banner-wrapper .inbw-txt-blk .inbw-title-normal { font-size: 16px; } .in-banner-wrapper.banner-style1 .inbw-txt-pos, .in-banner-wrapper.banner-style2 .inbw-txt-pos, .in-banner-wrapper.banner-style3 .inbw-txt-pos, .in-banner-wrapper.banner-style4 .inbw-txt-pos, .in-banner-wrapper.banner-style5 .inbw-txt-pos { width:100% } .in-banner-wrapper.banner-style1, .in-banner-wrapper.banner-style2, .in-banner-wrapper.banner-style3, .in-banner-wrapper.banner-style4, .in-banner-wrapper.banner-style6 { background-color:#c1def1;} .in-banner-wrapper.banner-style5 { background-color:#d4ead7;} .in-banner-wrapper.banner-style6 .inbw-txt-blk { width:90%; } .in-banner-wrapper.banner-style6 .inbw-txt-pos { width:100%; padding:0; } .in-banner-wrapper.banner-style6 .inbw-traingle { top:120px; left:inherit; right:0;} .in-banner-wrapper.banner-style6 .inbw-polygon { height:80px; width:160px; top:190px; margin-left:10px} } @media only screen and (max-width:740px) { .in-banner-wrapper.banner-style6 .inbw-polygon { top:380px; right:0; margin-left:0; } .in-banner-wrapper.banner-style6 .inbw-traingle { top:250px; left:inherit; right:0;} } @media only screen and (max-width:560px) { .in-banner-wrapper.banner-style6 .inbw-polygon { top:300px; right:0; margin-left:0; } .in-banner-wrapper.banner-style6 .inbw-traingle { top:200px; left:inherit; right:0;} } @media only screen and (max-width:420px) { .in-banner-wrapper.banner-style6 .inbw-polygon { top:200px } .in-banner-wrapper.banner-style6 .inbw-traingle { top:150px;} } @media only screen and (max-width:300px) { .in-banner-wrapper .inbw-traingle { top:-270px } .in-banner-wrapper .inbw-polygon { top:-26px } .in-banner-wrapper.banner-style6 .inbw-polygon { top:120px } .in-banner-wrapper.banner-style6 .inbw-traingle { top:100px } }