/* Mobile Portrait View */ @media screen and (max-width:767px) { *{box-sizing:border-box;} .left, .right, .copyright-txt, .design-by,.headertop .left, .headertop .right{ float:none; margin:0 auto; text-align:center;} .center{width:auto;} .container { width:auto; padding:0 20px;} .footer{ padding-top:40px; padding-bottom:30px;} .wrap_one{width:auto; text-align:center;} .header { width:100%; padding:0;} .logo{ float:none; text-align:center; margin:0 auto; padding:8px 15px; position:relative; width: auto; display:table;} .headertop{ text-align:center;} .headertop .left{ font-size:13px;} .headertop .left span{ padding-left:30px; margin-left:15px;} /*coloumn css*/ .welcomewrap img{ margin: 0 0 15px; float:none; width:100%;} /*sidebar css*/ #sidebar{ width:100%; float:none;} .headertop .header-inner, .widget-left, .topright{ width:auto; padding:0; float:none;} .topbar-container{ float:none;} .widget-right{ width:280px; margin:0 auto; float:none; padding:15px 0; display:table; text-align:center;} .widget-right ul li{ border:none;} .welcomewrap{ width:auto;} .header-social-icons a{ width:20px;} .widget-column-2{ padding:0; border:0;} /* --------- Pages ------- */ .content-area{ width:auto; margin:0; padding:50px 20px;} .site-main{ width:auto; margin:0; padding:0 0 20px; float:none;} /*slider css*/ #slider{ top:0; margin:0;} .nivo-directionNav a{ top:39% !important;} .nivo-caption, .nivo-controlNav{ display:none !important;} /*footer css */ .copyright-wrapper{ text-align:center;} .cols-3{ width:100% !important; display:block; margin-right:0; margin-bottom:0%;} /*custom css*/ h2.section_title{ text-align:center;} /*front blog post*/ .BlogPosts{ float:none; width:auto; margin:0 0 10% 0;} .wpcf7 input[type="text"], .wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea{ width:100%;} .headertop .social-icons a{ display:inline-block;} .threebox{ float:none; width:auto; margin:0 0 30px 0;} .slider-wrapper{min-height:120px;} .head-info-area .left .phntp{border-left:none; border-right:none; padding: 16px 5px;} .head-info-area .left .emltp{border-right:none; padding: 16px 8px;} .social-icons a{border:none !important;} .left, .right, .copyright-txt, .design-by, .headertop .left, .headertop .right { float: left; margin: 0 auto; text-align: left; width: 100%; } .head-info-area .left .phntp { float:left; width:100%; } .head-info-area .left .emltp { float:left; width:100%; } .logo h2:before { position: static; left: 0; top: 0; width: 200px; height: 193px; content: ''; background: url(http://tnta.org.in/wp-content/uploads/2018/10/logo1-1.png) 0 0 no-repeat; float: left; width: 100%; margin-bottom: 20px; } .logo h2 { padding:0px; font-size:24px; } .logo { padding-left:0px; padding-right:0px; } .logo p { text-align: left; color: #00a400; font-size: 18px; padding-left: 0; padding-top: 15px; padding-bottom: 15px; } .container { width:100%; float:left; } .page_content { padding-top:0px; } .site-main { width: auto; margin: 0; padding: 0 0 0px; float: left !important; width: 100%; margin-bottom:20px; } .st-mid-wrapper { padding: 0px 10px; float: left; width: 100%; } .main-box-new { padding:10px; } #sidebar { width: 100%; float: left; } .page_content #sidebar h3.widget-title { border-radius:0px; } .metaslider .flexslider { margin-bottom:20px !important; } .metaslider .flex-control-nav { left:0% !important;} .logo h2:before { position: static; left: 0; top: 0; width: 200px; height: 193px; content: ''; background: url(http://tnta.org.in/wp-content/uploads/2018/10/logo1-1.png) 0 0 no-repeat; float: none; /* width: 100%; */ margin-bottom: 20px; display: inline-block; margin: 0 auto; } .head-info-area .left .phntp { padding-bottom:0px; } .logo { text-align:center; } .logo h2 { text-align:center; } .sitenav { background-color:#00a400 !important; } .main-navigation .container { padding-left:0px; padding-right:0px; } .sitenav ul li a { padding: 10px 10px !important; color:#fff; } .phone-no { margin-bottom:0px; } .footer { padding-bottom:0px; } .design-by a { color: #a8db51; } .design-by { padding-bottom:15px !important; } .copyright-wrapper { float:left; width:100%; } .logo-slogan { float:left; width:100%; text-align:center; color:#28406E; } .logo h2 span { color: #28406E; } .logo p { float:left; width:100%; text-align:center; color:#28406E; } .site-main { margin-top:20px; } .site-main .entry-content { padding-left:15px; padding-right:15px; } .blog-post { padding-left:15px; padding-right:15px; } #bwg_container1_0 #bwg_container2_0 .bwg-container-0 { width: 100% !important; } .post-date { padding:0 15px; } #bwg_container1_0 #bwg_container2_0 .bwg-container-0 .bwg-item { width:100% !important; } .ariyalur-box { float: left; width: 100%; float: left; padding: 0; margin-bottom: 10px; border: 0px; } .ariyalur-mid { border:0px; } .site-main { padding-bottom:10px; } } @media screen and (min-width: 300px) and (max-width: 480px){ .post-thumb{ width:100%; float:none;} } /* Mobile Landscape View */ @media screen and (min-width: 480px) and (max-width: 767px){ .container, .content-area{ width:100%; margin:0 auto;} .nivo-caption, .nivo-controlNav{ display:block !important;} .slide_info h2{ font-size:12px !important; line-height:22px !important; text-shadow:1px 0 0 #333; margin-bottom:8px;} .slide_info h2 span{ font-size:30px !important;} .slide_info p{ margin-bottom:15px; font-size:12px;} .headertop .left{ font-size:16px;} .post-thumb{ width:100%; float:none;} .nivo-caption{ width:88%; bottom:-10px;} .slide_info .slide_more{padding:4px 10px;} .nivo-controlNav{bottom: 4%; left:35%;} } /* Mobile Landscape View */ @media screen and (min-width: 640px) and (max-width: 767px){ .nivo-caption{ bottom:15%; width:75%;} .nivo-controlNav{bottom:0; left:12%;} .slide_info h2{font-size:22px !important;} } /* Tablet View */ @media screen and (max-width:1169px) and (min-width:768px) { *{box-sizing:border-box;} .center{width:auto;} .social-icons a{ box-sizing:content-box; margin-bottom:5px; } .container { width:auto; padding:0 20px;} .logo{ width:100%; float:none; position:relative; text-align:center; padding:25px 0;} /*slider css*/ .nivo-caption{ bottom:15%; width:70%;} .nivo-controlNav{bottom:6%; left:12%;} .slide_info h2{ font-size:24px !important; line-height:30px; } .content-area{ width:auto; margin:0; padding:50px 20px;} #sidebar{ width:30%;} .site-main{ width:65%;} .cols-3 h5{ font-size:22px;} .welcomewrap img{ width:50%;} .slider-wrapper{min-height:200px;} .footer{ padding-top:40px; padding-bottom:30px;} input.search-field, .post-password-form input[type="password"]{width:62%;} .sitenav ul li a{padding:15px 10px;} .threebox{width:31%;} .logo h2:before { position: absolute; left: -10px; top: -46px } .metaslider .flex-control-nav { left:0% !important; } .logo h2 { color: #28406d; font-size: 28px; padding-left: 214px; } .logo p { text-align: left; color: #00a400; font-size: 15px; padding-left: 218px; padding-top: 0; padding-bottom: 25px; } .metaslider .flexslider { margin-bottom:0px !important; } .st-mid-wrapper { width:100%; } .logo { width: 100%; float: left; } .logo h2:before { top:-79px; } .main-navigation { margin-top:25px; } .ariyalur-box { width:100%; } } /* Mobile Landscape View */ @media screen and (min-width: 768px) and (max-width: 980px){ .threebox h3{ font-size:16px; margin-bottom:20px;} .threebox .thumbbx{ width:87px; height:96px; margin-bottom:20px;} .threebox .thumbbx img{ min-height:96px; } .post-thumb{ height:auto;} .sitenav { padding-top:38px; } } @media screen and (max-width:1169px) and (min-width:981px) { html{overflow-x:hidden; } .logo{ width:100%; float:left;} .headertop .header-inner{ width:auto;} input.search-field, .post-password-form input[type="password"]{width:70%;} } @media screen and (max-width: 980px){ .toggleMenu{display: block;} .sitenav{float:none; margin:0; position:relative; overflow-x:hidden; background-color:#28406d; border-radius:0; top:0; border-bottom:none; } .sitenav ul{color:#000; width:100% !important; float:none !important; margin:0; padding:0;} .sitenav ul li{border-top:1px #130d0d solid; display:block; float:none; text-align:left; border-bottom:none !important} .sitenav ul li a{padding:10px 10px !important; display:block; color:#fff; border:none;} .sitenav ul li a:hover, .sitenav ul li.current_page_item a{color:#000000; border:none; border-radius:0} .sitenav ul li ul, .sitenav ul li ul ul{ display:block !important;} .sitenav ul li ul li a:before{content:"\00BB \00a0";} .sitenav ul li ul li a{padding-left:20px !important; } .sitenav ul li ul li a{ border:none;} /*.sitenav ul li ul li ul li a{padding-left:30px !important;}*/ .sitenav ul li ul li ul li ul li a{padding-left:40px !important;} .sitenav ul li:hover > ul{ background:none !important; box-shadow:none;} .sitenav ul li:hover > ul{ background: transparent !important; width:auto !important; display:block; position: relative !important; left:0; right:0; top:0; padding:0;} .sitenav ul li:hover ul li ul, .sitenav ul li:hover ul li:hover > ul, .sitenav ul li:hover ul li:hover > ul li ul{ background: transparent !important; display:block; position:relative !important; right:0; left:0; top:0;} .sitenav ul li:hover ul li:hover ul, .sitenav ul li:hover ul li:hover ul li:hover ul{ left:0 !important;} .headertop{ text-align:center;} .headertop .header-inner{ width:auto;} .headertop .header-inner, .widget-left, .topright{ width:auto; padding:0; float:none;} .topbar-container{ float:none;} .welcomewrap{ width:auto;} #wrapfirst{ padding:40px 0;} #home_slider{ top:auto;} .container.menuwrapper{ background:transparent !important;} #menubar{ border-top:3px solid transparent !important;} }