/* #Base 960 Grid ================================================== */ .container-main div, .container-main iframe, .container-main table, .container-main span, .container-main .column, .container-main .columns { float: left; display: inline; margin-right: 20px;} .row { margin-bottom: 20px; } .container-main .one.column, .container-main .one.columns { width: 40px; } .container-main .two.columns { width: 100px; } .container-main .three.columns { width: 170px; } .container-main .four.columns { width: 220px; } .container-main .five.columns { width: 290px; } .container-main .six.columns { width: 340px; } .container-main .seven.columns { width: 400px; } .container-main .eight.columns { width: 460px; } .container-main .nine.columns { width: 520px; } .container-main .ten.columns { width: 580px; } .container-main .eleven.columns { width: 620px; } .container-main .twelve.columns { width: 700px; } .container-main .thirteen.columns { width: 760px; } .container-main .fourteen.columns { width: 820px; } .container-main .fifteen.columns { width: 880px; } .container-main .sixteen.columns { width: 960px; } /* Offsets Padding Top */ .container-main .paddingtop-one { padding-top: 5px; } .container-main .paddingtop-two { padding-top: 10px; } .container-main .paddingtop-three { padding-top: 15px; } .container-main .paddingtop-four { padding-top: 20px; } .container-main .paddingtop-five { padding-top: 25px; } .container-main .paddingtop-six { padding-top: 30px; } .container-main .paddingtop-seven { padding-top: 35px; } .container-main .paddingtop-eight { padding-top: 40px; } .container-main .paddingtop-nine { padding-top: 45px; } .container-main .paddingtop-ten { padding-top: 50px; } .container-main .paddingtop-eleven { padding-top: 55px; } .container-main .paddingtop-twelve { padding-top: 60px; } /* Offsets Padding Bottom */ .container-main .paddingbottom-one { padding-bottom: 2px; } .container-main .paddingbottom-two { padding-bottom: 4px; } .container-main .paddingbottom-three { padding-bottom: 6px; } .container-main .paddingbottom-four { padding-bottom: 8px; } .container-main .paddingbottom-five { padding-bottom: 10px; } .container-main .paddingbottom-six { padding-bottom: 12px; } .container-main .paddingbottom-seven { padding-bottom: 14px; } .container-main .paddingbottom-eight { padding-bottom: 16px; } .container-main .paddingbottom-nine { padding-bottom: 18px; } .container-main .paddingbottom-ten { padding-bottom: 20px; } .container-main .paddingbottom-eleven { padding-bottom: 100px; } .login-form-container { width: 250px; display: block; margin-left: auto; margin-right: auto;} .gallery-container { margin: 100px 220px 100px 220px; min-height:1000px; background-color: #fff;} .modal-content { height: : 70%; max-height: 600px;} h1 { font-size: 80px;} /* # iPad (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5){ .container-main { width: 768px; } .container-main .column, .container-main .columns { margin-right: 15px; } .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .alpha.omega { margin-left: 0; margin-right: 0; } .container-main .one.column, .container-main .one.columns { width: 40px; } .container-main .two.columns { width: 100px; } .container-main .three.columns { width: 170px; } .container-main .four.columns { width: 220px; } .container-main .five.columns { width: 250px; } .container-main .six.columns { width: 300px; } .container-main .seven.columns { width: 340px; } .container-main .eight.columns { width: 460px; } .container-main .nine.columns { width: 520px; } .container-main .ten.columns { width: 580px; } .container-main .eleven.columns { width: 700px; } .container-main .twelve.columns, .container-main .thirteen.columns, .container-main .fourteen.columns, .container-main .fifteen.columns, .container-main .sixteen.columns { width: 740px; } .login-form-container { width: 250px; display: block; margin-left: auto; margin-right: auto;} .gallery-container { margin: 100px 100px 100px 100px; } .modal-content { height: : 60%; max-height: 500px;} .workflow-item img { width: 150px;} .workflow-container { height: 380px;} .workflow-container p { font-size: 18px;} } /* # Tablet (Portrait) ================================================== */ /* Note: Design for a width of 500px */ @media only screen and (min-width: 730px) and (max-width: 1024px) { .container-main { width: 530px; } .container-main .columns, .container-main .column { margin: 0px; } .container-main .one.column, .container-main .one.columns, .container-main .two.columns, .container-main .three.columns, .container-main .four.columns, .container-main .five.columns, .container-main .six.columns, .container-main .seven.columns, .container-main .eight.columns, .container-main .nine.columns, .container-main .ten.columns, .container-main .eleven.columns, .container-main .twelve.columns, .container-main .thirteen.columns, .container-main .fourteen.columns, .container-main .fifteen.columns, .container-main .sixteen.columns, .container-main .one-third.column, .container-main .two-thirds.column { width: 530px; } /* Offsets Padding Top */ .container-main .paddingtop-one, .container-main .paddingtop-two, .container-main .paddingtop-three, .container-main .paddingtop-four, .container-main .paddingtop-five, .container-main .paddingtop-six, .container-main .paddingtop-seven, .container-main .paddingtop-eight, .container-main .paddingtop-nine, .container-main .paddingtop-ten, .container-main .paddingtop-eleven, .container-main .paddingtop-twelve { padding-top: 0px; } .gallery-container { margin: 100px 80px 100px 80px; } .modal-content { height: : 60%; max-height: 500px;} .workflow-item img { width: 130px;} .workflow-container { height: 380px;} .workflow-container p { font-size: 17px;} .lr-logo { padding-top: 35%;} } /* # Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 730px) { .container-main { width: 300px; } .container-main .columns, .container-main .column { margin: 0px; } .container-main .one.column, .container-main .one.columns, .container-main .two.columns, .container-main .three.columns, .container-main .four.columns, .container-main .five.columns, .container-main .six.columns, .container-main .seven.columns, .container-main .eight.columns, .container-main .nine.columns, .container-main .ten.columns, .container-main .eleven.columns, .container-main .twelve.columns, .container-main .thirteen.columns, .container-main .fourteen.columns, .container-main .fifteen.columns, .container-main .sixteen.columns, .container-main .one-third.column, .container-main .two-thirds.column { width: 300px; } /* Offsets Padding Top */ .container-main .paddingtop-one, .container-main .paddingtop-two, .container-main .paddingtop-three, .container-main .paddingtop-four, .container-main .paddingtop-five, .container-main .paddingtop-six, .container-main .paddingtop-seven, .container-main .paddingtop-eight, .container-main .paddingtop-nine, .container-main .paddingtop-ten, .container-main .paddingtop-eleven, .container-main .paddingtop-twelve { padding-top: 0px; } .login-form-container { margin-top: 50px;} .gallery-container { margin: 60px 20px 60px 20px; } .modal-content { width: 78%;} .workflow-item img { width: 60px;} .workflow-container { height: 220px;} .workflow-container p { font-size: 13px; font-weight: 100} h1 { font-size: 45px;} h2 { font-size: 38px; margin-top: 0px;} .lr-logo { width: 90px; padding-top: 45%;} }