/* [FRONT OVERZICHT] */ .topmargin { margin: 250px 0 0 0; } .portwrap { margin: 0 0 30px 0; } .portwrap .imagewrap { z-index: 1; position: relative; } .portwrap .quote { font-size: 19px; line-height: 19px; font-weight: 700; text-transform: uppercase; display: inline-block; width: 100%; color: #FFF; z-index: 2; margin: 15px 0; text-shadow: 2px 2px 10px rgba(0,0,0,0.75); } .portwrap .quote:before { display: inline-block; content: open-quote; margin-right: 5px; } .portwrap .quote:after { display: inline-block; content: close-quote; margin-left: 5px; } .portwrap .imagewrap .linkedin { position: absolute; bottom: 15px; right: 15px; } .portwrap .imagewrap .linkedin a { font-size: 40px; color: #FFF; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .portwrap .imagewrap .linkedin a:hover, .portwrap .imagewrap .linkedin a:focus, .portwrap .imagewrap .linkedin a:active { color: rgba(220, 28, 35, 1); } .portwrap h2.title { position: relative; font-size: 50px; font-weight: 700; text-transform: uppercase; margin-top: -20px; margin-left: 5px; z-index: 2; text-shadow: 2px 2px 10px rgba(0,0,0,0.75); } .portwrap h2.title a { color: #FFF; } .portwrap h2.title a:hover, .portwrap h2.title a:focus, .portwrap h2.title a:active { color: #DC1C23; text-decoration: none; } .portwrap h3.title { font-size: 25px; font-weight: 700; text-transform: uppercase; margin-top: -15px; margin-left: 5px; z-index: 2; color: #FFF; text-shadow: 2px 2px 10px rgba(0,0,0,0.75); } .portwrap .btnwrap { text-align: right; line-height: 60px; margin: 15px 0 0 0; } /* [VCARD] */ .imagevcwrap { background: #FFF; -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -ms-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -o-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); } .mensenbtn { position: absolute; left: 15px; top: -120px; } h1.menstitle { } h2.menstitle { font-size: 20px; } h3.menstitlebig { margin: 0 0 30px 0; color: #FFF; text-transform: uppercase; font-weight: 700; font-size: 40px; line-height: 40px; text-shadow: 2px 2px 5px rgba(0,0,0,0.25); } ul.menslist { list-style-type: none; padding-left: 0; } ul.menslist li { font-size: 20px; } ul.menslist li a { font-size: 16px; font-weight: 700; color: #DC1C23; transition: all ease .15s; } ul.menslist li a:hover, ul.menslist li a:focus, ul.menslist li a:active { color: #DC1C23; text-decoration: none; } ul.menslist li .svg-inline--fa { margin: 0 10px 0 0; } ul.menslist li a:before { content: "→"; margin: 0 10px 0 -25px; opacity: 0; transition: all ease .5s; } ul.menslist li a:hover:before, ul.menslist li a:focus:before, ul.menslist li a:active:before { margin: 0 10px 0 0; opacity: 1; } .addbtn { background: #fafafa; background: -moz-linear-gradient(top, #fafafa 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #fafafa 0%,#dedede 100%); background: -o-linear-gradient(top, #fafafa 0%,#dedede 100%); background: -ms-linear-gradient(top, #fafafa 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#dedede',GradientType=0 ); background: linear-gradient(top, #fafafa 0%,#dedede 100%); border: 1px solid #BFBFBF; border-radius: 4px 4px 4px 4px; box-shadow: 1px 1px 2px #4f4f4f; color: #333333; float: left; margin: 5px; padding: 5px 10px; text-decoration: none; text-shadow: 1px 1px 0 #FFFFFF; } .addbtn img { margin-left: -5px; padding: 0 5px 0 0; } .addbtn:hover { background: #dedede; background: -moz-linear-gradient(top, #dedede 0%, #c4c4c4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(100%,#c4c4c4)); background: -webkit-linear-gradient(top, #dedede 0%,#c4c4c4 100%); background: -o-linear-gradient(top, #dedede 0%,#c4c4c4 100%); background: -ms-linear-gradient(top, #dedede 0%,#c4c4c4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c4c4c4',GradientType=0 ); background: linear-gradient(top, #dedede 0%,#c4c4c4 100%); text-shadow: 1px 1px 0 #E5E5E5; color: #101010; cursor:pointer; } .cat_wrapper { display: inline-block; margin-bottom: 60px; padding-bottom:0px; width:100%; } .tellie { color: #123F51; font-size: 14px; font-weight: 700; padding: 0 0 5px 0; } .emailtje { color: #123F51; font-size: 14px; font-weight: 700; padding: 0 0 5px 0; } .tellie a, .emailtje a { color: #0573AA; } .tellie a:hover, .tellie a:focus, .tellie a:active, .emailtje a:hover, .emailtje a:focus, .emailtje a:active { color: #FF9A34; } .tellie .svg-inline--fa, .emailtje .svg-inline--fa { font-size: 20px !important; margin-right: 5px; margin-bottom: -2px; } .regio { color: #123F51; font-size: 14px; font-weight: 700; padding: 10px 0 10px 0; } .cat_title { position: relative; display: block; width: 100%; } .cat_wrapper h2 { display: block; margin: 0 0 30px 0; font-size: 25px; font-weight: 300; color: #0E73A8; } .cat_title a { display: inline-block; } .cat_title .adminmenu { position: absolute; right: 0; top: 0; } .img img { width:100%; } /* [PORTFOLIOLIST] */ ul.portfoliolist { list-style-type: none; padding-left: 0; margin: 0; } ul.portfoliolist li { font-size: 16px; color: #333; margin: 0 0 5px 0; } ul.portfoliolist li:last-child { margin: 0; } ul.portfoliolist li a { position: relative; display: block; padding: 5px 20px; font-size: 16px; font-weight: 700; color: rgba(44, 44, 44, 1); border: 1px solid rgba(44, 44, 44, 1); z-index: 1; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } ul.portfoliolist li a:hover { color: #FFF; text-shadow: 2px 2px 5px rgba(0,0,0,0.55); text-decoration: none; } ul.portfoliolist li a:focus, ul.portfoliolist li a:active { color: rgba(44, 44, 44, 1); text-decoration: none; } ul.portfoliolist li a:before { content: " "; display: block; position: absolute; background: #DC1C23; bottom: 0; left: 0%; width: 0%; height: 100%; margin: 0 auto; transition: all 0.5s; z-index: -1; } ul.portfoliolist li a:hover:before { width: 100%; height: 100%; left: 0%; } /* [ADMIN] */ #portfolio_admin { margin: 0 0 20px 0; } .editimg { position:absolute; top: 5px; left: 20px; z-index: 4; } .editdel { position: absolute; top: 5px; right: 25px; z-index: 4; } .editedit { position: absolute; top: 5px; right: 45px; z-index: 4; } .moveimg { position: absolute; bottom: 25px; left: 25px; z-index: 4; }