3.2.12 (Media Mark) db84e45494f76332247db3e76feb8505bfc2711e o:Sass::Tree::RootNode : @linei:@has_childrenT:@template"f $modal-padding: 3em; $modal-close-color: $light-gray; $modal-image-height: 135px; $modal-image-width: $modal-image-height; .modal { label { cursor: pointer; img { $img-width: 300px; border-radius: $img-width/2; max-width: $img-width; margin: auto; display: block; margin-bottom: 2em; } } input[type="checkbox"] { display: none; } } .modal-window { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: left; background: rgba(0,0,0, .9); transition: opacity .25s ease; z-index: 999; .modal-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; } .modal-inner { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; width: 95%; margin: auto; overflow: auto; background: #fff; padding: $modal-padding; max-height: 70%; @include media($medium-screen) { width: 50%; } .img-wrapper-modal { display: block; height: $modal-image-height; width: $modal-image-width; border-radius: 190px; background-color: $light-gray; img { padding: 30px; content: ''; height: $modal-image-height; width: $modal-image-width; display: block; } } h1 { text-align: left; color: $base-font-color; text-transform: capitalize; margin-bottom: .6em; } p { max-width: 100% !important; padding: 0; } p.intro { color: $blue; font-family: $sans-serif; line-height: 1.6em; margin-bottom: 1.7em; text-align: left; font-size: $base-font-size; } p.body { color: $base-font-color; line-height: 1.45em; text-align: left; font-size: $base-font-size; @include media($medium-screen) { @include columns(2 8em); } } a.cta { display: inline-block; margin-top: 1em; margin-right: .5em; color: #fff; &:last-child { padding-left: 2em; padding-right: 2em; } } } .modal-close { position: fixed; right: $modal-padding /2; top: $modal-padding /2; width: 1.1em; height: 1.1em; cursor: pointer; &:after, &:before { content: ''; position: absolute; width: 2px; height: 1.5em; background: $modal-close-color; display: block; @include transform(rotate(45deg)); left: 50%; margin: -3px 0 0 -1px; top: 0; } &:hover:after, &:hover:before { background: darken($modal-close-color, 10); } &:before { @include transform(rotate(-45deg)); } } } .modal-state:checked + .modal-window { opacity: 1; visibility: visible; } .modal-state:checked + .modal-window .modal__inner { top: 0; } .btn { @include button(simple, $base-accent-color); font-size: $base-font-size; } p img { max-width: 200px; height: auto; float: left; margin: 0 1em 1em 0; } // Based on code by Kasper Mikiewicz :@children[o:Sass::Tree::VariableNode : @expro:Sass::Script::Number ;i:@denominator_units[:@numerator_units["em:@original"3em: @valuei: @options{;i: @name"modal-padding; [: @guarded0;@o; ; o:Sass::Script::Variable ;i;"light-gray:@underscored_name"light_gray;@;i;"modal-close-color; [;0;@o; ; o; ;i; [;["px;" 135px;i;@;i;"modal-image-height; [;0;@o; ; o; ;i ;"modal-image-height;"modal_image_height;@;i ;"modal-image-width; [;0;@o:Sass::Tree::RuleNode ;i :@parsed_ruleso:"Sass::Selector::CommaSequence;i : @members[o:Sass::Selector::Sequence;[o:#Sass::Selector::SimpleSequence ;i : @sourceso:Set: @hash{: @subject0;[o:Sass::Selector::Class;i ;[" modal:@filename";!@1;!@1;T: @tabsi; [o; ;i ;o;;i ;[o;;[o; ;i ;o;;{;0;[o:Sass::Selector::Element ;i ;[" label:@namespace0;!";!@?;!@?;T;"i; [o:Sass::Tree::PropNode ;i ;[" cursor:@prop_syntax:new;"i; [;o:Sass::Script::String: @type:identifier;" pointer;@;@o; ;i;o;;i;[o;;[o; ;i;o;;{;0;[o;# ;i;["img;$0;!";!@S;!@S;T;"i; [ o; ; o; ;i; [;["px;" 300px;i,;@;i;"img-width; [;0;@o;% ;i;["border-radius;&;';"i; [;o:Sass::Script::Operation ;i:@operand2o; ;i; [;[;"2;i;@;@:@operator:div:@operand1o; ;i;"img-width;"img_width;@;@o;% ;i;["max-width;&;';"i; [;o; ;i;"img-width;"img_width;@;@o;% ;i;[" margin;&;';"i; [;o;(;);*;" auto;@;@o;% ;i;[" display;&;';"i; [;o;(;);*;" block;@;@o;% ;i;["margin-bottom;&;';"i; [;o;(;);*;"2em;@;@;@: @rule["img;@;0[" labelo; ;i;o;;i;[o;;[o; ;i;o;;{;0;[o;# ;i;[" input;$0;!"o:Sass::Selector::Attribute ;i;[" type: @flags0;[""checkbox";$0;!@;-"=;!@;!@;T;"i; [o;% ;i;[" display;&;';"i; [;o;(;);*;" none;@;@;@;0["input[type="checkbox"];@;0[" .modalo; ;i;o;;i;[o;;[o; ;i;o;;{;0;[o; ;i;["modal-window;!";!@;!@;T;"i; [o;% ;i;[" opacity;&;';"i; [;o;(;);*;"0;@;@o;% ;i ;["visibility;&;';"i; [;o;(;);*;" hidden;@;@o;% ;i!;[" position;&;';"i; [;o;(;);*;" fixed;@;@o;% ;i";["top;&;';"i; [;o;(;);*;"0;@;@o;% ;i#;[" right;&;';"i; [;o;(;);*;"0;@;@o;% ;i$;[" bottom;&;';"i; [;o;(;);*;"0;@;@o;% ;i%;[" left;&;';"i; [;o;(;);*;"0;@;@o;% ;i&;["text-align;&;';"i; [;o;(;);*;" left;@;@o;% ;i';["background;&;';"i; [;o:Sass::Script::Funcall ;i';" rgba: @splat0;@:@keywords{: @args[ o; ;i'; @c;[;"0;i;@o; ;i'; @c;[;"0;i;@o; ;i'; @c;[;"0;i;@o; ;i'; @c;[;"0.9;f0.90000000000000002;@;@o;% ;i(;["transition;&;';"i; [;o;(;);*;"opacity .25s ease;@;@o;% ;i);[" z-index;&;';"i; [;o;(;);*;"999;@;@o; ;i+;o;;i+;[o;;[o; ;i+;o;;{;0;[o; ;i+;[" modal-bg;!";!@ ;!@ ;T;"i; [ o;% ;i,;[" position;&;';"i; [;o;(;);*;" absolute;@;@o;% ;i-;["top;&;';"i; [;o;(;);*;"0;@;@o;% ;i.;[" right;&;';"i; [;o;(;);*;"0;@;@o;% ;i/;[" bottom;&;';"i; [;o;(;);*;"0;@;@o;% ;i0;[" left;&;';"i; [;o;(;);*;"0;@;@o;% ;i1;[" cursor;&;';"i; [;o;(;);*;" pointer;@;@;@;0[".modal-bgo; ;i4;o;;i4;[o;;[o; ;i4;o;;{;0;[o; ;i4;["modal-inner;!";!@>;!@>;T;"i; [o;% ;i5;["transition;&;';"i; [;o;(;);*;"top .25s ease;@;@o;% ;i6;[" position;&;';"i; [;o;(;);*;" absolute;@;@o;% ;i7;["top;&;';"i; [;o;(;);*;" -20%;@;@o;% ;i8;[" right;&;';"i; [;o;(;);*;"0;@;@o;% ;i9;[" bottom;&;';"i; [;o;(;);*;"0;@;@o;% ;i:;[" left;&;';"i; [;o;(;);*;"0;@;@o;% ;i;;[" width;&;';"i; [;o;(;);*;"95%;@;@o;% ;i<;[" margin;&;';"i; [;o;(;);*;" auto;@;@o;% ;i=;[" overflow;&;';"i; [;o;(;);*;" auto;@;@o;% ;i>;["background;&;';"i; [;o;(;);*;" #fff;@;@o;% ;i?;[" padding;&;';"i; [;o; ;i?;"modal-padding;"modal_padding;@;@o;% ;i@;["max-height;&;';"i; [;o;(;);*;"70%;@;@o:Sass::Tree::MixinNode ;iB;" media;T;40; [o;% ;iC;[" width;&;';"i; [;o;(;);*;"50%;@;@;@;5{;6[o; ;iB;"medium-screen;"medium_screen;@o; ;iF;o;;iF;[o;;[o; ;iF;o;;{;0;[o; ;iF;["img-wrapper-modal;!";!@;!@;T;"i; [ o;% ;iG;[" display;&;';"i; [;o;(;);*;" block;@;@o;% ;iH;[" height;&;';"i; [;o; ;iH;"modal-image-height;"modal_image_height;@;@o;% ;iI;[" width;&;';"i; [;o; ;iI;"modal-image-width;"modal_image_width;@;@o;% ;iJ;["border-radius;&;';"i; [;o;(;);*;" 190px;@;@o;% ;iK;["background-color;&;';"i; [;o; ;iK;"light-gray;"light_gray;@;@o; ;iM;o;;iM;[o;;[o; ;iM;o;;{;0;[o;# ;iM;["img;$0;!";!@;!@;T;"i; [ o;% ;iN;[" padding;&;';"i; [;o;(;);*;" 30px;@;@o;% ;iO;[" content;&;';"i; [;o;(;);*;"'';@;@o;% ;iP;[" height;&;';"i; [;o; ;iP;"modal-image-height;"modal_image_height;@;@o;% ;iQ;[" width;&;';"i; [;o; ;iQ;"modal-image-width;"modal_image_width;@;@o;% ;iR;[" display;&;';"i; [;o;(;);*;" block;@;@;@;0["img;@;0[".img-wrapper-modalo; ;iV;o;;iV;[o;;[o; ;iV;o;;{;0;[o;# ;iV;["h1;$0;!";!@;!@;T;"i; [ o;% ;iW;["text-align;&;';"i; [;o;(;);*;" left;@;@o;% ;iX;[" color;&;';"i; [;o; ;iX;"base-font-color;"base_font_color;@;@o;% ;iY;["text-transform;&;';"i; [;o;(;);*;"capitalize;@;@o;% ;iZ;["margin-bottom;&;';"i; [;o;(;);*;" .6em;@;@;@;0["h1o; ;i];o;;i];[o;;[o; ;i];o;;{;0;[o;# ;i];["p;$0;!";!@-;!@-;T;"i; [o;% ;i^;["max-width;&;';"i; [;o;(;);*;"100% !important;@;@o;% ;i_;[" padding;&;';"i; [;o;(;);*;"0;@;@;@;0["po; ;ib;o;;ib;[o;;[o; ;ib;o;;{;0;[o;# ;ib;["p;$0;!"o; ;ib;[" intro;!@I;!@I;!@I;T;"i; [ o;% ;ic;[" color;&;';"i; [;o; ;ic;" blue;" blue;@;@o;% ;id;["font-family;&;';"i; [;o; ;id;"sans-serif;"sans_serif;@;@o;% ;ie;["line-height;&;';"i; [;o;(;);*;" 1.6em;@;@o;% ;if;["margin-bottom;&;';"i; [;o;(;);*;" 1.7em;@;@o;% ;ig;["text-align;&;';"i; [;o;(;);*;" left;@;@o;% ;ih;["font-size;&;';"i; [;o; ;ih;"base-font-size;"base_font_size;@;@;@;0[" p.introo; ;ik;o;;ik;[o;;[o; ;ik;o;;{;0;[o;# ;ik;["p;$0;!"o; ;ik;[" body;!@;!@;!@;T;"i; [ o;% ;il;[" color;&;';"i; [;o; ;il;"base-font-color;"base_font_color;@;@o;% ;im;["line-height;&;';"i; [;o;(;);*;" 1.45em;@;@o;% ;in;["text-align;&;';"i; [;o;(;);*;" left;@;@o;% ;io;["font-size;&;';"i; [;o; ;io;"base-font-size;"base_font_size;@;@o;7 ;ip;" media;T;40; [o;7 ;iq;" columns;40; [;@;5{;6[o:Sass::Script::List ;iq:@separator: space;[o; ;iq; @c;[;"2;i;@o; ;iq; [;["em;"8em;i ;@;@;@;5{;6[o; ;ip;"medium-screen;"medium_screen;@;@;0[" p.bodyo; ;it;o;;it;[o;;[o; ;it;o;;{;0;[o;# ;it;["a;$0;!"o; ;it;["cta;!@;!@;!@;T;"i; [ o;% ;iu;[" display;&;';"i; [;o;(;);*;"inline-block;@;@o;% ;iv;["margin-top;&;';"i; [;o;(;);*;"1em;@;@o;% ;iw;["margin-right;&;';"i; [;o;(;);*;" .5em;@;@o;% ;ix;[" color;&;';"i; [;o;(;);*;" #fff;@;@o; ;iz;o;;iz;[o;;[o; ;iz;o;;{;0;[o:Sass::Selector::Parent;iz;!"o:Sass::Selector::Pseudo ;iz;["last-child: @arg0:@syntactic_type: class;!@;!@;!@;T;"i; [o;% ;i{;["padding-left;&;';"i; [;o;(;);*;"2em;@;@o;% ;i|;["padding-right;&;';"i; [;o;(;);*;"2em;@;@;@;0["&:last-child;@;0[" a.cta;@;0[".modal-innero; ;i|;o;;i|;[o;;[o; ;i|;o;;{;0;[o; ;i|;["modal-close;!";!@;!@;T;"i; [o;% ;i};[" position;&;';"i; [;o;(;);*;" fixed;@;@o;% ;i~;[" right;&;';"i; [;o;+ ;i~;,o; ;i~; @c;[;"2;i;@;@;-;.;/o; ;i~;"modal-padding;"modal_padding;@;@o;% ;i;["top;&;';"i; [;o;+ ;i;,o; ;i; @c;[;"2;i;@;@;-;.;/o; ;i;"modal-padding;"modal_padding;@;@o;% ;i;[" width;&;';"i; [;o;(;);*;" 1.1em;@;@o;% ;i;[" height;&;';"i; [;o;(;);*;" 1.1em;@;@o;% ;i;[" cursor;&;';"i; [;o;(;);*;" pointer;@;@o; ;i;o;;i;[o;;[o; ;i;o;;{;0;[o;;;i;!"o;< ;i;[" after;=0;>;?;!@K;!@Ko;;[" o; ;i;o;;{;0;[o;;;i;!@Ko;< ;i;[" before;=0;>;?;!@K;!@K;!@K;T;"i; [o;% ;i;[" content;&;';"i; [;o;(;);*;"'';@;@o;% ;i;[" position;&;';"i; [;o;(;);*;" absolute;@;@o;% ;i;[" width;&;';"i; [;o;(;);*;"2px;@;@o;% ;i;[" height;&;';"i; [;o;(;);*;" 1.5em;@;@o;% ;i;["background;&;';"i; [;o; ;i;"modal-close-color;"modal_close_color;@;@o;% ;i;[" display;&;';"i; [;o;(;);*;" block;@;@o;7 ;i;"transform;40; [;@;5{;6[o;3 ;i;" rotate;40;@;5{;6[o; ;i; [;["deg;" 45deg;i2;@o;% ;i;[" left;&;';"i; [;o;(;);*;"50%;@;@o;% ;i;[" margin;&;';"i; [;o;(;);*;"-3px 0 0 -1px;@;@o;% ;i;["top;&;';"i; [;o;(;);*;"0;@;@;@;0["&:after, &:beforeo; ;i;o;;i;[o;;[o; ;i;o;;{;0;[o;;;i;!"o;< ;i;[" hover;=0;>;?;!@o;< ;i;[" after;=0;>;?;!@;!@o;;[" o; ;i;o;;{;0;[o;;;i;!@o;< ;i;[" hover;=0;>;?;!@o;< ;i;[" before;=0;>;?;!@;!@;!@;T;"i; [o;% ;i;["background;&;';"i; [;o;3 ;i;" darken;40;@;5{;6[o; ;i;"modal-close-color;"modal_close_color;@o; ;i; @c;[;"10;i;@;@;@;0["&&:hover:after, &:hover:beforeo; ;i;o;;i;[o;;[o; ;i;o;;{;0;[o;;;i;!"o;< ;i;[" before;=0;>;?;!@;!@;!@;T;"i; [o;7 ;i;"transform;40; [;@;5{;6[o;3 ;i;" rotate;40;@;5{;6[o; ;i; [;["deg;" -45deg;i;@;@;0[" &:before;@;0[".modal-close;@;0[".modal-windowo; ;i;o;;i;[o;;[o; ;i;o;;{;0;[o; ;i;["modal-state;!"o;< ;i;[" checked;=0;>;?;!@;!@"+o; ;i;o;;{;0;[o; ;i;["modal-window;!@;!@;!@;T;"i; [o;% ;i;[" opacity;&;';"i; [;o;(;);*;"1;@;@o;% ;i;["visibility;&;';"i; [;o;(;);*;" visible;@;@;@;0[").modal-state:checked + .modal-windowo; ;i;o;;i;[o;;[ o; ;i;o;;{;0;[o; ;i;["modal-state;!"o;< ;i;[" checked;=0;>;?;!@(;!@("+o; ;i;o;;{;0;[o; ;i;["modal-window;!@(;!@(o; ;i;o;;{;0;[o; ;i;["modal__inner;!@(;!@(;!@(;T;"i; [o;% ;i;["top;&;';"i; [;o;(;);*;"0;@;@;@;0["7.modal-state:checked + .modal-window .modal__innero; ;i;o;;i;[o;;[o; ;i;o;;{;0;[o; ;i;["btn;!";!@P;!@P;T;"i; [o;7 ;i;" button;40; [;@;5{;6[o;( ;i;);*;" simple;@o; ;i;"base-accent-color;"base_accent_color;@o;% ;i;["font-size;&;';"i; [;o; ;i;"base-font-size;"base_font_size;@;@;@;0[" .btno; ;i;o;;i;[o;;[o; ;i;o;;{;0;[o;# ;i;["p;$0;!";!@qo; ;i;o;;{;0;[o;# ;i;["img;$0;!@q;!@q;!@q;T;"i; [ o;% ;i;["max-width;&;';"i; [;o;(;);*;" 200px;@;@o;% ;i;[" height;&;';"i; [;o;(;);*;" auto;@;@o;% ;i;[" float;&;';"i; [;o;(;);*;" left;@;@o;% ;i;[" margin;&;';"i; [;o;(;);*;"0 1em 1em 0;@;@;@;0[" p imgo:Sass::Tree::CommentNode ;i;): silent; [;[",/* Based on code by Kasper Mikiewicz */;@;@