/* codeDESIGN - layout_development.css */ @charset "utf-8"; @import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap'); /* 'Montserrat' */ .layout_development [class^="col-"], .layout_development [class*=" col-"] { padding-left: 0px; padding-right: 0px; } .layout_development div.container { padding-left: 0px; padding-right: 0px; } .layout_development { margin: 0px 0px 80px 0px; padding: 0px 0px 0px 0px; overflow: hidden; } /* CORNERS */ div.corner_border { width: 40px; height: 40px; content: ""; display: block; position: absolute; transition: all 0.33s ease-in-out; -moz-transition: all 0.33s ease-in-out; -o-transition: all 0.33s ease-in-out; -webkit-transition: all 0.33s ease-in-out; } div.featured_welcome:hover div.corner_border { width: 80px; height: 80px; } div.corner_border_top_left { top: -4px; left: -4px; border-top: 4px solid #202020; border-left: 4px solid #202020; } div.corner_border_white.corner_border_top_left { border-top: 4px solid #ffffff; border-left: 4px solid #ffffff; } div.corner_border_top_right { top: -4px; right: -4px; border-top: 4px solid #202020; border-right: 4px solid #202020; } div.corner_border_white.corner_border_top_right { border-top: 4px solid #ffffff; border-right: 4px solid #ffffff; } div.corner_border_bottom_left { bottom: -4px; left: -4px; border-bottom: 4px solid #202020; border-left: 4px solid #202020; } div.corner_border_white.corner_border_bottom_left { border-bottom: 4px solid #ffffff; border-left: 4px solid #ffffff; } div.corner_border_bottom_right { bottom: -4px; right: -4px; border-bottom: 4px solid #202020; border-right: 4px solid #202020; } div.corner_border_white.corner_border_bottom_right { border-bottom: 4px solid #ffffff; border-right: 4px solid #ffffff; } /* CORNERS HOVER */ div.featured_welcome:hover div.corner_border_white.corner_border_top_left { border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; } div.featured_welcome:hover div.corner_border_white.corner_border_top_right { border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; } div.featured_welcome:hover div.corner_border_white.corner_border_bottom_left { border-bottom: 2px solid #ffffff; border-left: 2px solid #ffffff; } div.featured_welcome:hover div.corner_border_white.corner_border_bottom_right { border-bottom: 2px solid #ffffff; border-right: 2px solid #ffffff; } .content_box_fatured { margin: 0px 0px 0px 0px; padding: 0px 10px 0px 10px; } .content_box_fatured_heading h3 { font: normal 28px/28px 'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif; font-style: normal; font-weight: 400; color: var(--ci_color_black); letter-spacing: -1px; margin: 0px 0px 20px 0px; padding: 0px 0px 0px 0px; position: relative; } .content_box_fatured_heading h3:after { background: var(--ci_color_accent_1); bottom: -1px; content: ""; height: 1px; left: 0%; margin: 0px 0px 0px 0px; position: absolute; width: 82px; transition: all 0.33s ease-in-out; -moz-transition: all 0.33s ease-in-out; -o-transition: all 0.33s ease-in-out; -webkit-transition: all 0.33s ease-in-out; display: none; } .content_box_fatured_heading h3:hover:after { background: var(--ci_color_accent_1_hover); width: 180px; } .content_box_fatured_heading h3 i { color: var(--ci_color_accent_1); margin: 0px 8px 0px 0px; padding: 0px 0px 0px 0px; transition: all 0.33s ease-in-out; -moz-transition: all 0.33s ease-in-out; -o-transition: all 0.33s ease-in-out; -webkit-transition: all 0.33s ease-in-out; } @media only screen and (max-width: 768px) { .content_box_fatured_heading h3 i { width: 20px; } } .content_box_fatured_heading h3:hover i { color: var(--ci_color_accent_1_hover); } .content_box_fatured_subheading h5 { font: 700 13px/13px 'Montserrat',sans-serif; text-transform: uppercase; color: #444444; letter-spacing: 0px; margin: 0px 0px 20px 0px; padding: 0px 0px 0px 0px; } .content_box_fatured_content { background: #F8F8F8; font: normal 14px/20px 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; margin: 0px 0px 0px 0px; padding: 40px 40px 40px 40px; } .content_box_fatured_image { position: relative; } .content_box_fatured_image_overlay { background: rgba(255, 255, 255, 0.4); width: 100%; height: 100%; position: absolute; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0.0; -khtml-opacity: 0.0; opacity: 0.0; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .content_box_fatured_image_overlay i { font-size: 30px; color: #ffffff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .content_box_fatured_image:hover div.content_box_fatured_image_overlay { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1.0; -khtml-opacity: 1.0; opacity: 1.0; } .content_box_fatured_image_border:before { content: ''; position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; border: 4px solid rgba(255, 255, 255, 0.8); margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; transition: all 0.33s ease-in-out; -moz-transition: all 0.33s ease-in-out; -o-transition: all 0.33s ease-in-out; -webkit-transition: all 0.33s ease-in-out; } .content_box_fatured_image:hover div.content_box_fatured_image_border:before { top: 10px; right: 10px; bottom: 10px; left: 10px; border: 2px solid rgba(255, 255, 255, 0.8); margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } .content_box_fatured_image_border div.content_box_fatured_image_border_heading { font: 700 13px/13px 'Montserrat',sans-serif; text-transform: uppercase; color: var(--ci_color_white); letter-spacing: -1px; margin: 0px 0px 20px 0px; padding: 0px 0px 15px 0px; position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } .content_box_fatured_image_border div.content_box_fatured_image_border_heading a, .content_box_fatured_image_border div.content_box_fatured_image_border_heading a:link, .content_box_fatured_image_border div.content_box_fatured_image_border_heading a:visited { } .content_box_fatured_image:hover div.content_box_fatured_image_border h2 { } div.content_box_fatured_readmore { margin: 15px 10px 0px 0px; padding: 0px 0px 0px 0px; } div.content_box_fatured_readmore strong { font-weight: 600; color: var(--ci_color_accent_1_hover); } a.content_box_fatured_readmore_href, a.content_box_fatured_readmore_href:link { color: var(--ci_color_black); font-weight: 600; float: right; text-decoration: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 25px; position: relative; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } a.content_box_fatured_readmore_href:hover { color: var(--ci_color_accent_1_hover); } a.content_box_fatured_readmore_href:before { content: "\f105"; font-family: 'Font Awesome 5 Pro'; font-weight: 100; font-size: 1.4em; color: var(--ci_color_black); -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; margin: 0px 0px 0px 0px; padding: 0px 10px 0px 10px; position: absolute; left: 0px; display: inline-block; } a.content_box_fatured_readmore_href:hover:before { color: var(--ci_color_accent_1_hover); } .image_box_3 { border: 0px solid transparent; position: relative; } .image_box_3:before, .image_box_3:after, .image_box_3 span:before, .image_box_3 span:after { display: block; content: ''; width: 60px; height: 60px; position: absolute; } .image_box_3:before { top: 40px; left: 40px; border-top: 4px solid #ffffff; border-left: 4px solid #ffffff; } .image_box_3:after { top: 40px; right: 40px; border-top: 4px solid #ffffff; border-right: 4px solid #ffffff; } .image_box_3 span::before { bottom: 40px; left: 40px; border-bottom: 4px solid #ffffff; border-left: 4px solid #ffffff; } .image_box_3 span::after { bottom: 40px; right: 40px; border-bottom: 4px solid #ffffff; border-right: 4px solid #ffffff; } .image_box_3_:hover { border: 0px solid #A3DBF4; } /* .image_box_3:before, .image_box_3:after { width: 50px; height: 50px; content: ''; position: absolute; -webkit-transition: all 0.9s; -moz-transition: all 0.9s; -ms-transition: all 0.9s; -o-transition: all 0.9s; transition: all 0.9s; } .image_box_3:before { border-top: 4px solid #ffffff; border-left: 4px solid #ffffff; top: 20px; left: 20px; } */ .ball { pointer-events: none; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: gray; animation: implode 1s ease-in-out; animation-fill-mode: both; opacity: .5; z-index: 9999999; } @keyframes implode { 100% {transform: scale(0)} } /* MORPHING INTRO */ .morphing_intro { width: 100%; height: 100vh; position: fixed; top: 0px; left: 0px; z-index: 9999999; } .morphing_intro_content { background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background: -webkit-linear-gradient(top, #ffffff 0%,#f2f2f2 100%); background: linear-gradient(to bottom, #ffffff 0%,#f2f2f2 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); width: 100%; height: 100vh; text-align: center; position: relative; } .morphing_intro_content_enter { width: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } div.morphing_intro div.morphing_intro_shape_wrapper .shape { height: 100vh; width: 100%; display: block; fill: #f2f2f2; } .morphing_intro a.enter_href { font: normal 14px/20px 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 600; color: #888888; text-transform: uppercase; text-decoration: none; margin: 0px 0px 0px 0px; padding: 0px 8px 0px 8px; cursor: pointer; pointer-events: auto; } .morphing_intro a.enter_href:hover, .morphing_intro a.enter_href:focus { color: #888888; } /* MYRIAD PRO COMPARISON */ @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('../fonts/myriadpro/MYRIADPRO-REGULAR.woff') format('woff'); } @font-face { font-family: 'Myriad Pro Condensed'; font-style: normal; font-weight: normal; src: local('Myriad Pro Condensed'), url('../fonts/myriadpro/MYRIADPRO-COND.woff') format('woff'); } @font-face { font-family: 'Myriad Pro Condensed Italic'; font-style: normal; font-weight: normal; src: local('Myriad Pro Condensed Italic'), url('../fonts/myriadpro/MYRIADPRO-CONDIT.woff') format('woff'); } @font-face { font-family: 'Myriad Pro Light'; font-style: normal; font-weight: normal; src: local('Myriad Pro Light'), url('../fonts/myriadpro/MYRIADPRO-LIGHT.woff') format('woff'); } @font-face { font-family: 'Myriad Pro Semibold'; font-style: normal; font-weight: normal; src: local('Myriad Pro Semibold'), url('../fonts/myriadpro/MYRIADPRO-SEMIBOLD.woff') format('woff'); } @font-face { font-family: 'Myriad Pro Semibold Italic'; font-style: normal; font-weight: normal; src: local('Myriad Pro Semibold Italic'), url('../fonts/myriadpro/MYRIADPRO-SEMIBOLDIT.woff') format('woff'); } @font-face { font-family: 'Myriad Pro Bold Condensed'; font-style: normal; font-weight: normal; src: local('Myriad Pro Bold Condensed'), url('../fonts/myriadpro/MYRIADPRO-BOLDCOND.woff') format('woff'); } @font-face { font-family: 'Myriad Pro Bold'; font-style: normal; font-weight: normal; src: local('Myriad Pro Bold'), url('../fonts/myriadpro/MYRIADPRO-BOLD.woff') format('woff'); } @font-face { font-family: 'Myriad Pro Bold Italic'; font-style: normal; font-weight: normal; src: local('Myriad Pro Bold Italic'), url('../fonts/myriadpro/MYRIADPRO-BOLDIT.woff') format('woff'); } @font-face { font-family: 'Myriad Pro Bold Condensed Italic'; font-style: normal; font-weight: normal; src: local('Myriad Pro Bold Condensed Italic'), url('../fonts/myriadpro/MYRIADPRO-BOLDCONDIT.woff') format('woff'); } div.layout_featured_welcome_myriad { font: normal 14px/22px 'Myriad Pro Regular','Helvetica Neue',Helvetica,Arial,sans-serif !important; color: var(--ci_color_grey) !important; } div.layout_featured_welcome_myriad h1 { font: normal 42px/42px 'Myriad Pro Light','Helvetica Neue',Helvetica,Arial,sans-serif !important; color: var(--ci_color_grey) !important; margin: 0px 0px 30px 0px; padding: 0px 0px 30px 0px; } div.featured_welcome_top div.title_sub_1 { font: normal 14px/14px 'Myriad Pro Bold','Helvetica Neue',Helvetica,Arial,sans-serif !important; text-transform: uppercase; color: #656565; letter-spacing: 0px; margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px; display: inline-block; } div.layout_featured_welcome_myriad div.featured_welcome_content { font: 16px/22px 'Myriad Pro Light','Helvetica Neue',Helvetica,Arial,sans-serif !important; color: var(--ci_color_font_dark) !important; } div.layout_featured_welcome_myriad div.featured_welcome_content strong { font: 16px/22px 'Myriad Pro Semibold','Helvetica Neue',Helvetica,Arial,sans-serif !important; color: var(--ci_color_font_dark) !important; }