/* Styles for dialog window */ #small-dialog,#small-dialog1{ background: white; padding:50px; text-align: left; max-width: 650px; margin: 40px auto; position: relative; text-align:center; } #small-dialog-it,#small-dialog-in,#small-dialog-fr,#small-dialog-sh,#small-dialog-sf,#small-dialog-su,#small-dialog-me,#small-dialog-ch,#small-dialog-pi,#small-dialog-am { background: white; padding:20px; text-align: left; max-width: 450px; margin: 40px auto; position: relative; text-align:center; } a.play-icon.popup-with-zoom-anim img:hover { opacity: 0.5; transition:0.5s all; -webkit-transition:0.5s all; -o-transition:0.5s all; -moz-transition:0.5s all; -ms-transition:0.5s all; } .portfolio-items{ text-align:center; margin:0 auto; } .portfolio-items img{ width:100%; } .portfolio-items h4{ margin:1em 0; font-size:25px; color:#a63d56; } .portfolio-items p{ text-align:justify; } /** /** * Fade-zoom animation for first dialog */ /* start state */ .my-mfp-zoom-in #small-dialog { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* Dark overlay, start state */ .my-mfp-zoom-in.mfp-bg { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } /* animate in */ .my-mfp-zoom-in.mfp-ready.mfp-bg { opacity: 0.8; } /* animate out */ .my-mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; } /** /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; filter: alpha(opacity=80); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-content iframe{ width:100%; min-height:500px; } .mfp-preloader { color: #cccccc; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #cccccc; } .mfp-preloader a:hover { color: white; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; border: 0; background:#FFF; -webkit-appearance: none; display: block; padding: 0; z-index: 1046; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0px; top: -43px; text-decoration: none; text-align: center; padding: 0 0 18px 10px; color: white; font-style: normal; font-size: 28px; outline:none; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close-btn-in .mfp-close { color: #333333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: white; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .login h3,.select-city h3 { margin: 20px; color: #FF5722; font-size: 25px; letter-spacing: 1px; } .select-city p { font-size:1em; font-weight:500; margin-bottom:0.5em; } .confirmation input.email[type="text"], .confirmation input.email[type="text"] { width: 90%; padding: 10px; background: #FFF; margin: 10px 0; outline: none; color: #817F7F; border: solid 1px #817F7F; font-family: 'Open Sans', sans-serif; } .confirmation input[type="submit"]{ border: 0px; padding: .5em 2em; background: #003b64; margin: 1em 0 0 0; outline: none; font-size: 16px; color: #fff; text-transform: uppercase; -webkit-appearance: none; position: relative; font-family: 'Open Sans', sans-serif; } .confirmation input[type="submit"]:hover { color: #000; background-color: #fff200; } .login input[type="text"],.login input[type="password"]{ width:90%; padding:5px; margin:3px 0; border: 1px solid #a63d56; outline: none !important; } .signup input[type="text"]{ width:70%; margin:0 auto; padding:5px; margin:10px 0; outline: none !important; } .login input[type="submit"],.signup input[type="submit"]{ background:#cf0000; border:0px; padding:5px 10px; margin:10px 10px; outline:none; color: #fff; text-transform: uppercase; } .login input[type="submit"]:hover,.signup input[type="submit"]:hover{ background:#000; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /*-- Responsive --*/ @media all and (max-width:768px){ #small-dialog, #small-dialog1 { padding:45px; max-width: 550px; } } @media all and (max-width:667px){ #small-dialog, #small-dialog1 { padding: 45px; max-width: 500px; } .main.vlcone h3 { font-size: 27px; } .main.vlcone p { font-size: 13px; } .w3ls-form { margin: 2em 0 2em; } .agileits-info { margin-bottom: 30px; } } @media all and (max-width:600px){ #small-dialog, #small-dialog1 { padding: 40px; max-width: 450px; } } @media all and (max-width:480px){ .comments-area textarea{ height:100px; } #small-dialog, #small-dialog1 { padding: 30px; max-width: 400px; } .w3ls-form { margin: 1.5em 0 1.5em; } .main.vlcone h3 { font-size: 25px; } } @media all and (max-width:414px){ .w3ls-form input[type="email"] { width: 62%; padding: .9em; } } @media all and (max-width:375px){ .main.vlcone h3 { font-size: 22px; } .main.vlcone p { font-size: 12px; } .share-icons a { margin: 0 .3em } } @media all and (max-width:320px){ .comments-area span.label,.comments-area span.text-field{ float:none; width:100%; } .comments-area span{ padding-bottom:3px; } #small-dialog{ padding:15px; } .comments-area input[type="text"], .comments-area textarea{ width:92%; } .comments-area div{ padding:2px 0; } .mfp-content iframe{ width:100%; min-height:250px; } .main.vlcone h3 { font-size: 20px; } .w3ls-form { margin: 1em 0 1em; } .agileits-info { margin-bottom: 20px; } #small-dialog, #small-dialog1 { padding: 30px 20px; } .w3ls-form button { padding: .85em } }