@media only screen and (min-width: 992px) and (max-width: 1250px) { .wrapper { max-width: 900px;} .col_1 { max-width: 900px;} .desc_sec .inner_col figure { width: 325px;} .inner_col .details { padding: 140px 30px 5px; width: 450px;} .desc_sec.left_align .inner_col { padding: 0 0 0 20px;} .desc_sec.right_align .inner_col { padding: 0 20px 0 0;} .inner_col .details h3 { font-size: 52px; line-height: 52px;} .inner_col .details.no_serial h3 { font-size: 72px; line-height: 72px;} .vid_sec .vid_inner span.side_head { bottom: 190px; font-size: 65px; left: -185px; line-height: 64px;} .flipcover_row .flipcover_col { margin: 0 10px 15px; width: 220px;} .flipcover_col figure { min-height: 290px;} } @media only screen and (min-width: 992px) and (max-width: 1024px) { .navigation { margin-left: -10px;} } @media only screen and (min-width: 768px) and (max-width: 991px) { .wrapper { max-width: 750px;} .col_1 { padding: 30px 0;} .banner_caption h3 { font-size: 340px; letter-spacing: -20px; line-height: 320px;} .banner_caption h3 span { font-size: 40px; line-height: 44px;} .banner_caption p { font-size: 20px; line-height: 22px; padding: 0 20%;} .intro_sec h3 { font-size: 35px; line-height: 39px;} .intro_sec p { font-size: 15px; line-height: 21px; padding-bottom: 20px;} .expert_row .expert_col { margin: 20px 10px 10px;} .navigation { margin-left: 0;} .desc_sec .inner_col figure { min-height: 500px; width: 290px; } .inner_col .details { padding: 90px 20px 5px; width: 385px;} .inner_col .details span.serial { font-size: 190px; line-height: 170px;} .inner_col .details h3 { font-size: 44px; line-height: 48px; } .inner_col .details.no_serial h3 { font-size: 62px; line-height: 62px;} .inner_col .details h3 span {margin: -25px 0 -15px;} .inner_col .details ul.social li:last-child {letter-spacing: 1px;} .desc_sec.left_align { padding: 25px 20px 30px 20px;} .desc_sec.right_align { padding: 25px 20px 30px 20px;} .desc_sec.left_align .inner_col { padding: 0 0 0 20px;} .desc_sec.right_align .inner_col { padding: 0 20px 0 0;} .desc_sec .vid_sec { padding: 85px 15px 0 40px;} .vid_sec .vid_inner span.side_head { bottom: 190px; font-size: 65px; left: -185px; line-height: 64px;} } /*@media only screen and (max-width: 768px) { .banner #bgvid12a{display:none;} }*/ @media only screen and (max-width: 767px) { .wrapper { padding:0 20px;} header { padding: 0 20px;} .banner { min-height: 480px;} .banner_caption img { width: 170px;} .banner_caption h3 { font-size: 250px; letter-spacing: -10px; line-height: 230px;} .banner_caption h3 span { font-size: 28px; line-height: 32px;} .banner_caption p { font-size: 18px; line-height: 22px; padding: 0 20%;margin-top: -30px;} .banner video {top: 0;transform: translateX(-50%) translateY(0); -moz-transform:translateX(-50%) translateY(0); -webkit-transform:translateX(-50%) translateY(0); -ms-transform:translateX(-50%) translateY(0);background: none;background-position: top center;} a.scroll_for_more { right: 20px; bottom: 20px;} .seperator_sec { height: 50px !important; margin: 30px auto 0 !important; padding: 0 !important; width: 100%; overflow:hidden; } .seperator_sec .wrapper { height: 50px !important; margin: 0 auto; overflow: hidden; padding: 0 !important; width: 320px !important; } .navigation { margin-left:0; position: static; width:100%; text-align:center; padding: 7px 0; } .navigation.fixed { left:0; top: 0;} .navigation ul.menu { display: inline-block; text-align: center; width: auto;} .navigation ul.menu::after { bottom: 0; height: 2px; left: 0; margin: auto 0; right: auto; top: 0; width: 100%;} .navigation ul.menu li{ margin:0 10px; display:inline-block; float:none; vertical-align:top;} ul.menu li.play { margin: 6px 10px 0 0 !important;} .navigation ul.menu li:last-child{ margin-right:0 !important;} .expert_row .expert_col { margin: 20px 10px 10px; width:148px;} .desc_sec .inner_col { text-align: center;} .desc_sec .inner_col figure { margin: -50px 0 0;} .inner_col .details { padding: 100px 0 18px; width: 100%;} .inner_col .details.no_serial { padding-top: 10px;} .inner_col .details h3 { font-size: 40px; line-height: 44px;} .inner_col .details.no_serial h3 { font-size: 50px; line-height: 50px;} .inner_col .details h3 span {margin: -20px 0 -10px;} .inner_col .details span.serial { font-size: 150px; left: 0; line-height: 130px; top: -14px; width: 100%;} .desc_sec.left_align { padding: 30px 30px 30px 30px;} .desc_sec.left_align .inner_col { padding: 0 30px;} .desc_sec.left_align .inner_col figure { float: none; display:inline-block;} .desc_sec.right_align { padding: 30px 30px 30px 30px;} .desc_sec.right_align .inner_col { padding: 0 30px;} .desc_sec.right_align .inner_col figure { float: none; display:inline-block;} .desc_sec .vid_sec { padding: 70px 0 0 20px;} .vid_sec .vid_inner { padding: 20px 20px 5px;} .vid_sec .vid_inner span.side_head { bottom: 155px; font-size: 50px; left: -140px; line-height: 54px;} footer { padding: 15px 0;} .flipcover_row{ padding:0 8px 30px;} .flipcover_row .flipcover_col { margin: 0 7px 15px;} } @media only screen and (max-width: 727px) { header { padding: 0 15px;} header a.logo { left: 0; margin: 0 auto; position: absolute; right: 0; text-align: center; bottom: 0; padding:6px 0; border-top:1px solid #fff;display: none;} header a.logo img { float: none;} a.scroll_for_more { bottom: 15px; right: 15px;} /*.seperator_sec { padding: 0 15px;} .wrapper { padding: 0 15px;}*/ .navigation ul.menu li { margin: 0 5px;} ul.menu li.play { margin: 6px 5px 0 0 !important;} .col_1 { padding: 30px 0;} .expert_row .expert_col { margin: 20px 0 10px; width:147px;} .desc_sec .inner_col figure { border: 10px solid #000; margin: -35px 0 0; min-height: 620px; width: 360px; } .inner_col .details { padding: 100px 0 15px;} .desc_sec.left_align { padding: 15px;} .desc_sec.right_align { padding: 15px;} .desc_sec.left_align .inner_col { padding: 0 25px;} .desc_sec.right_align .inner_col { padding: 0 25px;} .desc_sec.left_align .inner_col figure span.photo_credit { top: 225px; left: -220px;text-align: right;} .desc_sec.right_align .inner_col figure span.photo_credit { top: 225px; right: -220px; text-align: right; } .desc_sec .vid_sec { padding: 50px 0 0 20px;} .vid_sec .vid_inner { padding: 10px 10px 5px;} .vid_sec .vid_inner span.title { font-size: 14px; line-height: 18px; padding: 6px 0;} .vid_sec .vid_inner span.side_head { bottom: 122px; font-size: 40px; left: -112px; line-height: 44px;} } @media only screen and (max-width: 480px) { header a.logo { padding: 7px 0;} header a.logo img{ width: 200px;} .banner_caption img { width: 150px;} .banner_caption h3 { font-size: 170px; letter-spacing: -5px; line-height: 150px;} .banner_caption h3 span { font-size: 22px; line-height: 26px; letter-spacing: 2px;} .banner_caption p { font-size: 16px; line-height: 20px; margin-top: -20px; padding: 0 5%;} .navigation ul.menu li { margin: 0;} ul.menu li.play { margin: 3px 0 0 !important;} ul.menu li > a { font-size: 14px; height: 26px; line-height: 26px; margin: 0; width: 26px;} ul.menu li > a:hover:before,ul.menu li > a.current:before{width:26px; height:26px; } .col_1 { padding: 20px 0;} .intro_sec h3 { font-size: 25px; letter-spacing: 2px; line-height: 29px;} .intro_sec p { font-size: 15px; line-height: 21px; padding-bottom: 15px;} .intro_sec p br{ display:none;} .expert_row .expert_col { margin: 20px 20px 10px; width:200px;} .expert_row .expert_col:first-child { margin-left: 20px;} .expert_row .expert_col:last-child { margin-right: 20px;} .desc_sec.left_align .inner_col { padding: 0 20px;} .desc_sec.right_align .inner_col { padding: 0 20px;} .desc_sec .inner_col figure { margin: -30px 0 0; min-height: 350px; width: 220px;} .inner_col .details { padding: 75px 0 15px;} .inner_col .details span.serial {font-size: 100px;letter-spacing: -10px;line-height: 80px;top: -8px;} .inner_col .details h3 { font-size: 30px; line-height: 34px;} .inner_col .details.no_serial h3 { font-size: 35px; line-height: 35px;} .inner_col .details h3 span { margin: -10px 0 -5px;} .inner_col .details ul.social li { font-size: 18px; line-height: 24px; margin:0 3px;} .inner_col .details ul.social li:last-child { border-left: none; display: block; margin: 0; padding: 10px 0 0;} .inner_col .details p:first-of-type::after { left: -10px;} .inner_col .details span.quoter { font-size: 18px; line-height: 24px; text-align: center; } .fadeInUp { opacity: 1 !important; transform: translateY(0px) !important; } .fadeInUp.go { animation-name:none !important } .desc_sec .vid_sec { padding: 40px 0 0 10px;} .vid_sec .vid_inner span.side_head { font-size: 30px; left: -80px; line-height: 34px;bottom: 95px;} .vid_sec .vid_inner span.title { display:block; width:100%; text-align:center; padding:5px 0;} }