/* Theme Name: Aphollo Theme URI: http://www.ibermega.com/themes/aphollo Author: Miguel Ángel Rico Author URI: http://www.ibermega.com/themes/ Description: Aphollo is an web template for business and portfolio that can be used for personal or corporate website. Tema options for broad information relevant corporate or personal data for visitors where you can add your brand logo and corporate image header. Assets PSD for modify their designs company. Aphollo is also very light for SEO positioning. Version: 1.0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: aphollo Tags: responsive-layout, blue, white, gray, two-columns, custom-background, custom-header, threaded-comments, sticky-post, translation-ready, microformats, custom-menu, custom-colors, theme-options, featured-images */ /* WARNING! DO NOT EDIT THIS FILE! To make it easy to update your theme, you should not edit the styles in this file. Instead use the custom.css file to add your styles. You can copy a style from this file and paste it in custom.css and it will override the style in this file. You have been warned! :) */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 Reset 2.0 Typography 3.0 Elements 4.0 Forms 5.0 Navigation 5.1 Links 5.2 Menus 6.0 Accessibility 7.0 Alignments 8.0 Clearings 9.0 Widgets 10.0 Content 10.1 Posts and pages 10.2 Asides 10.3 Comments 11.0 Infinite scroll 12.0 Media 12.1 Captions 12.2 Galleries --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 Reset --------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } html { font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */ overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */ -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ box-sizing: border-box; /* Apply a natural box layout model to the document; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } body { /* background: #fff; Fallback for when there is no custom background color defined. */ } .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.container:before,.container:after{display:table;content:" "}.container:after{clear:both}.container:before,.container:after{display:table;content:" "}.container:after{clear:both}@media(min-width:95%){.container{width:95%}} @media(min-width:1250px){.container{width:1250px}} article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } #masthead{ background-color: #215266; padding-top: 0px; padding-bottom: 0px; } #masthead h1 a{ font-size: 52px !important; text-decoration: none; font-weight: bold; color:#fff; } #masthead h2{ font-weight: bold; font-size:32px !important; color:#e5e5e5; } #masthead h1 a:hover{ color:#3d7c95; } .trademark { float: right !important; } @media screen and (max-width: 48em) { #masthead h1 a{ font-size: 32px !important; text-decoration: none; } #masthead h2{ font-size:22px !important; } } .site-branding { text-align: left; } @media screen and (max-width: 48em) { .site-branding { text-align: center; } .trademark { margin-right: 25%; margin-left: 25%; } } #site-navigation{ text-align: center; display: block; } #colophon { background-color: #143745; padding-top: 11px; padding-bottom: 11px; border-top-width: 3px; border-top-style: solid; border-top-color: #053447; line-height: 1.8em; font-weight: lighter; } #colophon a, .site-info{ color:#ccc !important; } #colophon a:hover{ color:#fafafa !important; } @media screen and (max-width: 48em) { #colophon a, .site-info{ color: #666 !important; display: block; } #colophon a:hover{ color:#fafafa !important; } } ol, ul { list-style: none; } table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a {text-decoration: none;} a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } a img { border: 0; } /*-------------------------------------------------------------- 2.0 Typography --------------------------------------------------------------*/ body, button, input, select, textarea { color: #404040; font-family: sans-serif; font-size: 6px; font-size: 1.6rem; line-height: 1.5; } .button { color: #404040; font-family: sans-serif; font-size: 6px; font-size: 1.6rem; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { clear: both; font-family: 'Poiret One', serif; } h1 { font-size:52px;} h2 { font-size:42px;} h3 { font-size:32px;} h4 { font-size:22px;} h5 { font-size:20px;} h6 { font-size:18px;} p { margin-bottom: 1.5em; } b { color:#215266; font-weight: bold; } strong { font-weight: bold; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-size: 1.5rem; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } small { font-size: 75%; } big { font-size: 125%; } /*-------------------------------------------------------------- 3.0 Elements --------------------------------------------------------------*/ hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } .img-circle {border-radius:50%} .img-rounded { border-radius: 7px; border: 4px solid #FFF; box-shadow:#ddd 1px 1px 1px 1px; } figure { margin: 0; } table { margin: 0 0 1.5em; width: 100%; } th { font-weight: bold; } /*-------------------------------------------------------------- 4.0 Forms --------------------------------------------------------------*/ button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ } button, input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, .8); cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ font-size: 12px; font-size: 1.2rem; line-height: 1; padding: .6em 1em .4em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02); } button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { border-color: #aaa #bbb #bbb; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); } input[type="checkbox"], input[type="radio"] { padding: 0; /* Addresses excess padding in IE8/9 */ } input[type="search"] { -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] { padding: 3px; } textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: 3px; vertical-align: top; /* Improves readability and alignment in all browsers */ width: 100%; } /*-------------------------------------------------------------- 5.0 Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- 5.1 Links --------------------------------------------------------------*/ a { color: royalblue; } a:visited { color: purple; } a:hover, a:focus, a:active { color: midnightblue; } /*-------------------------------------------------------------- 5.2 Menus --------------------------------------------------------------*/ .headmenu { background-color: #143745; margin-bottom: 30px; } .main-navigation { clear: auto 0; display: block; float: left; width: 100%; background-color: #143745; } .main-navigation ul { list-style: none; margin: 0; padding-left: 0; } .main-navigation li { float: left; position: relative; background-color: #143745; margin-right:5px; } .main-navigation a { display: block; text-decoration: none; color: #ccc; padding: 10px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; left: -999em; z-index: 99999; } .main-navigation ul ul ul { left: -999em; top: 0; } .main-navigation ul ul a { width: 205px; } .main-navigation ul ul li { background-color:#143745; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; text-align:left; } .main-navigation li:hover > a { color:#fff; background-color:#215266; } .main-navigation li:active > a { color:#fff; background-color:#143745; } .main-navigation ul ul :hover > a { } .main-navigation ul ul a:hover { } .main-navigation ul li:hover > ul { left: auto; } .main-navigation ul ul li:hover > ul { left: 100%; } .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a { } /* Small menu */ .menu-toggle { display: none; margin-right: 45%; margin-left: 45%; margin-bottom: 10px; } @media screen and (max-width: 48em) { .menu-toggle, .main-navigation.toggled .nav-menu { display: block; } .headmenu {background-color: #215266;} .main-navigation { background-color: #215266; } .main-navigation ul{ display: none; } .main-navigation li { float: none; position: relative; background-color: #143745; text-align:left; } .main-navigation li:hover > a { background-color: #215266; } } .site-main .comment-navigation, .site-main .paging-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .comment-navigation .nav-previous, .paging-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-next, .paging-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } /*-------------------------------------------------------------- 6.0 Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 1.4rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar */ } /*-------------------------------------------------------------- 7.0 Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin: 0 auto; } /*-------------------------------------------------------------- 8.0 Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /*-------------------------------------------------------------- 9.0 Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; } .widget h4{ border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #3d7c95; padding-top: 10px; padding-left: 10px; text-shadow: #dadada 2px 2px 2px; font-size: 24px; color: #143745; margin-bottom: 10px; } .widget li{ text-decoration: none; list-style-type: none !important; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: transparent; padding-top: 3px; padding-bottom: 3px; } .widget li:before{content: '\f429';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 22px/1 'Genericons';vertical-align:middle;color:#5bafd1} .widget li:hover{ border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #06F; } /* Make sure select elements fit in widgets */ .widget select { max-width: 100%; } /* Search widget */ .widget_search .search-submit { display: none; width:100%; } .widget_search { width:100%; } /* Search menu */ .search_menu { width: 50%; float: right; margin-top: 5px; background-color:#215266; color:#fff !important; } .search_menu:focus{z-index:2; background-color:#143745; color:#fff !important} @media screen and (max-width: 48em) { .search_menu { width: 99%; float: left; background-color:#143745; } .search_menu:focus{z-index:2; background-color:#215266; color:#fff !important} } @media screen and (max-width: 48em) { .widget li:before{content: '\f418';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 1px/1 'Genericons';vertical-align:middle;color:#5bafd1} .widget li a{display:block;margin-bottom:0px;list-style:none;} .widget li a:hover{display:block;margin-bottom:0px;list-style:none;} } /*-------------------------------------------------------------- 10.0 Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- 10.1 Posts and pages --------------------------------------------------------------*/ .sticky { display: block; } .hentry { margin: 0 0 1.5em; } .byline, .updated:not(.published) { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } .page-links { clear: both; margin: 0 0 1.5em; } /*-------------------------------------------------------------- 10.2 Asides --------------------------------------------------------------*/ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /*-------------------------------------------------------------- 10.3 Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } /* Estilo de la caja completa en comentarios */ .comments-area { background-color: #fafafa; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; border: 1px solid #e5e5e5; border-radius: 7px; filter: alpha(opacity=87); -khtml-opacity: 0.87; -moz-opacity: 0.87; opacity: 0.87; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=87)"; margin-bottom: 20px; } .comments-area a { color:#000; text-shadow:#dadada 0px 1px 0px; } .comments-area a:hover { color:#555; text-shadow:#dadada 0px 1px 0px; } /* Estilo de cada comentario */ .conmment { background-color: #ffffff; font-size: 14px; color: #999; padding: 10px; margin-right: 30px; margin-bottom: 30px; border: 1px solid #ccc; border-radius: 7px; } /* Caja del formulario */ .conmment_formu { background-color: #e8f7ec; font-size: 14px; color: #000; padding: 10px; margin-bottom: 10px; border: 1px solid #e5e5e5; border-radius: 7px; } .conmment_formu label { color:#000; text-shadow:#dadada 0px 1px 0px; } .required {color:#F00;} .entry-date:before{content: '\f307';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 20px/1 'Genericons';vertical-align:middle;color:#5bafd1} .author:before{content: '\f304';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 20px/1 'Genericons';vertical-align:middle;color:#5bafd1} .tags-links:before{content: '\f302';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 20px/1 'Genericons';vertical-align:middle;color:#5bafd1} .edit-link:before{content: '\f411';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 20px/1 'Genericons';vertical-align:middle;color:#5bafd1} /*-------------------------------------------------------------- 11.0 Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */ .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- 12.0 Media --------------------------------------------------------------*/ .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers */ embed, iframe, object { max-width: 100%; } /*-------------------------------------------------------------- 12.1 Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; } .wp-caption-text { text-align: center; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } /*-------------------------------------------------------------- 12.2 Galleries --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; } /* * * Cute Grids v1.0.1 * Copyright 2014 Darren Newberry * http://www.cutegrids.com * Free to use under the MIT Licence * http://www.opensource.org/licenses/mit-license.php * */ *, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } /* Set the width of the row to what you like */ .row { margin:0 auto; } /* Nested row 1 level down */ /* Change the gutter if you like, currently set as 0.65em */ .row .row { width: auto; } [class*='cute-'] { float: left; position: relative; padding: 0.65rem; /* top, bottom, left and right padding for columns */ width:100%; } /* Remove this if you want the columns to float left when they overflow the row */ [class*='cute-']:last-of-type { float: right; } /* Clearfix */ .row:after, .group:after, .clearfix:after { content: ""; display: table; clear: both } .container:before, .container:after { display: table; content: " "; } .container:after { clear: both; } .left { float: left !important; } .right { float: right !important; } /* Grid classes for phone screen widths */ @media only screen { .cute-1-phone { width: 8.3333333333333%; } .cute-2-phone { width: 16.666666666667%; } .cute-3-phone { width: 25%; } .cute-4-phone { width: 33.333333333333%; } .cute-5-phone { width: 41.666666666667%; } .cute-6-phone { width: 50%; } .cute-7-phone { width: 58.333333333333%; } .cute-8-phone { width: 66.666666666667%; } .cute-9-phone { width: 75%; } .cute-10-phone { width: 83.333333333333%; } .cute-11-phone { width: 91.666666666667%; } .cute-12-phone { width: 100%; } /* offset for phone size */ .cute-0-phone-offset { margin: 0; } .cute-1-phone-offset { margin-left: 8.3333333333333%; } .cute-2-phone-offset { margin-left: 16.666666666667%; } .cute-3-phone-offset { margin-left: 25%; } .cute-4-phone-offset { margin-left: 33.333333333333%; } .cute-5-phone-offset { margin-left: 41.666666666667%; } .cute-6-phone-offset { margin-left: 50%; } .cute-7-phone-offset { margin-left: 58.333333333333%; } .cute-8-phone-offset { margin-left: 66.666666666667%; } .cute-9-phone-offset { margin-left: 75%; } .cute-10-phone-offset { margin-left: 83.333333333333%; } .cute-11-phone-offset { margin-left: 91.666666666667%; } .cute-1-phone-push { left: 8.3333333333333%; } .cute-2-phone-push { left: 16.666666666667%; } .cute-3-phone-push { left: 25%; } .cute-4-phone-push { left: 33.333333333333%; } .cute-5-phone-push { left: 41.666666666667%; } .cute-6-phone-push { left: 50%; } .cute-7-phone-push { left: 58.333333333333%; } .cute-8-phone-push { left: 66.666666666667%; } .cute-9-phone-push { left: 75%; } .cute-10-phone-push { left: 83.333333333333%; } .cute-11-phone-push { left: 91.666666666667%; } .cute-1-phone-pull { right: 8.3333333333333%; } .cute-2-phone-pull { right: 16.666666666667%; } .cute-3-phone-pull { right: 25%; } .cute-4-phone-pull { right: 33.333333333333%; } .cute-5-phone-pull { right: 41.666666666667%; } .cute-6-phone-pull { right: 50%; } .cute-7-phone-pull { right: 58.333333333333%; } .cute-8-phone-pull { right: 66.666666666667%; } .cute-9-phone-pull { right: 75%; } .cute-10-phone-pull { right: 83.333333333333%; } .cute-11-phone-pull { right: 91.666666666667%; } .center-phone { margin-left: auto; margin-right:auto; float:none !important; } .uncenter-phone { margin-left: 0; margin-right: 0; float:left !important; } .uncenter-phone.right { float:right !important; } [class*='cute-'].phone-reset { margin-left: 0; margin-right: 0; left: auto; right: auto; float: left; } } /* Grid classes for tablet screen widths */ @media only screen and (min-width: 48em) { .cute-1-tablet { width: 8.3333333333333%; } .cute-2-tablet { width: 16.666666666667%; } .cute-3-tablet { width: 25%; } .cute-4-tablet { width: 33.333333333333%; } .cute-5-tablet { width: 41.666666666667%; } .cute-6-tablet { width: 50%; } .cute-7-tablet { width: 58.333333333333%; } .cute-8-tablet { width: 66.666666666667%; } .cute-9-tablet { width: 75%; } .cute-10-tablet { width: 83.333333333333%; } .cute-11-tablet { width: 91.666666666667%; } .cute-12-tablet { width: 100%; } /* offset for tablet screen widths */ .cute-0-tablet-offset { margin: 0; } .cute-1-tablet-offset { margin-left: 8.3333333333333%; } .cute-2-tablet-offset { margin-left: 16.666666666667%; } .cute-3-tablet-offset { margin-left: 25%; } .cute-4-tablet-offset { margin-left: 33.333333333333%; } .cute-5-tablet-offset { margin-left: 41.666666666667%; } .cute-6-tablet-offset { margin-left: 50%; } .cute-7-tablet-offset { margin-left: 58.333333333333%; } .cute-8-tablet-offset { margin-left: 66.666666666667%; } .cute-9-tablet-offset { margin-left: 75%; } .cute-10-tablet-offset { margin-left: 83.333333333333%; } .cute-11-tablet-offset { margin-left: 91.666666666667%; } .cute-1-tablet-push { left: 8.3333333333333%; } .cute-2-tablet-push { left: 16.666666666667%; } .cute-3-tablet-push { left: 25%; } .cute-4-tablet-push { left: 33.333333333333%; } .cute-5-tablet-push { left: 41.666666666667%; } .cute-6-tablet-push { left: 50%; } .cute-7-tablet-push { left: 58.333333333333%; } .cute-8-tablet-push { left: 66.666666666667%; } .cute-9-tablet-push { left: 75%; } .cute-10-tablet-push { left: 83.333333333333%; } .cute-11-tablet-push { left: 91.666666666667%; } .cute-1-tablet-pull { right: 8.3333333333333%; } .cute-2-tablet-pull { right: 16.666666666667%; } .cute-3-tablet-pull { right: 25%; } .cute-4-tablet-pull { right: 33.333333333333%; } .cute-5-tablet-pull { right: 41.666666666667%; } .cute-6-tablet-pull { right: 50%; } .cute-7-tablet-pull { right: 58.333333333333%; } .cute-8-tablet-pull { right: 66.666666666667%; } .cute-9-tablet-pull { right: 75%; } .cute-10-tablet-pull { right: 83.333333333333%; } .cute-11-tablet-pull { right: 91.666666666667%; } .center-tablet { margin-left: auto; margin-right:auto; float:none !important; } .uncenter-tablet { margin-left: 0; margin-right: 0; float:left !important; } .uncenter-tablet.right { float:right !important; } [class*='cute-'].tablet-reset { margin-left: 0; margin-right: 0; left: auto; right: auto; float: left; } } /* Grid classes for wide Tablet / Laptop to Small Desktop Size */ @media only screen and (min-width: 62em) { .cute-1-laptop { width: 8.3333333333333%; } .cute-2-laptop { width: 16.666666666667%; } .cute-3-laptop { width: 25%; } .cute-4-laptop { width: 33.333333333333%; } .cute-5-laptop { width: 41.666666666667%; } .cute-6-laptop { width: 50%; } .cute-7-laptop { width: 58.333333333333%; } .cute-8-laptop { width: 66.666666666667%; } .cute-9-laptop { width: 75%; } .cute-10-laptop { width: 83.333333333333%; } .cute-11-laptop { width: 91.666666666667%; } .cute-12-laptop { width: 100%; } /* offset for tablet laptop widths */ .cute-0-laptop-offset { margin: 0; } .cute-1-laptop-offset { margin-left: 8.3333333333333%; } .cute-2-laptop-offset { margin-left: 16.666666666667%; } .cute-3-laptop-offset { margin-left: 25%; } .cute-4-laptop-offset { margin-left: 33.333333333333%; } .cute-5-laptop-offset { margin-left: 41.666666666667%; } .cute-6-laptop-offset { margin-left: 50%; } .cute-7-laptop-offset { margin-left: 58.333333333333%; } .cute-8-laptop-offset { margin-left: 66.666666666667%; } .cute-9-laptop-offset { margin-left: 75%; } .cute-10-laptop-offset { margin-left: 83.333333333333%; } .cute-11-laptop-offset { margin-left: 91.666666666667%; } .cute-1-laptop-push { left: 8.3333333333333%; } .cute-2-laptop-push { left: 16.666666666667%; } .cute-3-laptop-push { left: 25%; } .cute-4-laptop-push { left: 33.333333333333%; } .cute-5-laptop-push { left: 41.666666666667%; } .cute-6-laptop-push { left: 50%; } .cute-7-laptop-push { left: 58.333333333333%; } .cute-8-laptop-push { left: 66.666666666667%; } .cute-9-laptop-push { left: 75%; } .cute-10-laptop-push { left: 83.333333333333%; } .cute-11-laptop-push { left: 91.666666666667%; } .cute-1-laptop-pull { right: 8.3333333333333%; } .cute-2-laptop-pull { right: 16.666666666667%; } .cute-3-laptop-pull { right: 25%; } .cute-4-laptop-pull { right: 33.333333333333%; } .cute-5-laptop-pull { right: 41.666666666667%; } .cute-6-laptop-pull { right: 50%; } .cute-7-laptop-pull { right: 58.333333333333%; } .cute-8-laptop-pull { right: 66.666666666667%; } .cute-9-laptop-pull { right: 75%; } .cute-10-laptop-pull { right: 83.333333333333%; } .cute-11-laptop-pull { right: 91.666666666667%; } .center-laptop { margin-left: auto; margin-right:auto; float:none !important; } .uncenter-laptop { margin-left: 0; margin-right: 0; float:left !important; } .uncenter-laptop.right { float:right !important; } [class*='cute-'].laptop-reset { margin-left: 0; margin-right: 0; left: auto; right: auto; float: left; } } /* Grid Classes for Large Desktop Size */ .show-desktop { display: none; } @media only screen and (min-width: 75em) { .cute-1-desktop { width: 8.3333333333333%; } .cute-2-desktop { width: 16.666666666667%; } .cute-3-desktop { width: 25%; } .cute-4-desktop { width: 33.333333333333%; } .cute-5-desktop { width: 41.666666666667%; } .cute-6-desktop { width: 50%; } .cute-7-desktop { width: 58.333333333333%; } .cute-8-desktop { width: 66.666666666667%; } .cute-9-desktop { width: 75%; } .cute-10-desktop { width: 83.333333333333%; } .cute-11-desktop { width: 91.666666666667%; } .cute-12-desktop { width: 100%; } /* offset for tablet laptop widths */ .cute-0-desktop-offset { margin: 0; } .cute-1-desktop-offset { margin-left: 8.3333333333333%; } .cute-2-desktop-offset { margin-left: 16.666666666667%; } .cute-3-desktop-offset { margin-left: 25%; } .cute-4-desktop-offset { margin-left: 33.333333333333%; } .cute-5-desktop-offset { margin-left: 41.666666666667%; } .cute-6-desktop-offset { margin-left: 50%; } .cute-7-desktop-offset { margin-left: 58.333333333333%; } .cute-8-desktop-offset { margin-left: 66.666666666667%; } .cute-9-desktop-offset { margin-left: 75%; } .cute-10-desktop-offset { margin-left: 83.333333333333%; } .cute-11-desktop-offset { margin-left: 91.666666666667%; } .cute-1-desktop-push { left: 8.3333333333333%; } .cute-2-desktop-push { left: 16.666666666667%; } .cute-3-desktop-push { left: 25%; } .cute-4-desktop-push { left: 33.333333333333%; } .cute-5-desktop-push { left: 41.666666666667%; } .cute-6-desktop-push { left: 50%; } .cute-7-desktop-push { left: 58.333333333333%; } .cute-8-desktop-push { left: 66.666666666667%; } .cute-9-desktop-push { left: 75%; } .cute-10-desktop-push { left: 83.333333333333%; } .cute-11-desktop-push { left: 91.666666666667%; } .cute-1-desktop-pull { right: 8.3333333333333%; } .cute-2-desktop-pull { right: 16.666666666667%; } .cute-3-desktop-pull { right: 25%; } .cute-4-desktop-pull { right: 33.333333333333%; } .cute-5-desktop-pull { right: 41.666666666667%; } .cute-6-desktop-pull { right: 50%; } .cute-7-desktop-pull { right: 58.333333333333%; } .cute-8-desktop-pull { right: 66.666666666667%; } .cute-9-desktop-pull { right: 75%; } .cute-10-desktop-pull { right: 83.333333333333%; } .cute-11-desktop-pull { right: 91.666666666667%; } .center-desktop { margin-left: auto; margin-right:auto; float:none !important; } .uncenter-desktop { margin-left: 0; margin-right: 0; float:left !important; } .uncenter-desktop.right { float:right !important; } [class*='cute-'].desktop-reset { margin-left: 0; margin-right: 0; left: auto; right: auto; float: left; } } @media only screen and (max-width: 30em){ .cute-100 { width:100%;} } /* Make visible or hidden block elements */ .show-phone, .show-tablet, .show-laptop, .show-desktop { display: none !important; } .hide-phone { display: block !important; } @media only screen and (max-width: 47.938em) { .phone { width: 100%; } .hide-phone { display:none !important; } .show-phone { display: block !important; } } @media only screen and (min-width: 48em) and (max-width: 61.938em) { .hide-tablet { display: none !important; } .show-tablet { display: block !important; } } @media only screen and (min-width: 62em) and (max-width: 74.938em) { .hide-laptop { display: none !important; } .show-laptop { display: block !important; } } @media only screen and (min-width: 75em) { .hide-desktop { display: none !important; } .show-desktop { display: block !important; } } /* make images responsive */ .responsive-img { display: block; height: auto; max-width: 100%; } /* Optional Extras */ /* something to keep tables horizontal with scroll when on small screen * Useful if table is wide. Set media query to point where table needs it */ /* @media only screen and (max-width: 47.938em) { .table-respond { width: 100%; overflow-x: scroll; overflow-y: hidden; } } */ /* Icons Social */ .list-inline {list-style:none; margin-bottom:0px} .list-inline>li{display:inline-block;} #N{display:none} #Y{display:true} .genericon-facebook:before{content:'\f203';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 36px/1 'Genericons';vertical-align:middle;color:#5bafd1} .genericon-twitter:before{content:'\f202';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 36px/1 'Genericons';vertical-align:middle; color:#5bafd1} .genericon-youtube:before{content:'\f213';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 36px/1 'Genericons';vertical-align:middle; color:#5bafd1} .genericon-vimeo:before{content:'\f212';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 36px/1 'Genericons';vertical-align:middle; color:#5bafd1} .genericon-feed:before{content:'\f413';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 36px/1 'Genericons';vertical-align:middle; color:#5bafd1} .genericon-googleplus:before{content:'\f206';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 36px/1 'Genericons';vertical-align:middle; color:#5bafd1} .genericon-menu:before{content:'\f419';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 16px/1 'Genericons'; vertical-align:middle; color:#5bafd1} @media screen and (max-width: 48em) { .list-inline>li{display:inline-block;} } /* Frontpage 1 */ .sectionprimer{ background-color: #fafafa; text-align: center; margin-top: -30px; padding-top: 70px; padding-bottom: 70px; } .sectionprimer h2{ font-size:56px; } .sectionprimer p{ color:#999; } @media screen and (max-width: 48em) { .sectionprimer button{ margin-bottom:70px; } .sectionprimer h2{ font-size:45px; } } /* Frontpage 2 */ .sectionsegun{ background-color: #fff; text-align: center; margin-top: 0px; padding-top: 90px; padding-bottom: 90px; } .sectionsegun h2{ font-size: 56px; } .sectionsegun p{ color:#999; margin-bottom:70px; } @media screen and (max-width: 48em) { .sectionsegun h2{ font-size: 45px; } } /* Frontpage 3 */ .sectiontercer{ background-color: #fff; text-align: center; margin-top: 0px; padding-top: 10px; padding-bottom: 30px; } .sectiontercer h2{ font-size: 56px; } .sectiontercer h4{ margin-bottom: 25px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #dadada; margin-left:15%; margin-right:15%; } .sectiontercer p{ color:#999; margin-bottom:70px; } @media screen and (max-width: 48em) { .sectiontercer h2{ font-size: 45px; } .sectiontercer h4{ margin-bottom:18px; } } /* Frontpage Posts */ .sectionposts{ background-color: #fafafa; margin-top: 0px; padding-top: 10px; padding-bottom: 30px; } .sectionposts h3{ font-size: 32px; } .sectionposts h4{ margin-bottom: 25px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #dadada; margin-left:15%; margin-right:15%; } .sectionposts p{ color:#999; margin-bottom:70px; } @media screen and (max-width: 48em) { .sectionposts h3{ font-size: 28px; } .sectionposts h4{ margin-bottom:18px; } } /* Frontpage Footer */ .sectionfooter{ background-color: #e1ecf0; margin-top: 0px; padding-top: 30px; padding-bottom: 30px; } .sectionfooter li{ font-size: 14px; } .sectionfooter ul{ color: #999; padding-left: 10px !important; list-style:none; } .sectionfooter li:before{content: '\f418';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 24px/1 'Genericons';vertical-align:middle;color:#5bafd1} @media screen and (max-width: 48em) { .sectionfooter h5 h6{ font-size: 45px; font-weight: bold !important; } .sectionfooter ul{ margin-bottom:30px; padding-left: 0px !important; list-style:none; } .sectionfooter li:before{content: '\f418';display:inline-block;-webkit-font-smoothing:antialiased;font:normal 1px/1 'Genericons';vertical-align:middle;color:#5bafd1} .sectionfooter li a{display:block;padding:8px;background-color:#215266;border-radius:4px;margin-bottom:-20px;text-align:center;list-style:none;color:#e5e5e5;} .sectionfooter li a:hover{display:block;padding:8px;background-color:#143745;border-radius:4px;margin-bottom:-20px;text-align:center;list-style:none;color:#fff;} } .transbody{background-color:#FFF; filter:alpha(opacity=97); -khtml-opacity:0.97; -moz-opacity:0.97; opacity:0.97; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; margin-bottom:30px;-webkit-border-radius:10px; padding:20px}